Chrome'un web araçlarıyla kullanıcı deneyimini iyileştirecek fırsatlar bulma.
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.
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.
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.
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.
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'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.
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:
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:
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.
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:
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ı 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):
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.
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.
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.
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.
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.
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!
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.
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).
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.
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
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.