WordPress için Google Core Web Vitals: Nasıl Test Edilir ve Geliştirilir?

WordPress için Google Core Web Vitals: Nasıl Test Edilir ve Geliştirilir?

Google Core Web Vitals projesini duydunuz ancak WordPress siteniz ile nasıl ilişkilendireceğinizden emin değil misiniz? Ya da Core Web Vitals projesi hakkında hiçbir bilginiz yok ve WordPress için neden önemli olduğunu bilmiyor musunuz?

Her iki durum için de bu makale, Core Web Vitals ve WordPress hakkında bilmeniz gereken her şeyi içeriyor. Yazının sonunda onların ne olduğunu, nasıl test edileceğini, daha iyi bir kullanıcı deneyimi yaratmak için önemli geliştirmeleri ve hatta 2021 yılı ve sonrası için arama sonuçları sıralamanızı nasıl yükseltebileceğinizi öğrenmiş olacaksınız.

Google Core Web Vitals Nedir?

Core Web Vitals internetteki kullanıcı deneyimini geliştirmek ve ölçmek için Google tarafından tasarlanmış yeni bir girişimdir. Core Web Vitals, bir web sayfasının yüklenmesinin ne kadar zaman aldığı gibi genel ölçütlere odaklanmak yerine, WordPress sitenizin kaliteli bir kullanıcı deneyimine ilişkin gösterebildiği performansa odaklanır.

Kullanıcılar bir sayfa ile ne kadar hızlı etkileşimde bulunabildiklerini önemserler. Core Web Vitals metriklerinin ölçmeyi amaçladığı şey de tam olarak budur.

Şu anda üç adet Core Web Vitals mevcuttur: Largest Contentful Paint (yükleme performansı), Cumulative Layout Shift (görsel stabilite), ve First Input Delay (etkileşim).

Google’a göre bunlar iyi bir kullanıcı deneyimi sağlamak için en önemlileri metriklerdir.

Eğer yukarıda bahsedilenlerin kafa karıştırıcı olduğunu düşünüyorsanız ve bir metriği diğeri ile karıştırmaya yatkınsanız endişe edecek hiçbir şey yok! Bütün metrikleri olabilecek en basit şekilde açıklayacağız. Her bir Core Web Vitals’ın tam olarak ne anlama geldiğini ve onun kullanıcı üzerindeki etkisini anlayacağınıza söz veriyoruz.

Bu, puanlarınız ile toplam SEO ve WordPress performansınızı geliştirmenin ilk adımıdır.

Largest Contentful Paint (LCP) Nedir?

Largest Contentful Paint (LCP) sitenizdeki en önemli içeriğin –genellikle sitenizin en önemli kısmı ya da öne çıkan görselidir- ne kadar sürede yüklendiğini ölçer.

Google’a göre sayfanızın ana içeriğinin yüklenme süresi, kullanıcıların sitenizi ne kadar hızlı algıladığını etkiler.

Pratik bir örnek: Bir sayfa açtınız ve üst görseli anında tam olarak göremiyorsunuz. Ne kadar sinir bozucu değil mi? Hatta sayfadan hemen çıkmayı düşünürsünüz. Largest Contentful Paint metriğinin, sitenin toplam yüklenme süresinden daha fazla kullanıcı deneyimiyle yakından ilişkili olmasının nedeni budur.

LCP “elementi” her bir site için farklı olmakla birlikte sitenizin masaüstü ve mobil versiyonları arasında da farklıdır.  LCP elementi bazen bir resim bazense bir yazı olabilir. Bunun net bir örneğini “Core Web Vitals Nasıl Test Edilir ve Ölçülür” kısmında göreceksiniz.

Eğer iyi bir LCP süresinin ne olduğunu merak ediyorsanız, işte size Google’ın belirlediği asgari değerler:

• İyi – 2.5 saniye ya da daha kısa
• İyileştirilmesi Gerekiyor – 4 saniye ya da daha kısa
• Zayıf – 4 saniyeden daha uzun

Cumulative Layout Shift (CLS) Nedir?

Cumulative Layout Shift (CLS) site içeriğinin yüklenirken ne kadar kaydığını veya hareket ettiğini ölçer.

