Web siteleri, yıllar geçtikçe internetin de doğal gelişimiyle birlikte çok daha karmaşık yapılar haline geldi. Bu gelişim, web üzerinden çok daha karmaşık işlemlerin tamamlanabilmesini de mümkün kıldı. Yüksek çözünürlüklü dolayısıyla büyük boyutlu görseller, videolar veya on binlerce ürünün sergilendiği e-ticaret siteleri, günümüz internet teknolojilerinin kullanıcılara sunduğu standart hizmetler arasında yer aldı. Söz konusu durum, interaktif dünyanın, çok farklı coğrafyalarda, kullanılan cihazların teknoloji farklılıkları ve altyapıların sunduğu değişken internet hızlarına sahip kullanıcılara da en etkili şekilde sunulmasını zorunluluk haline getirdi.

SEO Çalışmaları İçin Önemi

Bir web sitesinin hız ve deneyim açısından incelenmesi iki farklı açıdan değerlendirilebilir. Ancak günün sonunda ulaşılmak istenen nokta kullanıcının deneyimini maksimum seviyeye ulaştırmak aynı zamanda web sitesinin kaynaklarını en verimli şekilde kullanabilmektir.

Bu çerçevede, web sitelerinin en hızlı ve en iyi deneyimle sunulması önemini birkaç maddede değerlendirmek mümkündür;

1- Sıralama Faktörleri İçinde Güçlü Bir Sinyal

Google’ın, arama motorları içerisinde en çok tercih edilen durumda olması ayrıca kullanıcıların yaptıkları tüm sorgularda en hızlı ve en doğru bilgiye ulaşmasını hedeflediği, resmi youtube kanallarındaki bir videoda açıkça farkedilmektedir.

Google’ın bu misyonu belirlemesini ardından geldiğimiz noktada webmasterların, tasarımcıların, developerların ve Web’in geliştirilmesine katkıda bulunan herkesi bu yönde eğittiği, dökümanlar hazırladığına son yıllarda sıklıkla şahit oluyoruz.

Core Web Vitals

Durum böyleyken, Google’ın web sitelerini bu perspektiften değerlendirmesinde daha net olduğu Core Web Vitals metrikleri duyuruldu. Söz konusu metrikler, bir web sitesinin yükleme hızı, interaktivite ve sayfada kullanılan elementlerin stabilitilerini ölçüyor. Google, bu metriklerin diğer sayfa deneyimi unsurlarıyla birlikte algoritması için bir değerlendirme unsuru olduğunu vurgulamaktadır.

https://developers.google.com/search/docs/appearance/core-web-vitals?hl=tr

2- Kullanıcı Deneyimi ve Satış Dönüşümlerine Katkısı

Google’ın Core Web Vitals metrikleriyle birlikte optimize edilen bir diğer önemli durum da kullanıcı deneyimlerini iyileştirilmesi. Özellikle büyük web sitelerinin kullanıcılara en hızlı ve en sorunsuz deneyimi sağlamaları yüksek rekabet ortamında oldukça kritik.

Site hızı konusunda yapılan çalışmalarda, web sitelerinin yükleme sürelerinde yapılan iyileştirmelerde dönüşüm oranlarının %2 ile %7 arasında yükselebileceğini göstermiş durumda.

https://www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/

3- Kaynak Kullanımını Optimize Etmesi

Web siteleri, hız açısından optimize edilmeye başlandığında, büyük JavaScript dosyaları, karmaşık CSS dosyaları, yüksek boyutlu görseller, videolar vb. birçok dosya, bazen sıkıştırma, bazen de temizleme gibi yöntemlerle daha küçük boyutlara indirgenir.

Dosya sıkıştırma işlemi, web sitesinin sunucu tarafında daha az boyutlu olmasını sağlar ve isteklere daha hızlı yanıt verilmesine olanak tanır. Ayrıca, olası bakım ve sunucu kiralama masraflarını da minimize eder.

