Yıllar içinde PageSpeed Insights (PSI), hem saha hem de laboratuvar verileri için tek kaynak haline geldi. gelen bilgileri entegre eder. Chrome Kullanıcı Deneyimi Raporu (CrUX) ve deniz feneri web sitenizin performansını iyileştirmeye yardımcı olan içgörüler sağlamak için tanılama.
Bugün, PSI’ın güncellenmiş bir sürümünü duyurmaktan heyecan duyuyoruz! Hız araçları paketimizde kritik bir unsur olsa da, PSI kod tabanı on yaşındaydı, pek çok eski kod içeriyordu ve yeniden tasarlanmalıydı. Bunu, PSI’da bazen kullanıcıların raporda gezinmesini zorlaştıran arabirimle ilgili sorunları ele almak için bir fırsat olarak kullandık. Öncelikli hedeflerimiz şunlardı:
- Yapay bir ortamdan elde edilen veriler ile sahadaki kullanıcılardan toplanan veriler arasında net bir ayrım yaparak kullanıcı arayüzünü daha sezgisel hale getirin.
- Önemli Web Verileri değerlendirmesinin kullanıcı arayüzünde nasıl hesaplandığını açıkça belirtin.
- PSI’ın görünümünü ve verdiği hissi modernleştirin Materyal Tasarımı.
Bu gönderi, PSI’daki bu yıl içinde piyasaya sürülecek olan yeni özellikleri tanıtıyor.
Ne var ne yok? #
PSI kullanıcı arabiriminin yeniden tasarımı, rapor verilerinin sunumunu iyileştirmeyi ve raporda bulunan verilere açıklık ve ayrıntı düzeyi eklemeyi amaçlar. Yeni kullanıcı arayüzünün daha sezgisel olması amaçlanıyor ve geliştiricilerin sayfaları için laboratuvar ve saha performansı içgörülerini hızla keşfetmelerine yardımcı oluyor. Kullanıcı arayüzündeki temel değişiklikler şunları içerir:
Saha ve laboratuvar verilerinin açık bir şekilde ayrılması #
Alan verilerini laboratuvar verilerinden belirgin şekilde ayırmak için kullanıcı arayüzünü değiştirdik. “Alan Verileri” ve “Laboratuvar verileri” etiketleri, verilerin ne anlama geldiğini ve nasıl yardımcı olabileceğini gösteren metinlerle değiştirilmiştir. Alan verileri bölümünü de en üste getirdik. Şu anda en üstte gösterilen geleneksel laboratuvar tabanlı performans puanı, puanın kaynağıyla ilgili belirsizliği önlemek için Laboratuvar verileri bölümüne taşındı.
Önemli Web Verileri değerlendirmesi #
Daha önce Field Data’da “geçti” veya “başarısız” olarak tek bir kelime olarak görünen Core Web Vitals değerlendirme sonucu, artık ayrı bir simgeyle ayrı bir alt bölüm olarak öne çıkıyor.
Önemli Web Verileri için değerlendirme sürecinde herhangi bir değişiklik olmadığını unutmayın. Önemli Web Verileri ölçümleri FID, LCP ve CLS, sayfa veya kaynak düzeyinde toplanabilir. Üç ölçümün tamamında yeterli veriye sahip toplamalar için, üç ölçümün de 75. yüzdelik dilimleri İyi ise toplama Önemli Web Verileri değerlendirmesini geçer. Aksi takdirde, toplama değerlendirmeyi geçemez. Toplamada yetersiz FID verisi varsa, hem LCP’nin hem de CLS’nin yüzde 75’lik dilimleri İyi ise değerlendirmeyi geçecektir. LCP veya CLS’de yetersiz veri varsa, sayfa veya kaynak düzeyinde toplama değerlendirilemez.
Mobil ve masaüstü performansı için etiketler #
Üst kısımdaki gezinme menüsünü değiştirdik ve rapor sayfasına merkezi olarak mobil ve masaüstü için bağlantılar ekledik. Bağlantılar artık kolayca görülebilir ve verilerin gösterildiği platformu açıkça gösterir. Bunu yapmak, gezinme çubuğunu daha temiz hale getirmeye de yardımcı oldu.
Menşe Özeti #
Kaynaktaki tüm sayfalar için toplu CrUX puanını sağlayan Kaynak Özeti, şu anda bir onay kutusu tıklandığında görünür. Bu rapor bölümünü, Alan Verileri bölümünün altındaki “Kaynak” adlı yeni bir sekmeye taşıdık.
Ek yardımcı bilgiler #
Rapor artık her alanın altında yeni bir bilgi bölümü ve örneklenen verilerle ilgili aşağıdaki ayrıntıları paylaşan laboratuvar kartı içeriyor:
- Veri toplama dönemi
- Ziyaret süreleri
- Cihazlar
- Ağ bağlantıları
- Örnek boyut
- Chrome sürümleri
Bu bilgi, laboratuvar ve saha verileri arasındaki ayrımı geliştirmeli ve daha önce iki veri kaynağının (laboratuvar ve saha) nasıl farklılık gösterebileceğinden emin olmayan kullanıcılara yardımcı olmalıdır.
Görünümü genişlet #
Alan verileri bölümüne detaya inme işlevi ekleyen ve Önemli Web Verileri metrikleri için ayrıntılı ayrıntıları görüntülemenizi sağlayan yeni bir “Görünümü genişlet” özelliğine sahibiz.
sayfa resmi #
Alan verilerinin hemen yanında görünen, yüklenen sayfanın görüntüsünü kaldırdık. Yükleme sırasını gösteren sayfanın görüntüsü ve küçük resimleri laboratuvar verileri bölümünde bulunacaktır.
Güncel ürün belgeleri için şu adresi ziyaret edin: https://developers.google.com/speed/docs/insights/.
web.dev/measure güncellemeleri #
Performans araç kutumuzdaki farklı araçlar arasındaki tutarsızlığı azaltmak için ayrıca web.dev/measure’ı doğrudan PageSpeed Insights API’sı.
Önceden, geliştiriciler hem PSI aracı hem de /measure aracılığıyla raporlar çalıştırıyor ve farklı Lighthouse numaralarını görüyordu. Farklılıkların ana nedenlerinden biri, /measure’ın tüm testleri ABD’den almasıydı (önceden ABD tabanlı bir bulut arka ucuna sahip olması nedeniyle).
/measure aynı API’yi doğrudan PSI kullanıcı arabirimiyle çağırarak, geliştiriciler PSI ve /measure kullanırken daha tutarlı bir deneyim elde edecekler. Kullanıcıların aracı nasıl kullandıklarına bağlı olarak /measure için de birkaç ince ayar yaptık. Bu, /measure için oturum açma deneyiminin kullanımdan kaldırılacağı, ancak en çok kullanılan işlevselliğin (birden çok kategoriyi görme) kullanıma açık olacağı anlamına gelir.
PSI bugün #
Bir adım geriye giderek mevcut PageSpeed Insights raporunun neler sunduğuna bir göz atalım. PSI raporu, ayrı sekmelerde hem mobil hem de masaüstü cihazlar için performans verilerini içerir ve bir sayfayı nasıl geliştirebileceğinize dair önerilerde bulunur. Her durumda raporun temel bileşenleri benzerdir ve aşağıdakilerden oluşur:
Performans Puanı: Performans puanı, PSI raporunun üst kısmında görünür ve genel sayfa performansını özetler. Bu puan koşarak belirlenir deniz feneri toplamak ve analiz etmek laboratuvar verileri sayfa hakkında. 90 ve üzeri puanlar iyi, 50-90 puan arası iyileştirme gerektirir ve 50 puan altı kötü puan olarak kabul edilir.
Alan Verileri: Kaynaklı saha verileri CRUX raporu veri kümesi, gerçek dünyadaki kullanıcı deneyimine ilişkin içgörüler sağlar. Veriler, First Contentful Paint (FCP) gibi ölçümleri içerir ve Önemli Web Verilerini (İlk Giriş Gecikmesi (FID), En Büyük Zengin İçerikli Boyama (LCP) ve Kümülatif Düzen Kayması (CLS) ölçer) ölçer. Metrik değerlerin yanı sıra şunları da yapabilirsiniz: belirli bir metriğin değerinin sırasıyla yeşil, kehribar ve kırmızı çubuklarla gösterilen İyi, İyileştirme Gerekiyor veya Kötü olduğu sayfaların dağılımına bakın.Dağılım ve puanlar, CrUX veri kümesindeki kullanıcılar için sayfa yüklemelerine göre gösterilir. Puanlar son 28 gün için hesaplanır ve yeterli gerçek kullanıcı verisinin bulunmadığı yeni sayfalar için geçerli değildir.
Menşe Özeti: Kullanıcılar üzerine tıklayabilir Menşe Özetini Göster son 28 gün içinde aynı kaynaktan sunulan tüm sayfaların metriklerinin toplu puanını görüntülemek için onay kutusunu işaretleyin.
Laboratuvar Verileri: Lighthouse kullanılarak hesaplanan laboratuvar performans puanı, kontrollü bir ortamda toplandığı için performans sorunlarının giderilmesine yardımcı olur. Rapor, First Contentful Paint, Largest Contentful Paint gibi metrikleri kullanarak performansı gösterir. Hız Endeksi, Kümülatif Düzen Değiştirme, Etkileşim Süresi ve Toplam Engelleme Süresi. Her metrik gol attı ve İyi, Geliştirilmesi Gerekiyor veya Zayıf’ı gösteren bir simgeyle etiketlenmiştir. Bu bölüm, sürüm öncesi performans darboğazları hakkında iyi bir gösterge sağlar ve sorunları teşhis etmeye yardımcı olabilir, ancak gerçek dünya sorunlarını yakalayamayabilir.
denetimler: Bu bölüm, Lighthouse tarafından gerçekleştirilen tüm denetimleri listeler ve iyileştirme fırsatları ve ek teşhis bilgileriyle birlikte başarılı denetimleri listeler.
Mevcut PSI tasarımıyla ilgili zorluklar #
Yukarıdaki ekran görüntüsünde görüldüğü gibi, laboratuvar ve saha verilerinden farklı veri noktaları net bir şekilde izole edilmemiştir ve PSI’da yeni olan geliştiriciler, verilerin bağlamını ve bundan sonra ne yapılması gerektiğini kolayca anlayamayabilir. Bu kafa karışıklığı, PSI raporunun deşifre edilmesiyle ilgili birçok “Nasıl Yapılır” blog yazısı ile sonuçlandı.
Yeniden tasarımla, geliştiricilerin PSI raporu oluşturmaktan bu raporda yer alan içgörülere göre hareket etmeye hızla geçmeleri için raporun yorumlanmasını kolaylaştırmayı umuyoruz.
Daha fazla bilgi edin #
Performans araçları güncellemeleri hakkında daha fazla ayrıntı için şu açılış konuşmasını izleyin: Chrome Geliştirici Zirvesi 2021. PSI’ın çıkış tarihi ve web.dev/measure adresindeki değişiklikler hakkında sizi bilgilendirmeye devam edeceğiz.
Bu makaleyle ilgili geri bildirimleri için Milica Mihajlija, Philip Walton, Brendan Kenny ve Ewa Gasperowicz’e teşekkürler