Web Site Hızlandırma Rehberi

Web sitesi nasıl hızlandırılır? Bir web site hızlandırmak için neleri bilmek gerekir? PageSpeed hız skoru nasıl arttırılır?

Herkese merhaba! Bu yazı dizisinde oldukça önemli ve bir sürü alt başlığa sahip bir konudan web site hızlandırma işlemlerinden bahsedeceğiz. Çalıştığım şirketin web sitelerinin hızlarını kısa zamanlarda 3-4 kat arttırmak bende bu işlemler için detaylı bir yazı dizisi hazırlayıp sizlerle paylaşma düşüncesi oluşturdu. Şimdi dilerseniz hemen konuya girelim ve bir web sitesi nasıl hızlandırılır adım adım detaylı şekilde öğrenelim.  


 

Kavramlar

Mobile First

Yapılan araştırmalar internet trafiğinin yaklaşık % 70 ‘nin artık mobil cihazlar üzerinden sağlandığını ortaya çıkarttı. Bu büyük değişim öncelik sırasını masaüstü web sitelerinden web uygulamalarına hatta mobil uygulamalara kaydırdı. Artık hayatımızda mobile first yani önce mobil kavramı var. Bir web sitesi tasarımı yaparken bile öncelikle mobil görünümünün tasarımı çizilerek başlanıyor.

 

Statik Dosyalar

Web sitenizin görselliğini oluşturan CSS ve görseller ile dinamikleşmesine yardımcı olan JS dosyalarına verilen genel isimdir. Adından da anlaşılacağı gibi bu dosyalar web sitesi hazırlanıp bittikten sonra statik şekilde kalırlar ve gerekmedikçe değişikliğe uğramazlar. Yolları ve içerikleri büyük ölçüde sürekli olarak sabit kalır. Bu yüzden optimize edilmeye en uygun dosyalardır.

 

Optimize İşlemleri

Bu kavram dosya yapısına göre bir kaç alt açıklamadan oluşur. Örneğin görseller için optimize işlemi görselin çözünürlüğünden biraz taviz verip byte olarak kapladığı alanı küçültmek demektir. CSS ve JSgibi dosyalar için ise optimize işlemi genel de kullanılmayan kodları kaldırmak, tekrar eden kodları birleştirmek, yorum satırlarnı ve satur arası boşlukları silmek, JS dosyaları için işleyiş yapısını daha kısa hale getirecek şekilde yeniden düzenlemek anlamlarına gelir. Bu işlemler CSS ve JS dosyalarının sahip olduğu byte değerini küçültür. 

 

İlk Zengin İçerikli Boya

Bir web sitesi istemci tarafında yüklenirken ekrana ilk gelecek olan nesneyi tanımlar. İlk zengin içerikli boya yüklenme zamanını olabildiğince az tutmak gerekir. Bunun için benim de sıkça kullandığım Loading Screen yöntemi ideal bir yöntem. Bu yöntem nedir ilk zengin içerikli boya değeri nasıl en aza indirilir makalenin ilerleyen kısımlarında detaylı şekilde bahsedeceğim.

 

İlk Anlamlı Boya

Bir web sitesinin sahip olduğu ana içeriğinin kullanıcı tarafında ne kadar zamanda görünür olduğunu belirten kavramdır. Sayfanın tamamen yüklenme süresi anlamına gelmez. 

 

Sunucu Yanıt Süresi

Bu kavram hayati öneme sahip bir kavramdır. Sadece web sites için değil API sayesinde bir sunucuya bağlanan mobil uygulamalar, oyunlar, web uygulamaları içinde çok önem arz eder. Web sitesi hızlandırma konusu için ne kadar önemli olduğu kısaca şöyle anlatılabilir; Bir kullanıcı web sitenize girdiğinde tarayıcı web sitenin bulunduğu sunucuya bir istek gönderir. Sunucu bu isteği işler ve karşılığında bir cevap gönderir. Sunucu kendine gelen isteği ne kadar hızlı işlerse verdiği cevabın süresi de o kadar kısa olur. Ama sunucu isteği yavaş işlerse -ki bunun bir sürü sebebi olabilir- o zaman vereceği cevap kullanıcıya daha uzun sürede ulaşacaktır. Bu durum web site hızlandırma işlemlerimiz için hayati öneme sahiptir.

 


 

Web Sitenizin Hızını Ölçün

İşe öncelikle web sitenizin şu andaki hız skorunu öğrenerek başlayın. Buradaki skorları bir yere not edin işiniz bittiğinde karşılaştırma yapabilmeniz için lazım olacak 🙂 Web site hızı ölçmek için kullandığımız başlıca araçlar mevcut. Bunların en bilindiği Google’un kendi servisi olan Google PageSpeed Insight. Diğer bilindik servisler ise GTMetrix ve WebPageTest.

Google PageSpeed Insight

Bu servise Nisan 2019 tarihi içerisinde görsel ve alt yapısal iyileşmelere sahip bir güncelleme geldi. Yeni arayüzü ve sitenize göre sonuç iyileştirmeleri için tavsiyeler de bulunması gayet hoş.

 

Unutmayın test sonuçları artı eksi 5 puan kadar oynabilir. Sorguları eş zamanlı bile gönderseniz sonuçları farklı görebilirsiniz. 5 puana kadar olan oynamalar normaldir.  

 

GTMetrix

Bu servis de oldukça eski ve bilindik bir servis. En güzel yanı optimize etmeniz gereken görselleri size bildirirken optimize edilmiş hallerini de indirilebilir linkler olarak sunması. Kötü yanı ise sorgularını Canada lokasyonundan göndermesi. Unutmayın istemci ile sunucu arasındaki mesafe ne kadar uzarsa sonuçlar o kadar geç gelir. Bu konuya ilerde detaylı şekilde değineceğiz.

WebPageTest

Oldukça eski ve bilindik bir servistir. En güzel yanı sorguyu göndermek için size lokasyon seçenekleri sunması ve bu seçeneklerin içerisinde İstanbul ve Ankara şehirlerinin de olması.  


 

Web Sitenizi Analiz Edin

Hız sorgularından sonra sonuçları aldınız. Şimdi sıra eksiklerimizi ve hatalarımızı analiz etmekte.