Google'ın PageSpeed ​​Insights Değerlendirmesini Geliştirmek

Bir işletme sahibiyseniz, web siteniz için daha iyi arama sıralamaları almakla ilgileniyorsunuz. Bir geliştiriciyseniz, müşterinin ihtiyaçlarını karşılamanız ve iyi sıralamaya sahip bir site oluşturmanız gerekir. Google, Arama Motoru Sıralama Sayfasında (SERP) web sitelerinin sırasını belirlerken yüzlerce özelliği dikkate alır.

Sayfa hızı, 2018'in ortalarında resmi olarak önemli bir sıralama özelliği olarak gösterildi. Bu yazımızda işletme sahiplerinin dikkat etmesi gereken performans puanlarını açıklayacağız: PageSpeed ​​Insights. Yazılım geliştiricilerin tek sayfalık uygulamalarla ilgili olanlar gibi karmaşık durumlarda iyileştirmeler yapmasına yardımcı olacak bazı teknik ayrıntılara daha derinden gireceğiz.

Acing Google'ın PageSpeed ​​Insights Testi Neden Önemlidir?

Google, 2010 yılında PageSpeed ​​Araçlarını tanıttığında, çoğu web sitesi sahibi onunla tanıştı. Henüz yapmamış olanlar sitelerini kontrol etmek için PageSpeed ​​Insights'ı açmalıdır.

Hizmet, bir web sitesinin hem masaüstü hem de mobil tarayıcılarda nasıl performans gösterdiğine ilişkin ayrıntılar sağlar. Analizin üst kısmındaki Mobil ve Masaüstü sekmelerini kullanarak bunlar arasında geçiş yapabileceğiniz gerçeğini gözden kaçırmak kolaydır:

Mobil cihazlar kompakt olduklarından ve pil ömrünü korumayı amaçladıklarından, web tarayıcıları masaüstü işletim sistemlerini çalıştıran cihazlardan daha düşük performans gösterme eğilimindedir, bu nedenle masaüstü puanının daha yüksek olmasını bekleyin.

Büyük teknoloji şirketleri hiçbir alanda kırmızı puan almayacak, ancak daha dar bütçelerle çalışan daha küçük siteler olabilir. İşletme sahipleri ayrıca rakiplerinin sitelerinde PageSpeed ​​Insights çalıştırabilir ve performansı iyileştirmeye yatırım yapmaları gerekip gerekmediğini görmek için sonuçları kendilerininkiyle karşılaştırabilir.

PageSpeed ​​Değerlendirmesini Geçmek için Hangi Puan Yeterlidir?

PageSpeed, bir başarılı/başarısız değerlendirmesi sağlamak için Önemli Web Verilerinden alınan ölçümleri kullanır.

Bu aracın üç puanı vardır:

1. PageSpeed, Performans Sorunlarını Tanılama bölümünde Performans puanını renkli bir daire içinde belirgin bir şekilde görüntüler. Ortalama bir mobil veya masaüstü cihazla eşleşen özelliklere sahip PageSpeed'in yerleşik sanal makineleri kullanılarak hesaplanır. Lütfen bu değerin sayfa yükleme ve PageSpeed'in sanal makinesi için olduğunu ve Google Arama motoru tarafından dikkate alınmadığını unutmayın.

   Bu rakam, geliştiricilerin bir web sitesinde değişiklikleri uyguladığında yararlıdır, çünkü değişikliklerin performans üzerindeki etkisini kontrol etmelerine olanak tanır. Ancak, Google'ın arama motoru yalnızca ayrıntılı puanları dikkate alır.

2. Belirli bir sayfanın ayrıntılı puanları ve PageSpeed'in analiz edilen sayfaya benzer olduğunu düşündüğü puanlar, Chrome tarayıcılarının gerçek bilgisayarlarda toplayıp Google'a gönderdiği istatistiklerden hesaplanır. Bu, Firefox, Safari ve diğer Chromium dışı tarayıcılardaki performansın dikkate alınmadığı anlamına gelir.

3. Web sitesinin tüm sayfalarının özeti, tek sayfalık puanla aynı şekilde elde edilir. Erişmek için Bu URL sekmesi yerine Kaynak sekmesini seçin. Origin, sitenin ana sayfasını (yalnızca alan) görüntüleyeceğinden, sekmeler çubuğunun altında listelenen URL farklı olacaktır.

