LCP (Largest Contentful Paint) HTML Element Sorunu

LCP (Largest Contentful Paint) HTML Element sorunu En Büyük İçerikli Boya, FID – First Input Delay – (İlk Giriş Gecikmesi) ve CLS’yi – Cumulative Layout Shift – (Kümülatif Düzen Kaydırma) içeren yeni Core Web Vitals özelliklerinden biridir.

Core web vitals nedir?

Core Web Vitals, Google’ın yeni sıralama faktörünün bir parçasıdır. Core Web Vitals HTML Element sorunu çözümü konusunda sizlere bilgiler vereceğiz.

Site Hız Optimizasyonu Ölçme Aracı

Gerek özel kodlanmış siteler için, gerek bütün CMS yönetimleri (wordpress vs) için yani tüm siteler için kullanabileceğiniz geçerli ve bağımsız bir araç olan, searc konsol ile ilişkisi ve aşkları açık açık belli olan, bunu sergilemekten çekinmeyen Google‘ın optimizasyon performans değerleme ve ölçme aracı pagespeed insight linkini aşağı bırakıyorum. Çoğu arkadaş biliyor olabilir ama hala bilmeyen arkadaşlar illaki vardır.

https://developers.google.com/speed/pagespeed/insights/?hl=TR

Mobil Pagespeed Optimizasyonu

2022’de uygulanacak sayfa deneyimi raporuna etki edecek özellikte bir devrimdir aslında.

LCP (Largest Contentful Paint) HTML Element Sorunu Çözümü, LCP çözümü wordpress eklentisini cache eklentilerini ve önerilerini sizler için önceki yazımızda paylaştık. Dünyada en fazla kullanılan, neredeyse her iki siteden birinin tercih ettiği wordpress eklentilerinden detaylıca bahsettik.

Mobil Pagespeed hız arttırma ve LCP FID ve CLS sorununu çözmek için sizler için WordPress En İyi 5 Cache Eklentisi 2020 yılı ve 2022 yılı için en önemlilerini ve sorununuzu çözebilecek optimizasyon eklentileri için tıklayınız.

Core Web Vitals Değerleri

Core Web Vitals, bir web sayfasının hızını, etkileşimini ve kararlılığını ölçer.

LCP (Largest Contentful Paint) HTML Element sorunu, bir web sayfasının ana içeriğinin veya öğesinin bir cihazda ne kadar hızlı oluşturulduğunun bir ölçüsüdür. Web siteniz bir Google Arama Konsolu profiliyle oluşturulmuşsa, Googlebot‘un LCP’niz hakkında ne düşündüğünü ve FID ve CLS’yi Çekirdek Web Vitals raporunda bulabilirsiniz.

LCP Performans Testi

4 saniyenin üzerindeki LCP’ler kötü performanslıdır. Mümkün mertebe 4 saniye altında olmasına özen gösteriniz.

LCP’niz 4 saniyenin üzerindeyse, raporda Kötü URL olarak rapor edilecektir. Mobil pagespeed ve Masaüstü pagespeed için bir Rapor vardır.Mobil çağda, mobilin önemini kavramış olan Google, mobil hıza önem vermektedir.

(Largest Contentful Paint) HTML Element sorunu Çözümü

LCP’niz yukarıdaki GSC raporunda olduğu gibi zayıfsa, 2022 yılında artık düzeltmek isteyeceksiniz.Buna mecbur bırakılıyoruz kısacası 🙂

Google size sorunla ilgili bir sayfa arketipini temsil eden örnek URL‘ler verecektir. Yani bir sonraki adımınız, iyileştirilip iyileştirilemeyeceğini görmek için sayfanın LCP‘sini değerlendirmektir. Bunu yapmak için önce LCP olan HTML öğesini tanımlamanız gerekir. Bunu yapmak için Chrome Geliştirici Araçlarını kullanabilirsiniz.

LCP’yi Tanımlamak için Chrome Geliştirme Araçlarını Kullanma

Performans sekmesini kullanarak, bize LCP’yi gösterecek olan web sayfasının görüntüsünün bir kaydını çalıştırabiliriz.

• MacOS’ta, CMD SHIFT C’yi kullanarak Chrome Tarayıcıda Chrome Geliştirme Araçlarını açabilirsiniz.
• Cihaz türünü seçtiğinizden emin olun, altında iPhone X‘i seçtim, ayrıca duyarlıyı seçebilir ve boyutları ayarlayabilirsiniz.
• Ardından aşağıda gösterildiği gibi Performans sekmesine tıklayın
• Daha sonra sayfayı yeniden yüklemek ve bir kayıt başlatmak istiyorsunuz. Bunu dairesel bir ok gibi görünen Yeniden Yükle düğmesine tıklayarak yapabilirsiniz .

