Yakın zamanda duyurulan Web Vitals girişimi, tüm sitelerin web’de harika bir kullanıcı deneyimi sunması için gerekli olan kalite sinyalleri hakkında birleşik rehberlik sağlar. Bunu duyurmaktan mutluluk duyuyoruz Google’ın web geliştiricilerine yönelik tüm popüler araçları artık Önemli Web Verilerinin ölçümünü destekliyor, kullanıcı deneyimi sorunlarını daha kolay tanılamanıza ve düzeltmenize yardımcı olur. Bu içerir deniz feneriSayfa Hızı İçgörüleri, Chrome Geliştirme Araçları, Arama Konsoluweb.dev’in ölçüm aracı, Web Verileri Chrome uzantısı ve yeni(!) Chrome Kullanıcı Deneyimi Raporu API.
Google Arama artık değerlendirme temeli olarak Önemli Web Verilerini içeriyor sayfa deneyimibu metriklerin mümkün olduğunca kullanılabilir ve üzerinde işlem yapılabilir olması önemlidir.
Önemli Web Verileri ile kullanıcı deneyimini optimize etme yolculuğunuza başlamak için aşağıdaki iş akışını deneyin:
- İlgi gerektiren sayfa gruplarını (alan verilerine göre) belirlemek için Search Console’un yeni Önemli Web Verileri raporunu kullanın.
- Çalışması gereken sayfaları belirledikten sonra, bir sayfadaki laboratuvar ve saha sorunlarını teşhis etmek için PageSpeed Insights’ı (Lighthouse ve Chrome UX Raporu tarafından desteklenir) kullanın. PageSpeed Insights (PSI), Search Console aracılığıyla kullanılabilir veya doğrudan PSI’da bir URL girebilirsiniz.
- Sitenizi laboratuvarda yerel olarak optimize etmeye hazır mısınız? Önemli Web Verilerini ölçmek ve tam olarak neyin düzeltileceği konusunda eyleme geçirilebilir rehberlik almak için Lighthouse ve Chrome DevTools’u kullanın. Web Vitals Chrome uzantısı, masaüstünde gerçek zamanlı bir metrik görünümü sağlayabilir.
- Önemli Web Verileri için özel bir panoya mı ihtiyacınız var? Saha verileri için güncellenmiş CrUX Dashboard’u veya yeni Chrome UX Rapor API’sini veya laboratuvar verileri için PageSpeed Insights API’yi kullanın.
- Rehberlik mi arıyorsunuz? web.dev/measure, PSI verilerini kullanarak sayfanızı ölçebilir ve size optimizasyon için önceliklendirilmiş bir dizi kılavuz ve codelab gösterebilir.
- Son olarak, üretimde bir değişikliği devreye almadan önce Core Web Vitals’ta herhangi bir gerileme olmadığından emin olmak için çekme isteklerinde Lighthouse CI kullanın.
Bu girişle birlikte, her araç için özel güncellemelere geçelim!
deniz feneri #
Lighthouse, geliştiricilerin sorunları teşhis etmesine ve sitelerinin kullanıcı deneyimini iyileştirme fırsatlarını belirlemesine yardımcı olan otomatik bir web sitesi denetim aracıdır. Performans ve erişilebilirlik de dahil olmak üzere bir laboratuvar ortamında kullanıcı deneyimi kalitesinin çeşitli boyutlarını ölçer. Lighthouse’un en son sürümü (6.0, Mayıs 2020’nin ortasında yayınlandı) ek denetimler, yeni ölçümler ve yeni oluşturulmuş bir performans puanı içerir.
Lighthouse 6.0, rapora üç yeni ölçüm getiriyor. Bu yeni ölçütlerden ikisi (Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS)), Core Web Vitals’ın laboratuvar uygulamalarıdır ve kullanıcı deneyimini optimize etmek için önemli tanılama bilgileri sağlar. Kullanıcı deneyimini değerlendirme açısından önem taşıyan yeni metrikler, yalnızca ölçülüp rapora dahil edilmekle kalmıyor, aynı zamanda performans puanının hesaplanmasında da dikkate alınıyor.
Lighthouse’a dahil edilen üçüncü yeni ölçüm olan Toplam Engelleme Süresi (TBT), başka bir Önemli Web Verileri ölçümü olan saha ölçümü İlk Giriş Gecikmesi (FID) ile iyi bir şekilde ilişkilidir. Lighthouse raporunda verilen tavsiyelere uymak ve puanlarınıza göre optimizasyon yapmak, kullanıcılarınıza mümkün olan en iyi deneyimi sunmanızı sağlar.
Lighthouse’un desteklediği tüm ürünler, en son sürümü yansıtacak şekilde güncellenir. Deniz Feneri CI Bu da çekme isteklerinde Önemli Web Verilerinizi birleştirilmeden ve dağıtılmadan önce kolayca ölçmenizi sağlar.
Lighthouse’a yapılan son güncellemeler hakkında daha fazla bilgi edinmek için Lighthouse 6.0’daki Yenilikler blog yazımıza göz atın.
Sayfa Hızı Bilgileri #
PageSpeed Insights (PSI), hem mobil hem de masaüstü cihazlarda bir sayfanın laboratuvar ve saha performansını raporlar. Araç, gerçek dünyadaki kullanıcıların sayfayı nasıl deneyimlediğine dair bir genel bakış (Chrome UX Raporu tarafından desteklenmektedir) ve bir site sahibinin sayfa deneyimini nasıl iyileştirebileceğine ilişkin bir dizi eyleme geçirilebilir öneri sağlar (Lighthouse tarafından sağlanır).
PageSpeed Insights ve PageSpeed Insights API’sı ayrıca Lighthouse 6.0’ı arka planda kullanacak şekilde yükseltildi ve artık raporun hem laboratuvar hem de saha bölümlerinde Önemli Web Verilerinin ölçülmesini destekliyor! Önemli Web Verileri, aşağıda gösterildiği gibi mavi bir şeritle açıklanmıştır.
Sırasında Arama Konsolu site sahiplerine ilgilenilmesi gereken sayfa gruplarına ilişkin harika bir genel bakış sağlar; PSI, sayfa deneyimini iyileştirmek için sayfa başına fırsatların belirlenmesine yardımcı olur. PSI’da, sayfanızın tüm Önemli Web Verileri genelinde iyi bir deneyim için gerekli eşikleri karşılayıp karşılamadığını raporun üst kısmında açıkça görebilirsiniz. Önemli Web Verileri değerlendirmesini geçer veya Önemli Web Verileri değerlendirmesini geçemez.
CrUX #
bu Chrome Kullanıcı Deneyimi Raporu (CrUX), milyonlarca web sitesindeki gerçek kullanıcı deneyimi verilerinin halka açık bir veri kümesidir. Tüm Önemli Web Verilerinin saha sürümlerini ölçer. Laboratuvar verilerinin aksine, CrUX verileri şu kaynaktan gelir: kayıtlı kullanıcılar alan içerisinde. Bu verileri kullanan geliştiriciler, gerçek dünyadaki kullanıcı deneyimlerinin kendi ve hatta rakiplerinin web sitelerindeki dağılımını anlayabilirler. Sitenizde RUM olmasa bile, CrUX Önemli Web Verilerinizi değerlendirmeniz için hızlı ve kolay bir yol sağlayabilir. bu BigQuery’de CRUX veri kümesi tüm Önemli Web Verileri için ayrıntılı performans verileri içerir ve kaynak düzeyinde aylık anlık görüntüler halinde sunulur.
Sitenizin kullanıcılarınız için nasıl performans gösterdiğini gerçekten bilmenin tek yolu, bu kullanıcılar siteyi yüklerken ve onunla etkileşimde bulunurken sahadaki performansını gerçekten ölçmektir. Bu tür ölçüme genellikle Gerçek Kullanıcı İzleme veya kısaca RUM denir. Sitenizde RUM olmasa bile, CrUX Önemli Web Verilerinizi değerlendirmeniz için hızlı ve kolay bir yol sağlayabilir.
CrUX API ile tanışın
Bugün duyurmaktan mutluluk duyuyoruz CRUX API’sıaşağıdaki alan metrikleri için geliştirme iş akışlarınızı kaynak ve URL düzeyinde kalite ölçümüyle kolayca entegre etmenin hızlı ve ücretsiz bir yolu:
- En Büyük İçerikli Boya
- Kümülatif Düzen Kayması
- İlk Giriş Gecikmesi
- İlk İçerikli Boya
Geliştiriciler bir kaynağı veya URL’yi sorgulayabilir ve sonuçları farklı form faktörlerine göre segmentlere ayırabilir. API günlük olarak güncellenir ve önceki 28 günlük verileri özetler (aylık olarak toplanan BigQuery veri kümesinin aksine). API aynı zamanda diğer API’miz olan PageSpeed Insights API’ye (günlük 25.000 istek) koyduğumuz aynı esnek genel API kotalarına sahiptir.
Aşağıda kullanan bir demo CRUX API’sı dağıtımlarla birlikte Önemli Web Verileri ölçümlerini görselleştirmek için iyi, iyileştirmeye ihtiyaç varVe fakir:
Gelecek sürümlerde, ek CrUX veri kümesi boyutlarına ve metriklerine erişim sağlamak için API’yi genişletmeyi planlıyoruz.
Yenilenen CRUX Gösterge Tablosu
Yeniden tasarlanan yeni CRUX Kontrol Paneli bir kaynağın zaman içindeki performansını kolayca izlemenize olanak tanır ve artık onu tüm Önemli Web Verileri ölçümlerinin dağılımlarını izlemek için kullanabilirsiniz. Gösterge tablosunu kullanmaya başlamak için şu sayfamıza göz atın: öğretici web.dev’de.
Sitenizin performansını bir bakışta görmeyi daha da kolaylaştırmak için yeni bir Önemli Web Verileri açılış sayfasını kullanıma sunduk. Tüm CRUX araçlarıyla ilgili geri bildirimlerinizi memnuniyetle karşılıyoruz; Düşüncelerinizi ve sorularınızı paylaşmak için bize şu adresten ulaşabilirsiniz: @ChromeUXRaporu Twitter hesabı veya Google Grubu.
Chrome DevTools Performans paneli #
Deneyim bölümünde Düzen Kaydırma olaylarında hata ayıklayın
Chrome Geliştirme Araçları Verim panelin yeni bir Deneyim bölümü Bu, beklenmeyen yerleşim değişikliklerini tespit etmenize yardımcı olabilir. Bu, sayfanızda Kümülatif Mizanpaj Kaymasına katkıda bulunan görsel istikrarsızlık sorunlarını bulmak ve düzeltmek için yararlıdır.
Ayrıntılarını görüntülemek için bir Düzen Kaydırma seçin. Özet sekme. Geçişin nerede gerçekleştiğini görselleştirmek için fareyle Şuradan taşındı: Ve Taşınmak alanlar.
Altbilgideki Toplam Engelleme Süresi ile etkileşim hazırlığı hatalarını ayıklayın
Toplam Engelleme Süresi (TBT) metriği, laboratuvar araçlarında ölçülebilir ve İlk Giriş Gecikmesi için mükemmel bir vekildir. TBT, First Contentful Paint (FCP) ile ana iş parçacığının giriş yanıt verme hızını önleyecek kadar uzun süre engellendiği Etkileşim Süresi (TTI) arasındaki toplam süreyi ölçer. Laboratuvarda TBT’yi iyileştiren performans optimizasyonları, sahada FID’yi iyileştirmelidir.
TBT artık Chrome DevTools’un altbilgisinde gösteriliyor Verim panel sayfa performansını ölçtüğünüzde:
- DevTools’u açmak için “Control+Shift+J” (veya Mac’te “Command+Option+J”) tuşlarına basın.
- Tıkla Verim sekme.
- Tıklamak Kayıt.
- Sayfayı manuel olarak yeniden yükleyin.
- Sayfanın yüklenmesini bekleyin ve ardından kaydı durdurun.
Daha fazla bilgi için bakınız Geliştirici Araçları’ndaki Yenilikler (Chrome 84).
Arama Konsolu #
Yeni Önemli Web Verileri raporu Search Console, CrUX’tan alınan gerçek dünya (saha) verilerine dayalı olarak, sitenizde ilgilenilmesi gereken sayfa gruplarını belirlemenize yardımcı olur. URL performansı duruma, metrik türüne ve URL grubuna (benzer web sayfalarından oluşan gruplar) göre gruplandırılır.
Rapor, üç Önemli Web Verisi metriğini temel alır: LCP, FID ve CLS. Bir URL, bu metrikler için minimum miktarda raporlama verisine sahip değilse, rapordan çıkarılır. Menşeiniz için bütünsel bir performans görünümü elde etmek için yeni raporu deneyin.
Önemli Web Verileri ile ilgili sorunları olan bir sayfa türü belirlediğinizde, temsili sayfalar için belirli optimizasyon önerileri hakkında bilgi edinmek üzere PageSpeed Insights’ı kullanabilirsiniz.
web.dev #
web.dev/measure, sayfanızın zaman içindeki performansını ölçmenize olanak tanır ve nasıl iyileştirileceğine ilişkin öncelikli kılavuzlar ve kod laboratuvarları listesi sağlar. Ölçümü, PageSpeed Insights tarafından desteklenmektedir. Ölçüm aracı artık aşağıda gösterildiği gibi Önemli Web Verileri ölçümlerini de desteklemektedir:
Web Verileri uzantısı #
Web Vitals uzantısı, Google Chrome için (masaüstü) üç Önemli Web Verisi metriğini gerçek zamanlı olarak ölçer. Bu, geliştirme iş akışınız sırasında sorunları erkenden tespit etmek ve siz web’de gezinirken Önemli Web Verilerinin performansını değerlendirmek için bir tanılama aracı olarak faydalıdır.
Uzantı artık şu adresten yüklenebilir: Chrome Web Mağazası! Umarız faydalı bulursunuz. Geliştirmeye yönelik her türlü katkıyı ve projenin geri bildirimlerini memnuniyetle karşılıyoruz. GitHub depo.
Hızlı vurgular #
Bu bir sarma! Bundan sonra ne yapabilirsiniz:
- Kullanmak deniz feneri Kullanıcı deneyiminizi optimize etmek ve sahada Önemli Web Verileri ile kendinizi başarıya hazırladığınızdan emin olmak için DevTools’ta.
- Kullanmak Sayfa Hızı Bilgileri laboratuvar ve saha Önemli Web Verileri performansınızı karşılaştırmak için.
- yeniyi dene Chrome Kullanıcı Deneyimi Raporu API’sı kaynağınızın ve URL’nizin son 28 gün içinde Önemli Web Verileri’ne karşı ne kadar iyi performans gösterdiğine kolayca erişmek için.
- Kullan Deneyim DevTools’ta bölüm ve alt bilgi Verim derine dalmak ve belirli Önemli Web Verilerinde hata ayıklamak için panel.
- Kullanmak Search Console’un Önemli Web Verileri raporu kökenlerinizin sahada nasıl performans gösterdiğinin bir özeti için.
- Kullan Web Verileri Uzantısı Önemli Web Verileri’ne karşı bir sayfanın performansını gerçek zamanlı olarak izlemek için.
- Haziran ayında web.dev Live’da Önemli Web Verileri araçlarımız hakkında daha fazla bilgi vereceğiz. Etkinlikle ilgili güncellemeleri almak için kaydolun!
- Elizabeth ve Addy, WebPerf Temizlik Görevlileri tarafından