Temel Düzey - LCP ve CLS Skorları için Öneriler

28/03/2021

Temel Düzey - LCP ve CLS Skorları için Öneriler

Günümüzde özellikle SEO çalışmaları açısından önemi oldukça artan PageSpeed Insights uygulamalarının Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS) öğelerinin basit düzeyde yani profesyonel bilgiye sahip olmayan kişiler için nasıl daha iyi hale getirilebileceğini basit bir şekilde bu yazımda sizlerle paylaşmaya çalışacağım. Önceki aylarda bu iki konuyla ilgili detaylı incelemeleri blog yazılarımda paylaşmıştım; bu yazıları merak edenler için:

Largest Contentful Paint

Cumulative Layout Shift

İlgili kaynaklar incelendiğinde ya da internet üzerinde yer alan makalelerde ve PageSpeed Insights sitesinde LCP ve CLS öğelerinin çok teknik anlatımlara sahip olduğunu ve ileri düzey bilgisi olmayanlar tarafından anlaşılmadığını bana gelen sorular ve yorumlar üzerine tespit ettim. Aslında görünen karışık ve teknik bilgilere rağmen bu iki konunun basit ve çok kolay anlaşılabilen taraflarının olduğunu sizlere anlatmak istedim. Bu yazımda da temel düzey html bilgisi olan ya da aynı şekilde web sitesi yöneten kişilere bu iki öğe için web sitelerinde nasıl güncellemeler yapabilirler çok basit bir şekilde bu yazımda anlatmak istedim.

Öncelikle LCP ve CLS öğelerinin ortaya çıkması, skorlanması ya da değerlendirmesinin ana amacının web sitesinin ziyaretçisine daha fazla fayda sağlaması olduğunu aklınızdan çıkarmayın. Yani bir web sitesi tıklandığında hızlı açılıyor, düzen kaymaları, titremeler olmuyor, kullanıcı istediği içeriğe hızlı bir şekilde ulaşabiliyor ve bunu okuyabiliyorsa sorununuz yok demektir. İşte bu iki değer de en temelinde bu basitçe özetlediğim süreleri ve özellikleri ölçüp web sitenize bir skor veriyor. PageSpeed Insights sitesinde bir web sitesini ya da urlyi ölçümleyebilir ve ilgili skor ve verilere ulaşabilirsiniz. Yine bu site üzerinden geliştirmeniz gerekli unsurlar için öneriler alabilirsiniz. Benzer şekilde Chrome tarayıcısının Geliştirici bölümünden de bu ölçümleri ve önerileri web siteniz için görüntüleyebilirsiniz.

CLS bir web sitesine tıkladığınız andan ilgili web sitesinin tüm elemanlarının yüklenmesinin bittiği ana kadar geçen süreyi ölçen ve bu süreçte oluşan düzen kaymalarını saptayan bir algoritmadır. Örneği şu şekilde verelim: bir haber ilgimizi çekti ve tıkladık, web sayfası açılırken başlık ve hemen altında içeriğini anlık olarak ekranımızda görüntüledik... Lakin başlık ve içerik arasında bir resim olduğunu düşünelim ve biz haberi okumaya başladıktan biraz sonra ilgili resmin yüklemesini tamamladığını hayal edelim. Bu durumda okumaya başladığımız içerik ekranımızın aşağısına doğru kayacak, bizim takibimizi zorlaştıracak ve bizi rahatsız edecektir. Evet işte bu örnekte olumsuz bir kullanıcı deneyimi meydana geldi. Burada bizden istenen esasında ilgili resim alanının ilgili resim yüklenene kadar boş bırakılması ve içeriğin düzen kayması oluşmadan ekranda yerine oturması... Yani geç yüklenecek elemanların yerlerini yükleme bitene kadar sabitlememiz gerekli. Bunu sağlamak için en basit işlem olarak içeriğimizdeki resimlere belirli bir en ve boy vermek bir çözüm olabilir. İlgili alanda bir yükseklik tanımlaması olduğunda o alan o resim yüklenene kadar ona ayrılacak ve düzen kaymalarının önüne geçilecektir. Ek olarak optimize edilmiş görseller kullanmak bu konuda oldukça önemlidir. Yüksek boyutlu resimler kullanmak web sitenizin CLS skorunu düşürecektir. Web sitenizde kullanmış olduğunuz javascript kaynaklarının da web sitenizin CLS skoruna önemli ölçüde etki edeceğini de unutmayın. Bu yüzden gereksiz javascript ve uygulamalardan web sitenizi arındırmanızı öneririm.