4- Mobil Cihazlardaki Deneyimi Geliştirmesi

Mobil cihazların internet aramaları ve satışlar üzerindeki etkisi, her geçen gün artıyor. Web üzerinde hizmet, satış vb. bir faaliyet yürüten bir web sitesinin mobil uyumluluğunun kusursuz olması artık gözardı edilemez bir gerçeklik.

“2021 Mart itibariyle Google tüm web sitelerini öncelikli olarak mobil sürümlerini baz alarak taramaya başladı. Kullanıcı tercihi ve Google’ın bu yaklaşımı göz önüne alındığında mobil öncelikli yaklaşımlar oldukça değerli.”

Mobil cihazların performans, ağ bağlantısı vb. birçok faktörde çeşitlilik gösteren bir ekosistemi olması da bu alanda yapılacak optimizasyonlarının dikkatli bir şekilde yürütülmesini gerekli kılıyor.

Core Web Vitals Metrikleri

Site hızınızı ölçebileceğiniz araçlara geçmeden önce bu araçlarda sıklıkla göreceğiniz ve performans değerlendirmeleri yorumlarken bilmeniz gereken metrikleri inceleyelim.

Largest Contentful Paint (LCP)

LCP, yani “Largest Contentful Paint”, web sayfalarının yüklenme performansını ölçen önemli bir metriktir. Ayrıca sayfanın ana içeriğinin ne kadar hızlı yüklendiğini gösterir.

LCP, kullanıcı deneyimi açısından kritik çünkü ziyaretçilerin sayfada gördükleri ilk büyük görsel ya da metin bloğunun yüklenme süresini ifade eder. İyi bir LCP skoru, sayfanın ana içeriğinin hızlı yüklendiğini ve kullanıcıların beklemek zorunda kalmadığını gösterir.

2.5 saniye ve altında LCP süresi hedeflenmelidir.

Kaynak: web.dev

LCP Örnekleri

Aşağıdaki örnekte gösterildiği üzere haber görseli LCP olarak değerlendirilirken ilk görseldeki visual stories linki FCP (First Contentful Paint) olarak belirtilmiş. Bunun sebebi FCP’nin sayfada görülen ilk element olmasıyken, LCP’nin sayfadaki ana ve en büyükelement olarak değerlendirilmesidir.

Kaynak: web.dev

LCP Optimizasyonu

Görsel Dosya Boyutlarının Optimize Edilmesi

Görseller genellikle web sayfalarının en büyük boyutlu dosyalarundan biridir. Bu yüzden görsellerin boyutunu küçültmek, sayfa yükleme sürelerini önemli ölçüde iyileştirebilir. Bu, görsel sıkıştırma araçları ve modern formatlar (WebP) kullanılarak yapılabilir.

Lazy Loading Kullanımı

Bu teknik, kullanıcı sayfayı aşağı kaydırdıkça görsellerin ve içeriğin yüklenmesini sağlar. Böylece başlangıçta yalnızca gerekli içerik yüklenir.

Kaynak: Medium

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS), bir web sayfasındaki görsel içeriğin ne kadar istikrarlı olduğunu ölçen bir metriktir. Özellikle sayfa yüklenirken veya kullanıcı sayfada gezinirken, unsurların beklenmedik şekilde yer değiştirmesi kullanıcı deneyimini olumsuz etkileyebilir.

CLS skorları*

Kaynak: web.dev

*Burada belirtilen skorlar “belli bir eşiği” belirtmektedir. Değerlendirilen web sitelerinin sayfa içeriğinin ne kadar ve ne sıklıkta kaydığı ölçerek belirlenmiş, buna göre < 0.1 – 0.25 > şeklinde bir skala belirlenmiştir. Skor ne kadar yüksek çıkarsa web sitenizin veya sayfanızın görsel stabilitesinin o kadar kararsız olduğu sonucu ortaya çıkar.

