Chrome'un web araçlarıyla kullanıcı deneyimini iyileştirme 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 DevTools 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'ı 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 Blocking Time (First Input Delay için 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 bu raporda 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. Birincil veya "en büyük" içeriğin yüklendiği ve kullanıcı tarafından görülebildiği sayfa yükleme sırasındaki 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. Fareyle öğenin üzerine geldiğinizde ana tarayıcı penceresinde öğe vurgulanır.
Bu öğe bir resimse bu bilgi, resmin yüklenmesini optimize etmek isteyebileceğinize dair 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.
Annie Sullivan'ın LCP Bookmarklet'i, LCP öğesini tek 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ükleme
Largest Contentful Paint'i iyileştirmek için tarayıcı tarafından geç keşfedilen önemli hero resimlerinizi ö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 aynı resim seçim 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 tüm resimler, üç veya daha fazla şelale derinliğinde bulunursa 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 görseller gecikmeli yüklenebilir. Bu, bir resmin indirilmesini kullanıcı ekranı kaydırarak yakınına gelene kadar erteleyen bir tekniktir. Bu teknik, kritik öğeler için ağ çekişmesini azaltabilir ve bazı durumlarda LCP'yi iyileştirebilir. "Ekran dışındaki resimleri erteleyin" denetimi bu konuda yardımcı olabilir:
Ekranın üst kısmındaki kritik resimler (ör. Largest Contentful Paint resmi) geç yüklenmemelidir. Bu işlem, LCP resminin yüklenmesini geciktirebilir. Lighthouse, bir LCP resminin "Largest Contentful Paint resmi geç yüklendi" denetimi aracılığıyla yanlış şekilde geç yüklenip yüklenmediğini vurgular:
CLS katkılarını belirleme
Cumulative Layout Shift, görsel kararlılığın bir ö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ğ tarafta ise toplam CLS katkılarını görürsünüz.
Yeni Lighthouse Öğe Ekran Görüntüleri özelliği sayesinde, hem denetimde belirtilen temel öğelerin görsel önizlemesini görebilir hem de daha net bir görünüm için tıklayarak yakınlaştırabiliriz:
Yükleme sonrası CLS için, CLS'ye en fazla katkıda bulunan öğeleri dikdörtgenlerle sürekli görselleştirmenin değeri 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:
Site genelindeki düzen kaydırma sorunlarını görmek için Search Console'un Core Web Vitals raporundan çok faydalanıyorum. Bu sayede, sitemde CLS'si yüksek olan sayfa türlerini görebilirim (bu durumda, zamanımı hangi şablon kısmileriyle harcamam gerektiğini kendim belirleyebilirim):
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ıda resim yüklenirken dokümanda doğru miktarda yer ayrılmasını sağlar.
Resim boyutları ve en boy oranı hakkında düşünmenin önemi hakkında iyi bir makale için Resimlerde Yükseklik ve Genişlik Ayarlamak Yine Önemli başlıklı makaleyi inceleyin.
Reklamlardan CLS'yi tanımlama
Lighthouse için Yayıncı Reklamları, sayfanızdaki reklamların yükleme deneyimini iyileştirme fırsatları bulmanıza olanak tanır. Bu fırsatlar arasında sayfanızı kullanıcıların ne kadar sürede kullanabileceğine etki edebilecek sayfa düzeni değişikliği ve uzun görevler yer alır. Lighthouse'ta bunu 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 ediyorsa birleştirilmemiş animasyonlar, düşük kaliteli cihazlarda kalitesiz olarak görünebilir. Bu tür animasyonlar, sayfa düzeninde kaymalara neden olabilir.
Chrome, bir animasyonun birleştirilemediğini tespit ederse bunu Lighthouse'ın okuduğu bir DevTools izlemesine bildirir. Böylece Lighthouse, hangi animasyonlu öğelerin birleştirilmediğini ve nedenini 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şime girmesinden (ör. bir bağlantıyı tıkladığında, bir düğmeye dokunduğunda ya da JavaScript'le çalıştırılan özel bir denetimi kullandığında) tarayıcının bu etkileşime yanıt olarak etkinlik işleyicileri işlemeye gerçekten başlayabildiği zamana 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'sini görebiliriz.
Sağ tarafta bu görevlerin süresini görebiliriz. Uzun görevler, 50 milisaniyeden uzun süre boyunca çalışan görevlerdir. Bu, ana iş parçacığının kare hızını veya giriş gecikmesini etkileyecek kadar uzun süre engellediği anlamına gelir.
İzleme için üçüncü taraf hizmetlerini düşünüyorsanız Calibre'ın bu maliyetleri görselleştirmek için sunduğu ana iş parçacığı yürütme zaman çizelgesi görselini de beğeniyorum. Bu görsel, etkileşimi etkileyen uzun görevlere katkıda bulunan hem üst hem de alt görevleri vurgular.
Lighthouse'ta önce/sonra etkisini görmek için ağ isteklerini engelleme
Chrome Geliştirici Araçları, kaynakların kaldırılmasının veya kullanılamamasının etkisini görmek için ağ isteklerinin engellenmesini destekler. Bu, bireysel komut dosyalarının (ör.üçüncü taraf yerleşik öğeleri veya izleyiciler) Toplam Engelleme Süresi (TBT) ve Etkileşime Geçiş Süresi gibi metrikler üzerindeki maliyetini anlamak için yararlı olabilir.
Ağ isteği engelleme, Lighthouse ile de çalışır. Bir sitenin Lighthouse raporuna hızlıca göz atalı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. 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
Videoları, sosyal medya gönderilerini veya widget'ları sayfalara yerleştirmek için üçüncü taraf kaynaklarını kullanmak yaygındı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'ta, YouTube video yerleşimleri gibi hafif bileşenle geç yüklenebilir üçüncü taraf kaynakları önerecek bir denetim bulunur.
Lighthouse'ın, ana iş parçacığını 250 ms'den uzun süre boyunca engelleyen üçüncü taraf kodunu vurguladığını hatırlatmak isteriz. Bu sayede, oluşturdukları içeriğin görüntülenmesi için kaydırma yapılması gerekiyorsa ertelenmeye veya geç yüklemeye değer olabilecek her türlü üçüncü taraf komut dosyasını (Google tarafından yazılanlar dahil) görebilirsiniz.
Core Web Vitals'in ötesinde
Lighthouse ve PageSpeed Insights'ın son sürümleri, Core Web Vitals'ı vurgulamanın yanı sıra kaynak haritalarınızı etkinleştirdiyseniz JavaScript'in yoğun olarak kullanıldığı web uygulamalarının yükleme hızını iyileştirmek için uygulayabileceğiniz somut yönergeler de sunmaya çalışır.
Bunlar arasında, sayfanızdaki JavaScript maliyetini azaltmaya yönelik büyüyen bir denetim koleksiyonu (ör. kullanıcı deneyimi için gerekli olmayabilecek polyfill'lere ve kopyalara olan bağımlılığı azaltma) yer alır.
Core Web Vitals araçları hakkında daha fazla bilgi için Lighthouse ekibi Twitter hesabını ve DevTools'daki yenilikleri takip edin.
Unsplash'taki Mercedes Mehling tarafından oluşturulan lokomotif resim.