Chrome'un web araçlarıyla kullanıcı deneyimini iyileştirecek fırsatlar bulma.
Bugün, sitenizin Web Verileri'nde 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çlarla ilgili bilgilerinizi tazelemek gerekirse, Lighthouse web sayfalarının kalitesini iyileştirmeye yönelik açık kaynaklı ve 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 (ör. düzen kaymasına katkıda bulunan düğümler) etkileyen kullanıcı arayüzü bölümlerinin daha kolay görsel olarak daha kolay incelenebilmesi 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 de gönderdik. Bu destek, sayfaların tek seferlik performansla ilgili sorunları daha kolay tespit etmemizi sağlıyor.
Core Web Vitals'ı ölçün
Lighthouse; Largest Contentful Paint, Cumulative Layout Shift ve Total Engelleme Süresi'ni (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ırlık durumunu yansıtır. Core Web Vitals'ın geleceğinde vurgulanan First Contentful Paint gibi diğer metrikler de var.
Lighthouse raporunun "Metrikler" bölümünde bu metriklerin laboratuvar sürümleri yer alır. Bunu, kullanıcı deneyiminin hangi yönlerine dikkat etmeniz gerektiğine dair özet bir görünüm olarak kullanabilirsiniz.
Chrome Kullanıcı Deneyimi Raporu veya RUM'dakiler gibi alan metrikleri bu sınırlamaya sahip değildir ve gerçek kullanıcıların deneyimini yansıttığı için laboratuvar verilerini tamamlayıcı niteliktedir. Alan verileri, laboratuvarda elde ettiğiniz teşhis bilgisi türlerini sunamaz. Bu nedenle, ikisi birlikte kullanılabilir.
Web Verileri'nde iyileştirme yapabileceğiniz noktaları belirleyin
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, hangi öğenin en büyük zengin içerikli boya olduğunu tanımlayan "Largest Contentful Paint öğesi" denetimine sahiptir. 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 yeniden boyutlandırılıp boyutlandırılamayacağını veya daha optimum modern bir resim biçiminde sunulup sunulmayacağını anlamanıza yardımcı olmak için bir dizi resim optimizasyonu denetimi 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 önce bir JavaScript paketinin yüklenmesi gerekiyorsa geç keşif gerçekleşebilir.
LCP resimlerini önceden yükleme hakkında bize sorulan birkaç yaygın soru var. Bu sorularla ilgili kısaca bilgi vermek de faydalı olabilir.
Duyarlı resimleri önceden yükleyebilir misiniz? Evet'e dokunun.
Aşağıda srcset ve sizes kullanılarak belirtildiği gibi duyarlı bir hero resimimiz 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, önceden 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ışı resimleri geç yükleme ve LCP için bunu önleme
İlk kullanıcı deneyimi için kritik olmayan ekran dışındaki resimler geç 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 ertele" denetimi burada yardımcı olabilir:
Largest Contentful Paint resmi gibi ekranın üst kısmındaki kritik resimler geç yüklenmemelidir. Bunu yapmak LCP görüntüsünün yüklenmesini geciktirebilir. Bir LCP resminin "Largest Contentful Paint resmi geç yüklendi" denetimi aracılığıyla yanlış şekilde yüklenmesi durumunda Lighthouse gösterilir:
CLS katkılarını tanımlama
Cumulative Layout Shift bir görsel kararlılık ölçümüdür. Bir sayfanın içeriğinin görsel olarak ne kadar değiştiğini ölçer. Lighthouse'ta CLS hata ayıklaması için "Büyük düzen kaymalarını önleme" adlı bir denetim bulunur.
Bu denetim, sayfadaki değişimlere en çok katkıda bulunan DOM öğelerini vurgular. Soldaki Öğe sütununda bu DOM öğelerinin listesini, sağ tarafta ise genel CLS katkıları gösterilir.
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, SpeedCurve'un Core Web Vitals kontrol paneli gibi üçüncü taraf araçlarda bulabileceğiniz ve Defaced's Layout Shift GIF Generator'ı kullanmayı sevdiğim bir özelliktir:
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):
Boyutu olmayan resimlerden CLS'yi tanımlama
Cumulative Layout Shift'i boyutu olmayan resimlerden kaynaklanan sınırlamak için resim ve video öğelerinize genişlik ve yükseklik boyutu ö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.
Reklamlardaki 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şimlerine en çok katkıda bulunanlardan biri olduğunu unutmayın. Aşağıdakileri 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 sapmaları 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. Bunları Birleştirilmemiş animasyonlardan kaçınma denetiminde bulabilirsiniz.
Hata Ayıklama İlk Giriş Gecikmesi / Toplam Engelleme Süresi / Uzun Görevler
İ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 iş parçacığındaki en uzun görevleri listeleyen Uzun ana iş parçacığı görevlerinden kaçınma denetimi içerir. Bu, giriş gecikmesine en çok katkıda bulunan kişileri belirlerken yararlı 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örebiliyoruz. Uzun Görevlerin 50 milisaniyeden uzun süren görevler olduğunu hatırlatmak isteriz. 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 öncesi/sonrası etkisini 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 özelliği Lighthouse ile de çalışır. Bir sitenin Lighthouse raporuna hızlı bir şekilde bakalım. Perf puanı 63/100 ve 400 ms TBT'dir. Kodu incelediğimizde bu sitenin, Chrome'da gerekli olmayan bir Kavşak Gözlemci çoklu dolgusu yüklediğini gördük. Haydi engelleyelim!
Geliştirici Araçları Ağı panelinde bir komut dosyasını sağ tıklayıp Block Request URL düğmesini tıklayarak engelleyebiliriz. Burada bunu Kavşak Gözlemci çoklu dolgusu için yapacağız.
Sonra Lighthouse'u yeniden çalıştırabiliriz. Bu kez, Toplam Engelleme Süresi'ne (400 ms => 300 ms) sahip olduğundan performans puanımızın yükseldiğini (70/100) görebiliriz.
Yüksek maliyetli üçüncü taraf yerleştirmeleri cephe ile 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 öğe hemen hevesle yüklenir ve kullanıcı deneyimini olumsuz yönde etkileyen maliyetli yüke neden olabilir. Üçüncü taraf kritik değilse (ör. kullanıcının görmeden önce sayfayı kaydırması gerekiyorsa) bu yöntem israf yaratır.
Bu tür widget'ların performansını artırmanın bir yolu da kullanıcı etkileşiminde bunları geç yüklemektir. Bu işlem, widget'ın (bir cephe) basit bir önizlemesini oluşturarak ve tam sürümü yalnızca kullanıcı etkileşimde bulunursa yükleyebilir. Lighthouse, YouTube video yerleştirmeleri gibi bir hafif bileşen ile geç yüklenebilecek üçüncü taraf kaynakları öneren bir denetime sahiptir.
Lighthouse'un, ana iş parçacığını 250 ms'den uzun bir süre boyunca engelleyen üçüncü taraf kodu vurgulayacağı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'ın Ö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.