Google, PageSpeed ​​tarafından dikkate alınan metriklerin listesini sürekli olarak günceller, bu nedenle önemli olanın en iyi kaynağı, web sitenizi buraya eklediğinizi varsayarsak, Google Arama Konsolundaki Deneyim / Temel Web Verileri bölümüdür.

Önemli Web Verileri Değerlendirmesini geçmek için tüm puanların yeşil olması gerekir:

Değerlerin yeşil olması için sayfanın testten en az %75 puan alması ve birçok kullanıcının eşit veya daha iyi değerler deneyimlemesi gerekir. Eşik, her puan için farklıdır ve FID için önemli ölçüde daha yüksektir.

Değerleri daha iyi anlamak için puan başlığına tıklayın:

Bu, verilen kategori için eşikleri daha ayrıntılı olarak açıklayan bir blog gönderisine bağlantı verir.

Veriler 28 gün boyunca toplanır ve gerçek kullanıcıların deneyimleyebileceklerinden iki önemli fark daha vardır:

1. Gerçek cihazların performansı ve internet hızları değişiklik gösterir, bu nedenle bu test, PageSpeed'in sanal makine sonuçlarından farklı sonuçlar verir.
2. Ayrıntılı derecelendirmeler, sayfanın açık olduğu her beş saniyelik aralıktan en kötü değerler alınarak tüm sayfa ömrü boyunca hesaplanır.

Bir sitenin kullanıcılarının çoğu yavaş internet erişimi olan bölgelerde yaşıyorsa ve eski veya düşük performans gösteren cihazlar kullanıyorsa, aradaki fark şaşırtıcı olabilir. Bu, PageSpeed ​​Insights'ın iyileştirme önerilerinden biri değildir. İlk bakışta, bu sorunla nasıl başa çıkılacağı belli değil, ancak daha sonra açıklamaya çalışacağız.

PageSpeed ​​Insights Önerilerini Kullanarak Puanları İyileştirme

Derecelendirmenin ana kısmı, çoğu kullanıcının sayfayı nasıl açtığından gelir. Tüm kullanıcıların bir web sitesini uzun bir süre boyunca ziyaret etmemesine ve çoğu bir web sitesini ara sıra ziyaret etmesine rağmen, tüm kullanıcılar derecelendirmelerde dikkate alınır, bu nedenle herkesi etkileyen sayfa yükleme hızlarını iyileştirmek iyi bir başlangıç ​​noktasıdır.

Değerlendirme sonuçlarının altındaki Fırsatlar bölümünde öneriler bulabiliriz.

Her bir öğeyi genişletebilir ve iyileştirmeler için ayrıntılı öneriler alabiliriz. Çok fazla bilgi var, ancak işte en temel ve önemli ipuçları:

• Sunucu yanıt hızını artırın. Örneğin, paylaşılan barındırma kullanıyorsanız, planınızı yükseltin veya sanal bir özel sunucuya (VPS) veya hatta özel bir sunucuya geçiş yapın. Ayrıca, tüm ana bilgisayarlar eşit değildir. İyi donanım ve çalışma süresi garantileriyle güvenilir barındırma seçmeyi deneyin.
• Sitenizi açmak için gereken trafik hacmini azaltın. Bunu başarmak için görüntüleri optimize edilmiş olanlarla değiştirebilirsiniz: formatlarını değiştirin, çözünürlüğü ve sıkıştırmayı ayarlayın, gerekirse hareketli görüntüleri statik olanlarla değiştirin, vb. Popüler içerik yönetim sistemlerinde bu işlemi kolaylaştıran eklentiler bulunur.
• Daha fazla veriyi önbelleğe alın. Bunu yapmanın en basit yolu, statik içerik (görüntüler, stiller, komut dosyaları, değişmeyen sayfalar) için Cloudflare gibi bir içerik dağıtım ağı (CDN) kullanmaktır. Performansı optimize etmek için önbelleğe alma kurallarını yapılandırabilirsiniz.

Şimdi deneyimli bir programcının yardımcı olabileceği daha karmaşık faktörlere bir göz atalım.

Sayfa Ömrü Boyunca Puanlarda Hata Ayıklama

Belirtildiği gibi, Google Arama Konsolu, Chromium tabanlı tarayıcılardan son 28 gün için alınan ortalama puanları dikkate alır ve ayrıca sayfanın tüm kullanım ömrü için değerleri içerir.