Web siteniz ya da içeriğiniz için CLS ölçümü yaptığınızda CLS skoru 0.1'in altında ise çok iyi bir skora sahipsiniz demektir. Eğer bu skor 0.1 ile 0.25 arasında ise biraz geliştirme ile küçük CLS sorunlarınızın üstesinden gelebilirsiniz demektir. Ancak skorunuz 0.25'in üzerinde ise ciddi bir çalışma yaparak web sitenizin CLS skorunu yükseltmeniz gereklidir.

Cumulative Layout Shift

CLS için Örnek Ekran Görüntüsü

CLS Skorunu Kötü Etkileyen Örnek:

Başlık

Örnek içerik alanı...

(Sayfa yüklenirken)
Başlık

Örnek içerik alanı...


(Resim yüklendi)

Gördüğünüz gibi sayfa ilk yükleme esnasında içerik alanı belirdi ve kullanıcı görüntüledi, fakat içerik içerisindeki resim yüklemesini tamamladığında içerik alanı aşağı doğru kaydı... İşte bu olumsuz bir CLS skoru olarak hanemize yazılır. Bu sorunun önüne geçmek için web sitemizde kullandığımız tüm görseller ve videolar için width ve height ölçülerini tanımlamamız gerekli...

Doğru Kullanım Sonucu

Başlık
Görsel yüklenirken

Örnek içerik alanı...

(Sayfa yüklenirken)
Başlık
Görsel yüklendikten sonra

Örnek içerik alanı...

(Resim yüklendi)

Türkçesi En Büyük Zengin İçerikli Boya olarak adlandırılan Largest Contentful Paint en basit hali ile bir web sitesine tıkladığımız andan ilgili sayfanın en geniş boyutlu elemanının yüklenmesi arasında geçen süre olarak belirtilebilir. Daha basit hali ile bir web sayfasına girdiğimizde en son yüklenen eleman en büyük boyuta sahip olan elemandır. Bu genellikle bir resim dosyasıdır. Dolayısı ile Largest Contentful Paint web sayfasının yüklemesinin tamamlandığı ya da kullanıcı için geçerli tüm öğelerin gösterildiği süreyi kapsar. İlgili sürenin 2.5 saniyeyi geçmemesi kullanıcı deneyimi için oldukça önemlidir. Yani ilgili sayfanın 2.5 saniye içerisinde tüm dosyalarının tamamıyla yüklenmiş olması web sitesinin performası açısından oldukça önemlidir. Dolayısı ile burada yapmanız gereken en önemli çalışma web site içeriğinizdeki gereksiz görselleri öncelikli olarak kaldırmanızdır. Daha sonra elde kalan görselleri tinypng.com gibi bir araç ile sıkıştırarak tekrar yüklemenizdir. Web site içeriğinizdeki en büyük boyuta sahip görsel ne kadar az bir boyuta sahip ise ve bu dosyalar ne kadar az ise LCP skorunuz da o kadar iyi olacaktır.

Google kendi resmi kaynaklarında Largest Contentful Paint (LCP)'yi şu şekilde tanımlamış: Kullanıcının URL'yi istediği andan, görüntü alanındaki en büyük görünür içerik öğesi oluşturulana kadar geçen süredir. En büyük öğe genellikle bir resim veya video ya da blok düzeyinde büyük bir metin öğesi olur. Bu, okuyucuya sayfanın gerçekten yüklendiğini bildirdiği için önemlidir.

Bir web sitesinin LCP skoru 2.5 saniyenin altında ise hızlı açılan bir site olarak kabul edilir. Bu süre 2-5 ile 4 saniye arasında ise geliştirilmeli bir değer, 4 saniye üzeri değerler kötü yani yavaş bir değer olarak kabul edilmektedir. Google'ın yaptığı araştırmalar bir web sayfası 2.5 saniyenin altında açıldığında ziyaretçilerini memnun etmektedir. 2.5 saniyenin üzerindeki değerlerde ise ziyaretçiler rahatsız olmakta ve ilgili web sitesini hemen terk etme yüzdesi ciddi bir şekilde artmaktadır. Bu bakımdan kullanıcıların deneyimlerine oldukça önem veren Google için LCP skoru 2.5 saniye altında olan web siteleri arama sonuçlarında da bir adım önde gelmektedirler.

Largest Contentful Paint