CLS Örnekleri

Web sayfasında görüntü ve videolar için CSS veya HTML’de boyut belirtilmemesi, Javascript kullanılarak sayfaya sonradan eklenen içerikler (yorumlar, ürün listeleri vs.) sayfanın düzeninde ani değişikliklere sebep olabilir.

Kaynak: Hubspot

CLS Optimizasyonu

Görsel ve Reklam Alan Boyutlarının Belirlenmesi

Sayfa yüklenirken görüntü ve reklamların boyutları belirsizse, bu unsurlar yüklendikçe sayfanın düzeni değişebilir. Dolayısıyla, kullanıcının sayfada okuduğu metni kaybetmesine veya yanlış bir butona tıklamasına neden olabilir. Görüntü ve reklam elementlerinizin boyutlarını HTML veya CSS kullanıp önceden tanımlayarak, bu elementtnler yüklenirken sayfanın sabit kalmasını sağlanabilir.

Dinamik İçeriklerin Yüklenmesi

Javascript ile dinamik olarak yüklenen içerikleri yüklerken, sayfanın geri kalanının sabit kalmasını sağlamak için yer tutucular (placholder) kullanmak faydalıdır. Placeholder render süreci tamamlanıp, ilgili alan dolana kadar sayfa kaymalarını öneler. Ayrıca, bu tür içerikleri sayfanın daha az görünür bölümlerinde veya kullanıcının etkileşimine bağlı olarak yüklemek, CLS’yi önemli ölçüde azaltabilir.

Interaction To Next Paint (INP)

INP metriği sayfada bulunan elemetlerin kullanıcılar olan etkileşiminiişini ölçer. Bir başka ifadeyle, sayfada bulunan tıklanabilir elementler, akordiyon yapı vb. tıklama sonucunda aksiyon sağlayan yapıların kararlılığını denetler.

İdeal INP skoru 200 ms’nin altındaki tepki süreleridir.

Kaynak: web.dev

INP Örnekleri

INP’nin tanımında kullanıcıya, tıklama sonucu vaat edilen aksiyonun, hızlı bir şekilde gerçekleşmesinin öneminden bahsetmiştik. Aynı şekilde bu aksiyonun işleme alındığına dair bir “loading” göstergesi de oldukça faydalıdır.

INP Optimizasyonu

Uzun Tarayıcı İşlemlerini Optimize Edin

Bir web sayfası yüklenmeye başladığında render, parsing, javascript dosyalarının parçalanması gibi birçok arka plan görevi yürütülür. Tüm bu işlemleri arka planda gerçekleştiren tarayıcı mekanizması ise “Main Theread”dır.

Main Thread tüm bu işlemleri sırayla çözümler ve sonunda sayfa tüm elementleriyle kullanıcıya sunulmak üzere hazır olur.

Main Theread’ın aynı anda sadece bir işlemle meşgul olabileceği ele aldığımızda sitede ne kadar işlem varsa sayfanın kullanıcının etkileşime geçebileceği süre, o kadar uzar.

Sürenin uzaması INP skorlarında düşüşü yol açan temel durumdur. INP’yi geliştirmenin en etkili yolu sayfada Main Theread’ın işlemesi gereken durumları minimize etmektir. Örneğin önemli bir kısmı kullanılmayan JS ve CSS dosyalarını kırpmak, görece daha az önemsiz kaynakların yüklenmesini ertelemek vb. kaynak ve işlem uygulamaları etkili yöntemlerdir.

Site Hızını Ölçmek İçin Hangi Web Siteleri Kullanılabilir ?

Web sitenizin hızını ölçmek, daha kapsamlı açıklamak gerekirse hangi metriklerde eksik olduğu, görsellerin boyutu ideal mi, sayfayı oluşturma css veya Javascript dosyalarının ekstra yük yaratıp yaratmadığı gibi onlarca durumu anlamak için kullanabileceğiniz birçok ücretsiz veya tercihe göre ücretli araçlar mevcut.

