Chrome'un web araçlarıyla kullanıcı deneyimini iyileştirme fırsatları bulma.
Bugün, sitenizin Web Verileri'nde nasıl iyileştirilebileceğini belirlemeye yardımcı olmak için Lighthouse, PageSpeed ve Geliştirici Araçları'ndaki yeni araç özelliklerini ele alacağız.
Araçları hatırlamak için, Lighthouse web sayfalarının kalitesini iyileştirmeye yönelik açık kaynaklı ve otomatik bir araçtır. Bu aracı Chrome Geliştirici Araçları hata ayıklama araçları paketinde bulabilir ve herkese açık olan veya kimlik doğrulama gerektiren herhangi bir web sayfasında çalıştırabilirsiniz. Lighthouse'u PageSpeed Insights, CI ve WebPageTest'te de bulabilirsiniz.
Lighthouse 7.x, kullanıcı deneyimi metriklerini etkileyen (ör. düzen kaymasına katkıda bulunan düğümler) kullanıcı arayüzünüzün bölümlerinin daha kolay görsel olarak incelenebilmesi 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 de sunduk. Bu sayede, sayfaların bir defalık performans çalışmasıyla ilgili sorunları daha kolay tespit edebilirsiniz.
Önemli Web Verilerini Ölçme
Lighthouse, Largest Contentful Paint, CumulativeLayout Shift ve Toplam Engelleme Süresi (İlk Giriş Gecikmesi için laboratuvar proxy'si) dahil olmak üzere Önemli Web Verileri metriklerini sentetik olarak ölçebilir. Bu metrikler yükleme, düzen kararlılığı ve etkileşimin hazırlık durumunu yansıtır. Önemli Web Verileri'nin geleceğinde vurgulanan First Contentful Paint gibi diğer metrikler de burada yer alır.
Lighthouse raporunun "Metrikler" bölümü, bu metriklerin laboratuvar sürümlerini içerir. Bunu, kullanıcı deneyiminin hangi yönleriyle ilgilenmeniz gerektiğini gösteren özet bir görünüm olarak kullanabilirsiniz.
Chrome Kullanıcı Deneyimi Raporu'nda 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 verileri için değerli bir tamamlayıcıdır. Alan verileri, laboratuvarda elde edeceğiniz teşhis bilgileri sunamaz; bu nedenle bu ikisi birbiriyle bağlantılıdır.
Web Verileri'nde hangi noktaları iyileştirebileceğinizi 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çeriğin yüklendiği ve kullanıcıya görünür olduğu noktayı işaretler.
Lighthouse, hangi öğenin en büyük zengin içerikli boyama olduğunu tanımlayan bir "Largest Contentful Paint öğesi" denetimine sahiptir. Fareyle öğenin üzerine geldiğinizde öğe, ana tarayıcı penceresinde vurgulanır.
Söz konusu öğe bir resimse bu bilgi, resmin yüklenmesini optimize etmek isteyebileceğiniz için yararlı bir ipucudur. Lighthouse, resimlerinizin daha iyi sıkıştırılıp yeniden boyutlandırılamayacağını, yeniden boyutlandırılabilir veya daha uygun bir modern resim biçiminde sunulup sunulamayacağını anlamanıza yardımcı olacak bir dizi resim optimizasyonu denetimi içerir.
Ayrıca, Annie Sullivan'ın LCP Yer İşareti uygulamasını, kırmızı bir dikdörtgene sahip LCP öğesini tek tıklamayla hızlıca tanımlamanızda da yararlı olabilir.
LCP'yi iyileştirmek için geç keşfedilen resimleri önceden yükleyin
Largest Contentful Paint'i iyileştirmek için tarayıcı tarafından geç keşfedilen kritik kahraman görsellerinizi önceden yükleyin. Resmin bulunabilir hale gelmesi için bir JavaScript paketinin yüklenmesi gerekiyorsa geç keşfedilebilir.
LCP görüntülerinin önceden yüklenmesiyle ilgili olarak bize sorduğumuz sık sorulan birkaç soru bulunmaktadır. Bunlar da kısaca ele almaya değer olabilir.
Duyarlı resimleri önceden yükleyebilir misiniz? Evet'e dokunun.
Aşağıda srcset ve sizes kullanılarak belirtildiği gibi duyarlı bir hero resminiz 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çimi mantığının aynısı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 resminin CSS arka planı aracılığıyla tanımlandığı durumlarda denetimde ön yükleme fırsatları da vurgulanır mı? Evet.
CSS arka planı veya <img> aracılığıyla LCP resmi olarak işaretlenen tüm resimler, üç veya daha fazla şelale derinliğinde keşfedilirse adaydır.
Ekran dışı resimleri geç yükleme ve LCP için bunu önleme
İlk kullanıcı deneyimi açısından kritik olmayan ekran dışı resimler geç yüklenebilir. Bu, bir kullanıcı resmi aşağı kaydırana dek bir 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 şu konularda yardımcı olabilir:
Largest Contentful Paint resmi gibi önemli ekranın üst kısmındaki resimler geç yüklenmemelidir. Aksi halde, LCP resminin yüklenmesi gecikebilir. Lighthouse, "Largest Contentful Paint resmi geç yüklendi" denetimi aracılığıyla LCP görüntüsü yanlış yükleniyorsa bunu vurgular:
CLS katkılarını tanımlama
Cumulative Layout Shift bir görsel kararlılık ölçümüdür. Bir sayfa içeriğinin görsel olarak ne kadar yer değiştirdiğini ölçer. Lighthouse, CLS'de hata ayıklamayla ilgili "Büyük düzen kaymalarından kaçınma" adlı bir denetime sahiptir.
Bu denetim, sayfa geçişlerine en çok katkıda bulunan DOM öğelerini vurgular. Soldaki Öğe sütununda bu DOM öğelerinin listesini ve sağ tarafta ise genel CLS katkılarını görürsünüz.
Yeni Lighthouse Element Ekran Görüntüleri özelliği sayesinde, hem denetimde belirtilen önemli öğelerin görsel önizlemesini hem de daha net bir görünüm için tıklayıp yakınlaştırmayı görebiliyoruz:
Yükleme sonrası CLS için CLS'ye en çok katkıda bulunan öğeleri dikdörtgenlerle kalıcı şekilde görselleştirmek faydalı olabilir. Bu, SpeedCurve'un Önemli Web Verileri kontrol paneli gibi üçüncü taraf araçlarda bulabileceğiniz ve aşağıdakiler için Defaced's Layout Shift GIF Oluşturucu'yu kullanmayı sevdiğim bir özelliktir:
Düzen kayması sorunlarının site genelinde nasıl göründüğüne bakmak için Search Console'un Önemli Web Verileri raporundan oldukça fazla yol alıyorum. Bu, sitemde CLS değeri yüksek olan sayfa türlerini görmemi sağlıyor (bu örnekte, zamanımı harcamam gereken şablon bölümlerini tanımlamama yardımcı oluyor):
Boyutu olmayan resimlerden CLS'yi tanımlama
Boyutu olmayan resimlerin neden olduğu Cumulative Layout Shift'i sınırlamak için resimlerinize ve video öğelerinize genişlik ve yükseklik boyut özelliklerini ekleyin. Bu yaklaşım, resim yüklenirken tarayıcının belgede doğru miktarda alan ayırabilmesini sağlar.
Resim boyutlarını ve en boy oranını düşünmenin önemi hakkında iyi bir yazı için Resimlerde Yükseklik ve Genişliği Ayarlama Yine Önemli konusuna bakın.
Reklamlardan CLS'yi belirleme
Publisher Ads for Lighthouse, düzen kaymasına katkılar ve sayfanızın kullanıcılar tarafından ne kadar erken kullanılabilir olacağını tahmin edebilecek uzun görevler de dahil olmak üzere sayfanızdaki reklamların yükleme deneyimini iyileştirecek fırsatlar bulmanızı sağlar. Lighthouse'da bunu Topluluk Eklentileri aracılığıyla etkinleştirebilirsiniz.
Reklamların web'de düzen değişikliklerine en çok katkıda bulunanlardan biri olduğunu unutmayın. Şunları unutmayın:
- Görüntü alanının üst kısmına yapışkan olmayan reklamlar 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
Yoğun JavaScript görevleri ana iş parçacığını meşgul eden animasyonlar, alt uç cihazlarda kendilerini kötü gösterebilir. Bu tür animasyonlar, düzen kaymalarına yol açabilir.
Chrome, bir animasyonun birleştirilemediğini fark ederse bu durumu bir DevTools izine bildirirse Lighthouse "animasyonları" hangi öğelerin neden birleştirilmediğini listeleyerek listeleyebilir. Bunları, Birleştirilmemiş animasyonları engelleme denetiminde bulabilirsiniz.
İlk Giriş Gecikmesi Hata Ayıklama / Toplam Engelleme Süresi / Uzun Görevler
İlk Giriş, kullanıcının bir sayfayla ilk kez etkileşimde bulunduğu zamandan (ör. bir bağlantıyı tıkladığında, bir düğmeye dokunduğunda veya JavaScript destekli özel bir denetim kullandığında) tarayıcının bu etkileşime yanıt olarak etkinlik işleyicileri işlemeye başlayabileceğ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 iş parçacığındaki en uzun görevleri listeleyen bir Uzun ana iş parçacığı görevlerinden kaçınma denetimi içerir. Bu veri, giriş gecikmesine en çok katkıda bulunanları belirlerken faydalı 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örebiliyoruz. Hatırlatalım, Uzun Görevler 50 milisaniyeden daha uzun süren görevlerdir. Bunun, ana iş parçacığını kare hızını veya giriş gecikmesini etkileyecek kadar uzun süre engellediği kabul edilir.
İzleme için üçüncü taraf hizmetlerini kullanmayı 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 çok beğeniyorum. Bu görsel, etkileşimi etkileyen uzun görevlere katkıda bulunan üst ve alt görevleri vurgular.
Lighthouse'da önce/sonra etkisini görmek için ağ isteklerini engelleyin
Chrome Geliştirici Araçları, tek tek kaynakların kaldırılmasının veya kullanılamamasının etkisini görmek için ağ isteklerini engellemeyi destekler. Bu, komut dosyalarının (ör.üçüncü taraf yerleştirmeleri veya izleyiciler) Toplam Engelleme Süresi (TBT) ve Etkileşim Süresi gibi metriklerdeki maliyetini anlamaya yardımcı olabilir.
Ağ isteğini engelleme işlemi de Lighthouse ile çalışır. Bir sitenin Lighthouse raporuna hızlıca bakalım. Performans puanı 63/100'dür ve TBT değeri 400 ms'dir. Kodu incelediğimizde, bu sitenin Chrome'da gerekli olmayan bir Intersection Observer polyfill yüklediğini tespit ettik. Haydi engelleyelim!
DevTools Network panelindeki bir komut dosyasını sağ tıklayıp Block Request URL işaretini tıklayarak engelleyebiliriz. Burada, Intersection Observer polyfill için bunu yapacağız.
Sonra Lighthouse'u yeniden çalıştırabiliriz. Bu kez, Toplam Engelleme Süresi'ne (400 ms => 300 ms) sahip olduğundan, performans puanımızın arttığını (70/100) görebiliriz.
Pahalı üçüncü taraf yerleştirmelerini hafif bileşenle değiştirin
Sayfalara video, sosyal medya yayını veya widget'lar yerleştirmek için üçüncü taraf kaynakları yaygın olarak kullanılır. Varsayılan olarak çoğu yerleştirme, anında yüklenir ve kullanıcı deneyimini olumsuz etkileyen yüksek maliyetli yükleri de beraberinde getirir. Üçüncü taraf kritik öneme sahip değilse (ör. kullanıcının görmeden önce sayfayı kaydırması gerekiyorsa) bu veri israf yaratır.
Bu tür widget'ların performansını artırmanın bir yolu da kullanıcı etkileşiminde bunları geç yüklemektir. Bu, widget'ın hafif bir önizlemesini (bir cephe) oluşturularak yapılabilir ve tam sürümü, yalnızca kullanıcı etkileşimde bulunduğunda yüklenir. Lighthouse'da, YouTube videosu yerleştirmeleri gibi bir ön cepheyle geç yüklenebilen üçüncü taraf kaynakları öneren bir denetim bulunur.
Lighthouse'un, ana ileti dizisini 250 ms.den uzun süre boyunca engelleyen üçüncü taraf kodunu vurgulayacağını hatırlatmak isteriz. Bu durum, oluşturdukları içeriği görüntülemek için kaydırma gerektiriyorsa yükleme işleminin ertelenmesine veya geç yüklenmesi yararlı olabilecek her tür üçüncü taraf komut dosyasını (Google tarafından yazılmış olanlar dahil) ortaya çıkarabilir.
Önemli Web Verileri'nin Ötesinde
Lighthouse ve PageSpeed Insights'ın son sürümleri, Önemli Web Verileri'ni vurgulamanın yanı sıra kaynak haritaları açık olduğunda JavaScript ağırlıklı web uygulamalarının ne kadar hızlı yüklenebileceğini iyileştirmek için izleyebileceğiniz somut bir rehberlik de sağlamaya çalışır.
Bunlar arasında, sayfanızda JavaScript'in maliyetini azaltmak için, kullanıcı deneyimi açısından gerekli olmayabilecek çoklu dolgulara ve kopyalara olan bağımlılığı azaltmak üzere gittikçe artan bir denetim koleksiyonu bulunmaktadır.
Önemli Web Verileri araçları hakkında daha fazla bilgi için Lighthouse ekibinin Twitter hesabına ve DevTools'daki yenilikler'e göz atın.
Mercedes Mehling'in Unsplash'teki hero resmi.