Lighthouse'u kullanarak Web Verileri'ni optimize etme

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.

Sayfadaki düzen değişikliğine katkıda bulunan DOM düğümünü vurgulayan öğe ekran görüntüleri

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.

Lighthouse performans metrikleri
Geliştirici Araçları performans panelindeki Web Vitals şeridi
DevTools Performans panelindeki yeni Web Verileri seçeneği, yukarıda gösterilen düzen kayması (LS) gibi metrik anlarının vurgulandığı bir parça gösterir.

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.

Largest Contentful Paint öğesi

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.

Resimleri uygun şekilde boyutlandırma denetimi

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 öğesini yer işareti ile vurgulama

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.

Largest Contentful Paint resmini önceden yükleme

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 dışındaki görselleri erteleme

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:

LCP resimlerini geç yüklemekten kaçının

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.

CLS&#39;ye katkıda bulunan ilgili DOM düğümlerini vurgulayan Lighthouse&#39;taki büyük düzen kaymalarından kaçının denetimi

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:

Öğe ekran görüntüsünü tıkladığınızda öğe genişletilir.

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:

düzen kayması jeneratörü, kaymaları vurgular

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):

Search Console&#39;da CLS sorunları gösteriliyor

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.

Açıkça belirtilmiş genişlik ve yüksekliği olmayan resim öğeleri için denetim

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.

İstek süresini ve düzen kaymasını azaltma fırsatlarını vurgulayan reklamlarla ilgili denetimler

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.

Birleştirilmemiş animasyonlardan kaçınmak için denetim

İ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.

Uzun ana iş parçacığı görevlerinden kaçınmak için denetim

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.

Calibre&#39;in ana iş parçacığı yürütme zaman çizelgesi görseli

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.

Ağ isteği engelleme

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.

Geliştirici Araçları&#39;nda istek URL&#39;lerini engelleme

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.

Maliyetli ağ isteklerini engellemenin ardından görüntülenen görünüm

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.

Pahalı bazı üçüncü taraf kaynaklarının değiştirilebileceğini vurgulayan denetim

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.

Üçüncü taraf JavaScript denetiminin maliyetini azaltma

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.