Sayfanın ömrü boyunca neler olduğunu görememek bir sorundur. PageSpeed'in sanal makinesi, yüklendikten ve kullanıcılar sayfayla etkileşime girdikten sonra sayfanın nasıl performans gösterdiğini açıklayamaz, bu da site geliştiricilerinin iyileştirme önerilerine erişemeyeceği anlamına gelir.

Çözüm, bir kullanıcı sayfayla etkileşime girerken neler olduğunu görmek için Google Chrome Web Vitals kitaplığını bir site projesinin geliştirici sürümüne dahil etmektir.

Bu kitaplığın nasıl dahil edileceğine ilişkin çeşitli seçenekler GitHub'daki README.md dosyasındadır. En basit yol, aşağıdaki betiği eklemektir. Ana şablonun <head> içinde sayfa ömrü boyunca değerleri görüntülemek için ayarlanmıştır:

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

Kümülatif Düzen Kayması (CLS) ve En Büyük İçerikli Boyama (LCP) hesaplamasının yalnızca Chrome, Opera, Brave (kütüphanenin çalışması için Cesur Kalkanları devre dışı bırakın) ve Firefox hariç diğer birçok modern tarayıcı dahil olmak üzere Chromium tabanlı tarayıcılar için kullanılabildiğini unutmayın. , bir Mozilla motoruna ve Apple'ın Safari tarayıcısına dayalıdır.

Komut dosyasını ekledikten ve sayfayı yeniden yükledikten sonra tarayıcının geliştirici araçlarını açın ve Konsol sekmesine geçin.

Mobil sürüm için bu değerlerin nasıl hesaplandığını görmek için Cihaz araç çubuğunu kullanarak mobil cihaza geçin. Erişmek için tarayıcınızın Geliştirici araçlarında Aygıt Araç Çubuğunu Değiştir düğmesini tıklayın.

Bu, sorunları belirlemeye yardımcı olacaktır. Konsoldaki satırı genişletmek, puan değişikliğini neyin tetiklediğiyle ilgili ayrıntıları gösterecektir.

Çoğu zaman, diğer puanlar için otomatik tavsiye, bunların nasıl iyileştirileceği konusunda bir fikir edinmek için yeterlidir. Ancak, sayfa kullanıcı etkileşimleriyle yüklendikten sonra CLS değişir ve özellikle tek sayfalı uygulamalar için herhangi bir öneri olmayabilir. Sayfanız arama motoru tarafından dikkate alınan faktörler için değerlendirmeyi geçemese bile Performans Sorunlarını Tanılama bölümünde tam 100 puan görebilirsiniz.

CLS ile mücadele eden bizler için bu yardımcı olacaktır. Günlük kaydını, ardından girişleri, belirli girişi, kaynakları, belirli kaynağı genişletin ve currentRect ile previousRect karşılaştırın:

Artık neyin değiştiğini görebildiğimize göre, onu düzeltmenin bazı yollarını belirleyebiliriz.

Kümülatif Düzen Kaymasını Azaltma

Tüm puanlar arasında CLS, anlaşılması en zor olanıdır, ancak kullanıcı deneyimi için çok önemlidir. Düzen kaydırma, belge nesne modeline (DOM) bir öğe eklendiğinde veya mevcut bir öğenin boyutu veya konumu değiştirildiğinde meydana gelir. Bu öğenin altındaki öğelerin kaymasına neden olur ve kullanıcı neler olup bittiğini kontrol edemediğini hissederek web sitesini terk etmelerine neden olur.

Bunu basit bir HTML sayfasında halletmek nispeten kolaydır. Resimlerin genişlik ve yükseklik niteliklerini, altlarındaki metnin yüklenirken kaydırılmaması için ayarlayın. Bu muhtemelen sorunu çözecektir.

Sayfanız dinamikse ve kullanıcılar onunla bir uygulama gibi çalışıyorsa, CLS sorunlarını çözmek için aşağıdaki adımları göz önünde bulundurun:

1. Sayfayı, kullanıcı bir düğmeyi veya bağlantıyı tıkladıktan sonra CLS'nin tetiklenmesine neden olmadan içeriği 500 milisaniye gösterecek şekilde ayarlayın.
2. Diğer DOM öğelerinin değişmesine neden olmayan parametreleri değiştirin: arka plan, renk vb.
3. Bir öğenin boyutunu veya konumunu değiştirirken diğer öğelerin kaymadığından emin olun.

