Chrome'un web araçlarıyla kullanıcı deneyimini iyileştirecek fırsatlar bulma.
Yayınlanma tarihi: 11 Mayıs 2021
Bugün, sitenizin Web Verileri'nde nasıl iyileştirilebileceğini belirlemenize yardımcı olmak için Lighthouse, PageSpeed ve DevTools'taki yeni araç özelliklerinden bahsedeceğiz.
Lighthouse, web sayfalarının kalitesini artırmak için kullanılan açık kaynaklı, otomatik bir araçtır. Bu aracı Chrome Geliştirici Araçları hata ayıklama araçları paketinde bulabilir ve herkese açık olan veya kimlik doğrulama gerektiren tüm web sayfaları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ünüzün (ör. düzen değişikliğine hangi düğümlerin katkıda bulunduğu) bölümlerinin 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ında sorunları daha kolay tespit etmenizi sağladık.
Core Web Vitals'ı ölçme
Lighthouse; Largest Contentful Paint, Cumulative Layout Shift ve Total Engelleme Süresi (First Giriş Gecikmesi 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 İlk Zengin İçerikli Boyama 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önlerine dikkat etmeniz gerektiğinin özet görünümü olarak kullanabilirsiniz.
Chrome UX Report veya RUM'da bulunanlar gibi alan metrikleri bu sınırlamaya sahip değildir ve gerçek kullanıcıların deneyimini yansıttığı için laboratuvar verilerini değerli bir şekilde tamamlar. Saha verileri, laboratuvarda elde ettiğiniz teşhis bilgilerini sunamaz. Bu nedenle, bu iki veri türü birlikte kullanılır.
Web Vitals'ta hangi alanları iyileştirebileceğinizi belirleme
Largest Contentful Paint öğesini tanımlama
LCP, algılanan yükleme deneyiminin bir ölçümüdür. Bu, sayfa yükleme sırasında birincil (veya "en büyük" içerik yüklendiğinde ve kullanıcı tarafından görülebildiği) noktayı işaretler.
Lighthouse'ta, en büyük zengin içerikli boyamanın hangi öğe olduğunu tanımlayan bir "Largest Contentful Paint öğesi" denetimi bulunur. Ana tarayıcı penceresinde öğenin üzerine geldiğinizde öğe vurgulanır.
Bu öğe bir resimse bu bilgiler, bu resmin yüklenmesini optimize etmek isteyebileceğiniz yararlı bir ipucudur. Lighthouse, resimlerinizin daha iyi sıkıştırılıp sıkıştırılamayacağı, yeniden boyutlandırılıp boyutlandırılamayacağı veya daha modern ve optimize bir resim biçiminde yayınlanıp yayınlanamayacağı hakkında bilgi edinmenize yardımcı olmak için çeşitli resim optimizasyonu denetimleri içerir.
AnnieSullivan'ın LCP Yer İşareti uygulamasını, tek tıklamayla kırmızı bir dikdörtgene sahip LCP öğesini hızlı bir şekilde tanımlamak için de faydalı bulabilirsiniz.
LCP'yi iyileştirmek için geç keşfedilen resimleri önceden yükleyin
Largest Contentful Paint'i iyileştirmek için kritik kahraman resimlerinizi tarayıcı tarafından geç keşfedilirlerse önceden yükleyin. Resmin bulunabilir olması için bir JavaScript paketinin yüklenmesi gerekiyorsa geç keşif gerçekleşebilir.
LCP resimlerini önceden yüklemeyle ilgili sık sorulan birkaç soru vardır. Bu soruları kısaca ele almanın da faydalı olabileceğini düşünüyoruz.
Duyarlı resimleri önceden yükleyebilir misiniz? Evet'e dokunun.
Aşağıda srcset ve sizes kullanılarak belirtildiği gibi 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 resim seçme mantığını kullanarak duyarlı 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 CSS arka planı aracılığıyla tanımlanırsa denetim, ön yükleme fırsatlarını da vurgular mı? Evet.
CSS arka planı veya <img> aracılığıyla LCP resmi olarak işaretlenen herhangi bir resim, üç veya daha yüksek şelale derinliğinde keşfedildiğinde aday olur.
Ekran dışındaki görselleri geç yükleme ve LCP için bunu yapmama
İlk kullanıcı deneyimi için kritik olmayan ekran dışındaki resimler gecikmeli yüklenebilir. Bu, kullanıcı aşağı doğru kaydırana kadar resmin indirilmesini erteleyen bir tekniktir. Bu teknik, kritik öğeler için ağ anlaşmazlığını azaltabilir ve bazı durumlarda LCP'yi iyileştirebilir. "Ekran dışındaki resimleri geciktir" denetimi bu konuda yardımcı olabilir:
Ekranın üst kısmındaki kritik resimler (ör. Largest Contentful Paint resmi) geç yüklenmemelidir. Bunu yapmak LCP görüntüsünün yüklenmesini geciktirebilir. "Largest Contentful Paint resmi geç yüklendi" denetimi aracılığıyla bir LCP resmi yanlış şekilde geç yükleniyorsa Lighthouse bunu belirtir:
CLS katkılarını belirleyin
Cumulative Layout Shift bir görsel kararlılık ölçümüdür. Bir sayfanın içeriğinin görsel olarak ne kadar kaydığını ölçer. Lighthouse'ta, CLS ile ilgili hata ayıklama için "Büyük düzen kaymalarından kaçının" adlı bir denetim bulunur.
Bu denetim, sayfadaki kaymalara en çok katkıda bulunan DOM öğelerini vurgular. Soldaki Öğe sütununda bu DOM öğelerinin listesini, sağda ise toplam CLS katkılarını görürsünüz.
Yeni Lighthouse Öğesi Ekran Görüntüleri özelliği sayesinde hem denetimde belirtilen temel öğelerin görsel bir önizlemesini hem de daha net bir görünüm için tıklayarak yakınlaştırmayı görebiliyoruz:
Yükleme sonrası CLS'de, CLS'ye en çok katkıda bulunan öğeler dikdörtgenlerle kalıcı şekilde görselleştirmede değer olabilir. Bu özellik, SpeedCurve'un Core Web Vitals kontrol paneli gibi üçüncü taraf araçlarında bulunur ve Defaced'ın Layout Shift GIF Generator aracını kullanarak aşağıdakiler için kullanabilirsiniz:
Düzen kayması sorunlarını site genelinde genel hatlarıyla incelemek için Search Console'un Core Web Vitals raporundan önemli ölçüde bilgi aldım. Bu, sitemdeki yüksek CLS'ye sahip sayfa türlerini görmemi sağlıyor (bu örnekte, zamanımı hangi şablon kısımlarına harcamam gerektiğini kendim belirleyebiliyorum):
Boyutları olmayan resimlerden CLS'yi belirleme
Boyutları olmayan resimlerden kaynaklanan kümülatif düzen kaymasını sınırlamak için resimlerinize ve video öğelerinize genişlik ve yükseklik boyut özelliklerini ekleyin. Bu yaklaşım, tarayıcının resim yüklenirken dokümanda doğru miktarda alan ayırmasını sağlar.
Resim boyutları ve en boy oranı üzerine düşünmenin önemine ilişkin iyi bir yazı için Resimlerde Yüksekliği ve Genişliği Tekrar Ayarlamak Tekrar Önemli bölümüne bakın.
Reklamlardan CLS'yi tanımlama
Publisher Ads for Lighthouse, sayfanızdaki reklamların yüklenme deneyimini iyileştirmeye yönelik fırsatlar bulmanızı sağlar. Düzen kaymasına katkılar ve sayfanızın kullanıcılar tarafından ne kadar kısa süre içinde kullanılabilir olacağını ileri sürebilecek uzun görevler bu kapsamda yer alır. BunuLighthouse'ta Topluluk Eklentileri aracılığıyla etkinleştirebilirsiniz.
Reklamların, web'deki düzen değişikliklerine en çok katkıda bulunan unsurlardan 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 bir yere yerleştirirken dikkatli olun.
- Reklam alanı için mümkün olan en büyük boyutu ayırarak kaymaları ortadan kaldırın
Birleştirilmemiş animasyonlardan kaçının
Ağır JavaScript görevleri ana iş parçacığını meşgul tutuyorsa, birleşik olmayan animasyonlar, alt uç cihazlarda kendilerini kötü bir şekilde sunabilir. Bu tür animasyonlar, düzen kaymalarına neden olabilir.
Chrome bir animasyonun birleştirilemediğini tespit ederse bunu bir Geliştirici Araçları izleme Lighthouse okumalarına bildirir. Böylece, animasyon içeren hangi öğelerin neden birleştirilmediğini listeleyebilir. Bu sorunları Bileşik olmayan animasyonları önleyin denetiminde bulabilirsiniz.
İlk Giriş Gecikmesi / Toplam Engelleme Süresi / Uzun Görevler için Hata Ayıklama
İlk Giriş, kullanıcının bir sayfayla ilk kez etkileşimde bulunmasından (ör. bir bağlantıyı tıklaması, bir düğmeye dokunması veya JavaScript destekli özel bir kontrolü kullanması) ile tarayıcının bu etkileşime yanıt olarak etkinlik işleyicileri işlemeye başlamasına kadar geçen süreyi ölçer. Uzun JavaScript Görevleri bu metriği ve bu metriğin proxy'sini (Toplam Engelleme Süresi) etkileyebilir.
Lighthouse, ana ileti dizisindeki en uzun görevleri listeleyen bir Uzun ana ileti dizisi görevlerinden kaçının denetimi içerir. Bu, giriş gecikmesine en çok katkıda bulunanları belirlemenize yardımcı olabilir. Sol sütunda, uzun ana iş parçacığı görevlerinden sorumlu komut dosyalarının URL'lerini görebiliriz.
Sağ tarafta bu görevlerin süresini görebiliriz. Uzun görevler, 50 milisaniyeden uzun süren görevlerdir. Bunun, ana iş parçacığını kare hızını veya giriş gecikmesini etkileyecek kadar uzun süre engellediği kabul edilir.
İzleme için üçüncü taraf hizmetlerini kullanmayı düşünüyorsanız Calibre'ın bu maliyetleri görselleştirmek için sahip olduğu ana iş parçacığı yürütme zaman çizelgesi görselini de çok seviyorum. Bu görsel, etkileşimi etkileyen uzun görevlere katkıda bulunan üst ve alt görevleri vurguluyor.
Lighthouse'ta önceki/sonraki etkiyi görmek için ağ isteklerini engelleyin
Chrome Geliştirici Araçları, kaynakların kaldırılmasını veya kullanılamamasının etkilerini ayrı ayrı görmek için ağ isteklerini engelleme özelliğini destekler. Bu, tek tek komut dosyalarının (ör.üçüncü taraf yerleştirmeleri veya izleyiciler) Toplam Engelleme Süresi (TBT) ve Etkileşim Süresi gibi metrikler üzerindeki maliyetini anlamaya yardımcı olabilir.
Ağ isteği engelleme, Lighthouse ile de çalışır. Bir sitenin Lighthouse raporuna hızlı bir şekilde bakalım. 400 ms TBT ile performans puanı 63/100'dür. Kodu incelediğimizde, bu sitenin Chrome'da gerekli olmayan bir Intersection Observer polyfill yüklediğini görüyoruz. Haydi engelleyelim!
Geliştirici Araçları Ağ panelinde bir komut dosyasını sağ tıklayıp Block Request URL simgesini tıklayarak engelleyebiliriz. Burada bunu Intersection Observer polyfill için yapacağız.
Ardından Lighthouse'u yeniden çalıştırabiliriz. Bu sefer, toplam engelleme süresi (400 ms => 300 ms) nedeniyle performans puanımızın iyileştiğini (70/100) görüyoruz.
Pahalı üçüncü taraf yerleşimlerini hafif bileşenle değiştirme
Sayfalara video, sosyal medya yayını veya widget yerleştirmek için üçüncü taraf kaynakların kullanılması yaygın bir uygulamadır. Varsayılan olarak çoğu yerleşik içerik hemen yüklenir ve kullanıcı deneyimini olumsuz yönde etkileyen maliyetli yüklerle birlikte gelebilir. Üçüncü taraf kritik değilse (ör. kullanıcının bunu görmeden önce kaydırması gerekiyorsa) bu durum israftır.
Bu tür widget'ların performansını iyileştirmenin bir yolu, kullanıcı etkileşimi olduğunda bunları yavaş yüklemektir. Bu işlem, widget'ın hafif bir önizlemesi (bir cephe) oluşturularak ve tam sürüm yalnızca kullanıcı onunla etkileşime geçerse yükleyerek yapılabilir. Lighthouse, YouTube video yerleştirmeleri gibi bir hafif bileşen ile geç yüklenebilecek üçüncü taraf kaynakları öneren bir denetime sahiptir.
Lighthouse'ın, ana iş parçacığını 250 ms'den uzun süre boyunca engelleyen üçüncü taraf kodunu vurguladığını hatırlatmak isteriz. Bu, Google tarafından yazılanlar da dahil olmak üzere her türlü üçüncü taraf komut dosyasını açığa çıkarabilir. Bu komut dosyaları, oluşturdukları komut dosyalarını görüntülemek için kaydırma gerektiriyorsa daha iyi erteleme veya geç yükleme işlemlerini gerçekleştirebilir.
Core Web Vitals'in ötesinde
Lighthouse ve PageSpeed Insights'ın son sürümleri, Core Web Vitals'ı vurgulamanın yanı sıra, kaynak haritaları etkinleştirildiğinde JavaScript ağırlıklı web uygulamalarının ne kadar hızlı yüklenebileceğini iyileştirmek için uygulayabileceğiniz somut kılavuzlar sunmaya da olanak tanır.
Bu denetimler, sayfanızdaki JavaScript maliyetini azaltmaya yönelik olarak gittikçe büyüyen bir denetim koleksiyonunu da içeriyor.
Core Web Vitals araçları hakkında daha fazla bilgi için Lighthouse ekibi Twitter hesabına ve Geliştirici Araçları'ndaki yeniliklere göz atın.
Mercedes Mehling'in Unsplash'teki hero resim.