Google Sayfa Deneyimi Nedir? Nasıl İyileştirilir?

Page Experience (Sayfa Deneyimi), kullanıcıların web üzerinde hem mobil cihazlarda hem de masaüstü cihazlardaki sayfa açılış ve içeriğe ulaşabilme deneyimlerini içermektedir. SEO açısından oldukça önemlidir.

Page Experience Unsurları Nelerdir?

Sayfa deneyimi, yukarıda söylediğimiz gibi birçok unsuru içerisinde barındırmaktadır. Bir siteye ait bir sayfanın Page Experience uygunluğuna ölçmek için kullanılan değerler sırasıyla:

Mobil Kullanılabilirliği (Mobile Usability)

Sitemize mobil cihazlar üzerinden giriş sağlayan kullanıcıların site içerisinde gezerken; ulaşmak istediği sonuçlara mobilde rahat ulaşabilmesini ifade etmektedir.

Sitenizin mobil kullanılabilirliğini ölçmek için, Google Search Console ‘mobile usability’ kısmını kullanabilirsiniz.

HTTPS Sunumu

Bir sayfanın Google arama sonuçlarında en iyi sayfa deneyimini sunması için HTTPS güvenlik protokolü ile yüklenmelidir.

Eğer GSC raporunuzda HTTP uyarısı görüyorsanız güvenlik sertifikanız (HTTPS) da sorun olduğu anlamına gelmektedir. Bu konuda çalışma yapmanız gerekecektir.

Core Web Vitals (Site Hızı)

Core Web Vitals, site içerisinde yer alan; ana sayfa, hizmet sayfaları, ürün sayfaları veya blog içerik sayfaları da dahil, sayfaların açılış hızları ile ilgilenmektedir.

Core Web Vitals genel olarak kendi içerisinde 4’e ayrılmaktadır. Bunlar:

• LCP
• CLS
• FID
• FCP

Tüm bu değerler page experience’ e etki etmektedir. Fakat öncelikli olarak FCP ve LCP sayfanın ilk açılışını ifade ettiği için ekstra önemlidir.

LCP, sayfa açılırken kullanıcının önüne çıkan ilk içerik öğesini: FCP ise, sayfa yüklenirken öne çıkan ilk boyalı metni ifade etmektedir. Ama genel olarak birbirini besleyen iki değerdir. 

Bunların yanında CLS ise sayfa içi görsel, text gibi kaymaları işleme alan ve buradaki hataları ayıklayan bir diğer öğedir.

FID, ise diğerlerini besleyecek şekilde, kullanıcının sayfa içerisinde almak istediği aksiyona tarayıcının ne kadar hızlı cevap verdiğiyle ilgilenir.

Page Experience ve Core Web Vitals Ölçüm Araçları

Sayfa deneyimi içerisine giren öğelerden biri core web vitals ın öneminden söz etmiştik.

Sitemizde olası bir sayfa deneyimi veya hız deneyimi hakkındaki sorunları araştırmak ve incelemek için kullanabileceğiniz toollar:

1. Google Search Console üzerinden:

Page Experience, Core Web Vitals ve Mobile Usability kısımlarına bakabilirsiniz.

2. Page Speed Insights
3. GTMetrix
4. WebPageTest
5. Lighthouse (İnspect alanından ulaşabilirsiniz)

Araçlarından ya da ücretsiz- ücretli farklı araçlar üzerinden de kontroller sağlayabilirsiniz. 

Bu noktada en çok hangisini önerirsiniz? Diye sorarsanız, kesinlikle üstte verdiğimiz 5 araç üzerinden ayrı ayrı bakmanızı tavsiye ederiz.

Page Experience İyileştirebilecek Core Web Vitals Uygulamaları

Sayfa deneyimi üzerinde site hızının önemini yukarıda vurgulamıştık. Bununla beraber page experience optimizasyonu yaparken bazı hız sorularını kendimize sormalıyız.

Örneğin:

• LCP ilk öge kullanıcının önüne ne kadar sürede geliyor?
• FID ne kadar sürede etkileşime giriyor?
• CLS sayfa içi ögeler ne kadar stabil duruyor?
• FCP ilk alan ne kadar hızlı geliyor?

Gibi sorularını sormamız gerekmektedir.

Bu soruları sorduktan sonra karşılaşabileceğimiz muhtemel sonuçlar aşağıdaki gibi olacaktır.

