Core Web Vitals'ı iyileştirmek: gerçekten işe yarayan sıra

Bir önbellek eklentisini açmak ilk adımdır ve çoğu zaman atılan tek adımdır. Ardından değer “iyileştirilmesi gerekiyor” seviyesine gelir ve orada kalır. Nedeni: üç metrik üç farklı şeyi ölçer ve önbellekleme yalnızca birinde gerçekten işe yarar.

Her biri tek cümleyle: üç değer

Sıra buradan çıkar: önce görseller, sonra betikler, sonra düzen. Önbellekleme en çok sunucu süresine etki eder — yani LCP'nin bir kısmına; INP'ye ise neredeyse hiç.

Adım 1: en büyük görsel

Çoğu sayfada hero görseli LCP adayıdır. Üç şey hemen yardımcı olur, bu sırayla:

1. Gerçekten gereken boyuta küçült — 1200 piksel genişliğindeki bir alanda 4000 piksel genişliğinde bir fotoğraf, tek başına en sık görülen nedendir.
2. Modern bir biçime dönüştür (WebP veya AVIF), eski tarayıcılar için bir yedek biçimle.
3. Lazy-load UYGULAMA. En üstteki görsel hemen yüklenmeli — Lazy-Load burada değeri iyileştirmek yerine kötüleştirir.

Dönüştürmenin nerede yapıldığını kontrol et. Bazı eklentiler bunun için görsellerini üreticinin bir hizmetine gönderir. Bunu istemeyen, yerel olarak dönüştüren bir araca ihtiyaç duyar — o zaman ilk geçiş daha uzun sürer, ama hiçbir şey dışarı çıkmaz.

Adım 2: JavaScript

INP, önbelleklemenin yardımcı olmadığı değerdir. Tarayıcının bir tıklamaya tepki vermesinin ne kadar sürdüğünü ölçer — ve tarayıcıyı tam o anda çalışan betikler bloke eder.

En etkili kaldıraç çıkarıp atmaktır: kimsenin kullanmadığı bir slider; her sayfada bir sohbet penceresi; ikisi fark edilmeyen üç yazı tipi ailesi. Ancak bundan sonra defer, birleştirme ve ilk etkileşime kadar geciktirme işe yarar.

Adım 3: kaymayı durdur

• Her görselin işaretlemede width ve height değerlerine ihtiyacı vardır — o zaman tarayıcı yeri boş tutar
• Gömülü içerikleri sabit yükseklikli bir çerçeveye yerleştir
• Yazı tiplerini dışarıdan sonradan yüklemek yerine yerel olarak sun ve font-display ile yönet
• Çerez banner'larını ve bildirim çubuklarını içeriği itmek yerine üzerine binecek şekilde yerleştir

Ancak ondan sonra: önbellekleme, Minify, Preload

Bir sayfa önbelleği sayfanın oluşturulmasından tasarruf sağlar — sunucu yavaşsa bu çoktur, hızlıysa azdır. Minify bayt kazandırır ve bir optimizasyondan sonra bozulan sayfaların en sık nedenidir. Preload bir rica değil, bir talimattır: fazlası, tam da ilk ihtiyaç duyulan şeyi geri plana iter.

Minify'ı tek tek aç ve her seferinde bir form sayfasını, sepeti ve video içeren bir sayfayı kontrol et. Her şeyi aynı anda açan, hata durumunda on anahtar arasında arama yapar.

Doğru ölçmek

İki ölçüm birbirinden ayrı tutulmalıdır. Bir laboratuvar testi sabit koşullar altında ölçer ve öncesiyle sonrasını karşılaştırmak için iyidir. Saha verileri gerçek cihazları ve bağlantıları olan gerçek ziyaretçilerden gelir — Google'ın sayfayı nasıl değerlendireceğini bunlar belirler.

Bu yüzden: her zaman aynı koşullarla ölç, bir kez değil üç kez; saha verilerinde bir değişikliğin görünmesi ise haftalar sürer. Bir saat sonra bakıp hiçbir şey fark etmeyen, az optimizasyon yapmış değil, fazla erken bakmıştır.

Eklenti ne zaman artık yardımcı olmaz

Hiçbir önbellek eklentisinin daha ileri gidemediği bir sınır vardır: otuz betikli, aşırı yüklenmiş bir sayfa oluşturucu, yüksek temel yüke sahip bir barındırma sağlayıcısı, her sayfada her şeyi yükleyen bir tema. Sunucu yanıtı içerik olmadan bile yavaşsa sorun eklentide değildir.

Sık sorulan sorular