Chrome'un web araçlarıyla kullanıcı deneyimini iyileştirme fırsatlarını bulma
Yayınlanma tarihi: 11 Mayıs 2021
Bugün, sitenizin Web Vitals'da nasıl iyileştirilebileceğini belirlemenize yardımcı olmak için Lighthouse, PageSpeed ve Geliştirici Araçları'ndaki yeni araç özelliklerini ele alacağız.
Araçları hatırlatmak gerekirse Lighthouse, web sayfalarının kalitesini artırmak için kullanılan açık kaynaklı, otomatik bir araçtır. Lighthouse'u Chrome Geliştirici Araçları hata ayıklama araçları paketinde bulabilir ve herkese açık veya kimlik doğrulama gerektiren herhangi bir web sayfasında çalıştırabilirsiniz. Lighthouse'u PageSpeed Insights, CI ve WebPageTest'te de bulabilirsiniz.
Lighthouse 7.x, kullanıcı deneyimi metriklerini etkileyen kullanıcı arayüzü bölümlerinin (ör. düzen kaymasına katkıda bulunan düğümler) daha kolay görsel olarak incelenmesi için öğe ekran görüntüleri gibi yeni özellikler içerir.
Ayrıca PageSpeed Insights'ta öğe ekran görüntüleri için destek sunarak sayfaların tek seferlik performans çalıştırmalarıyla ilgili sorunları daha kolay tespit etmenin bir yolunu sağladık.
Core Web Vitals'ı ölçme
Lighthouse, Largest Contentful Paint, Cumulative Layout Shift ve Total Blocking Time (First Input Delay için bir laboratuvar proxy'si) dahil olmak üzere Core Web Vitals metriklerini sentetik olarak ölçebilir. Bu metrikler yükleme, düzen kararlılığı ve etkileşime hazır olma durumunu yansıtır. Core Web Vitals'ın geleceği bölümünde vurgulanan First Contentful Paint gibi diğer metrikler de burada yer alır.
Lighthouse raporunun "Metrikler" bölümünde bu metriklerin laboratuvar sürümleri yer alır. Bu raporu, kullanıcı deneyiminin hangi yönlerinin dikkatinizi gerektirdiğini gösteren bir özet görünüm olarak kullanabilirsiniz.
Chrome UX Report veya RUM'da bulunanlar gibi saha metrikleri bu sınırlamaya tabi değildir ve gerçek kullanıcıların deneyimini yansıttıkları için laboratuvar verilerini değerli bir şekilde tamamlar. Saha verileri, laboratuvarda elde ettiğiniz teşhis bilgilerini sunamaz. Bu nedenle, ikisi birlikte kullanılır.
Web Verileri'nde iyileştirebileceğiniz alanları belirleme
Largest Contentful Paint öğesini belirleme
LCP, algılanan yükleme deneyiminin ölçümüdür. Sayfa yükleme sırasında birincil veya "en büyük" içeriğin yüklendiği ve kullanıcı tarafından görülebildiği noktayı işaretler.
Lighthouse'un, hangi öğenin Largest Contentful Paint olduğunu belirleyen bir "Largest Contentful Paint öğesi" denetimi vardır. Fareyle öğenin üzerine geldiğinizde öğe, ana tarayıcı penceresinde vurgulanır.
Bu öğe bir resimse bu bilgi, bu resmin yüklenmesini optimize etmek isteyebileceğiniz konusunda yararlı bir ipucudur. Lighthouse, resimlerinizin daha iyi sıkıştırılıp sıkıştırılamayacağını, yeniden boyutlandırılıp boyutlandırılamayacağını veya daha uygun bir modern resim biçiminde sunulup sunulamayacağını anlamanıza yardımcı olacak çeşitli resim optimizasyonu denetimleri içerir.
Annie Sullivan'ın LCP yer işareti uygulaması, LCP öğesini tek bir tıklamayla kırmızı bir dikdörtgenle hızlıca tanımlamak için de yararlı olabilir.
LCP'yi iyileştirmek için geç keşfedilen resimleri önceden yükleyin
Largest Contentful Paint'i iyileştirmek için tarayıcı tarafından geç keşfedilen kritik hero resimlerinizi önceden yükleyin. Resmin keşfedilebilmesi için bir JavaScript paketinin yüklenmesi gerekiyorsa geç keşif gerçekleşebilir.
LCP resimlerini önceden yükleme hakkında sık sorulan ve kısaca ele almaya değer birkaç soru vardır.
Duyarlı resimleri önceden yükleyebilir misiniz? Evet.
Aşağıda srcset ve sizes kullanılarak belirtilen duyarlı bir hero resmimiz olduğunu varsayalım:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
link özelliğine eklenen imagesrcset ve imagesizes özellikleri sayesinde, srcset ve sizes tarafından kullanılan aynı resim seçme mantığını kullanarak uyumlu bir resmi önceden yükleyebiliriz:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
LCP resmi bir CSS arka planı aracılığıyla tanımlanmışsa denetim, önceden yükleme fırsatlarını da vurgular mı? Evet.
CSS arka planı veya <img> aracılığıyla LCP resmi olarak işaretlenen tüm resimler, üç veya daha fazla şelale derinliğinde keşfedilirse aday olur.
Ekran dışındaki resimleri geç yükleme ve LCP için bunu önleme
İlk kullanıcı deneyimi için kritik olmayan ekran dışı resimler gecikmeli yüklenebilir. Bu teknik, kullanıcı bir resmin yakınına gidene kadar resmin indirilmesini erteler. Bu sayede kritik öğeler için ağ çakışması azaltılabilir ve bazı durumlarda LCP iyileştirilebilir. "Ekran dışındaki resimleri geciktirin" denetimi bu konuda yardımcı olabilir:
Largest Contentful Paint resmi gibi ekranın üst kısmındaki kritik resimler geç yüklenmemelidir. Bu durum, LCP resminin yüklenmesini geciktirebilir. Lighthouse, bir LCP resminin "Largest Contentful Paint resmi geç yüklendi" denetimi aracılığıyla yanlış bir şekilde geç yüklendiğini vurgular:
CLS katkılarını belirleme
Cumulative Layout Shift, görsel kararlılığın ölçümüdür. Sayfa içeriğinin görsel olarak ne kadar kaydığını ölçer. Lighthouse'ta, CLS'de hata ayıklamak için "Büyük düzen kaymalarından kaçının" adlı bir denetim bulunur.
Bu denetim, sayfanın kaymasına en çok katkıda bulunan DOM öğelerini vurgular. Soldaki Öğe sütununda bu DOM öğelerinin listesini, sağda ise genel CLS katkılarını görürsünüz.
Yeni Lighthouse Öğe Ekran Görüntüleri özelliği sayesinde, denetimde belirtilen önemli öğelerin görsel önizlemesini görebilir ve daha net bir görünüm için tıklayarak yakınlaştırabiliriz:
Yükleme sonrası CLS için, CLS'ye en çok katkıda bulunan öğeleri dikdörtgenlerle kalıcı olarak görselleştirmenin faydası olabilir. Bu özellik, SpeedCurve'ün Core Web Vitals kontrol paneli gibi üçüncü taraf araçlarda bulunur. Ben bu özellik için Defaced'in Layout Shift GIF Generator aracını kullanmayı seviyorum:
Düzen kayması sorunlarını site genelinde görmek için Search Console'un Core Web Vitals raporundan çok yararlanıyorum. Bu sayede sitemde CLS'si yüksek olan sayfa türlerini görebiliyorum (bu örnekte, zamanımı hangi şablon parçalarına harcamam gerektiğini kendim belirleyebiliyorum):
Boyutları olmayan resimlerden kaynaklanan CLS'yi belirleme
Boyutları olmayan resimlerin neden olduğu Cumulative Layout Shift'i sınırlandırmak için resim ve video öğelerinize genişlik ve yükseklik boyutu özellikleri ekleyin. Bu yaklaşım, resim yüklenirken tarayıcının dokümanda doğru miktarda alan ayırabilmesini sağlar.
Resim boyutları ve en boy oranı hakkında düşünmenin önemiyle ilgili iyi bir yazı için Resimlerde Yükseklik ve Genişlik Ayarlamak Yeniden Önemli Hale Geldi başlıklı makaleyi inceleyin.
Reklamlardan kaynaklanan CLS'yi belirleme
Lighthouse için Publisher Ads, sayfanızdaki reklamların yükleme deneyimini iyileştirme fırsatlarını bulmanıza olanak tanır. Bu fırsatlar arasında, sayfanızın kullanıcılar tarafından kullanılabilir hale gelmesini geciktirebilecek düzen kayması ve uzun süren görevlere katkılar yer alır. Lighthouse'da bunu Topluluk Eklentileri aracılığıyla etkinleştirebilirsiniz.
Reklamların, web'deki düzen kaymalarına katkıda bulunan en büyük etkenlerden biri olduğunu unutmayın. Şunları yapmanız önemlidir:
- Yapışkan olmayan reklamları görüntü alanının üst kısmına yakın yerleştirirken dikkatli olun
- Reklam alanı için mümkün olan en büyük boyutu ayırarak kaymaları ortadan kaldırma
Birleştirilmemiş animasyonlardan kaçının
Birleştirilmemiş animasyonlar, ağır JavaScript görevleri ana iş parçacığını meşgul ediyorsa alt uç cihazlarda kalitesiz görünebilir. Bu tür animasyonlar, düzende kaymalara neden olabilir.
Chrome, bir animasyonun birleştirilemediğini tespit ederse bunu Lighthouse'un okuduğu bir Geliştirici Araçları izine bildirir. Böylece, animasyon içeren hangi öğelerin neden birleştirilmediğini listeleyebilir. Bunları Bileşik olmayan animasyonlardan kaçının denetiminde bulabilirsiniz.
First Input Delay / Total Blocking Time / Uzun Süren Görevler ile ilgili hata ayıklama
İlk Giriş, kullanıcının bir sayfayla ilk etkileşime girmesinden (ör. bir bağlantıyı tıkladığında, bir düğmeye dokunduğunda veya özel, JavaScript destekli bir kontrol kullandığında) tarayıcının bu etkileşime yanıt olarak etkinlik işleyicileri işlemeye başlayabildiği zamana kadar geçen süreyi ölçer. Uzun JavaScript görevleri bu metriği ve bu metriğin proxy'si olan Toplam Engelleme Süresi'ni etkileyebilir.
Lighthouse, ana ileti dizisindeki en uzun görevleri listeleyen Uzun ana ileti dizisi görevlerinden kaçının denetimini içerir. Bu, giriş gecikmesine en çok katkıda bulunanları belirlemek için faydalı olabilir. Sol sütunda, uzun ana iş parçacığı görevlerinden sorumlu komut dosyalarının URL'sini görebiliriz.
Sağ tarafta bu görevlerin süresini görebiliriz. Hatırlatmak gerekirse uzun süren görevler, 50 milisaniyeden uzun süren görevlerdir. Bu durumun, kare hızını veya giriş gecikmesini etkileyecek kadar uzun süre ana iş parçacığını engellediği kabul edilir.
İzleme için üçüncü taraf hizmetleri düşünüyorsanız Calibre'nin bu maliyetleri görselleştirmek için kullandığı ana iş parçacığı yürütme zaman çizelgesi görselini de çok beğeniyorum. Bu görsel, etkileşimi etkileyen uzun görevlere katkıda bulunan hem üst hem de alt görevleri vurgular.
Lighthouse'da öncesi/sonrası etkisini görmek için ağ isteklerini engelleyin
Chrome Geliştirici Araçları, tek tek kaynakların kaldırılmasının veya kullanılamamasının etkisini görmek için ağ isteklerini engellemeyi destekler. Bu, her bir komut dosyasının (ör.üçüncü taraf yerleştirmeleri veya izleyiciler) Total Blocking Time (TBT) ve Time to Interactive gibi metrikler üzerindeki maliyetini anlamak için yararlı olabilir.
Ağ isteği engelleme, Lighthouse ile de çalışır. Bir sitenin Lighthouse raporuna kısaca göz atalım. Performans puanı 63/100 ve TBT 400 ms. Kodu incelediğimizde bu sitenin Chrome'da gereksiz bir Intersection Observer polyfill'i yüklediğini görüyoruz. Engelle
Geliştirici Araçları Ağ panelinde bir komut dosyasını sağ tıklayıp Block Request URL seçeneğini tıklayarak engelleyebiliriz. Burada, Intersection Observer polyfill için bunu yapacağız.
Şimdi Lighthouse'u tekrar çalıştırabiliriz. Bu kez performans puanımızın (70/100) ve Total Blocking Time'ın (400 ms => 300 ms) iyileştiğini görebiliriz.
Maliyetli üçüncü taraf yerleştirmelerini hafif bileşenle değiştirme
Sayfalara video, sosyal medya gönderisi veya widget yerleştirmek için üçüncü taraf kaynakları kullanmak yaygındır. Varsayılan olarak, çoğu yerleştirme hemen yüklenir ve kullanıcı deneyimini olumsuz etkileyen maliyetli yüklerle birlikte gelebilir. Üçüncü taraf kritik değilse (ör. kullanıcının görmeden önce kaydırması gerekiyorsa) bu işlem gereksizdir.
Bu tür widget'ların performansını iyileştirmenin bir yolu, kullanıcı etkileşimi üzerine geç yükleme yapmaktır. Bunu yapmak için widget'ın hafif bir önizlemesini (bir cephe) oluşturabilir ve yalnızca kullanıcı etkileşimde bulunursa tam sürümü yükleyebilirsiniz. Lighthouse'da, YouTube video yerleştirmeleri gibi hafif bileşenle geç yüklenebilecek üçüncü taraf kaynaklarını öneren bir denetim bulunur.
Lighthouse'un, ana iş parçacığını 250 ms'den uzun süre engelleyen üçüncü taraf kodları vurgulayacağını hatırlatmak isteriz. Bu, her türlü üçüncü taraf komut dosyasını (Google tarafından yazılanlar dahil) ortaya çıkarabilir. Bu komut dosyalarının oluşturduğu içeriklerin görüntülenmesi için ekranı kaydırmak gerekiyorsa bunları ertelemek veya geç yüklemek daha iyi olabilir.
Core Web Vitals'ın ötesinde
Lighthouse ve PageSpeed Insights'ın son sürümleri, Core Web Vitals'ı vurgulamanın yanı sıra, kaynak haritalarınız etkinse JavaScript ağırlıklı web uygulamalarının yüklenme hızını artırmak için uygulayabileceğiniz somut yönergeler de sunmaya çalışır.
Bunlar arasında, sayfanızdaki JavaScript maliyetini azaltmaya yönelik, kullanıcı deneyimi için gerekli olmayabilecek polyfill'lere ve kopyalara olan bağımlılığı azaltmak gibi giderek artan sayıda denetim yer alır.
Core Web Vitals araçları hakkında daha fazla bilgi edinmek için Lighthouse ekibinin Twitter hesabını ve Geliştirici Araçları'ndaki yenilikleri takip edin.