Site hızı Nedir?
Genel olarak sayfa açılış hızı kullanıcıların bir sayfanın ne kadar sürede yüklendiğini ve etkileşime hazır hale geldiğini gösteren bir terimdir. Bir sitedeki sayfa gösterimlerinden alınan bir örneklemden elde edilen sayfa yüklenme süresine ise site hızı denilmektedir.
Sitenin açılış hızı SEO açısından iki farklı öneme sahiptir. Bunlardan birincisi Google için bir sıralama faktörü olmasıdır. Google 2018 yılında site hızının sıralama faktörü olacağını açıklamıştır. Bu her şeyin aynı olduğu bir durumda site hızı daha iyi olan sitelerin diğer sitelerden daha yüksek bir sıralamaya sahip olacağı anlamına gelmektedir.
Site hızıyla ilgili diğer önemli nokta ise kullanıcı deneyimiyle ilgilidir. Eve söylediğiniz bir yemeğin geç gelmesi, trafikte beklerken harcadığınız vakit, beklediğiniz bir otobüsün uzun süre gelmemesi ya da metrobüse binmek için sıra beklemek zorunda olmanız nasıl can sıkıcı bir durum ise, bir sitedeki içeriğin yüklenmesini beklemek de kullanıcılar için aynı ölçüde can sıkıcıdır.
Siteniz yeterince hızlı değilse kullanıcılar sitenizle daha az etkileşime girecektir. Ayrıca birçok kullanıcı siteye giriş yaptığı sayfanın (landing page) yüklenmesini dahi beklemeden sitenizi terk edecektir. Bir web sayfasının yüklenme süresi yükseldikçe o sayfada bounce eden kullanıcı sayısında artış yaşandığı yapılan araştırmalarla gösterilmektedir.
Site hızı yalnızca SEO ve kullanıcı deneyimi açısından önem taşımamaktır. Sayfa açılış hızının yüksek olması Google reklam maliyetlerinin daha düşük olmasını sağlamaktadır. Açılış hızı yüksek olan sayfalar daha yüksek kalite skoruna sahip olurlar, bu da CPC maliyetlerinin azalması anlamına gelir.
Site Hızını Ölçmek İçin Kullanılan Metrikler
Bir sayfanın yüklenmesi farklı süreçlerin bir araya gelmesiyle oluşmaktadır. Bu süreçlerin hızları farklı birbirlerinden farklı etmenlere bağlı olabilmektedir. Bu sebeple site hızını ölçmek için birden fazla metrik kullanılmaktadır. Google hız testi olarak da bilinen Page Speed İnsights’ta yer alan metrikler site hızının nelere bağlı olduğunu anlamak için bize fikir verebilir.
First Contentful Paint
İlk zengin içerikli boyama anlamına gelen bu metrik sayfadaki ilk anlamlı görüntünün ortaya çıkması için ne kadar sürenin geçtiğini göstermektedir.
Largest Contentful Paint (LCP)
Bu metrik sayfadaki en büyük öğenin ne zaman görünür hale geldiğini ölçmektedir. Böylece sitedeki ana içeriğin hangi sürede kullanıcıların karşısına çıktığına dair bir fikir vermektedir. Aşağıdaki görselde First Contentful Paint ile Largest Contentful Paint’in sitenin yüklenme sürecinde denk düştüğünü aşamaları görebilirsiniz.
Time To Interactive
Bu metrik kullanıcıların sayfayla etkileşime geçebilmesi (sayfada yer alan butonlara, linklere tıklaması, arama çubuğunu kullanması gibi sayfada yapılabilecek herhangi bir işlemi düşünebilirsiniz) için geçen süreyi göstermektedir. Birçok web sayfasında kullanıcıların sayfayla etkileşime geçebilmesi için sayfadaki kaynakların tamamının yüklenmesine gerek yoktur. Önemli kaynakların daha önce yüklenmesini sağlayarak bu süreyi kısaltabilirsiniz.
Total Blocking Time
İlk zengin içerikli boyanın oluşturulmasıyla sayfanın etkileşime açık hale gelmesi arasında geçen süredir. Bu süre boyunca kullanıcılar sayfada yer alan içeriklerin oluştuğunu görebilmekte ancak sayfa üzerinde herhangi bir işlem yapamamaktadır. Bu sebeple bu süreyi mümkün olduğu kısa tutmak kullanıcıların daha iyi bir deneyim yaşamasını sağlayacaktır.
Speed Index
Bu metrik sayfanızın yüklenmeye başlamasından itibaren sayfanın görsel olarak ne kadar hızlı oluştuğunu ölçmektedir.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift, Largest Contentful Paint ile birlikte site hızı raporlarıyla ilgili Google’ın yayınladığı Core Web Vitals metriklerinden bir tanesidir. Google bu metrikleri yayınlayarak site hızını kullanıcı deneyimi ile beraber ele almaya başladığını ilan etmiştir.
Bazı sitelerde sayfa yüklenirken sayfa düzeninde kaymalar yaşandığını gözlemlemişsinizdir.
Bu durum kullanıcıları rahatsız ettiği gibi, kullanıcıların yanlışlıkla istemedikleri butonlara tıklamasına, dolayısıyla site içerisinde istemedikleri aksiyonları almasına sebep olabilmektedir.
Bu metrik sayfadaki sabit olmayan öğelerin hareket mesafeleri ve kapladığı alan dikkate alınarak hesaplanır. Böylece sayfada bulunan öğelerin ne kadar stabil olduğu ölçülmüş olur.
Time to First Byte
Page Speed Insights’ta yer alan metriklerin dışında, site hızını ölçmemize yardımcı olabilecek farklı ölçümler de mevcuttur. Bunlardan en önemlilerinden biri ise Time to First Byte (TTFB) metriğidir.
Bu metrik sunucuya yollanan istekle, tarayıcıya ulaşan ilk byte arasında geçen süredir. Daha açık olmak gerekirse, bir siteye giriş yaptığınız süreyle sitenin oluşmaya başlaması arasında geçen süre olduğunu söyleyebiliriz.
Bu konuda Google’ın resmi bir açıklaması olmasa da yapılan araştırmalar sonucu bu metriğin arama sonuçlarında sayfaların sahip olduğu sıralamaya olan etkisinin oldukça yüksek olduğu iddia edilmektedir.
Site hızını iyileştirmek için Yapılabilecekler
Site hızını iyileştirmek için görselleri sıkıştırmaktan sitede yer alan kaynakların optimize edilmesine kadar birçok basit ve karmaşık işlem bulunmaktadır. Bu işlemleri aşağıdaki gibi sıralayabiliriz.
1) Görsel Optimizasyonu
Sitede bulunan görselleri optimize etmenin site hızını iyileştirmek için yapılabilecek en kolay ve en etkili yöntem olduğunu söyleyebiliriz.
Görsellerin optimize edilmediği birçok web sayfasında, görseller yüklenen kaynak boyutunun önemli bir kısmını oluşturmaktadır. Görsellerin sıkıştırılması, görsel boyutlarının düşürmekle beraber, çoğu zaman görsel kalitesinde ciddi bir düşüşe neden olmamaktadır. Görselleri sıkıştırmak için tarayıcınız üzerinden kullanabileceğiniz birçok ücretsiz araç bulunmaktadır.
Görselleri sıkıştırmak kadar görselleri doğru boyutlarla vermeniz de site hızı açısından oldukça önemlidir. Aşağıdaki örnekte olduğu gibi web sayfasında 848 x 636 ölçülerinde verilen bir görselin 1200×900 ölçülerine sahip olmasına gerek yoktur.
Böyle durumlarda görseller sayfada gösterdiklerinden daha yüksek bir boyuta sahip olacağı için bu görsellerin dosya boyutları da olması gerekenden daha yüksek olacak ve sayfanın yüklenmesi gecikecektir. Ayrıca doğru ölçeklendirilse bile dosya boyutları gereksiz düzeyde büyük olan görseller de site hızının yavaşlamasına sebep olacaktır.
Görsel optimizasyonu ile ilgili bir başka konu ise görsellerin daha düşük boyutlara sahip dosya formatlarına sahip olmasıdır. Webp gibi yeni nesil görsel formatları PNG ve JPG gibi formatlara nazaran daha düşük boyutlara sahiptir. Ancak yeni nesil formatların bütün tarayıcılar tarafından desteklenmediğini bilmenizde fayda var. Bu formatları kullanmak istiyorsanız, öncesinde gerekli geliştirmeleri yapmanız ve güncellemeleri takip etmeniz gerekiyor.
2) Yönlendirme Zincirlerinden Kaçınmak
Birden fazla yönlendirmenin art arda geldiği durumlara yönlendirme zincirleri denmektedir. Yönlendirmelerin doğrudan kaynak sayfadan hedef sayfaya yapılması gerekmektedir. Yönlendirme zincirleri sitenin farklı sayfalar arasında yönlenirken
example.com -> www.example.com -> www.example.com/ -> www.example.com/home
3) Sunucu Yanıt Süresi
Sunucu yanıt süresi, daha önce bahsettiğim Time To First Byte metriği ile öçülmektedir. Bu süre sunucunun kullandığı yazılımdan aldığınız hosting hizmetine, sitenin aldığı trafik miktarından sayfalarda kullanılan kaynaklara kadar birçok etmene bağlıdır. Ancak genellikle bu sorun kullandığınız sunucularla ilgilidir. Eğer dışarıdan bir hosting hizmeti alıyorsanız bu sorunu size hosting sağlayıcınızla görüşebilirsiniz.
4) CDN Kullanımı
Ayrıca web sitenizde kullandığınız kaynakların depolandığı sunucularla web sitesine giriş yapan kullanıcıların sahip olduğu cihazlar arasındaki fiziksel mesafenin fazla olması da sunucu yanıt süresinin artmasına neden olmaktadır. Bu durumu çözmek için CDN kullanımına başvurabilirsiniz. CDN ile dünyanın farklı yerinden sitenize ulaşmayan kullanıcılar dünyanın farklı yerlerine dağılmış bir sunucu sistemi içerisinde kendilerine yakın olan veri merkezine bağlanırlar
5) Önbellek
Tarayıcılar web sitesinde bulunan birçok bilgiyi (Görseller JavaScript, CSS dosyaları ve daha fazlası) önbelleğe alır, böylece bir ziyaretçi sitenize geri döndüğünde tarayıcının tüm sayfayı yeniden yüklemesine gerek kalmaz.
Önbellek kullanımında dikkat edilmesi gereken nokta “expires” başlıklarının kullanımıdır. Bunlar ile hangi kaynağın ne kadar süreyle önbelleğe alınması gerektiğini belirleyebilirsiniz. Süre sona erdiğinde sayfada bulunan kaynaklar tekrar yüklenir. Eğer sıkça değişen bir kaynakta bu süreyi uzun tutarsanız, yaptığınız değişiklik kullanıcılara yansımayacaktır. Bu durum özellikle e-ticaret sitelerinde birçok sıkıntıya yol açabilir. Etag etiketleriyle bu durumun üstesinden gelebilirsiniz. Bu etiketleri kullanarak sayfanızda bulunan kaynakların, kaynaklarda bir değişiklik olmadığı sürece önbellekte tutulmasını, kaynaklarda bir değişiklik olduğu zaman ise tekrar yüklenmesini sağlamaktadır.
6) Metinleri Sıkıştırma ve Kodları Optimize Etme
Web sitenizde yer alan JS, CSS ve HTML öğeleri verimli bir şekilde kodlayarak bu kaynakların dosya boyutlarını küçültebilirsiniz, bunu kodlardaki gereksiz virgülleri, boşlukları silerek sağlamanız mümkün. Bu işlemin adı minify olarak geçmektedir, bu işlemi yapabileceğiniz birçok online tool bulunmaktadır.
Aynı zamanda bu kaynakları Gzip ile sıkıştırarak dosya boyutundan tasarruf etmeniz dolayısıyla sayfanızın yüklenme hızını iyileştirmeniz mümkün.
7) JS Kaynak Kullanımını Optimize Etmek
JS kaynaklar site hızı açısından pahalı kaynaklardır. Tarayıcılar bir web sayfasını aşamalı bir şekilde oluştururken bu durum JS kaynaklar için geçerli değildir. Bir JS kaynağa bağlı olarak oluşan içerikler aşamalı olarak değil ancak kaynağın bütünü çalıştırıldıktan sonra kullanıcıların karşısına çıkar. Bu durum kaynak çalıştırılana kadar kullanıcıların karşısına herhangi bir içerik çıkmadan beklemesi anlamına gelir.
Aynı zamanda js kaynaklar oluşturulurken geçen sürede sitede yer alan diğer kaynakların oluşturulması da gecikebilir. Bu sebeple JS kaynakları sitenin yüklenmesini engellemeyecek bir şekilde optimize edilmesi gerekir. Sitenin yüklenme hızını bir sayfada tek ve büyük bir JS kaynak bulundurmak yerine bu kaynağı birden fazla kaynağa bölerek iyileştirmek mümkündür. Kritik isteklerin yer aldığı JS öğeler kritik olmayan öğeleri farklı kaynaklarda toplayarak kritik isteklerin daha önce yüklenmesini sağlayabilirsiniz. Böylece kritik olmayan isteklerin daha erken yüklenmesinin önüne geçerek sitenin görsel olarak oluşmasını ve etkileşime açık hale gelmesini daha erkene alabilirsiniz.
Site hızı hem bir sıralama faktörü olarak, hem de kullanıcı deneyimi açısından oldukça önem taşıyor. Özellikle rekabetin yüksek olduğu alanlarda en yüksek sıralamaları almak için site hızını optimize etmek zorunlu diyebiliriz. Özellikle son dönemde arama motoru botları site hızını kullanıcı deneyimi ile beraber ele almaya başladı. Arama sonuçlarında daha iyi sıralama alabilmek için Google’ın sıralama faktörü olacağını açıkladığı Core Web Vitals metriklerini ayrıca optimize ettiğinizden emin olmalısınız.
