
Ben neleri detaylıca anlatacağım?
- LCP nedir?
- LCP metriği nasıl kontrol edilir?
- Raporlama ve takibiniz için gsheet ve öneriler
- LCP nasıl iyileştirilir?
Mobil uyumluluk: Sanıyorum artık mobil uyumlu olmayan site kalmamıştır fakat mobil uyumlu olduğunu zanneden site sahipleri var Tüm olay https://search.google.com/test/mobile-friendly buradaki mobil uyumluluk testinde olumlu sonuç almanız değil. Siteniz ayrı bir m. versiyondan yayın yapıyorsa, dinamik mobil deneyim sunuyorsanız masaüstü mobilde farklılıklar olması muhtemeldir. Ya da sitenizi farklı bir JS teknolojisiyle oluşturduysanız Googleın tarama problemleri olup olmadığını , masaüstünde sunduğunuz içerik , meta etiketleri, görsel alt etiketler, hreflang etiketlerini aynı şekilde Googlea gösterdiğinizden emin olmalısınız. Burası altı oldukça dolu bir konu bu nedenle farklı bir içerikte anlatmak gerek
Güvenli tarama: Kullanıcıların güvenli bir şekilde gezinmesini sağlamak için bir sitede kötü amaçlı yazılım, kimlik avı ve saldırıya uğramış içerik gibi sorunlar olup olmadığını değerlendirir.Https: Bir web sitesi bağlantısının güvenli olup olmadığına ve sitenin önerilen şekilde HTTPS üzerinden sunulup sunulmadığına odaklanır. Burada da önemli bir nokta, https geçişi yaptıysanız ve kalıcı yönlendirmeler sağlamadıysanız eğer indekste http urlleriniz kalmaya devam eder.
Kullanıcı deneyimini etkilemeyen geçiş reklamları: Kullanıcılar için sitede gezinirken içeriğin görünmesini engelleyecek reklamların yer almaması gerekiyor.
Haliyle bu yıl tüm web siteleri bu metriklerinde iyileşme sağlamaya çalışacak şimdiden başlamakta fayda var diyebilirim. 2021 Mayıs için daha zaman var gibi gözükse de bu metriklerde sağlanacak iyileştirmeler bir günde tamamlanabilecek geliştirmeler değil. Ayrıca ne kadar önceden hazır olur ve iyi deneyim sunarsanız sizin için o kadar iyi olacaktır.
Asıl konumuza geçiyorum:
LCP Nedir?
LCP, gerçek bir kullanıcının bakış açısından bir sayfanın yüklenmesinin ne kadar sürdüğüdür. Başka bir deyişle: bir bağlantıya tıklamaktan, ekrandaki içeriğin çoğunu görmeye kadar geçen zamandır. Sayfanın tam yüklenmesini ölçmez. Aradaki farkı anlamalıyız.
En Büyük İçerikli Boyama (LCP), görünüm alanında görünen en büyük görüntünün veya metin bloğunun oluşturma süresini bildirir. 2,5 saniyenin altındaki bir süre iyi, 4,0 saniyenin üzerindeki herhangi bir süre ise zayıf olarak kabul edilir.

- <img> elementler
- <image> içindeki öğeler <svg>
- bir <video>elemanın poster görüntüsü
- CSS url()özelliği kullanılarak yüklenen arka plan resmine sahip bir öğe
- metin düğümleri içeren blok düzeyinde öğeler.
LCP şunlardan etkilenebilir:
- sunucu yanıt süreleri
- kaynak yükleme süreleri
- oluşturmayı engelleyen CSS veya JavaScript
- istemci boyutunda işlem süreleri


Bu metrik kapsamında neyin büyük içerik veya öğe blogu kabul edildiğinin farkında olmalısınız . Boyut, dosya boyutuna değil görüntüleme boyutuna atıfta bulunur .
LCP, yalnızca sayfa yüklemenin üç aşaması tamamlandıktan sonra gerçekleşir:
- HTML teslim edildi ve ayrıştırıldı
- İndirilen, ayrıştırılan ve işlenen kritik yol varlıkları
- İndirilen ve oluşturulan LCP varlığı (resim, video, web yazı tipi vb.)

2. Web vitals extension
Eklediğiniz extension açtığınız her sitenin 3 önemli metriğini gösteriyor. Metriklerden birisi yüksek ve Google idealinde değilse extension kırmızı oluyor eğer hepsi ideal puandaysa yeşil gözüküyor.

Burada ücretsiz bir API edinmeniz gerekiyor. Çok basit işlem API edindikten sonra kopyalayıp yukarıda verdiğim linkte yüklediğiniz extension için giriyorsunuz ve arama sonuçlarınız aşağıdaki gibi oluyor:



Gördüğünüz gibi mobil ve masaüstü raporlarını ayrı şekilde gidişatını görebiliyorsunuz. Open report kısmından hangi urllerde iyileştirilme gerekiyor adımına ilerleyebilirsiniz.


Core Web Vitals Nasıl Raporlanır?
- Datastudio
Raporu buradan kopyalayarak Dosya < rapor ayarları < enter origin URL kısmından kendi istediğiniz siteyi ekleyip raporlarınıza embed edebilirsiniz.

3. Analytics için hazır bir raporlama şablonu buldum. Sadece veri kaynağınızı seçip rapora ulaşabilirsiniz. Aşağıdaki gibi bir ekran göreceksiniz.

Configuration < API access < Pagespeed insights
Aşağıdaki ekran açılacak ve yukarıda bahsetmiş olduğum API anahtarını buraya da yapıştırıp bağlayacaksınız ve bir alt görselde gördüğünüz gibi url bazlı metrikleri alabileceksiniz.


Ya da dilerseniz sitenizin farklı url yapılarını kullanarak bu raporu çalıştırabilirsiniz.

- Bu sheet dökümanını kopyalayın.
- URLS kısmında rakipleriniz veya kendi sitenizin farklı şablona sahip urllerini ekleyin. Mevcutta benim deneme için eklediğim Gittigidiyor, n11, hepsiburada sekmelerini silebilirsiniz. Zaten urlleri girip track web vitals butonuna basınca komut çalıştırılıp eklediğiniz urller sekmeler halinde gelmeye başlayacak.
- İlk sekmedeki URLs kısmında eklediğiniz urller için sheet name sütununa isimleri girin. Verdiğiniz bu isimlerle sekmelere yansıyacaktır.

- Apps komut dosyası kaynak kodu Githubda mevcuttur. Kendi isteğinize göre koda müdahale edebilir ve değiştirebilirsiniz.
- İ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.
- Sunucu yanıtını optimize etmelisiniz.
- Varlıkların dosya boyutunu en aza indirme
- 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.
6. Lazy loading kullanın. Görsellerin yalnızca kullanıcı sayfanızı aşağı kaydırdığında yüklenmesini sağlar. Bu, LCPye ö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 LCPsini yavaşlatan bir öğe olup olmadığını size söyleyecektir.

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. TTLyi artırarak ve küresel olarak dağıtılmış bir DNS hizmeti kullanarak DNSyi 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 CDNnizin 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 proxyde ö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 50kBnin 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 JavaScripte ç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.

15. Sitenin en büyük öğesi JavaScripte 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 LCPniz 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.
Benim farklı kaynaklardan elde ettiğim bilgiler, kendi deneyimlerim doğrultusunda hazırlamış olduğum maddeler bu şekilde. Sizin de LCP ve core web vitals metriklerini iyileştirmek için farklı önerileriniz varsa lütfen benimle paylaşın. Umarım faydalı olmuştur