Pratik bir örnek: Bir linke veya butona tıklamak üzeresiniz ancak yüklenme sonrası içerik aşağı kaydığından dolayı tıklayamadınız. Bu sizin için çok kötü bir kullanıcı deneyimi olurdu. Aynı şey geç yüklenmeden dolayı istemeden yanlış butona bastığınız zamanda da geçerli. Buna layout shift (yerleşim planı kayması) deniyor.

Hiç bir haber sitesinde içeriğin site yüklenirken kaydığını ve bu yüzden dolayı okumakta sorun yaşadığınız oldu mu? Aynı şekilde bu da bir yerleşim planı kayma sorunudur.

Cumulative Layout Shift’in kullanıcılar için ne kadar sinir bozucu olduğunu ve site üzerinde ne kadar kötü bir kullanıcı deneyimi yaşadıklarını kendinizden yola çıkarak anlayabilirsiniz.

İşte Google’ın tanımladığı CLS puanları:

• İyi – 0.1 saniye veya daha kısa
• İyileştirilmesi Gerekiyor – 0.25 saniye veya daha kısa
• Zayıf – 0.25 saniyeden daha uzun

First Input Delay (FID) Nedir?

First Input Delay (FID) bir kullanıcının sayfanız üzerindeki etkileşimi (bir butona veya linke tıklamak gibi) ile tarayıcılarının o eylemi işlemeye başlaması arasındaki süreyi ölçer.

Pratik bir örnek: Eğer açılır-kapanır bir metin bölümünü açmak için butona tıklarsanız sitenin ilgili içeriği göstermesi ne kadar sürer?

First Input Delay ağır bir şekilde JavaScript tarafından etkilendiği için muhtemelen anlaması ve optimize etmesi en karmaşık metriktir.

Diyelim ki mobil cihazınızdan bir siteye girdiniz, bir linke tıkladınız ve tıklamanıza karşılık anlık bir yanıt alamadınız. Bu gecikme, mobil cihazınızın o sitedeki büyük bir JavaScript dosyasını işlemekle meşgul olmasından kaynaklanabilir.

İşte Google’ın tanımladığı FID puanları:

• İyi – 0.1 saniye veya daha kısa
• İyileştirilmesi Gerekiyor – 0.3 saniye veya daha kısa
• Zayıf – 0.3 saniyeden daha uzun

Core Web Vitals SEO’yu Bir Sıralama Etmeni olarak Etkiler mi?

2021 Mayıs ayında Google Core Web Vitals’ı bir sıralama etmeni olarak kullanmaya başlayacak. Dolayısıyla bu metrikler SEO performansınızı etkileyebilir.

Core Web Vitals, HTTPS-güvenliği, güvenli tarama, mobil uyumluluk ve zorunlu geçiş reklamı kuralları ile birlikte yeni bir sayfa deneyimi sinyalinin bir parçası olacak.

Core Web Vitals hem masaüstü hem de mobil organik arama sonuçlarını etkileyecek hem de en çok okunanlar bölümünde görünüp görünmeyeceğinizi belirleyecektir. Önceleri, sayfanızın en çok okunanlar bölümünde gözükmesi için sitenizin AMP kullanması gerekiyordu. Google bu değişimi ortaya koyduğunda artık durum böyle olmayacak ve sitenizin en çok okunanlarda gözükmesi için belli ölçüde Core Web Vitals puanına ihtiyaç duyulacak.

Kısacası, eğer SEO performanızı geliştirmek istiyorsanız Core Web Vital puanlarınızı geliştirmeniz mecburi görünüyor.

Core Web Vitals WordPress’te Nasıl Test Edilir & Ölçülür?

Google’ın web geliştiricileri için olan araçları ile PageSpeed Insights’tan Chrome DevTools’a, CrUX Rapor’una ve çok daha fazlasına kadar Core Web Vitals’ı test edebilir ve ölçebilirsiniz.

Aşağıdaki resimde görebileceğiniz gibi Google araçları ile bütün bu üç metriği –Chrome DevTools ve Lighthouse haricinde- ölçebilirsiniz.

Bu iki tool (web aracı), TBT’yi FID için bir vekil olarak kullanıyor. Çünkü FID sadece gerçek kullanıcı verisiyle ölçülebilirken Lighthouse sadece Lab Veri sağlıyor.