Web Performansı Ölçümü İçin Kullanılabilecek Platformlar

Google Pagespeed Insights

Google’ın sunduğu Pagespeed Insights aracı web sitelerini Core web vitals ve ve Google’ın belirlediği diğer ölçüm metriklerini kullanarak skorlar. Skor çizelgesi her metrik için farklı değerlendirilir.

1 – Teste sokmak istediğiniz URL’i bu alana girin.

Burada web sitenizin ana domaini (website.com.tr) veya bir sayfası (website.com.tr/sayfa-1) yer alabilir.

2- Google’in developerlar için hazırladığı sayfalara bu alandan ulaşabilirsiniz. Pagespeed aracı ile ilgili yenilikler ve giriş seviyesinden ileri seviye kadar çeşitli dökümanlara yer veriliyor.

Gerçek Kullanıcı Verileri Değerlendirmesi

Gerçek kullanıcıların verilerinden, 4.maddede konuyu daha önce açıklamıştık, gelen performans verileri ve bu sonuçlara göre çıkan detaylar bu alanda gösterilir.

URL’inizi girip “Analiz et” butonuna tıkladıktan sizi ilk olarak bu ekran karşılıyor. Siz bu ekranı gördüğünüz sırada sayfanın aşağısında daha detaylı analizler için tool çalışmaya devam ediyor. Akabinde ilk sonuçları incelemek mümkün;

1- Test sonucunda ilgili URL mobil ve masaüstü olarak iki versiyon yer alıyor. Analizin tamamının seçtiğiniz versiyona göre değiştiğini unutmayın.

Önemli: Web sitenizin hangi cihaz türünde daha fazla trafik aldığı gibi verilerin elinizde bulunması bu alanı daha efektif kullanabilmenize oldukça yarar sağlar.

2- URL ve Kaynak kısmında, daha önce değindiğimiz üzere ana domain veya sadece girilen URL için analiz görüntülenebilir. Örnekle açıklamak gerekirse;

Bu URL: website.com.tr/sayfa1

Kaynak: website.com.tr

3 – Core web vitals metriklerinde Google’ın belirlediği eşikleri daha önce aktarmıştık. Burada yer alan sınıflandırmada “Başarılı” olunması için 3 temel metriğinbelirlenen başarı değerlerinin üstünde yer alması gerekmektedir. Bir başka deyişle, LCP, FID ve CLS metriklerinde istenen değerlere ulaşmak gerekmektedir.

4- Bu alanda analiz sonucunun hangi ortamlarda ne şekilde toplandığına dair detaylar verilmektedir.

Önemli: Bu alanda detayları verildiği üzere “Gerçek kullanıcılara ait veriler” CrUX adını verdiği ve tarayıcılardaki kullanıcı verilerini derlediği bir yapıyı kullanır. Bu sebeple yeteri kadar gerçek kullanıcısı olmayan ve crUX verisi bulundurmayan web sitelerinde incelediğimiz bu alanlar bulunmayacaktır.

Lab Verileri Değerlendirmesi (Sentetik Test)

Yapılan test herhangi bir gerçek kullanıcı verisi içermez. Belirli bir network ve cihaz emülasyonunun ortaya çıkardığı sonuçlardır.

1- Lab verileri, üç sınıflandırma altında yer alıyor;

– Performans 

URL’in hız ve deneyim performansına ait değerlendirmeler, öneriler ve teşhisler bu alanda yer alıyor.

– Erişilebilirlik

Erişilebilirlik denetimleri, ilgili web sitesinin görsel, Motor/esnek kullanımı, işitsel ve bilişsel alanlarında hangi düzeyde kullanıcılara cevap verebildiğini ölçer.

– En İyi Uygulamalar

Kodlara yapılacak olan müdahaleler ile iyileştirilebilecek fırsatlar bu alanda görüntülenir.

