Lighthouse'u kullanarak Web Verileri'ni optimize etme

Chrome'un web araçlarıyla kullanıcı deneyimini iyileştirecek fırsatlar bulma.

Addy Osmani
Addy Osmani

Bugün, uygulamanızın hangi özelliklerini tanımlamak için kullanabileceğiniz Lighthouse, PageSpeed ve Geliştirici Araçları'ndaki yeni araç sitenizin Web Verileri'nde nasıl iyileştirilebileceğini öğrenin.

Araçlarla ilgili bilgilerinizi tazelemek gerekirse Lighthouse, web sayfalarının kalitesini iyileştirmek için kullanılan açık kaynaklı, otomatik bir araç. Bunu Chrome geliştirici Araçları'ndaki hata ayıklama araçları paketi herkese açık veya kimlik doğrulama gerektiren web sayfalarında. Lighthouse'u şurada da bulabilirsiniz: PageSpeed Analizler, CI ve WebPageTest.

Lighthouse 7.x, öğelerin görsel olarak daha kolay denetlenmesi için öğe ekran görüntüleri gibi yeni özellikler içerir. Kullanıcı deneyimi metriklerini etkileyen kullanıcı arayüzü bölümleri (ör. hangi düğümlerin düzene katkıda bulunduğu) üst karakter).

Ayrıca, PageSpeed Insights'ta öğe ekran görüntüleri için destek gönderdik. sayfaların tek seferlik performansla ilgili sorunları kolayca tespit edebilir.

Sayfada düzen kaymasına katkıda bulunan DOM düğümünü vurgulayan Öğe Ekran Görüntüleri

Core Web Vitals'ı ölçün

Lighthouse sentetik olarak ölçmek Largest Contentful Paint ve Cumulative" dahil olmak üzere Core Web Vitals metrikleri Düzen Kayması ve Toplam Engelleme Süresi (İlk Giriş Gecikmesi için bir laboratuvar proxy'si). Bu metrikler yükleme, düzen kararlılığı ve etkileşime hazırlık durumunu yansıtır. Örneğin, First Contentful Paint, bu özelliğin geleceğinde Core Web Vitals'ı da burada bulabilirsiniz.

"Metrikler" bölümü bu metriklerin laboratuvar sürümlerini içerir. Tekliflerinizi otomatikleştirmek ve optimize etmek için Kullanıcı deneyiminin hangi yönlerine dikkat etmeniz gerektiğine dair özet bir görünüm olarak derledik.

Lighthouse performans metrikleri
ziyaret edin.
Geliştirici araçları performans panelindeki Web Verileri şeridi
Geliştirici Araçları Performans panelindeki yeni Web Verileri seçeneğinde, yukarıda gösterilen Layout Shift (LS) gibi metrik anlarını vurgulayan parça.

Alan metrikleri; Chrome kullanıcı deneyimindekiler gibi Rapor veya RUM, buna sahip değil Bu özellikler, gerçek kullanıcıların deneyimini yansıttığı için laboratuvar verilerini tamamlayıcı niteliktedir. sahip. Alan verileri, laboratuvarda elde ettiğiniz teşhis bilgisi türlerini sunamaz. Bu nedenle, el ele.

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. Sayfa yükleme sırasında birincil (veya "en büyük") içerik yüklenmiştir ve kullanıcı tarafından görülebilir.

Lighthouse'ta "Largest Contentful Paint öğesi" var olduğunu tespit eden bir denetim en büyük zengin içerikli boyayı kullanabilirsiniz. Ana tarayıcı penceresinde öğenin üzerine geldiğinizde öğe vurgulanır.

Largest Contentful Paint öğesi

Bu öğe bir resimse bu bilgiler, yüklemeyi optimize etmek isteyebileceğiniz öğeler için yararlı bir ipucudur. bu resmin resmi. Lighthouse, aşağıdakileri anlamanıza yardımcı olmak için bir dizi resim optimizasyonu denetimi içerir: Resimleriniz daha iyi sıkıştırılabiliyor, yeniden boyutlandırılabiliyor veya daha optimum modern bir resimle sağlanabiliyor mu? biçimindedir.

Uygun şekilde boyutlandırılmış resim denetimi

Ayrıca LCP'yi de bulabilirsiniz. Yer işareti uygulaması: Annie Sullivan, kırmızı bir dikdörtgenle LCP öğesini yalnızca tek tıklamayla hızlıca tanımlamak için faydalıdır.

LCP öğesini bir yer işareti uygulamasıyla vurgulama

LCP'yi iyileştirmek için geç keşfedilen resimleri önceden yükleyin

Largest Contentful Paint'i iyileştirmek için kritik kahramanınızı önceden yükleyin görsellere dahil edilir. Bir müşterinin teslim tarihini JavaScript paketinin, görselin bulunabilir olması için yüklenmesi gerekir.

