Bugün, sitenizin Web Vitals üzerinde nasıl gelişebileceğini belirlemenize yardımcı olmak için Lighthouse, PageSpeed ve DevTools’daki yeni araç özelliklerini ele alacağız.
Aletler hakkında bir tazeleme olarak, deniz feneri web sayfalarının kalitesini artırmak için açık kaynaklı, otomatik bir araçtır. şurada bulabilirsin Chrome Geliştirme Araçları hata ayıklama araçları paketi ve halka açık veya kimlik doğrulaması gerektiren herhangi bir web sayfasında çalıştırın. Deniz Feneri’ni de burada bulabilirsiniz. Sayfa Hızı Bilgileri, CI Ve Web Sayfası Testi.
Lighthouse 7.x, UI’nizin kullanıcı deneyimi metriklerini etkileyen bölümlerinin (örneğin, düzen değişikliğine hangi düğümlerin katkıda bulunduğu) 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 sorunları için sorunları daha kolay tespit etmenin bir yolunu sağladık.
Önemli Web Verilerini Ölçün #
Lighthouse, En Büyük İçerikli Boyama, Kümülatif Düzen Kayması ve Toplam Engelleme Süresi (İlk Giriş Gecikmesi için bir laboratuvar proxy’si) dahil olmak üzere Önemli Web Verileri ölçümlerini sentetik olarak ölçebilir. Bu ölçümler, yükleme, düzen kararlılığı ve etkileşime hazır olma durumunu yansıtır. First Contentful Paint gibi diğer ölçümler Önemli Web Verilerinin (CWV) geleceği orada da var mı
Lighthouse raporunun “Metrikler” bölümü, bu metriklerin laboratuvar sürümlerini içerir. Bunu, kullanıcı deneyiminin hangi yönleriyle ilgilenmeniz gerektiğine dair özet bir görünüm olarak kullanabilirsiniz.
bulunanlar gibi alan metrikleri Chrome Kullanıcı Deneyimi Raporu veya ROM, bu sınırlamaya sahip değildir ve gerçek kullanıcıların sahip olduğu deneyimi yansıttıkları için laboratuvar verileri için değerli bir tamamlayıcıdır. Saha verileri, laboratuvarda elde ettiğiniz teşhis bilgilerini sunamaz, bu nedenle ikisi el ele gider.
Web Vitals’ta nereleri geliştirebileceğinizi belirleyin #
En Büyük İçerikli Boyama öğesini belirleyin #
LCP, algılanan yükleme deneyiminin bir ölçümüdür. Sayfa yükleme sırasında birincil veya “en büyük” içeriğin yüklendiği ve kullanıcı tarafından görülebildiği noktayı işaretler.
Lighthouse, hangi öğenin en büyük içerikli boyama olduğunu belirleyen bir “En Büyük İçerikli Boyama öğesi” denetimine sahiptir. Öğenin üzerine gelindiğinde ana tarayıcı penceresinde vurgulanır.
Bu öğe bir görüntüyse, bu bilgi, bu görüntünün yüklenmesini optimize etmek isteyebileceğiniz yararlı bir ipucudur. Lighthouse, resimlerinizin daha iyi sıkıştırılıp sıkıştırılamayacağını, yeniden boyutlandırılamayacağını veya daha uygun modern bir resim formatında teslim edilip edilemeyeceğini anlamanıza yardımcı olacak bir dizi resim optimizasyonu denetimi içerir.
Ayrıca bulabilirsiniz LCP Yer İşareti Annie Sullivan tarafından kırmızı bir dikdörtgenle LCP öğesini tek bir tıklamayla hızlı bir şekilde tanımlamak için kullanışlıdır.
LCP’yi iyileştirmek için geç keşfedilen görüntüleri önceden yükleyin #
En Büyük İçerikli Boyama’yı iyileştirmek için, tarayıcı tarafından geç keşfediliyorlarsa, kritik kahraman resimlerinizi önceden yükleyin. Görüntü keşfedilebilir hale gelmeden önce bir JavaScript paketinin yüklenmesi gerekiyorsa geç keşif gerçekleşebilir.
LCP görüntülerinin önceden yüklenmesi hakkında bize sorulan ve kısaca ele almaya değer olabilecek birkaç yaygın soru vardır.
Duyarlı görüntüleri önceden yükleyebilir misiniz? Evet. Diyelim ki kullanılarak belirtildiği gibi duyarlı bir kahraman görüntümüz var. srcset Ve sizes altında:
img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
sayesinde imagesrcset Ve imagesizes özellikler eklendi link tarafından kullanılan aynı görüntü seçim mantığını kullanarak duyarlı bir görüntüyü önceden yükleyebiliriz. srcset Ve sizes:
link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
LCP görüntüsü bir CSS arka planı aracılığıyla tanımlanırsa denetim, ön yükleme fırsatlarını da vurgulayacak mı? Evet.
CSS arka planı aracılığıyla veya LCP görüntüsü olarak işaretlenen herhangi bir görüntü <img> Üç veya daha fazla şelale derinliğinde keşfedilirse adaydır.
Ekran dışı görüntüleri geç yüklemek ve LCP için bundan kaçınmak #
İlk kullanıcı deneyimi için kritik olmayan ekran dışı görüntüler geç yüklenebilir. Bu, kritik varlıklar için ağ çekişmesini azaltabilen ve bazı durumlarda LCP’yi iyileştirebilen bir kullanıcı görüntüyü kaydırana kadar bir görüntünün indirilmesini erteleyen bir tekniktir. bu “Ekran dışı görüntüleri ertele” denetim burada yardımcı olabilir:
En Büyük İçerikli Boyama görüntüsü gibi kritik ekranın üst kısmındaki görüntüler yavaş yüklenmemelidir. Bunu yapmak, LCP görüntüsünün yüklenmesini geciktirebilir. Lighthouse, bir LCP görüntüsünün “En Büyük Contentful Paint görüntüsü tembel olarak yüklendi” denetimi aracılığıyla hatalı bir şekilde geç yüklenip yüklenmediğini vurgulayacaktır:
CLS katkılarını belirleyin #
Kümülatif Düzen Kayması, görsel kararlılığın bir ölçümüdür. Bir sayfanın içeriğinin görsel olarak ne kadar değiştiğini ölçer. Lighthouse, CLS’de hata ayıklamak için “Büyük düzen değişikliklerinden kaçının” adlı bir denetime sahiptir.
Bu denetim, sayfa kaymalarına en çok katkıda bulunan DOM öğelerini vurgular. Soldaki Öğe sütununda, bu DOM öğelerinin listesini ve sağda bunların genel CLS katkısını göreceksiniz.
Yeni Deniz Feneri Öğesi Ekran Görüntüleri özelliği sayesinde, hem denetimde not edilen temel öğelerin görsel bir ön izlemesini görebilir hem de daha net bir görünüm için yakınlaştırmak için tıklatabiliriz:
Yükleme sonrası CLS için şu değer olabilir: ısrarla CLS’ye en çok katkıda bulunan elemanların dikdörtgenlerle görselleştirilmesi. Bu, SpeedCurve gibi üçüncü taraf araçlarda bulacağınız bir özelliktir. Önemli Web Verileri kontrol paneli ve kullanmayı sevdiğim Defaced’ın Layout Shift GIF Oluşturucusu için:
Yerleşim değiştirme sorunlarının site çapında bir görünümü için, Search Console’un Önemli Web Verileri raporu. Bu, sitemdeki yüksek CLS’li sayfa türlerini görmemi sağlıyor (bu durumda zamanımı hangi şablon bölümlerine harcamam gerektiğini kendi kendime belirlememe yardımcı oluyor):
CLS’yi boyutları olmayan görüntülerden tanımlama #
Boyutları olmayan resimlerin neden olduğu Kümülatif Düzen Kaymasını sınırlamak için, resimlerinize ve video öğelerinize genişlik ve yükseklik boyutu özelliklerini ekleyin. Bu yaklaşım, resim yüklenirken tarayıcının belgede doğru miktarda alan ayırabilmesini sağlar.
Görmek Görsellerde Yükseklik Ve Genişlik Ayarı Yine Önemli görüntü boyutları ve en boy oranı hakkında düşünmenin önemi üzerine iyi bir yazı için.
CLS’yi reklamlardan belirleme #
Lighthouse için Yayıncı Reklamları düzen değişikliğine katkılar ve sayfanızın kullanıcılar tarafından ne kadar çabuk kullanılabileceğini zorlayabilecek uzun görevler dahil olmak üzere, sayfanızdaki reklamların yüklenme deneyimini iyileştirme fırsatları bulmanızı sağlar. Lighthouse’ta bunu Topluluk Eklentileri aracılığıyla etkinleştirebilirsiniz.
Reklamların, web’deki düzen değişikliklerine en çok katkıda bulunanlardan biri olduğunu unutmayın. Önemlidir:
- Yapışkan olmayan reklamları görünümü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ştirilmiş olmayan animasyonlardan kaçının #
Birleştirilmemiş animasyonlar, ağır JavaScript görevleri ana iş parçacığını meşgul ediyorsa, alt uç cihazlarda kendilerini sarsıntılı olarak gösterebilir. Bu tür animasyonlar düzen kaymalarına neden olabilir.
Chrome, bir animasyonun birleştirilemediğini keşfederse, Lighthouse’un okuduğu bir DevTools izlemesine bildirir ve animasyonlu hangi öğelerin hangi nedenle birleştirilmediğini listelemesine olanak tanır. Bunları şurada bulabilirsiniz: Birleştirilmiş olmayan animasyonlardan kaçının denetim.
İlk Giriş Gecikmesinde Hata Ayıklama / Toplam Engelleme Süresi / Uzun Görevler #
İlk Girdi, bir kullanıcının bir sayfayla ilk etkileşime geçtiği andan (örneğin, bir bağlantıya tıkladığında, bir düğmeye dokunduğunda veya özel, JavaScript destekli bir kontrol kullandığında) tarayıcının olayı gerçekten işlemeye başlayabildiği ana kadar geçen süreyi ölçer. işleyiciler bu etkileşime yanıt olarak. Uzun JavaScript Görevleri, bu metriği ve bu metriğe ilişkin proxy olan Toplam Engelleme Süresini etkileyebilir.
Lighthouse, ana iş parçacığındaki en uzun görevleri listeleyen Uzun ana iş parçacığı görevlerinden kaçının denetimini içerir. Bu, giriş gecikmesine en kötü katkıda bulunanları belirlemek için yararlı olabilir. Sol sütunda, uzun ana iş parçacığı görevlerinden sorumlu komut dosyalarının URL’sini görebiliriz.
Sağda bu görevlerin süresini görebiliriz. Bir hatırlatma olarak Uzun Görevler, 50 milisaniyeden daha uzun süre yürütülen görevlerdir. Bunun, ana iş parçacığını kare hızını veya giriş gecikmesini etkileyecek kadar uzun süre bloke ettiği kabul edilir.
İzleme için üçüncü taraf hizmetleri göz önüne alındığında, ben de oldukça beğendim ana iş parçacığı yürütme zaman çizelgesi görsel Calibre, etkileşimi etkileyen uzun görevlere katkıda bulunan hem ebeveyn hem de alt görevleri vurgulayan bu maliyetleri görselleştirmek için vardır.
Lighthouse’daki önceki/sonraki etkiyi görmek için ağ isteklerini engelleyin #
Chrome Geliştirici Araçları destekler ağ isteklerini engelleme Tek tek kaynakların kaldırılmasının veya kullanılamamasının etkisini görmek için. Bu, bireysel komut dosyalarının (ör. üçüncü taraf yerleştirmeler veya izleyiciler) Toplam Engelleme Süresi (TBT) ve Etkileşim Süresi gibi metrikler üzerindeki maliyetini anlamak için yararlı olabilir.
Ağ isteği engelleme, Lighthouse ile de çalışır! Bir site için Deniz Feneri raporuna hızlıca göz atalım. Perf puanı 63/100 ve 400ms TBT’dir. Kodu incelerken, bu sitenin Chrome’da gerekli olmayan bir Kesişme Gözlemcisi çoklu dolgusu yüklediğini görüyoruz. Engelleyelim!
DevTools Network panelinde bir komut dosyasına sağ tıklayıp Block Request URL engellemek için Burada bunu Kavşak Gözlemcisi çoklu dolgusu için yapacağız.
Sonra Lighthouse’u yeniden çalıştırabiliriz. Bu sefer performans puanımızın (70/100) ve Toplam Engelleme Süresinin (400ms => 300ms) arttığını görebiliriz.
Pahalı üçüncü taraf yerleştirmelerini bir cepheyle değiştirin #
Sayfalara videolar, sosyal medya gönderileri veya widget’lar yerleştirmek için üçüncü taraf kaynakları kullanmak yaygındır. Varsayılan olarak, çoğu yerleştirme hevesle hemen yüklenir ve kullanıcı deneyimini olumsuz etkileyen maliyetli yüklerle birlikte gelebilir. Üçüncü taraf kritik değilse (örneğin, kullanıcının görmeden önce kaydırması gerekiyorsa), bu israftır.
Bu tür parçacıkların performansını artırmaya yönelik bir model, onları kullanıcı etkileşiminde tembel olarak yükleyin. Bu, parçacığın (bir cephe) hafif bir önizlemesini oluşturarak ve yalnızca bir kullanıcı onunla etkileşimde bulunursa tam sürümü yükleyerek yapılabilir. Lighthouse, üçüncü taraf kaynakları tavsiye edecek bir denetime sahiptir. bir cephe ile tembel yüklüYouTube video yerleştirmeleri gibi.
Bir hatırlatma olarak, Deniz Feneri üçüncü taraf kodunu vurgulayın bu, ana iş parçacığını 250ms’den fazla bloke eder. Bu, oluşturdukları şeyi görüntülemek için kaydırmayı gerektiriyorsa daha iyi ertelemeye veya geç yüklemeye değebilecek her türlü üçüncü taraf komut dosyasını (Google tarafından yazılanlar dahil) açığa çıkarabilir.
Önemli Web Verilerinin Ötesinde #
Lighthouse ve PageSpeed Insights’ın son sürümleri, Core Web Vitals’ı vurgulamanın ötesinde, kaynak haritalarınız açıksa JavaScript ağırlıklı web uygulamalarının ne kadar hızlı yüklenebileceğini geliştirmek için takip edebileceğiniz somut rehberlik sağlamaya çalışır.
Bunlar, kullanıcı deneyimi için gerekmeyebilecek çoklu doldurmalara ve kopyalara olan bağımlılığı azaltmak gibi, sayfanızdaki JavaScript maliyetini düşürmeye yönelik büyüyen bir denetim koleksiyonunu içerir.
Önemli Web Verileri aracı hakkında daha fazla bilgi için gözünüz şu sayfada olsun: Deniz feneri ekibi Twitter hesabı ve Geliştirici Araçları’ndaki yenilikler.
Kahraman resmi ile mercedes mehling Açık Unsplash.