2- Lab verileri, Google’ın açık kaynak aracı olan Lighthouse üzerinden geliyor. Yukarıda açıkladığımız tüm alanlar Lighthouse’ın sınıflandırma ve değerlendirme kriterlerine göre oluşuyor. Gerçek kullanıcılardan sağlanan verilerde olduğu gibi web vitals ve yardımcı performans metriklerinde burada da bir notlandırma eşiği mevcut. Lighthouse Score Calculator sayfasında gösterildiği üzere metriklerin farklı i düzeylerde etkisi mevcut.

3- Sentetik test, adından da anlaşılacağı üzere belirli bir test konfigürasyonun web sitesini ziyaret ederek elde ettiği sonuçları içeriyor. Bu alanda, network (4g), cihaz (moto g), lighthouse versiyonu (farklı sürümlerde metriklerin skor ağırlığı vb. Değişimler olabiliyor.), user agent (headless chrome) [arayüzü olmayan, otomasyon amaçlı tarayıcı] ve testin tekrar sayısı gibi detaylar yer alıyor.

Not: Farklı 3.parti uygulamalarda yapacağınızı testlerde bu test kombinasyonlarının aynısı kurgulayarak karşılaştırma yapabilmeniz mümkün olur.

Fırsatlar ve Teşhisler

İki alanda birçok farklı sonuç ve öneriyle karşılaşacaksınız. Google’ın genel yönlendirmesi fırsatları daha kritik ve hızlı etki edebilecek şekilde olurken, teşhisler alanında performansa etki edecek irili ufaklı tüm etkenleri listelemesidir.

Her iki alanda ne gibi durumlar olduğunu, ortak noktalarını ve hangi metriği optimize etmenin hangi teşhisleri optimize edebileceğine örnek bir test sonucu üzerinde ulaşmaya çalışalım.;

Fırsatlar

Fırsat alanında genel olarak birçok web sitesinin optimize etmediği veya bir başka deyişle dinamik ve bol görsel vb. materyaller içeren web sitelerinin ortak sorunları yer alıyor. Bunlar çoğunlukla;