En büyük zengin içerikli boyama resmini önceden yükle

LCP resimlerini önceden yükleme hakkında bize sık sorulan birkaç soru var. kısaca değineceğiz.

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ükleyin:

<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 aracılığıyla tanımlanırsa denetim, önceden yükleme fırsatlarını da vurgular mı? merak ediyor musunuz? Evet.

CSS arka planı veya <img> aracılığıyla LCP resmi olarak işaretlenen herhangi bir resim (varsa) adaydır derinliğinde keşfedilebilir.

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:

Ekran dışındaki resimleri ertele

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 resmi "Largest Contentful Paint resmi geç yüklendi" durumu aracılığıyla yanlış şekilde yükleniyorsa Lighthouse bunu vurgular. denetim:

LCP resimlerinin geç yüklenmesinden kaçınma

CLS katkılarını belirleyin

Cumulative Layout Shift bir görsel kararlılık ölçümüdür. Bir sayfanın, sitenizin ne kadar içeriğin farklı bir yeri vardır. Lighthouse'ta, CLS'de hata ayıklamaya yönelik "Büyük postalardan kaçının ve düzen kaymaları".

Bu denetim, sayfadaki değişimlere en çok katkıda bulunan DOM öğelerini vurgular. Nesnede sütununda bu DOM öğelerinin listesini, sağ tarafta ise genel CLS'sini görürsünüz. katkısı var.

Lighthouse&#39;da CLS&#39;ye katkıda bulunan alakalı DOM düğümlerini vurgulayan büyük düzen kaymalarını önleme denetimi

Yeni Lighthouse Öğesi Ekran Görüntüleri özelliği sayesinde denetimde belirtilen temel unsurlar ve daha net bir görünüm için tıklayarak yakınlaştırma:

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

Yükleme sonrası CLS için dikdörtgenlerle kalıcı olarak görselleştirmede değer olabilir CLS'ye en fazla katkıda bulunan öğeleri içerir. Bu, Google Analytics 4'teki üçüncü taraf araçlarında SpeedCurve'un Core Web Vitals kontrol paneli Ben de Defaced's Layout Shift GIF'i Şunun için oluşturma aracı:

düzen kayması oluşturucu, kaymaları vurgular

Düzen kayması sorunlarını site geneline yaymak için Search Console'un Temel Web Verileri raporu. Bu sayede sitemdeki CLS değeri yüksek sayfaların türleri (bu örnekte, hangi şablonun zaman ayırmam gereken kısmi bilgiler):

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

Boyutu olmayan resimlerden CLS'yi tanımlama

Cumulative Layout Shift'in resimlerden kaynaklanmasını sınırlamak için resim ve video öğelerinize genişlik ve yükseklik boyutu özelliklerini ekleyin. Bu yaklaşım, tarayıcının dokümanda doğru miktarda alan ayırmasını sağlar devam edebilirsiniz.

Genişliği ve yüksekliği açıkça belli olmayan resim öğelerini denetle

Bkz. Resimlerde Yüksekliği ve Genişliği Ayarlamak Önemlidir Tekrar resim boyutları ve en boy oranı üzerine düşünmenin önemi hakkında güzel bir yazı.

Reklamlardaki CLS'yi tanımlama

Publisher Ads for Lighthouse, şunları yapmanıza olanak tanır: Katkılar dahil olmak üzere sayfanızdaki reklamların yükleme deneyimini iyileştirmek için fırsatlar bulma kullanıcılar tarafından ne kadar kısa süre içinde kullanılabilir hale getirileceğini belirlemenize yardımcı olabilecek düzen kaymalarını ve uzun görevleri önceliklendirebilirsiniz. İçinde Lighthouse, Topluluk Eklentileri'nden bunu etkinleştirebilirsiniz.

İstek ve düzen kaymasının süresini kısaltmak için sunulan fırsatları vurgulayan, Google Ads ile ilgili denetimler

Unutmayın, reklamlar, Düzen kaymalarına en çok katkıda bulunan kullanıcı hale getirir. 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

Kompozit olmayan animasyonlar, ağır olduğunda alt uç cihazlarda kötü görünebilir JavaScript görevleri, ana iş parçacığını meşgul ediyor. Bu tür animasyonlar, düzen kaymalarına neden olabilir.

Chrome bir animasyonun birleştirilemediğini tespit ederse bunu bir Geliştirici Araçları izlemeye bildirir Lighthouse okuma yapar, bu da animasyon içeren hangi öğelerin birleştirilmediğini listelemesine olanak tanır. neden olmuş olur. Bunları, birleştirilmiş olmayan animasyonlar denetiminden önce gelmelidir.