Gördüğünüz gibi hem CLS hem de LCP skorları aslında temel olarak web sitesinin hızlı açılmasını sağlamak, kullanıcıları memnun etmek amacıyla belirlenmiş algoritmalardır. Bu açıdan bakarak web sitenizi aşağıdaki temel ve basit önerilerimi dikkate alarak bu öğeler açısından skorlarını hemen yükseltmeniz mümkün olabilecektir.

Web sitenizi hızlandırmak aslında bu yazımın temel özetidir, bunun için çok basit bir şekilde aşağıdakileri web sitenize uygulayabilirsiniz:

  • Türkiye merkezli, kaliteli barındırma hizmeti kullanın. Bu web sitenizin hızlı çalışması için belki de en önemli unsurdur.
  • Web sayfanızda çok fazla sayıda görsel bulundurmayın. Gerektiği kadar ve konuyu özetleyen görseller arasından iyi bir seçim yapın.
  • Kullandığınız görselleri doğru ölçüde kayıt edip, sıkıştırarak kullanın. Bir banner kullanıyorsanız eni 2000px olan görselleri tercih edin ve arkasından tinypng.com bir uygulama ile sıkıştırıp web sitenize yükleyin.
  • Gereksiz javascript kullanımından uzak durun.
  • Javascript ve css dosyalarınızı sıkıştırarak kullanın.
  • Klasik yazı fontlarını tercih edin. Tahoma, Arial gibi... Bu tip fontlar tüm bilgisayarlarda yüklü olduğundan harici bir kaynak kullanmanızı engeller ve web sitenize tasarruf sağlar.
  • Sayfanın ilk yüklemesini yavaşlatan javascript kullanımlarını sayfanın en sonunda sağlayın.
  • Gereksiz animasyon ve hareketlendirmelerden uzak durun. Bu tip uygulamalar web sitenizi yavaşlatır.
  • Web sitenizdeki içerikler yani metinler okunabilir - net olsun. Strong ya da em gibi kodlamaları sadece gerektiğinde kullanın. Metinlerinizde çok farklı renkler kullanmayın. Bir bütünlük halinde tek renk olarak metinlerinizi sunmaya çalışın.
  • Sade ve basit düşünün, karmaşadan uzak durun. Vermek istediğinizi basit ve net bir şekilde sunun.

Gördüğünüz gibi yukarıda sıraladığım maddeler uygulama açısından oldukça basit. Bunları detaylıca inceleyip tüm web sitenize uyguladığınızda LCP ve CLS skorlarınızın hızlı bir şekilde yükseldiğine tanıklık edeceksiniz. Bunları yaptığınız zaman web siteniz kullanıcı memnuniyetini daha fazla sağlayacağı için SEO çalışmalarında da bir adım öne geçeceksiniz.

Konuyla bağlantılı PageSpeed Insights başlıklı yazımı okumak ister misiniz?

Pagespeed Insights skorlarınızı detaylı olarak sorgulayabileceğiniz ve çıkan sonuçlara göre önerilerimi bulabileceğiniz Pagespeed Insights Testi aracım ilginizi çekebilir.

Eğer LCP - CLS konusunda veya SEO çalışmaları için profesyonel destek isterseniz bana ulaşabilirsiniz.