• Javascript dosyaları (çok azı kullanılan büyük kütüphaneler. Örn; sadece bir slider için Jquery’nin tamamını kullanmak.)
• CSS dosyaları (Bütün halinde kullanılan css dosyaları, yüklenen sayfada gerekli olmayan css’ler vs.
• Görseller (Yüksek boyutlu görseller, aktif alanda olmayan görsellerin eş zamanlı yüklenmesi, sayfadada konumlandırma ve boyutlandırma yapılmaması vb.)
• Server teknolojileri ve kapasite (Düşük server kapasitesi, http1.1 gibi eski ve yetersiz teknolojiler, medya dosyaları için cdn veya ayrı server konumlandırmama vb.)

Fırsatlar alanındaki sorunların çözümü, genel olarak yukarıdaki değişkenlerin iyileştirilmesiyle giderilebilir. Burada Core Web Vitals Metrikleri kısmında değindiğimiz önerilerin uygulanması, buradaki sorunları büyük ölçüde çözümlemenize yardımcı olacaktır.

Teşhisler

Teşhisler alanında daha önce belirttiğimiz üzere daha genel ve hemen hemen tüm saptamalara yer verilmiş durumda. Örnekteki teşhisleri küçük bir sınıflandırmaya soktuğumuzda şöyle bir tablo ortaya çıkıyor;

• Font optimizasyonu
• 3.parti javascriptlerin optimizasyonu / Genel javascript optimizasyonu
• Görsel optimizasyonu
• Main thread optimizasyonu (ana iş parçacağı, yükleme sırasındaki tüm işlemlerin optimize edilmesidir.)
• DOM boyutunun optimizasyonu (Sayfadaki tüm öğelerinin nicesel ve niteliksel anlamda gözden geçirilmesi.)
• Cache optimizasyonu

Hangi Teşhisleri Önceliklendirmelisiniz ?

Buradaki önemli kıstas, teşhislerin web sitenizi veya yürüttüğünüz süreci hangi açıdan ve ne şekilde etkilediği ile doğrudan orantılı.

Örneğin bir mimarlık ofisi görsel bir yoğun bir iş yaptığı için görsel optimizasyonu onlar için en kritik madde olabilirken, çok fazla 3.parti servis kullanan bir web sitesi bu alandaki optimizasyonlara odaklanabilir.

Önemli: Tek bir maddenin tüm sorunları çözeceği gibi bir yanılgıya düşülmemeli, sadece öncelikler doğru belirlenmelidir. Bununla beraber dedike server ve http3 gibi en yeni teknolojileri kullanmak tüm web siteleri için uygulandığında fayda sağlayacak uygulamalardır.

Hız Optimizasyonunda Sıkça Yapılan Hatalar

Belirli Sayfaların/Sayfa Gruplarını Hızlandırmaya çalışmak

Sadece ana sayfa veya sadece blog gibi ziyaretçilerin daha sık karşılandığı sayfalarda çalışmalar yapmak yanlış bir stratejidir. Google web sitelerini bir bütün olarak değerlendirir ve site içindeki bu tip bir dengesizlik sitenin taranmasında da problemlere yol açabilir.

 Tek bir metriğin optimize edilmeye çalışılması

Önceliklendirme doğru bir yol olsa da tek bir metriğin tüm sorunları çözeceği gibi bir yanılgıya düşmemek gerekir. Sürecin bir bütün olduğu unutulmamalıdır.

Sık Sorulan Sorular

Web sitemin hız optimizasyonuna ihtiyacı olduğunu nasıl anlarım ?

Pagespeed Insights, crUX raporları veya 3.parti uygulamalarda düzenli şekilde analiz yapabilir ve aldığınız çıktılara göre aksiyon alabilirsiniz. Bununla birlikte Google Search Console aracı üzerinden de Page Experience ve Core Web Vitals kısımlarını gözlemleyerek karar vermek mümkün.

Web site hızının arama motorları sıralamalarına etkisi var mı ?

Google 2010 ve 2018 yıllarında yaptığı duyurularla sayfa hızının bir sıralama faktörü olarak kullanılacağını duyurmuştur.

Yavaş bir web sitesi sadece organik trafiği mi etkiler ?

Hayır, sadece organik trafiği olumsuz etkilemez. Aksine, sitenizi ziyaret eden tüm ziyaretçiler için olumsuz bir kullanıcı deneyimi yaşanır. Google’ın Mobile Page Speed and Conversion Rate sayfasında yavaş bir web sitesinin dönüşümlere olan ciddi etkilerine dair araştırma ve istatistiklere ulaşabilirsiniz.

Hız optimizasyonu için kimle çalışmam gerekir ?

Mutlaka çalışma yapılacak altyapı hakkında tecrübeli bir yazılım ekibi ile konu çözmelidir. Ayrıca gereken tespitlerin yapılabilmesi ve aksiyon haritasının hazırlanması ROIBLE’ın hizmetleri arasında yer almaktadır. Dolayısıyla ROIBLE profesyonel ekibi hız optimizasyonu sürecinde yazılım ekibinizi de sizin yerinize yönlendirmektedir.

Çalışmanın sonuçlarını ne zaman görebilirim ?

Çalışmalar ilerledikçe test araçlarında yer alan sentetik testlerde yapılan çalışmaların izleri hemen görülebilir. Gerçek kullanıcılar nezdinde tüm süreç bittikten en az 30 günlük bir süre sonunda bu alandaki veriler görülebilir. Sayfada geçirilen süre, dönüşümlerdeki değişimler gibi kullanıcı etkileşimi verileri de Google Analytics üzerinden objektif olarak belirlenip izlenebilir.