Site Hızı Arttırma Taktikleri
Site hızınız müşterileriniz için en önemli kriterdir. Çünkü, müşteri zaman kayıp etmeyi sevmez. En hızlı şekilde maksimum kaliteyi ister. Sayfa yükleme hızı optimizasyonu aslında Critical Rendering Path optimizasyonu olarak biliniyor.
Neden Optimizasyon Gerekli?
Optimizasyon her zaman gereklidir. İster web sitesi ister herhangi bir şey için olsun. Örneğin, telefonunuza veya bilgisayarınıza güncelleme geldiğinde hemen güncelliyorsunuz. Çünkü, yeni güncelleme sayesinde daha tatmin edici bir şey gelecek.
Optimizasyonun Önemi
Kullanıcıların %53’ü 3 saniyeden sonra açılan sayfayı terk ediyor. Mobil kullanıcıların %75’i ise 2G ve 3G ile internete bağlandıkları için sayfanız daha da geç açılacaktır.
Optimizasyon Süreci
1.Dosyalarınızı Küçült (Minify), Sıkıştır (Compress) ve Ön Belleğe Al (Cache) Üçgeni
Minify Türkçe küçültme işlemi HTML, CSS ve JavaScript dosyalarına uygulanabilir. Aynı zamanda compress yani sıkıştırma işlemi ile karıştırılmaması gerekiyor. Küçültme işlemi dosyanızda bulunan gereksiz boşlukları, yorumları dosyanızdan kaldırarak tarayıcının vakit kaybetmesine engellemeye yardımcı olur.
Örnek;
CSS küçültme işleminden önce:
CSS küçültme işleminden sonra:
Sıkıştırma işlemi ise gzip veya brotli gibi sıkıştırma şeması ile dosyanın boyutunu azaltmaya yönelik yapılan işlemdir. Sıkıştırma işlemi ve ön belleğe alma işlemi sunucu ile ayarlanıyor.
Ön belleğe alma işleminde zaman şu şekilde ilerliyor: Bir siteye ilk ez giriş yaptığınızda (Eğer o site sunucu tarafında ön belleğe alma işlemini tanımlamışsa) tarayıcınız o içeriği indiriyor. Bir sonraki girişinizde siteyi sunucudan değil kendi ön belleğinden alıyor. Bunu sitenin sahibi header bölümüne kodlar ekleyerek belirliyor.
2.Inline CSS & Media
CSS dosyalarınız sayesinde sitenizin tasarımı güzelleşiyor. Aynı zamanda sitenizde efektif hareketler veren JavaScript dosyalarınızda sitenizi daha da güzel gösteriyor. Ancak aşırı haraketli ve tasarımı güzel sitenizde sayfanızın açılması çok geç sürebilir. Bu yüzden CSS ve JavaScript dosyalarınızı hemen sıkıştırmalısınız. Bunu eklentiler veya herhangi bir site sayesinde yapabilirsiniz.
3.Lazy Load
Lazy Load, fazla görsellerin bulunduğu ve sayfanın uzun olduğu sitelerde sayfaların daha hızlı açılmasına olanak sağlayan bir JavaScript dosyasıdır. Bu taktikle kullanıcıların henüz görüntülemediği kaynakları yüklemesine olanak sağlayabilirsiniz. Yani sitenize giriş yapan kullanıcılar sitenizi açtığınızda gördüğü resim veya video gibi içerikler yüklenirken aşağı indiğinde aşağıda bulunan içeriklerin yüklemesine başlar. Dolayısıyla sayfa yüklenmeden önce hafifletilmiş olur.
Lazy Load her ne kadar mükemmel bir çözüm gibi görünse de sunucu kullanmıyorsanız performans sorunları yaşaya bileceğiniz bir yaklaşımdır. Örneğin, tek sayfadan ibaret bir site düşünelim yani one page template. Kullanıcı navigasyonla aşağı indiğinde Lazy Load kullanılmış ise bazı fotoğrafları görmeyebilir. Tekrar yukarı çıktığında bu resimleri görebilir.
Bu da hiç kullanıcı dostu değil. Aynı zamanda arama motorlarının botları örneğin, Google bot her zaman Lazy Load’a bağlı içerikleri taramayabiliyor. Search Console üzerinden fetch and render testi yaparken bu hata ile karşılaşabilirsiniz.
4.CDN (Content Delivery Network)
İçerik dağıtım ağı yani CDN sitenizdeki statik içerikleri farklı farklı lokasyondaki sunuculara yükleyerek kullanıcıya en yakın sunucudan yüklenmesine olanak tanır. Bu şekilde her bölgeden giriş yapan kullanıcılar sitenizi daha hızlı incelemeye başlar.
Eğer kilometrelerce ötede barındırılan sunucunuzdaki sitenizi ziyaret eden herhangi bir kullanıcı sayfa görüntülemede gecikme yaşanması kaçınılmaz olacaktır. Küçük bir işletme sahibi iseniz, binlerce vya yüzlerce medya içeriğinizi sitenizde barındırmıyorsanız ve çok fazla trafik almıyorsanız, hepsinden öte farklı farklı coğrafik bölgelerden ziyaretçileriniz yoksa CDN sizin için önemli olmayacaktır.
Ancak aksi durumda site hızı için ciddi artısı olacaktır.
En Popüler Site Hızı Testi Araçları
- PageSpeed Ingights
- Google Lighthouse
- GTMetrix
- Pingdom
- Varvy