Eğer performans araçlarını kullanan biriyseniz, GTmetrix ve WebPageTest araçlarının Lighthouse performans puanlarını kullanmaya başladığını biliyor olmalısınız.

Bu iki web aracının sadece LCP ve CLP puanları sağladığı aklınızda bulunsun.

Gerekçe her zaman aynıdır: First Input Delay sadece gerçek kullanıcı etkileşimi ile ölçülebilir ve bu web araçları Lighthouse Lab Data’ya dayanırlar.

Şimdi en popüler web araçlarından olan PageSpeed Insights ve Search Console’a bakalım: İlki bireysel sayfalardaki problemleri tespit etmenize yardımcı olurken diğeri site genelindeki problemleri teşhis etmenize yardımcı olur.

PageSpeed Insights ile Core Web Vitals Nasıl Test Edilir & Ölçülür?

Sitenizdeki sayfaları Core Web Vitals için test etmenin en kolay yolu Google PageSpeed Insights’tır. Google’ın web araçları üç metrik için de veri sağlar ve onları geliştirmek için spesifik tavsiyelerde bulunur.

Teşhis bölümü daha iyi bir puan almanız için en iyi arkadaşınız olacak!

Sadece URL adresinizi girdikten sonra sitenizin Core Web Vitals metriklerini hem Alan Verisinde (CrUX raporuna dayanır) hem de Lab Verisinde (Lighthouse 6.0’ı temel alır) görebilirsiniz.

Core Web Vitals metrikleri mavi şerit ile işaretlenir. Bu mavi şeritlere sahip olduğunuz sürece Google’ın gerektirdiği alt sınırları karşılıyorsunuz demektir.

Aklınızda tutmanız gereken bazı notlar:

• Core Web Vitals puanları Alan Verisi ve Lab Verisi arasında biraz farklılık gösterebilir.
• Analiz ederken Alan Verisine sahip olmamanız mesele değildir. Bu, yeterli sayıda gerçek kullanıcı verisine sahip olmamanızdan kaynaklanır. Bu durum Core Web Vitals metriklerini etkilemez çünkü PageSpeed Insights sayfa hızı için Lab Verisini göz önünde bulundurur.
• Eğer Lab verisine dahil olmayan First Input Delay için neler olduğunu merak ediyorsanız aradığınız cevabı ilk birkaç satırda bulabilirsiniz.
• Her zaman mobil ve masaüstü sonuçlarının her ikisini de kontrol edin.
• Core Web Vitals metrikleriniz ikisi arasında farklılık gösterir.
• Mobil puanınızın en alakalı ve en zorlayıcı olduğu da aklınızda bulunsun!

Şimdi de Core Web Vitals’ın iyileştirme gerektiren elementlerini tanımlamak için PageSpeed’i nasıl kullanabiliriz ona bakalım.

PageSpeed Insights ile Largest Contentful Paint Elementlerini Keşfetmek

Daha önce açıkladığımız gibi LCP puanı, en anlamlı elementin ziyaretçilerinize gözükmesinin ne kadar sürdüğünü ölçer.

Sitenizin LCP elementini keşfetmek için Diagnostics (Teşhisler) bölümüne gelin ve Largest Contentful Paint element kısmını açın.

Burada Google, LCP’yi ölçmek için kullandığı öğenin HTML’ini görüntüleyecektir.

Örneğin, WordPress.org’un anasayfasının masaüstü versiyonunda LCP element/öğesi bir resimdir:

Ancak, sitenin mobil versiyonunda ise LCP elementi bir alt-başlıktır:

PageSpeed Insights ile Cumulative Layout Shift Elementini Keşfetmek

Kısa bir hatırlatma: Cumulative Layout Shift sitenizdeki içeriklerin nasıl yüklendiği ve yeni bir şey yüklendiğinde kayma olup olmadığı ile ilgili bir metriktir.

Puanınızı etkileyen ve hareket eden bir tekil öğeyi bulmak için Teşhisler bölümünde yer alan “Büyük düzen kaymalarından kaçının” kısmını açın.

PageSpeed Insights ile Total Blocking Time ve First Input Delay’ı Keşfetmek

Hatırlıyorsanız First Input Delay kullanıcı etkileşimi ile alakalıydı. Amaç, link ya da buton gibi bir öğe ile etkileşime geçtikten sonra yanıt almanın ne kadar sürdüğünü ölçmekti.

