Rehberler
Tek Sayfa Uygulamalarında Core Web Vitals Rehberi
Tek Sayfa Uygulamaları (SPA), istemci taraflı yönlendirmeler ve ağır JavaScript paketleri nedeniyle Core Web Vitals ölçümlerinde kendine özgü performans zorlukları oluşturur.
CrUX verilerini kullanarak gerçek kullanıcı deneyimini ölçün, LCP süresini sunucu taraflı oluşturma (SSR) ile iyileştirin, uzun görevleri bölerek INP gecikmelerini azaltın ve CLS için kapsayıcı boyutlarını sabitleyin.
SPA mimarisinde sert ve yumuşak gezinme farkı
Resmi Google Core Web Vitals metrikleri (LCP, INP, CLS) ilk belge yükleme sırasında kaydedilir. Bir kullanıcı SPA içinde istemci taraflı yönlendirici aracılığıyla gezindiğinde sayfa tam olarak yenilenmez. İstemci taraflı geçiş sürelerini izlemek için web-vitals kitaplığındaki deneysel yumuşak gezinme API'sini kullanın.
İstemci taraflı oluşturmada LCP darboğazlarını giderme
SPA uygulamalarında ana içerik öğesinin görüntülenmesi için önce megabaytlarca JavaScript indirilmesi gerektiğinden LCP süresi uzar. Sunucu Taraflı Oluşturma (SSR) veya Statik Site Oluşturma (SSG) yöntemlerine geçin. Kritik CSS içeren hafif ilk HTML (<150 KB) sunun ve ana görsele fetchpriority='high' özelliği verin.
Bileşen etkileşimlerinde Interaction to Next Paint (INP) optimizasyonu
INP, kullanıcının tıklama, dokunma veya klavye girişlerine arayüzün ne kadar hızlı yanıt verdiğini değerlendirir. SPA ortamında kullanıcı etkileşimleri genellikle ana iş parçacığını kilitleyen karmaşık bileşen güncellemelerini tetikler. 50 ms üzerindeki uzun görevleri scheduler.yield() ile bölün ve yoğun hesaplamaları Web Worker'lara devredin.
Hidrasyon sırasında Cumulative Layout Shift (CLS) kaymalarını önleme
İstemcinin sunucudan gelen HTML'i devraldığı hidrasyon süreci görsel kararsızlığın başlıca nedenidir. Sunucu HTML yapısı ile bileşen başlangıç durumu farklı olduğunda veya boyutsuz dinamik içerik eklendiğinde sayfa kayar. Tüm dinamik bloklara aspect-ratio veya min-height tanımlayarak yerleşim kaymalarını önleyin.
Laboratuvar ve saha ortamında sürekli performans izleme
İzole laboratuvar testleri, düşük güçlü mobil cihazları ve dalgalı ağ bağlantılarını tam olarak yansıtmaz. Kullanıcıların 75. yüzdelik dilimini takip etmek için web-vitals kütüphanesiyle Gerçek Kullanıcı İzleme (RUM) kurun. Paket boyutunun büyümesini engellemek için CI/CD hattına performans bütçeleri ekleyin.
Performans: HTML teslimi, aktarım boyutu ve potansiyel oluşturma engelleyicileri.
Ücretsiz denetim başlat →