Orbit
Kapsule Orbit Web Vitals
The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…
Orbit Web Vitals sekmesi, sentetik bir testten ziyade gerçek ziyaretçilerinizden toplanan Core Web Vitals'ı raporlar, bu nedenle gördüğünüz şey insanların kendi cihazlarında ve bağlantılarında gerçekten yaşadıkları şeydir.
Web Vitals Nerede Bulunur
Orbit sekmesini açın, projeyi tıklayın ve proje sekmesi şeridinde Observability grubu altında Web Vitals seçeneğini seçin. Sayfa Web Vitals başlığına sahiptir ve kendi başlık numarasını açıklar: p75, Sayfa Deneyimi için kullanılan puandır.
Toplayıcıyı sitenize eklediğiniz kadar, sayfada gösterilecek bir şey yoktur, bu nedenle alttaki kurulum kartından başlayın.
Toplayıcıyı Ekleme
Kurulum kartı, sitenizin <head> öğesine eklemek için size tek satırlık bir komut etiketi verir:
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
Projenizin slug'ı zaten doldurulmuş tam satır sayfada bulunur. Yazıp yazmak yerine oradan kopyalayın.
Komut dosyası, ziyaretçiler her sayfayı terk ederken beş metriği toplar ve bunları tek bir partide raporlar. Kişisel olarak tanımlanabilir bir bilgi yakalanmaz ve hiçbir çerez ayarlanmaz, bu nedenle kendi başına bir onay gerekliliği eklemez.
Veriler, ilk gerçek sayfa görüntülemesinden yaklaşık otuz saniye içinde görünmeye başlar. Bundan sonra hiçbir şey görünmezse, komut dosyası yüklenmemiştir: canlı sitede tarayıcınızın ağ sekmesini kontrol edin.
Ayarlar altında, panel etki alanından yüklenen ve kapanış </body> etiketinden önce gelen Web Analitikleri kartı altında aynı toplayıcının ikinci bir kopyası sunulmaktadır. Her ikisi de çalışır ve her ikisi de aynı verileri besler. Birini kullanın, her iki değil de, aksi takdirde her sayfa görüntülemesi iki kez sayılır.
Beş Metrik
| Metrik | Ölçülen |
|---|---|
| LCP | Largest Contentful Paint: ana içeriğin görünür olması ne kadar sürer |
| INP | Interaction to Next Paint: sayfa girdiye ne kadar hızlı yanıt verir |
| CLS | Cumulative Layout Shift: yükleme sırasında düzen ne kadar atlar |
| FCP | First Contentful Paint: herhangi bir şeyin çizilmesi ne kadar sürer |
| TTFB | Time to First Byte: sunucunun yanıt vermeye başlaması ne kadar sürer |
İlk üçü Core Web Vitals'tır. FCP ve TTFB teşhis amaçlıdır: kötü bir LCP'nin yavaş bir sunucudan mı yoksa yavaş bir sayfadan mı olduğunu söylerler.
p75'i Okuma
Bu sayfadaki her sayı, seçilen pencerede örneklerin ortalaması değil, bir p75'tir. Ziyaretçilerinizin dörtte üçü en azından bu kadar iyi bir deneyime sahipti; dörtte biri daha kötüydü.
Bu seçim önemlidir. Bir ortalama, iyi bağlantılardaki birçok hızlı ziyaretten hakim olur ve kuyruğu gizler. Bir p75 değildir: p75 LCP'niz dört saniye ise, dört ziyaretçiden biri bundan daha uzun bekliyordur.
Her metrik kartı, İyi, İyileştirme gerekli veya Zayıf bir derecelendirmesi ile birlikte, hesaplandığı örnek sayısını taşır. LCP için sayfa sınırları doğrudan belirtir: iyi, 2500ms veya altıdır ve zayıf 4000ms'in üzerindedir.
Küçük örnek sayısına sahip herhangi bir kartı şüpheyle alın. Düzine örnek üzerinde p75 gürültüdür. Sayfanın üstündeki seçici ile pencereyi genişletin veya üzerinde hareket etmeden önce daha fazla trafik için bekleyin.
Eğilim Grafiği
Eğilim grafiği, seçilen pencerede LCP ve CLS için günlük p75'i çizer, iyi ve zayıf eşikleri işaretler. Alt başlık, neyi aradığınızı söyler: düz çizgiler sağlıklıdır.
Belirli bir gündeki adım değişikliği kullanışlı sinyaldir, çünkü neredeyse her zaman bir dağıtım ile uyumludur. Tarihi Dağıtımlar sekmesinde referans yapın veya olayı proje zaman çizelgesinde işaretleyin, böylece bir sonraki sefer açıklanmış olur: Orbit Timeline Annotations konusuna bakın.
Haftalarca yavaş bir yükseliş, genellikle tek bir değişiklik yerine birikmiş sayfa ağırlığı olan farklı bir sorundur.
En İyi Ülkeler
En İyi Ülkeler, kenar başlıklarından türetilen ülkeye göre örnek hacmini gösterir. Analitikten ziyade bağlam için orada bulunur: genel olarak zayıf görünen bir p75 genellikle ana pazarınız için iyidir ve daha küçük, daha uzak bir kitle tarafından hakim olur.
Trafiğinizin çoğu kaynağınızdan çok uzaksa, bu kodunuzu daha da optimize etmek yerine kenarında daha agresif bir şekilde önbelleğe almak için bir argümandır.
Dikkat Gereken Sayfalar
Dikkat gereken sayfalar tablosu, p75'inin her metrik için iyi eşiğin üzerinde ne kadar uzağında olduğuna göre yolları sıralar, her satır için örnek sayısı ile.
Siteyi bir bütün olarak iyileştirmeye çalışmak yerine bu tabloyu aşağı doğru yapın. İki veya üç şablon genellikle sorunun çoğunluğunu açıklar ve bir şablonu düzeltmek, onu kullanan her sayfayı düzeltir.
Yaygın nedenler, kontrol etmeye değer sırada:
- Boyutlandırılmayan veya önceden yüklenmeyen bir kahraman görüntüsü. Bu, geniş marjla en sık LCP sorunudur.
- Ana iş parçacığını bloke eden bir üçüncü taraf komut dosyası. Sohbet widget'ları, etiket yöneticileri ve analitik yığınları olağan şüphelilerdir ve çoğunlukla INP'ye zarar verirler.
- Boyutlandırılmayan görüntü ve gömülü öğeler. Bunlar yüklendikçe düzenin atlanmasına neden olur, bu da tam olarak CLS'nin ölçtüğü şeydir.
- Yavaş kaynak yanıtı. TTFB zayıfsa, yukarıdakilerin hiçbiri sizi kurtaramaz; düzeltme ön uç çalışması değil, önbelleğe alma veya daha hızlı bir yanıttır.
Bu Pencerede Örnek Yok
Sayfada hiçbir örnek olmadığını söylerse, üç şeyden biri doğrudur:
- Toplayıcı eklenmemiştir veya insanların ziyaret ettiği sayfalarda yüklenmemiştir.
- Kısa süre önce eklendi ve henüz hiç kimse ziyaret etmedi.
- Seçilen pencere son trafiğiniz bu yana boşluğundan daha kısadır.
Bunun ücretsiz olduğu için önce pencereyi genişletin, ardından komut dosyasının kaynak kodunuzda değil, canlı sitenin sunulan HTML'sinde mevcut olup olmadığını kontrol edin.
Veriler Ne Kadar Süre Tutulur
Bireysel örnekler, bir gece işi tarafından 30 günlük olduktan sonra otomatik olarak kırpılır. Pencere seçici, tutulan geçmiş yelpazesinde bakmanıza izin verir; onun ötesinde hiçbir arşiv yoktur.
Uzun vadeli bir kayda ihtiyacınız varsa, bir ekran görüntüsü alın veya p75 değerlerini bir noktada yazın, örneğin bir performans projesinden hemen önce ve sonra, böylece daha sonra atıfta bulunabileceğiniz bir öncesi ve sonrası olur.
Genel Durum Sayfasında Vitals
Proje için bir durum sayfası yayınlarsanız, aynı Core Web Vitals özetini ziyaretçilerinize, çalışma süresi ve son dağıtımlarla birlikte gösterebilir. Orbit Status Page konusuna bakın.
Sonra Nereye
- Orbit Project Analytics: derleme tarafı numaraları ve kısaltılmış vitals özeti için.
- Orbit Timeline Annotations: bir adım değişikliğinin arkasındaki dağıtımları ve olayları işaretlemek için.
- Website Speed: genel performans tavsiyesi için.