• Kaydedilen profil yüklenene ve Zamanlamalar satırını ve LCP simgesini bulunana kadar bekleyin.

Artık LCP tarafından ölçülen HTML öğesini bulabilirsiniz:

LCP simgesinin üzerine gelin ve bilgiyle hangi öğenin vurgulandığını görmek için web sayfasını izleyin.

LCP’ye etki eden öğeleri bu şekilde bulabilirsiniz.

İPUCU:

Largest Contentful Paint nasıl geliştirilir?

Not Belirli denetimler aşağıda belirtilen olasılıkla LCP sağladıklarını en; ancak sayfanızın LCP zamanlaması, burada bahsedilmeyen diğer optimizasyonlardan da etkilenebilir.

Aşağıdakiler gibi iyi web geliştirme uygulamalarını dahil ederek LCP zamanlamanızı iyileştirin:

1) Sunucu yanıt süresinin azaltılması

Sunucu yanıt süresinin kısaltılması, kaynakların daha hızlı yüklenmesine ve sayfanızda hızlı bir LCP süresi sağlanmasına yardımcı olur. Burada yapabileceğiniz şeylerden bazıları şunlardır:

• a) İlk sunucu yanıt süresinin azaltılması
• b) Bir İçerik Dağıtım Ağı (CDN) Kullanma
• c) Statik öğeleri verimli bir önbellek politikasıyla sunmak
• d) Önemli üçüncü taraf kökenleriyle erken bağlantılar kurmak

A-İlk sunucu yanıt süresinin azaltılması

2) Oluşturma engelleme davranışını ortadan kaldırmak

Sayfanızdaki oluşturmayı engelleme davranışını ortadan kaldırmak , kaynakların olabildiğince hızlı yüklenmesini sağlar.

3) Resimleri ve videoları optimize etme

Resimleri ve videoları yüklemek için harcanan zamanı azaltmak için sayfanızdaki resim ve video sunumunu optimize edin. Yapabileceğiniz bazı şeyler şunlardır:

• a) Resimleri uygun şekilde boyutlandırma
• b) Görüntüleri verimli bir şekilde kodlama
• c) CSS sprite kullanarak görüntüleri birleştirme
• d) Görüntüleri yeni nesil formatlarda sunmak
• e) Yönergelere uygun video formatlarını kullanmak

Sunucu yanıt süreleri nasıl azaltılır?

Sunucu yanıt sürelerinizi iyileştirmek için birden fazla strateji vardır. Önemli olanlardan bazıları:

1) Uygulama kodunuzu optimize etme (veritabanı sorguları dahil)

Uygulama kodu, web performans optimizasyonu için çok önemlidir.

Şu anda web sitenizin temel mantığıyla uğraşırken geliştiriciden yardım istemenizi şiddetle tavsiye ederiz.

Kod profili oluşturmaya başladığınızda, bazı optimizasyonlar şunları içerir:

• Kod tabanını düzene sokmak, işlevleri daha verimli hale getirmek
• Karmaşık işlemleri azaltma veya kodu yalnızca gerektiğinde yürütülecek şekilde toplama
• Veritabanı sorgularını daha verimli hale getirerek gereksiz sorguları ortadan kaldırır

2) Sunucu tarafı önbelleğe almayı uygulama

Önbelleğe alma, sunucu işlemine sahip olmak ve talep üzerine sayfayı oluşturmak yerine, talep edildiğinde sayfanızın önceden oluşturulmuş bir sürümünü sunma uygulamasıdır.

Sunucu düzeyinde birçok önbellekleme çözümü ve ayrıca WordPress eklentileri gibi CMS’ye özgü önbelleğe alma vardır.

Barındırıcınız zaten sunucu tarafında önbelleğe alma işlemi yapıyor olabilir, bu nedenle açıklığa kavuşturmak için onlara ulaştığınızdan emin olun.

3) Daha fazla CPU veya bellek kaynağı için sunucu donanımını yükseltme

Bütçeniz izin veriyorsa, kaynak kullanımını analiz etmek ve kaynak sunucunun donanım özelliklerini yükseltip yükseltemeyeceğinizi belirlemek için barındırma sağlayıcınızla veya bir geliştiriciyle görüşün.