Yorumlar
11/Temmuz/2021 (18:44:24) tarihinde yalın yazdı:
herseyi yaptım ama Speed Index (3,7)bir türlü indiremedim, bir gt-metrix den bakınca performans o kadar düzelmiş gözükmemesinin sebebi nedir? faydalı bilgiler için teşekkürler
Cevaplar
14/Temmuz/2021 (18:46:20) tarihinde Mert Şener yazdı:
Web siteniz ilk tepkiyi çok yavaş veriyor. Muhtemelen gereksiz javascriptler var ya da kullandığınız hosting hizmeti iyi değil. Bunları bir gözden geçirmenizi öneririm. Yazımı beğendinize de sevindim :) Kolay gelsin.
Bu yoruma cevap yaz
21/Nisan/2021 (20:05:22) tarihinde İsmail Kartal yazdı:
Bu değerlerin sağlıklı sonuçlar verdiği bir web sitesinin maliyeti nedir? Web sitesi kişisel blog tarzında olacaktır.
Cevaplar
21/Nisan/2021 (22:37:11) tarihinde Mert Şener yazdı:
Konuyla ilgili İnajans ile iletişime geçmenizi öneririm. Ben e-ticaret ve SEO konularında danışmanlık hizmetini yürütmekteyim. (312) 963 15 01 nolu telefondan bilgi alabilirsiniz. Web sitesi: Web Tasarım
Bu yoruma cevap yaz
29/Mart/2021 (00:35:17) tarihinde Mahmet Ulu yazdı:
Web sitemi yeniden yaptırmak istiyorum. Araştırmalarım sonrasında anladımki bu CLS vb gibi durumların web sitesi ile ilgili oldukça önemi var. Web sitemi yeniden yaptırırken bu değerleri de nasıl ölçebilir ve bunlar beklenene uygun olmasını sağlayabilirim? Web tasarım firması diye arattığımda yüzlerce sonuç karşıma çıkmakta. Acaba hem web sitemi yaptırıp hem de SEO konusunda düzgün bir firma ile çalışma şansına nasıl sahip olurum. Bilgilendirme yaparsanız çok sevinirim.
Cevaplar
29/Mart/2021 (00:39:33) tarihinde Mert Şener yazdı:
Bu konuda öncelikli olarak araştırma yaptığınız firmaların referanslarını incelemenizde fayda var. İlgili referansın arama sonuçlarında nasıl bir konumlandırma aldığını izleyebilirsiniz. Ya da ilgili sitenin hızını kendiniz gözlemleyebilirsiniz... İsterseniz bana da ulaşabilir - telefon numaram: 0(546) 586 74 76 - ve bu konu hakkında size bir web tasarım ve SEO çalışması teklif sunmamı sağlayabilirsiniz.
Bu yoruma cevap yaz
29/Mart/2021 (00:19:20) tarihinde Begum yazdı:
Çok teşekkür ederim. Yine çok faydalı bir makale ile hiçbir yerde bulamayacağınız herkesin anlayabileceği dilde konuyu ele almışsınız...
Cevaplar
29/Mart/2021 (00:24:35) tarihinde Mert Şener yazdı:
Ben teşekkür ederim. Fayda. sağladıysam ne mutlu bana.
Bu yoruma cevap yaz
29/Mart/2021 (00:10:01) tarihinde Hasan Sarı yazdı:
Hızlı çalışan, gereksiz dosya barındırmayan web siteleri o zaman bu skorlardan başarılı not mu alırlar? Doğru mu bu tespit?
Cevaplar
29/Mart/2021 (00:45:34) tarihinde Mert Şener yazdı:
Web sitesi hızlı açılır ve kullanıcı memnun ederse ana amacını yerine getirmiş olur. Google için, SEO çalışmaları için ana beklenen durum budur...
29/Mart/2021 (00:43:51) tarihinde Osman yazdı:
Nasıl yani? her hızlı çalışan web sitesi bu değerlerden başarılı mı not alırlar yok artık, sıkmayın :)
29/Mart/2021 (00:23:24) tarihinde Mert Şener yazdı:
Evet doğru altyapı ile kodlanmış, doğru optimize edilmiş görselleri bulunan ve javascripti normal ölçülerde kullanan bir web sitesi bu skorlarda başarılı olacaktır. Amaç hızlı web sayfaları oluşturmaktır. Bu öğelerin varolması da bununla alakalıdır.
Bu yoruma cevap yaz
29/Mart/2021 (00:06:25) tarihinde Serdar Çolak yazdı:
Çok net ve güzel bir anlatım olmuş, her zamanki gibi eline sağlık hocam. Bu konuda ileri derece bilgi sahibi olmamamıza rağmen bize bir yol gösterdim, tekrar teşekkür ederiz.
Cevaplar
29/Mart/2021 (00:25:07) tarihinde Mert Şener yazdı:
Fayda sağladıysam ne mutlu bana :) Kolaylıklar dilerim.
Bu yoruma cevap yaz
Yorum Yazın
Yorumunuz
Eposta (Yayınlanmayacaktır)
İsim
Web Sitesi

Konuyla alakalı ilginizi çekebilicek içerikler:

Desteğe mi ihtiyacınız Var?

Eticaret ve SEO konularında profesyonel hizmeti bizden alabilirsiniz.

Eğitime mi ihtiyacınız Var?

Online SEO Eğitimi
Kendi siteniz üzerinden örnek anlatımlı 1:1 SEO eğitimi... Detaylar
Online Google ADS Eğitimi
Google ADS hesabınız üzerinden örnek anlatımlı 1:1 Google ADS eğitimi... Detaylar

Mert Şener Kimdir?

Eticaret ve SEO alanında 16 yıllık bir tecrübe ile yüzlerce firmaya hizmet vermiş, profesyonel bir geliştiricidir...