Daha Hızlı Siteler: PageSpeed Insights’ın Ötesinde
Daha Hızlı Siteler: PageSpeed Insights’ın Ötesinde
Google’ın PageSpeed Insights , bir web sayfasının olması gerekenden daha yavaş olup olamayacağını test eden kullanımı kolay bir araçtır. Sayfa performansını ölçmek için bir puan verir . Bu puan somut olduğu için PageSpeed Insights puanı, genellikle site performansının bir ölçütü olarak kullanılır. PageRank yıllarına benzer şekilde, millet bu sayıyı var olması nedeniyle optimize etmek istiyor.
Ortak CMSes üzerindeki küçük siteler (WordPress’i düşünün) için bu gerçekleştirilebilir. Bu sensin, PageSpeed Insights başlamak için harika bir yer. Çoğu site için mükemmel bir puan gerçekçi değildir. Peki nereden başlayacağız
Bu yazı bunun hakkında yazıyor. Üç madde vermek istiyorum:
- Gecikme, yükleme sürelerini bant genişliğinden daha fazla incitebilir
- PageSpeed Insights puanları değer olarak alınmamalıdır
- İyileştirme, ölçüm, hedef belirleme ve önceliklendirme ile başlar
Zihin SEO uygulayıcılarıyla yazıyorum. Daha teknik bitlerden bazılarını atlayacağım. Doğru soruları sormaya başlamak için yeterli perspektifle uzaklaşmalısınız. Sonuç olarak daha iyi tavsiyelerde bulunabilirsiniz.
|Feragat: HTTP2, bu yazıda tartışılan bazı sorunları geliştirir. Özellikle, aynı sunucudaki birden çok istek daha az sorunludur. Bu her derde deva değildir.|
Gecikme, yükleme sürelerini bant genişliğinden daha fazla incitebilir
PageSpeed Insights’ın kurallarına ilk baktığınızda bunun hepsinin kullanıcıya daha az bayt sunmakla ilgili olduğunu düşünebilirsiniz. Minify, optimize edin, sıkıştırın. Boyut hikayenin yalnızca yarısı. İsteğinizin basitçe bir sunucuya ulaşması da zaman alır. Ve sonra sunucunun size cevap vermesi zaman alır!
Bir istekte bulunursanız ne olur?
Bir kullanıcı bir tarayıcı adres çubuğuna bir URL yazarsa ve giriş isabetini girerse, bir istek yapılır. Bu talep yapıldığında birçok şey olur. Bunun son kısmı, istenen içeriğin aktarılmasıdır. Sadece bant genişliği ve içeriğin boyutundan etkilenen bu son bit.
Bir talebin yerine getirilmesi şu adımları gerektirir (daha fazla veya daha az):
- Sunucuyu bulun
- Sunucuya bağlan
- Yanıt bekle
- Cevap alın
Bu adımların her biri yalnızca son değil, zaman alır. İlk üç dosya boyutundan bağımsızdır; bunlar etkili bir şekilde sabit maliyetlerdir. Bu maliyetler, yükün küçük, küçültülmüş bir CSS dosyası veya büyük bir sıkıştırılmamış görüntü olup olmadığına bakılmaksızın, her istekte meydana gelmektedir.
Cevap almak için neden zaman gerekiyor?
Kaçamayacağımız faktör, ağ sinyallerinin ışık hızından daha hızlı ilerleyememesidir. Bu teorik bir maksimum; gerçekte, verilerin aktarılmasının daha uzun sürmesi. Örneğin, Paris ve New York arasındaki gidiş için yaklaşık 40 ms hafif gerekiyor . Verilerin Atlantik’ten geçmesi iki kat alırsa, bir sunucudan yanıt almak için gereken minimum süre 80ms’dir.
Bu nedenle CDN’ler yaygın olarak kullanılır. CDN’ler, sunucuları fiziksel olarak kullanıcılara daha yakın hale getirir, bu da sunucunun ulaşması için gereken süreyi azaltmanın tek yoludur.
Bu ne kadar önemli?
Bu grafiğe göz atın ( Chrome’un DevTools’undan ):
Kırmızı kutudaki değerlerin tümü “gecikme” olduğunu düşünüyorum. Bunların toplamı 220 ms. Gerçek içeriğin aktarımı 0.7ms sürdü. Hiçbir sıkıştırma veya dosya boyutu azaltılması bu işe yarayabilir; isteğin aldığı süreyi azaltmanın tek yolu gecikmeyi azaltmaktır.
Bir sayfa yüklemek için çok fazla istekte bulunmamıza gerek yok mu?
Bir sayfayı oluşturmak için gerekli tüm içeriği yüklemek birden fazla istek alacaktır. Bu URL bir web sayfasına karşılık gelirse, tarayıcı genellikle sayfayı oluşturmak için daha fazla kaynak yüklemesi gerektiğini keşfedecektir. Bunlar CSS, JavaScript veya yazı tipi dosyaları olabilir. Bu dosyalardan her birini yüklemek için yinelemeli olarak yukarıdaki adımları uygulamanız gerekir.
Neyse ki, bir sunucu bulunursa (yukarıdaki resimde “DNS Arama”) tarayıcı tekrar aramaya ihtiyaç duymaz. Bağlanmak zorunda kalacak ve bir yanıt beklemek zorunda kalacağız.
PageSpeed Insights testlerinin şüpheci bir değerlendirmesi
PageSpeed Insights değerlendirmelerinin tümü, site hızını etkileyebilecek şeyleri kapsar. Büyük siteler için bunların bazılarının uygulanması o kadar kolay değildir. Sitenizin nasıl tasarlandığına bağlı olarak, bazıları diğerlerinden daha etkileyici olabilir. Bunları yapmamak için bir bahaneniz olduğunu söylemek değil, hepsi en iyi uygulamadır ve hepsi yardımcı olur. Ancak tüm site hızı resimlerini temsil etmiyorlar.
Bunu aklımızda tutarak, PageSpeed Insights kurallarının her birinin “şüphe uyandıran bir okuması” vardır.
Bant genişliği kullanımını azaltmaya odaklanan testler
|Kural||Şüpheci okuma|
|Resimleri en iyileştir||Büyük imgeler yoksa, bu büyük bir iş olmayabilir. Bu yalnızca, resimlerin daha fazla sıkıştırılıp 압축lenip üplendirilip yoğunlaştırılmayacağının ölçülmesidir – çok fazla yükleme yapmanızdan ziyade.|
|Sıkıştırmayı etkinleştir||Sıkıştırma kolaydır. Kullanmalısın. Ayrıca, (örneğin) büyük JavaScript dosyaları yüklenmedikçe fark yaratmaz.|
|HTML’yi minify||Tavan yükünü yalnızca onlarca KB azaltacaktır. Gecikmenin tepki boyutundan daha büyük bir etkisi olacak.|
|CSS’yi minify||Tavan yükünü yalnızca onlarca KB azaltacaktır. Gecikmenin tepki boyutundan daha büyük bir etkisi olacak.|
|JS’yi minify||Muhtemelen yapılması gereken isteklerin sayısını azaltmak için JS’yi tek bir dosyaya koymak kadar önemli değildir.|
Gecikmeyi azaltmaya odaklanan testler
|Kural||Şüpheci okuma|
|Tarayıcı önbelleğini kullan||Kesinlikle kendi dosyalarımızı önbelleğe alalım. Önbellekten yararlanabilecek birçok dosya büyük ihtimalle üçüncü taraf sunucularda barındırılıyor. Önbellek sürelerini değiştirmek için kendiniz barındırmanız gerekir.|
|Sunucu yanıt süresini azalt||PSI üzerindeki eşik çok yüksek. Ayrıca, sunucunun fiziksel gecikmesini hariç tutmaya çalışır-bunun yerine yalnızca bir istek aldıktan sonra sunucunun ne kadar süreyle yanıt alması gerektiğine bakar.|
|Açılış sayfasının yönlendirmelerini önleme||Evet.|
|İşlev engelleme engelleme JavaScript ve CSS’yi, ekranın üst kısmındaki içerikte kaldırın||Geçerli bir endişe, ancak sinir bozucu olarak zor olabilir. Çoğu performans hedefini karşılamak için, üst kısımdaki içeriği oluşturmak için ilk sayfa yükünün üstünde sıfır istek yapmak gerekli değildir.|
|Görünür içeriğe öncelik verme||Aslında önemli bir şey.|
Bunları site performansındaki son kelime olarak düşünmeyin! Bu testlerden bağımsız olarak, düşünülmesi gereken bazı şeyler var. Bazıları PageSpeed Insights tarafından tamamen kapsanmamaktadır ve bazıları sadece yarı yollarla kaplıdır:
- Kontrol ettiğiniz içeriği önbelleğe alma .
- Üçüncü taraf etki alanlarından yüklediğiniz içeriğin miktarını azaltma.
- PageSpeed Insights’ın testini geçmek için gereken sunucu yanıt süresini asgari düzeyde azaltmak.
- Sunucuyu son kullanıcıya yakınlaştırmak. Temel olarak bir CDN kullanın.
- Engelleme taleplerini azaltmak. HTTP2’yi kullandığınızdan emin olun burada yardımcı olacaktır.
Iyileştirmeye başlama
Ölçüm
Bu yazının ekran görüntüleri Chrome DevTools ile oluşturuldu. Tarayıcıya yerleştirilmiştir ve bir sayfa yüklendiğinde ne olduğunu tam olarak incelemenizi sağlar .
Pagespeed Trendleri aracına güvenmek yerine, devam edin ve sayfanızı Chrome’da yükleyin. Nasıl performans gösterdiğini kontrol edin. Gerçekten isteklerin daha fazla zaman alacağına bir bakın. Çoğu zaman cevap açık olacaktır: Örneğin, reklam yüklemek için çok fazla zaman harcanacaktır.
Hedef ayarı
Mükemmel bir PageSpeed Insights puanı hedefiniz değilse, hedefinizin ne olacağını bilmelisiniz. Bu önemlidir, çünkü mevcut performansı o hedefle karşılaştırmanıza olanak tanır. Bant genişliği gereksinimlerinin gerçekten hedefinize ulaşıp ulaşmayacağını veya gecikmeyi azaltmak için bir şeyler yapmanızın gerekip gerekmediğini (bir CDN kullanın, daha az istekte işlem yapın, önce yüksek öncelikli içerik yükleyin), görebilirsiniz.
öncelik
Sayfa hızı “düzeltmelerini” önceliklendirmek önemlidir – önceliklendirme özelliğinin tek türü değildir. Aslında nelerin yüklenmesi gerektiği konusu da var. PageSpeed Insights, ekranın üst kısmındaki içeriğe öncelik verip vermediğinizi anlamaya çalışıyor. Bu harika bir hedef. Bu aynı zamanda mükemmel bir değerlendirme değildir; görünürde katlamanın üzerinde olan içeriğe bakılmaksızın, içeriği “kritik” ve “kritik olmayan” yollara bölmek daha kolay olabilir.
Örneğin: Siteniz reklam gelirine dayanıyorsa, sayfadaki tüm içeriği yükleyebilir ve yalnızca reklam yüklemeye başlayabilirsiniz. Daha az hizmet vermeyi öğrenmek, sizin ve ekibinizin üstesinden gelmek için en iyi mücadeledir. Sonuçta, PageSpeed Insights, tek boyut uyan bir çözümdür.
Sonuç
Hikaye şu ana kadar PageSpeed Insights’ın yararlı olabileceği, ancak site hızını değerlendirmek ve iyileştirmek için daha akıllı yollar var. Mükemmel bir puan, hızlı bir siteyi garanti etmez.
Bunları Okudunuz mu?
15 Ekim 2018
14 Ekim 2018