Core Web Vitals Nasıl İyileştirilir?

Core Web Vitals değerlerini ve nereden nasıl analiz edeceğimizi öğrendikten sonra karşılaşabileceğimiz muhtemel sorunları ve çözümleri şu şekilde olmalıdır:

Sunucunun Yavaş Yanıt Vermesi

Sunucunun yanıt verme süresini arttırmak için yapabileceğiniz ilk şeylerden birisi kesinlikle içeriklerinizi önbelleğe almaktır. Önbelleğe alma ile, sayfalarınızın statik HTML sürümleri depolanacak ve ziyaretçiler sitenize her eriştiğinde tüm dosyaları baştan yükleme durumunu ortadan kaldırmış olursunuz.

Oluşturmayı Engelleyen Kaynakları Kaldırın

Bu uyarı genelde Pagespeed veya GTMetrix üzerinde çokça görebileceğiniz bir uyarıdır.

Daha çok HTML, JS ve CSS dosyalarına atıfta bulunmaktadır.

Genelde pagespeed sonuçlarında da bazı JS veya CSS dosyalarının adlarını verek; ‘bu dosyanın hepsi kullanılmıyor, kullanılmayan kısmını kaldırın’ gibi açıklamalar görebilirsiniz.

Burada uygulamanız gereken işlem, öncelikli olarak analiz yaptığımız araçlarda çıkan dosya isimlerini bir kenara toplamak.

Sonrasında manuel bir şekilde ilgili JS veya CSS dosyalarını bloklayarak sitenizde bir bozulma durumu yaratıp yaratmadığını kontrol etmelisiniz.

(Bloklama işlemi yaparken; ana sayfa, kategori, blog içerik sayfalarını ayrı ayrı değerlendirmeyi unutmayın!)

Bloklama işleminden sonra geçmeniz gereken aşama <async> veya <defer> aşamasıdır. Hangi dosyaya defer ya da async vereceğinizi netleştirmeden önce ilgili kavramlara birlikte göz atalım:

<async> Etiketi Nedir?

Sayfalarınız yüklenirken iç kaynak dosyalarınızdan öncelikli yüklenmesini istediklerinizi async etiketi ile belirtebilirsiniz

Async genelde iç kaynak dosyalar ve yükleme esnasında önemi yüksek dosyalar ile izleme dosyaları için kullanılmaktadır.

<defer> Etiketi Nedir?

Async’ un tam tersi olarak defer etiketi; sayfa yükleme esnasında öncelik ihtiyacı olmayan, genelde dış kaynak dosyalarda kullanırız.

Defer, HTML yüklemesi bittikten yani öncelikli dosyalar ve görseller yüklendikten sonra verildiği dosyaları yükleyerek, ilgili dosyaları erteliyor ve site açılışına katkıda bulunmaktadır.

Görselleri Optimize Edin

Sitenizde yer alan görselleri mümkünse bir CDN hizmeti aracılığıyla sitenize çekmenizi öneririz. Çünkü ana domain ile gelen görseller server tarafında ağırlığa sebebiyet verebilir.

Bunun yanında sitenizde genel olarak boyutu sıkıştırılmış ve optimize edilmiş görseller kullanmanızı tavsiye ederiz.

Görsel formati olarak WebP kullanmak, görsellerinizin daha hızlı ve daha ufak bir yük ile yüklenmesini sağlayacaktır.

Lazy-Load Kullanmaktan Çekinmeyin

LCP değerlerinizi optimize edebilmek için, sayfa üstünde yer alan slider, banner gibi görsellerden ziyade, sayfa altında yer alan ve scroll yaptıkça görülebilecek görselleri <lazy-load> ile tembel yükleyebilirsiniz

Width – Height Değerlerini Girin

Sayfa içerisinde yer alan görseller dahil, metin text kutularına belli width- height değerleri vermeyi unutmayın.

CLS değerlerine oldukça etkide bulunan bu konuda, yalnız görsellerinizi değil; sayfa içerisinde belli bir konuma yerleştirilmiş logo, metin kutusu, pop-up gibi öğelerinde en-boy değerlerini girmenizi öneririz.

Tüm width- height değerlerinin doğru girilmesi sayesinde Core Web Vitals sonuçlarınızda iyileşmeler olacağı gibi, Page Experience tarafında da site puanınız artacaktır.