WP Engine'deki arkadaşlarımız yakın zamanda Beaver Builder ile oluşturulmuş yeni ve güzel bir ana sayfayı kullanıma sundu. Beaver Builders Facebook Grubunda sayfanın bağlantısını paylaştık ve birkaç kişi sayfanın genel yükleme süresinin oldukça yüksek olduğunu belirtti. Yakın dostumuz ve olağanüstü WordPress geliştiricisi Jon Brown harika bir açıklamayla imdadımıza yetişti.

Facebook Konuşması

Buradaki konuşmayı hızlıca özetleyeyim:

Endişeli Beaver Builder: XYZ test aracıyla sayfa yükleme testi yaptım ve yüklenmesi neredeyse 10 saniye sürdü!

Jon: Hız ve performans bir tasarım tercihidir ve satış dönüşümleri açısından kritik öneme sahiptir, ancak bu, diğer DAHA değerli araçlarla takas olmadığı anlamına gelmez.

İnsanların harf notlarına ve toplam yükleme süresine çoğu zaman şelaleyi anlamadan baktığını görüyorum. Çok basit sitelere bakmadığınız sürece bu sizi yanlış yola sürükleyecektir…

Bu test aracı dereceleri gerçekten kaba ve pek çok pratik gerçeği göz ardı ediyor. Reklamlar, izleme komut dosyaları ve mutlaka bu şekilde çalışan diğer şeyler için olduğunda yönlendirmelerden kaçınmanız gerektiğini söyleyeceklerdir. Genellikle HTTP/2'yi göz ardı ediyorlar ve isteklerin azaltılmasını ve hiçbir önemi olmayan, hatta zarar verebilecek varlıkların bir araya getirilmesini öneriyorlar… Hız endeksine ve ekranın üst kısmındaki görüntü oluşturmaya odaklanmıyorlar…

Gerçek sayfa yüklemesi <1,5 saniyedir

Daha Derine Kazalım

Jon'a performans konusunda birkaç soru daha sorup sormayacağını sordum ve o da nezaketle kabul etti. Bunlar benim (Robby'nin) soruları ve Jon'un cevapları.

Jon'un 9seeds adında özel bir geliştirme mağazası işlettiğini, dolayısıyla WordPress web sitenizin performansında ince ayar yapmanıza yardımcı olması için kiralanabileceğini söylemiş miydim?

1. “Şelaleden” bahsettiniz. Şelalenin ne olduğunu biraz daha açıklayabilir misiniz?

Web sitesi performansını değerlendirmek için birçok araç var. Bunların birçoğu anlaşılması kolay bir harf notu içeren bir rapor verir. Bu harf notları oldukça kör araçlardır ve her ne kadar A'yı almanız güzel olsa da, doğrudan A'yı göremediğinizde, bırakın yararlı olmayı, özellikle anlayışlı bile değildir. Yararlı bulduğum tek harf notu, kolay bir düzeltme olan görüntü sıkıştırma içindir; resimlerinizi bir optimize ediciden geçirin.

Meslekten olmayan ve acemi geliştiricilerin harfler karşısında kör olduklarını çok sık görüyorum. Ön uç web performansını etkileyen birçok faktör vardır ve gerçekten tüm HTTP isteklerini, ne zaman başladıklarını ve ne zaman tamamladıklarını gösteren bir grafik olan "şelaleye" bakmak gerekir. Bunları oluşturmak için WebPageTest.org'u kullanıyorum.

"Şelale", yüklenmesi çok uzun süren ve/veya diğer şeylerin yüklenmesini engelleyen belirli bir varlığın ne olduğunu "gördüğünüz" yerdir.

Son olarak, düz As'ın, site sahibi için A almaktan daha değerli olan tasarım seçimlerini (kaydırıcıları kaldırmak gibi) ve üçüncü taraf varlıkları (Google Analytics, HotJar vb. gibi) ortadan kaldırmayı gerektirebileceğini unutmayın. Acı verici fedakarlıklar olmadan doğru yolu bulun.

2. Tercih ettiğiniz test aracı olarak WebPageTest'i önerdiniz. Neden tercih ediyorsunuz ve Pingdom, GTmetrix (ve/veya Google Page Speed) gibi araçlardan farkı nedir?

Şahsen ben bunları yapmak için WebPageTest.org'dan daha iyi ve daha esnek bir şey bulamadım. Ancak geçmişte GTMetrix, Pingdom, Google Page Speed ​​ve diğerlerini de kullandım ve gayet iyiler. Lighthouse gibi yenilerden bazıları, ilerici web uygulamaları için gerçekten harika (WordPress sitelerinin %99'u değil). Kesinlikle insanlara araçları değiştirmelerini, bildiğiniz ve anladığınız aracı kullanmalarını söylemiyorum. Herhangi bir araç bilmiyorsanız, WPT öğrenmeniz için harika ve ücretsiz bir araçtır. Harf notlarının ötesine geçin ve bu harf notlarına neyin sebep olduğunu anlamaya başlayın.

