LCP Nasıl İyileştirilir?

1-İstekleri daha yakın sunuculara yönlendirmek için bir içerik dağıtım ağı (CDN) kullanmak. Kullandığınız CDN performansını görmek için CDNperf sitesinden faydalanabilirsiniz. Karşılaştırmalı olarak performansları gösteriyor.
2-Sunucu yanıtını optimize etmelisiniz.
3-Varlıkların dosya boyutunu en aza indirme
4-Varlıkları yerel olarak önbelleğe almak ve belki de önce yerel sürümü döndürmek için bir service worker script kullanabilirsiniz.
5-Gereksiz üçüncü taraf komut dosyalarını kaldırın.

6-Lazy loading kullanın. Görsellerin yalnızca kullanıcı sayfanızı aşağı kaydırdığında yüklenmesini sağlar. Bu, LCP’ye önemli ölçüde daha hızlı ulaşabileceğiniz anlamına gelir.

7-Büyük sayfa öğelerini kaldırın: Google PageSpeed Insights, sayfanızın LCP’sini yavaşlatan bir öğe olup olmadığını size söyleyecektir.

8. CSS’nizi küçültün: Hacimli CSS, LCP sürelerini önemli ölçüde geciktirebilir . Ayrıca kritik css uygulayın.

Kritik CSS kodlarını tespit etmek için: https://www.sitelocity.com/critical-path-css-generator sayfasını ziyaret edebilir, kritik CSS dosyanızı oluşturabilirsiniz. Sonrasında bu kritik kod dışında kalan CSS kodlarını ertelemeli olarak yükletebilirsiniz.

9. DNS, internetin adres defteridir. TTL’yi artırarak ve küresel olarak dağıtılmış bir DNS hizmeti kullanarak DNS’yi optimize edin. Bunun için ayrıca dns prefetch kod kullanılmasını öneririm.

10. TLS — Güvenli web siteleri, güvenli bir bağlantı oluşturmak için bir veya daha fazla ek gidiş-dönüş gerektirir. Sitenin sertifikasında OCSP zımbalamayı etkinleştirdiğinizden ve sunucunuzun veya CDN’nizin TLSv1.3 desteği için yapılandırıldığından emin olun. Buradan ssl ve tls test yapabilirsiniz.

11. TTFB — Web siteniz için ilk bayta kadar geçen süre, sunucunun yanıtı ne kadar hızlı oluşturabileceğiyle sınırlıdır . Mümkünse, bu bir CDN veya ters proxy’de önbelleğe alınmalıdır. HTML önbelleğe alma mümkün değilse (örneğin, sayfada kişiselleştirme varsa), sunucu ortamınızın sayfaları 100 ms içinde teslim edebildiğinden emin olun.

12. HTML — Açık görünebilir, ancak HTML belgenizin boyutu ve yapısı performans açısından kritiktir. HTML belgesinin sıkıştırılmış ve ağ üzerinden 50kB’nin altında olduğundan emin olun.

13. HTML indirildikten sonra, tarayıcı kritik yoldaki kaynakları bulmak için belgeyi satır satır ayrıştırır. Baştaki CSS ve JavaScript’e çok yüksek öncelik verilir, ardından gövde içindeki resimler göründükleri sırayla indirilir. Tarayıcı ayrıştırıcısı engelleyici bir betik etiketi görürse (yani async ve defer özelliği yoksa), bu betiği alırken, ayrıştırırken ve çalıştırırken yaptığı her şeyi durdurur. Bu nedenle, komut dosyaları, yürütme sırası önemli olmadığında her zaman asenkron olmalıdır veya yürütme sırası önemli olduğunda ertelenmelidir (defer). Ayrıca etkilerini azaltmak için satır içi komut dosyalarını gözden geçirmek de mantıklıdır.

14. LCP, önbellek durumundan bağımsız olarak ölçülür, bu nedenle statik varlıklarınızın (JavaScript, CSS, resimler ve yazı tipleri) tarayıcıda en az bir saat boyunca gibi bir yanıt başlığı ile önbelleğe alınabilmesini sağlayın cache-control: max-age: 3600. Ayrıca metin varlıklarınızın gzip veya brotli ile sıkıştırıldığından emin olun! Sıkıştırma kontrolü için : https://www.giftofspeed.com/gzip-test/

15. Sitenin en büyük öğesi JavaScript’e bağlı olmamalıdır, bu nedenle resim döngüleri ve gömülü video oynatıcılar en iyi şekilde statik resimler ve <video>uygun bir poster resim özelliğine sahip yerel öğelerle değiştirilir . Bir video posteriniz varsa, optimize edildiğinden emin olun ve sayfa yükleme sırasında bant genişliği çekişmesini azaltmak veya preload gibi geçerli bir nitelik kullanın .

16. Masaüstü için ve mobil cihazlar için 1 resim kullanın

Aynı görüntünün varyasyonlarını oluşturmak ve bunları HTML kodunda belirtmek mümkündür . Bu şekilde, ekran boyutuna bağlı olarak, doğru boyutta doğru görüntü görüntülenecektir.

17. Sayfanızın başlatılması sırasında kullanılmayan bazı Javascript ve CSS kaynakları var.

Bu kaynakları devtools sekmesindeki Chrome Geliştirme Araçları ile görebilirsiniz. Size hangi kaynakların yürütüldüğünü ve hangilerinin “ sadece” yüklendiğini söyler .

“ Sadece “ yüklenen kaynaklar daha sonra asycn veya defer özelliğiyle yürütülebilir.

Bu şekilde, ilk öğe daha hızlı yüklenecek ve LCP’niz geliştirilecektir.

18. Css ve Js küçültün. Basit bir işlem olup; bunu yapabilmeniz için oluşturulmuş web siteleri bile bulunmaktadır. https://cssminifier.com/

19. Resimlerinize ve video öğelerinize her zaman boyut özelliklerini ekleyin. Bu yaklaşım, tarayıcının, görüntüler yüklenirken belgede doğru miktarda alan tahsis etmesini sağlar.

20. Http 1.1 protokolünü kullanıyorsanız mutlaka değiştirmeyi düşünün. Http/2 veya Http/3 etkinleştirin. Google botu artık http/2 ile tarama yapıyor.