İşte bu yüzden FID sadece ve sadece gerçek kullanıcı verisine dayanır ve FID puanını Lab Verisinde bulamazsınız. Daha önce de açıklandığı gibi FID sürelerini ancak ve ancak CrUX raporu yeterli bir veri topladıysa Alan Verisi kısmında görebilirsiniz

Alan verisi kısmında Total Blocking Time (TBT) First Input Delay’ın yerini alacaktır.

Total Blocking Time puanını yükseltirseniz, büyük ihtimalle FID puanını da yükseltmiş olursunuz.

Eğer kötü bir TBT puanına sahipseniz, Teşhisler bölümündeki üçüncü-parti kullanımını minimize etme kısmına göz atmalısınız.

Burada, üçüncü-parti kullanımını minimize etmek için neler yapabileceğinizi görebilirsiniz. Bu çözmeniz gereken temel performans sorunlarından biridir.

Search Console’daki Core Web Vitals Raporları Nasıl Okunur?

Eğer sitenizdeki bütün problemleri teşhis etmek istiyorsanız, Google Search Console’daki Core Web Vitals raporunu kullanmalısınız.

Bu rapor CrUX’dan toplanmış gerçek kullanıcı verilerine dayanır. Bu yüzden, raporda yer alan verilerin problemleri bildirmesi biraz zaman alabilir. İşte bu yüzden Lighthouse’dan gelen Lab verileri her zaman değerlidir.

Bununla beraber, Core Web Vitals raporu hem masaüstü hem de mobil için özen gerektiren sayfaları saptamak için harika bir çözümdür.

Raporu açtığınızda URL performanslarını çeşitli kriterlere göre gruplayan Detaylar sekmesini göreceksiniz:

• Durum (Zayıf ya da İyileştirme Gerektiren)
• Metrik Tipi (CLS problemi: 0.25’den daha uzun (masaüstü))
• URL grup (Aynı performanstaki URL’ler listesi)

İyileştirme gerektiren URL’leri düzelttiğinizde Doğrulama sütununa ve “Düzeltmeyi Doğrula” butonuna tıklayabileceksiniz. Ancak sabırlı olun, düzeltme işlemi iki hafta kadar sürebilir.

Chrome Uzantıları ile Core Web Vitals Nasıl Ölçülür?

Eğer kullanışlı bir Chrome Uzantısı kullanmak istiyorsanız, Web Vitals eklentisini tavsiye ederiz.

Web Vitals ile bulunduğunuz herhangi bir sayfanın Core Web Vitals puanını görmenizi mümkün kılar.

Ayrıca Core Serp Vitals eklentisini de denemek isteyebilirsiniz. Bu eklenti ise direkt olarak arama sonuçları listesinde Core Web Vitals puanlarını görmenizi sağlıyor.

WordPress’de Core Web Vitals Nasıl Geliştirilir?

Şimdi önemli bir soruya gelelim: Eğer şuan anda Core Web Vitals metrikleri için Google’ın önerilerini karşılayamıyorsanız, WordPress sitenizin Core Web Vitals puanını nasıl yükseltebilirsiniz?

Her bir metrik için kullanılabilecek stratejiler farklıdır.

WordPress’te Largest Contentful Paint Nasıl Geliştirilir?

Largest Contentful Paint için optimizasyon yapmak hemen hemen bütün bir WordPress performansıyla ile ilgili en iyi uygulama olduğu için en basitidir:

• Sayfa önbelleği kurun. Önbelleğe almak sunucunuzun yanıt verme süresini hızlandırır ve yanıt süresini azaltır (TTFB). WP Rocket’in bunu otomatik olarak aktif ettiğini biliyor muydunuz?
• Tarayıcı önbelleğini optimize edin. Tarayıcının önbellekte tuttuğu statik dosyalar için doğru seçeneği kurmalısınız. Bunu yaparak, PageSpeed Insight önerisi olan “statik dosyaları verimli bir önbellek politikası ile yayınlayın” bölümünü adreslemiş olacaksınız.
• Resimleri opitimize edin. Çoğu zaman LCP öğesi bir resimdir. Resimlerinizi optimize etmek sitenizin hızını arttıracak ve PageSpeed önerileri olan “Uygun boyutlu resimler”, “ekran dışındaki resimleri ertele”, “resimleri next-gen formatında yayınlayın, ve “resimleri verimli bir biçimde kodlayın” gibi iyileştirmeleri yapmış olacaksınız.
• Kodları opitimize edin. Ana içerikten önce yüklenen gereksiz CSS veya Javascript dosyaları yüklenme süresini uzatacaktır. Bu durumu oluşturmayı engelleyen kaynakları kaldırarak çözebilirsiniz. Ayrıca CSS ve Javascript dosyalarını sıkıştırabilir ya da gereksiz CSS dosyalarını silebilirsiniz. Kodları optimize etmek PageSpeed önerisi olan “kritik istek zinciri oluşturmaktan kaçın” bölümü ile ilişkilidir. Yine bütün bu işlerin çoğunu, WP Rocket’in Dosya Optimizasyonu sekmesinden halledebilirsiniz.
• Sunucu düzeyinde sıkıştırma kullanın. Gzip ya da Brotli sıkıştırması kullanmak sitenizin dosya boyutunu azaltacak ve LCP’yi hızlandıracaktır. PageSpeed önerisi olan “Metin sıkıştırmayı etkinleştirin” kısmını bu sayede çözebilirsiniz. WP Rocket otomatik olarak Gzip sıkıştırmasını aktive eder.
• Önemli kaynaklar için ön bağlantılar kullanın. Ön bağlantılar önemli üçüncü-parti bağlantılarını erken kurmanıza olanak tanır. Bu sayede “Anahtar istekleri önceden yükle” ve “Önemli kaynaklara önceden bağlan” önerilerini uygulayabilirsiniz. Bunun için RocketCND servisini kullanabilirsiniz.

Bu uygulamaların çoğunu yerine getirmenin en kolay yolu WP Rocket eklentisidir. WP Rocket otomatik olarak sayfa önbelleğini ve sunucu düzeyindeki sıkıştırmaları aktif ettiğiniz gibi çalıştırır. Bununla birlikte her biri LCP süresini iyileştirmeye yarayan, sitenizin performans ve kodlarını optimize etmenize yardımcı olan olan birçok diğer özelliğe sahiptir.

WordPress’te Cumulative Layout Shift Nasıl Geliştirilir?

Cumulative Layout Shift’i opitimize etmek sitenizin kodları ile ilgili olduğu için biraz teknik bir meseledir.

İşte en yaygın problemler ve çözümleri:

• Boyutları olmayan resimler – Eğer WordPress editör ile bir resim eklerseniz, WordPress otomatik olarak sizin için boyutları ekleyecektir. Ancak resimleri herhangi bir yere koduyla birlikte manuel olarak ekliyorsanız, boyutları da eklediğinizden emin olun. Bu sayede “ölçekli resimler sunmak” önerisini yerine getirmiş olacaksınız.
• Boyutsuz reklamlar, embedler ve iframe’lar – tıpkı resimler gibi, boyutsuz yüklenen embedler de sorunlara neden olabilir. Embed kodları eklerken daima boyutları belirlemeyi unutmayın. Ya da reklam ekliyorsanız, her reklam için ayrı bir alan ayırdığınızdan emin olun.
• Web Fontları (FOIT/FOUT) – Eğer özel web fontları kullanıyorsanız, geç yüklenen bir font, “Flash of Invisible Text” (FOIT) ya da Flash of Unstyled Text (FOUT) gibi problemlere neden olabilir. Bunun sonucunda PageSpeed önerisi olan “Web yazı tipi yüklenmesi sırasında metnin görünür halde kalmasını sağlayın” önerisine uymamış olursunuz. Web fontu önyükleme problemini çözmek için ilgili linkteki yönteme göz atabilirsiniz.
• Enjekte Edilmiş / Eklenmiş içerik – Bir kullanıcının eylemine yanıt vermediği sürece, var olan bir içeriğin üzerine dinamik olarak herhangi bir içerik eklemeyin.

WordPress’te First Input Delay Nasıl Geliştirilir?

First Input Delay’ı opitimize etmek, tamamen kodlarla ilgili olduğu için en karmaşık olanıdır. Özellikle tarayıcının kullanıcı eylemlerine hızlı bir biçimde yanıt verebilmesi için yoğun JavaScript çalışmasını sınırlandırmanız gerekmektedir.