3. "Talebin azaltılması ve varlıkların birleştirilmesi" açısından bu artık en iyi uygulama değil mi? Neden?

Çoğu sitenin HTTPS yerine HTTP olduğu ve web sunucularının hepsinin HTTP/1.1 protokolünü kullandığı zamanlarda, web sunucuları ancak bu kadar çok varlığı paralel olarak gönderebiliyordu. Her varlık (resim, komut dosyası, stil sayfası) ayrı ayrı gönderildi ve her birinin kendi yükü vardı, bu da işleri yavaşlattı. Mümkün olan her şeyi bir araya getirmek, HTTP isteklerinin sayısını azalttı ve büyük performans avantajları sağladı.

Son birkaç yılda her yerde HTTPS'ye doğru büyük bir eğilim oldu ve web sunucuları yeni HTTP/2 protokolünü desteklemeye başladı. HTTP/2'nin ön getirme ve ön yükleme gibi büyük faydaları vardır ancak aynı zamanda tüm bu küçük varlıkları paralel olarak gönderebilir, dolayısıyla bunları birleştirmeye gerek yoktur. Aslında, her küçük varlığın bağımsız olarak önbelleğe alınabilmesi için bunu yapmamak daha iyi olabilir.

Bunun yalnızca web sunucunuz HTTP/2'yi destekliyorsa devreye gireceğini ve bunun da yalnızca siteniz HTTPS ise mümkün olduğunu unutmamak önemlidir.

Bununla birlikte, bugünlerde üzerinde çalıştığımız tüm siteler HTTPS'dir ve HTTP/2 özellikli sunucularda çalışmaktadır, dolayısıyla artık varlıkları birleştirmeyi düşünmüyorum bile ve bunu kesinlikle kaçırmıyorum!

4. Karşı çıkmanızı tavsiye edebileceğiniz başka "efsaneler" veya güncelliğini kaybetmiş performans önerileri var mı?

En büyüğü, tasarım değişiklikleri veya kontrol etmediğiniz 3. taraf varlıkları ortadan kaldırmak gibi acı verici tavizler vermeden, her sitenin doğru şekilde ilerleyebilmesidir. Ancak bu gerçekten sorun değil çünkü Hız Endeksi adı verilen bir şeye bakmaya başlamalısınız! WPT'nin bu konuda iyi bir yazısı var, ancak temel olarak "ekranın üst kısmı"nın kullanıcı tarafından tamamen yüklenmiş olarak algılanması dikkate alınıyor. Bu, sayfanın gerçekten tamamlanmasından ziyade kullanıcının hız deneyimiyle ilgilidir. Bu, WP Engine'in yeni ön sayfa tasarımıyla ilgili şeylerden biriydi; hız endeksi muhteşemdi. Yüklenmesi ve tamamlanması uzun zaman alan, ertelenen komut dosyalarıydı.

5. Birisine tavsiye edebileceğiniz başka performans araçlarınız, ipuçlarınız veya püf noktalarınız var mı?

Yıllar boyunca güvendiğim araçlar:

• WebPageTest.org – Favorim!
• ImageOptim – JPG'leri/PNG'leri sıkıştırmak için masaüstü uygulaması
• ImageAlpha - PNG'leri sıkıştırmak için masaüstü uygulaması (çoğunlukla renk sayısını azaltarak)
• CloudFlare – devasa bir küresel CDN ve temel WAF olarak ücretsiz. Ayrıca anında görüntü optimizasyonu, rota optimizasyonu ve daha fazlası gibi etkileyici ücretli profesyonel özellikler.

Eklentiler:

• WP Rocket – WP Engine'de bile WP Rocket kullanıyoruz, işe yarıyor.
• Imagify.io – WordPress/Bulut tabanlı görüntü optimizasyonu.
• BeaverBuilder – Bunu söylemek için bana para ödenmedi! Pek çok sitede performans denetimi yapmak üzere çağrılıyoruz ve diğer popüler sayfa oluşturucularda sıklıkla önemli ön uç ve arka uç sorunları görüyoruz (adını vermeyeceğim, ancak Beaver Builder'da bu geçerli değil), bu yüzden onu kendi sitemizde kullanıyoruz. Peki!

Performansa daha modern bir yaklaşımla bize yol göstermeye zaman ayırdığınız için tekrar teşekkürler Jon. Jon'un ajansı 9seeds'e son bir şans vermek istedim. Herhangi bir türde özel WordPress geliştirme konusunda yardım arıyorsanız onlara bir telefon edin!

Jon Brown hakkında

Avare. WordPress Geliştiricisi. Fotoğrafçı. Yaşam Karaciğeri.