Google Developers Optimize CLS sayfasında daha ayrıntılı öneriler mevcuttur.

500 Milisaniye CLS'yi Nasıl Azaltabilir?

500 milisaniye eşiğinin nasıl kullanılacağını göstermek için resim yükleme içeren bir örnek kullanacağız.

Normalde bir kullanıcı bir dosya yüklediğinde, komut dosyası DOM'a bir <img> öğesi ekler ve ardından istemci tarayıcısı görüntüyü sunucudan indirir. Bir sunucudan bir görüntünün alınması 500 milisaniyeden fazla sürebilir ve bir düzen kaymasına neden olabilir.

Ancak, zaten istemci bilgisayarda olduğu için görüntüyü daha hızlı almanın ve böylece 500 milisaniyelik son tarih dolmadan <img> öğesini oluşturmanın bir yolu var.

İşte çoğu modern tarayıcıda çalışacak kütüphaneler olmadan saf ECMAScript'e evrensel bir örnek:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

Daha önce gördüğümüz gibi, bu tür sorunları çözmek zihinsel çeviklik gerektirebilir. Mobil cihazlar, özellikle ucuz olanlar ve yavaş mobil internet ile, 90'ların performans optimizasyonu sanatı kullanışlı hale geliyor ve eski tarz web programlama yaklaşımları tekniğimize ilham verebilir. Modern tarayıcı hata ayıklama araçları bu konuda yardımcı olacaktır.

Google Arama Konsolunu Güncelleyin

Sorunları bulup ortadan kaldırdıktan sonra, Google'ın arama motorunun değişiklikleri kaydetmesi biraz zaman alabilir. Sonuçları biraz daha hızlı güncellemek için Google Search Console'a sorunları çözdüğünüzü bildirin.

Sol üst köşedeki Arama özelliği kutusunu kullanarak üzerinde çalıştığınız sayfayı seçin. Ardından sol hamburger menüsünde Önemli Web Verileri'ne gidin:

Mobil veya masaüstü raporunun sağ üst kısmındaki Raporu Aç düğmesini tıklayın. (Her ikisinde de sorun yaşadıysanız, daha sonra ikinci rapor için aynı işlemleri tekrarlamayı unutmayın.)

Ardından, grafiğin altındaki Ayrıntılar bölümüne gidin ve başarısız doğrulama uyarısının olduğu satıra tıklayın.

Ardından, bu sorun için Ayrıntıları Gör düğmesini tıklayın.

Ve son olarak Yeni Doğrulamayı Başlat'a tıklayın.

Hemen sonuç beklemeyin. Doğrulama 28 güne kadar sürebilir.

Optimizasyon Sürekli Bir Mücadeledir

SEO optimizasyonu sürekli bir süreçtir ve aynısı performans optimizasyonu için de geçerlidir. Hedef kitleniz büyüdükçe sunucular daha fazla istek alır ve yanıtlar yavaşlar. Artan talep genellikle sitenize yeni özelliklerin eklenmesi anlamına gelir ve bunlar performansı etkileyebilir.

Performans optimizasyonunun maliyet/fayda yönüne gelince, doğru dengeyi kurmak gerekir. Geliştiricilerin her zaman tüm sitelerde en iyi değerleri elde etmesi gerekmez. En önemli performans sorunlarına neyin sebep olduğuna odaklanın; Sonuçları daha hızlı ve daha az çabayla alırsınız. Büyük şirketler çok fazla kaynak yatırımı yapabilir ve tüm puanları alabilir, ancak bu küçük ve orta ölçekli işletmeler için geçerli değildir. Gerçekte, küçük bir işletmenin büyük olasılıkla Amazon gibi endüstri ağır toplarının değil, rakiplerinin performansını yakalaması veya aşması gerekir.

İşletme sahipleri, site optimizasyonunun neden kritik olduğunu, işin hangi yönlerinin en önemli olduğunu ve bunu yapmak için işe aldıkları insanlarda hangi becerileri aramaları gerektiğini anlamalıdır. Geliştiriciler ise performansı her zaman göz önünde bulundurarak, müşterilerinin yalnızca son kullanıcılar için hızlı hissetmekle kalmayıp aynı zamanda PageSpeed ​​Insights'ta iyi puanlar alan siteler oluşturmasına yardımcı olmalıdır.