Eğer mümkünse gereksiz JavaScript kodlarını kaldırarak başlayabilirsiniz.

Bunu yaparak, PageSpeed’in önerdiği “Kullanılmayan JavaScripti kaldırın”, ve “Ana iş parçacığı çalışmasını en aza indir” kısımları halletmiş olursunuz. WP Rocket tarafından sağlanan Javascript Çalışma Özelliğini Geciktirme ve Javascript Erteleme seçenekleri sayesinde bu problemler ile başa çıkabilirsiniz.

LCP’ye gelince, resimlerinizi ve kodlarınızı optimize etmek, sunucu sıkıştırması ve önemli kaynaklar için ön yükleme kullanmak FID puanınızı yükseltmek için faydalı olabilirler.

Eğer bir yazılımcı değilseniz FID puanını yükseltmek genellikle zordur. İşte bu yüzden WP Rocket kullanmak zamandan ve enerjiden tasarruf etmenizi sağlar. Yine de daha derine inmek istiyorum diyorsanız, Google bu metriği optimize etmenin daha teknik kısımları üzerine iyi bir açıklayıcıya sahip.

Core Web Vitals Puanınız Gelişmiyorsa İşte Size WordPress Performasını Arttıracak İpuçları

PageSpeed Insights önerlerini yerine getirmenize rağmen ve Core Web Vitals dereceniz beklediğiniz kadar iyi değilse ne yapılabilir?

Eğer aşağıdaki ipuçlarını takip ederseniz WordPress sitenizin performanızı iyileştirebilirsiniz. İşte bazı öneriler:

• Hızlı bir hosting sağlayıcısı tercih edin. Hosting, LCP puanı üzerinde ciddi bir rol oynayan sunucunun yanıt verebilme kabiliyetini etkiler. Eğer paylaşımlı bir hosting kullanıyorsanız, iyi bir sunucu performansı almak için dedicated sunucuları düşünebilirsiniz.
• Resim optimizasyonunu önemseyin. Yukarıda da bahsettiğimiz gibi resim optimizasyonu hem LCP hem de FID puanlarını etkiler. Bu puanlar genel PageSpeed skoru ile en alakalı olanlardır.
• Sadece hafif ve temel eklentiler kullanın ve performanslarını optimize edin. WordPress siteler çok fazla eklenti kullanmaya meyillidir. Bu eklentilerin büyük bir bölümü JavaScript dosyalarından dolayı front-end bölümünü etkiler. Artık bildiğiniz gibi JS dosyaları site performansı için çok önemlidir.

Diyelim ki siteniz iletişim formu oluşturmak için bir eklenti kullanıyor. Eklenti sadece bir sayfada kullanılıyor olmasına rağmen, o eklenti bütün bir site için %100 gereksiz olan CSS ve JS dosyaları yükleyecektir.

Eklentileri sadece belli sayfalar için kullanmalısınız. Asset CleanUp ve Perfmatters (Script Yönetme Özelliği) eklentileri sadece ilgili sayfalarda çalışmasını sağlayacak ve bu tür JavaScript dosyası problemlerini çözecektir.

Sayfa oluşturucusundan faydalanın. Sayfa oluşturucunuz dosya optimizasyonlarını yönetmekte size yardımcı olabilir. Bir göz atmanızda fayda var!

Bugün WordPress’te Core Web Vitals için Optimizasyona Başlayın

Artık Core Web Vitals’ın ne anlama geldiğini ve performansı nasıl etkilediğini biliyorsunuz. Puanlarınızı optimize etmenin zamanı geldi!

Hala WP Rocket müşterisi değil misiniz? Zamandan tasarruf edin ve işlerinizi bırakın WP Rocket yapsın! WP Rocket en iyi web performansı uygulamalarının %80’ini otomatik olarak işleyecektir. Hiçbir ayara dokunmak zorunda bile değilsiniz. Core Web Vitals puanlarındaki anlık artışları çıplak gözle dahi görmeniz mümkün.

Dahası, web performansı için kullandığınız eklentiler ile uğraşmayı bırakacaksınız. Hiçbir teknik bilgi gerekmeden muhteşem Google sayfa hızı puanları ve hızlı yüklenme sürelerine erişmek için ihtiyacınız olan tek şey WP Rocket!