Bileşik olmayan animasyonlardan kaçınma denetimi

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 bulunduğu andan itibaren (ör. bir web sitesini veya belirli bir düğmeye dokunun ya da JavaScript destekli özel bir kontrol kullanın) bu etkileşime yanıt olarak etkinlik işleyicileri işlemeye başlayabilir. Uzun JavaScript Görevler, 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 yapın

Lighthouse, en uzun görevleri belirlemektir. Bu sayede, Google Haritalar'a en çok katkıda bulunan giriş gecikmesi. Sol sütunda, uzun ana iş parçacığından sorumlu komut dosyalarının URL'sini görebiliriz. görevlerden biridir.

Sağ tarafta, bu görevlerin süresini görebiliyoruz. Hatırlatmış olalım, uzun görevler, 50 milisaniyeden uzun süre çalıştırılır. Bu işlemin, ana iş parçacığını veya giriş gecikmesini etkiler.

İzleme için üçüncü taraf hizmetlerini kullanmayı düşünüyorsanız main-thread çalıştırması zaman çizelgesi görsel Calibre hem üst hem de alt görevleri vurgulayan bu metrik, maliyetlerin ne kadar görevler üzerine düşünmeye başladım.

Ana iş parçacığı yürütme zaman çizelgesi görseli Calibre

Lighthouse'ta öncesi/sonrası etkisini görmek için ağ isteklerini engelleyin

Chrome Geliştirici Araçları, engelleme ağını destekler talepleri . Faydalı olabilir tek tek komut dosyalarının (ör.üçüncü taraf yerleştirmeleri veya izleyiciler) üzerindeki maliyetini anlamak için toplam Engelleme Süresi (TBT) ve Etkileşim Süresi gibi metrikleri ölçer.

Ağ isteği engelleme özelliği Lighthouse ile de çalışır. Şimdi genel hatlarıyla Bir site için Lighthouse raporu. Perf puanı 63/100 ve 400 ms TBT'dir. Kodu ayrıntılı olarak incelemek bu sitenin, Chrome'da gerekli olmayan bir Intersection Observer çoklu dolgusu yüklediğini tespit ettik. Hadi engelle!

Ağ isteği engelleme

Geliştirici Araçları Ağı panelinde bir komut dosyasını sağ tıklayıp Block Request URL düğmesini tıklayarak engelleyebiliriz. somut olarak ortaya koyar. Burada bunu Kavşak Gözlemci çoklu dolgusu için yapacağız.

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

Sonra Lighthouse'u yeniden çalıştırabiliriz. Bu kez performans puanımızın arttığını (70/100) Toplam Engelleme Süresine sahiptir (400 ms => 300 ms).

Maliyetli ağ isteklerini engellemenin ardından yapılan görünüm

Yüksek maliyetli üçüncü taraf yerleştirmeleri cephe ile değiştirme

Google içeriklerine videolar, sosyal medya gönderileri veya widget'lar yerleştirmek için sayfalar. Varsayılan olarak, çoğu yerleştirme hemen hevesle yüklenir ve kullanıcı deneyimini olumsuz yönde etkileyebilir. Üçüncü taraf kritik değilse (ör. kullanıcının sayfayı görmeden önce sayfayı kaydırması gerekir).

Bu tür widget'ların performansını iyileştirmek için kullanılan yöntemlerden biri, bunları kullanıcıya geç yüklemektir. etkileşimi gerekir. Bu işlem, bir widget'ın (dönem) hafif önizlemesi ve tam sürümü yalnızca kullanıcı etkileşimde bulunursa yükler gerçekleşebilir. Lighthouse, üçüncü taraf kaynakları öneren bir denetime sahiptir. YouTube video yerleştirmeleri gibi bir hafif bileşen ile geç yüklenen uygulamalar.

Yüksek maliyetli bazı üçüncü taraf kaynaklarının değiştirilebileceğinin vurgulandığı denetim

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.

Üçüncü taraf JavaScript denetiminin maliyetini azaltma

Core Web Vitals'ın Ötesinde

Core Web Vitals'ı vurgulamanın yanı sıra Lighthouse ve PageSpeed Insights'ın son sürümleri de JavaScript ağırlıklı web'in kullanım hızını iyileştirmek için uygulayabileceğiniz kaynak eşlemeleri açıksa uygulamalar yüklenebilir.

Bu denetimler, sayfanızdaki JavaScript'in maliyetini azaltmak için giderek büyüyen bir denetim koleksiyonunu içerir. Örneğin, Böylece, kullanıcı deneyimi için gerekli olmayabilecek çoklu dolgulara ve yinelemelere olan bağımlılığı azaltmış olursunuz.

Core Web Vitals araçları hakkında daha fazla bilgi için team Twitter hesabı ve Geliştirici Araçları.

Hero resim: Mercedes Mehling Unsplash'i açın.