Site Hızı Nasıl Artırılır?

Site yükleme hızı, sadece Google kriterlerini karşılamak açısından değil, ziyaretçilerine iyi bir kullanıcı deneyimi yaşatmak isteyen site sahipleri için de oldukça önemli bir faktördür.

Teknik açıdan bakıldığında hızlı ve etkili şekilde çözülmesi gereken sayfa yükleme hızı Web sitenize ve SEO projenize ciddi katkı sağlayabilir. Google tarafından 1 Ağustos 2018 tarihinde gerçekleştirilen algoritma güncellemesinde belirleyici faktörlerden birisinin site yükleme hızı olduğu söyleniyor. Gelin sizler için oluşturduğumuz Site Yükleme Hızı Optimizasyonu Rehberi’ne hep birlikte göz atalım.

Yazımıza sert bir giriş yapalım: Google sitenizin bir saniyeden daha hızlı bir sürede yüklenmesini istiyor. Böyle bir şey mümkün olabilir mi? Google bu isteğiyle nereye varmak istemektedir?

Aslında Google’ın hedeflediği şey oldukça basit: Daha hızlı yüklenen sayfalar. 2018 yılına az bir zaman kala, yüklenmesi 10 saniyenin üzerinde zaman alan Web siteleriyle karşılaşmak kimin hoşuna gider? Bir kullanıcı olarak düşünün; yavaş yüklenen sayfalar, kullanıcı deneyimini yok eden bir numaralı sebeptir. Yavaş yüklenen sayfaların birden fazla sorunu olduğunu düşünerek, aşağıdaki listeye bir göz atalım ve nelerin sayfa yükleme hızını olumsuz etkilediğini görmeye çalışalım:

• CSS ve JS komut dosyalarının işleme süreçleri
• Kullandığınız fontlar ve eklentiler
• Yüksek boyutlara sahip görsel ve medya dosyaları
• İlk bayt zamanı ölçümü
• Toplam yükleme süresi, sayfa boyutları ve istek sayıları
• Farklı coğrafi konumlardan performans testleri
• Farklı tarayıcılardan performans testleri
• Http Üstbilgilerinin analiz edilmesi
• İçerik Dağıtım Ağı (CDN) performansının ölçülmesi

Site Yükleme Hızı Kavramları

Birinci Bayt Zamanlaması: Bu kavram (Time to first byte, TTFB) web sunucusunun tepki hızını ölçmeye yarar. Temel olarak tarayıcının isteği gönderdiği andan itibaren sunucunun ilk yanıt verme süresi milisaniye olarak ölçülür. İyi konfigüre edilmiş bir sunucu veya coğrafi konuma göre ayarlanmış bir CDN sunucusu birinci bayt zamanlamasını iyileştirmeye yarayabilir.

Oluşturmayı Önleyen JavaScript ve CSS Kodları: JavaScript komut dosyaları ve CSS dosyaları sayfa yüklenirken çalışmaya ve sayfanın hızlı yüklenmesini engellemeye başlayabilir. Bundan kaçınmak için JavaScript dosyalarınızı satır içine yerleştirebilirsiniz. Daha detaylı bilgi için Oluşturmayı Engelleyen JavaScript’leri Kaldırma yardım sayfasına bakabilirsiniz. CSS dosyaları için de olabildiğince az özelleştirilmiş stil ve az sayıda stil dosyası kullanmak yüklemeyi hızlandırmanızı sağlayabilir. Yine daha detaylı teknik bilgi için Oluşturmayı Engelleyen CSS yardım sayfasına göz atabilirsiniz.

Kaynak Optimizasyonu: Sitenizde yer alan her şey, bir miktar kaynağın kullanılmasına sebep olur. Özellikle Html, Js ve Css dosyalarınızda yer alan;

• Boşluk karakterleri,
• Yeni satır karakterleri,
• Yorumlar / bilgi komutları,
• Blok sınırlayıcıları

dosya boyutlarının normalden fazla bir miktara ulaşmasına sebep olur. Bu dosyalar gözünüze çok küçük gibi görünebilir ancak sayısı artan kod parçacıkları bir araya geldiğinde hatırı sayılır miktarda gecikmeye yol açabilir. Bu açıdan çeşitli kod küçültücü araçlar kodlama dosyalarınızı küçültmek açısından faydalı olabilir.

HTTP İstekleri: Tarayıcınız bir sunucudan veri getirdiğinde bunu HTTP (Köprü Metni Aktarım Protokolü) kullanarak yapar. Bu süreç kullanıcı ve sunucu arasındaki istek – cevap olayını tanımlar. Sayısı gittikçe artan Http istekleri sunucunun yanıt süresini de uzatacaktır. Bu süreyi kısaltmak için yapabilecekleriniz:

• CSS ve JS dosyalarınızı birleştirmek
• Js dosyalarını satır içi kullanmak (boyutlarının küçültülmesi şartıyla)
• Css Sprite kullanmak
• Üçüncü parti eklenti ve / veya dosyaları kullanılıyorsa bunların sayısını azaltmak

Önemli Referans Videoları:

Sayfa Yükleme Hızı ile ilgili aşağıdaki 3 referans videoyu izlemenizi şiddetle tavsiye ederiz. Danışmanlık almak isterseniz, Frontend Developer Yağmur Birdinç ile iletişime geçebilirsiniz.

Ücretsiz Web Sitesi Hız Testi Araçları

Web sitenizin ve sayfalarınızın hızını test etmek için aşağıdaki 15 ücretsiz aracı kullanabilirsiniz. Şunu da belirtmiş olalım; bunlar gibi araçları çalıştırırken, ilk DNS aramasının genelde daha yavaş olacağını bilmenizde yarar var . Toplam yükleme sürelerini karşılaştırıyorsanız bazen testleri birden çok kez çalıştırıp sonuçların ortalamasını almanız daha isabetli olur.

Site ve Sayfa Yükleme Hızı Test Araçları:

1. Google PageSpeed Insights
2. Google Lighthouse
3. Pingdom
4. GTmetrix
5. KeyCDN Speed Test
6. WebPageTest
7. Varvy Pagespeed Optimization
8. UpTrends
9. dotcom-monitor
10. PageScoring
11. Yellow Lab Tools
12. Google Chrome DevTools
13. Sucuri Load Time Tester
14. Pagelocity
15. YSlow
16. PerfTool
17. DotCom Tools

1- Google PageSpeed Insights

Google PageSpeed ​​Insights, sayfanızı 1 – 100 arasında derecelendiren bir web sitesi hız testi aracıdır. Test sonucunda aldığınız skor ne kadar yüksekse, siteniz o kadar hızlı yükleniyor demektir. Genel olarak 85 üzerinde puan alan bir sayfanın çok iyi bir yükleme hızına sahip olduğunu söylememiz mümkündür. Ayrıca PageSpeed, sayfanın hem masaüstü hem de mobil versiyonu için ayrıca ölçüm yapabilmektedir. PageSpeed ile birlikte Think With Google projesine de göz atarak mobil sitenizin yükleme hızıyla ilgili daha detaylı bilgi alabilirsiniz.

Google PageSpeed Insights diğer ölçüm araçlarından biraz farklı çalışır, sitenizin veya sayfanızın hızını ölçerken herhangi bir lokasyon, cihaz, tarayıcı vb. ayrımı yapmaz. Bu açıdan çok gelişmiş bir araç olduğunu söyleyemeyiz ancak Google’ın gözünden sayfanız hakkında fikir almanızı sağlayabilir.

2- Google Lighthouse

Google Chrome eklentisi ve dahili uygulama olarak yüklü gelen Google Lighthouse, Web sitenizin performansını birçok aşamada ölçmeye yarayan oldukça faydalı bir araç. Test yapılan sitenin özellikle mobil tarafını ağırlıklı olarak ölçmeye çalışan Lighthouse, sayfa yükleme hızı konusuna acımasız gerçekleri göz önüne seriyor. Yazının başında da ifade ettiğimiz birinci bayt zamanlaması Lighthouse için çok önemli bir ölçüt. Google Lighthouse hakkında daha detaylı bilgi almak için yazımıza hemen göz atın:

Google Lighthouse ile Web Sitenizin Performansını Arttırın

3- Pingdom Speed Test

Pingdom muhtemelen daha iyi bilinen web sitesi hız test araçlarından biridir. Raporları, istatistik dökümü, performans notu, sayfa analizi ve geçmişi içeren dört ayrı bölüme ayrılmıştır. Ayrıca sayfa analizi, boyut analizi, alan adı boyutu ( alanınızla alanınız arasında CDN varlıklarınızın boyutunu kolayca karşılaştırabilirsiniz ), alan adı başına talep sayısı ve en çok talep edilen içeriğin türü gibi ek bilgilerle mükemmel bir genel bakış sunar .

Pingdom hız test aracı web sitenizin hızını dört ana lokasyondan sınamanıza izin verir:

• Dallas, Texas, ABD,
• Melbourne, Avustralya
• San Jose, Kaliforniya, ABD
• Stockholm, İsveç

Bir Pingdom hız testi sonucunda size, nerede iyileştirmeler yapabileceğinizi gösteren Google PagesSpeed ​​Insights’a benzer performans bilgileri verilir. Sonuçlar ayrıca sayfa boyutunu içerik türüne, etki alanına göre sayfa boyutuna, içerik türüne göre isteklere ve etki alanına göre isteklere göre parçalara ayırır.

4- GTmetrix

GTmetrix, hem PageSpeed ​​hem de YSlow ölçümlerini kontrol ederek sitenizi A’dan F’ye derecelendiren ayrıntılara girer. Raporlar, PageSpeed, YSlow, şelale dökümü, video ve geçmiş gibi beş farklı bölüme ayrılmıştır. Ücretsiz kayıt olarak, yedi farklı lokasyondan, Chrome vs Firefox tarayıcısı üzerinden yapabilirsiniz.  Sayfa yükleme hızını nasıl etkilediğini görmek için çeşitli bağlantı türlerine (Kablo, Adsl gibi) karşı web sitesi performansını test edebilir ve karşılaştırabilirsiniz. Diğer gelişmiş özellikler arasında sitenizdeki tıkanıklığın nerede olduğunu analiz eden bir video oynatma özelliği de bulunmaktadır. Örneğin sitenizdeki reklamlar devre dışı bırakıldığında sayfa yükleme hızının nasıl etkilediğini görmeniz mümkün.

5- KeyCdn Speed Test

KeyCDN, web sitenizin nasıl performans gösterdiğine dair ayrıntılı bilgiler edinmek için kullanabileceğiniz hızlı ve hafif bir web sitesi hız test aracıdır. Dünyanın her yerinden 14 bölge seçebilir ve test sonuçlarınızı özel veya herkese açık hale getirebilirsiniz. Ayrıca, PageSpeed’in yanı sıra mobil cihazlarda çalışan test araçlarından biridir.

6- WebPageTest

WebPageTest, şu ana kadar bahsettiğimiz test araçlarına benzer özelliklere sahip, 25’ten fazla tarayıcı (mobil dahil) arasından seçim yapabileceğiniz ve 40’ın üzerinde lokasyona sahip olan bir test aracıdır. İlk bayt süresi, sıkıştırma, ön belleğe alma, bir CDN’nin etkili kullanımı gibi farklı performans testlerine dayalı olarak A’dan F’ye kadar performans notu belirler. Test sonucunda çıkan raporlarda özet, detaylar, performans incelemesi, içerik analizi, ve ekran görüntüleri yer almaktadır.

Ayrıca bu testin diğerlerinden bir farkı vardır, test kullanıcının sayfaya ilk defa geldiği zaman ve kısa zaman sonraki yaptığı ziyaretleri karşılaştırma fırsatı sunar. Daha önce de belirttiğimiz gibi, siteye ilk kez gelen bir kullanıcının DNS zamanlaması daha fazla olacaktır, bu açıdan sitenizdeki kaynakların optimize kullanılması açısından önemli bir fikir sahibi olmanız mümkün olacaktır.

7- Varvy Pagespeed Optimization

Varvy Sayfa Yükleme hızı test aracı, kaynak kullanım diyagramı, CSS dağıtımı, JavaScript kullanımı, bulunan sayfa hızı sorunları ve kullanılan hizmetler gibi 5 farklı bölüme ayrılarak size fikir vermektedir. Ayrıca bu test aracıyla birlikte sayfa yükleme hızı konusunda ihtiyacınız olan tüm dökümanları bulmanız mümkün.

8- Uptrends

Uptrends kullanımı oldukça basit olan ve hız testi yaparken 35’ten fazla lokasyon seçimi yapılabilen bir test aracı. Raporları, istatistiki döküm ve alan grupları olmak üzere iki bölüme ayrılıyor. Birinci bölümde genel istatistikler, CDN, sosyal medya, reklamlar, birinci parti ve üçüncü parti olmak üzere, sayfada yer alan kaynakları kategorize ettiği için benzersiz bir bakış açısı sunar.

9- Dotcom Monitor

Dotcom-Monitor sayfa yükleme hız testini çalıştırabileceğiniz 23 farklı lokasyon ve yedi farklı tarayıcı sunmaktadır. Bu test aracının en önemli özelliği, tüm coğrafi testleri aynı anda çalıştırabilmenizdir, böylece diğer testlere kıyasla kısa zamanda çok daha fazla lokasyon testi yapmanız mümkün olur. Test sonucunda da aldığınız raporlar; özet, performans, istatistik grafiği, ana makine durumu ve yükleme hatalarını içeren beş ayrı bölüme ayrılmıştır.

10- PageScoring

Pagescoring minimalist bir tasarımla basit ve anlaşılması kolay bir performans raporu sunmayı amaçlayan test araçlarından biridir. Bu aracı kullanarak test yaptığınızda sayfanın toplam yükleme süresini ve daha sonra aşağıdaki bilgileri gösterir:

• Alan adı aramaları
• Bağlantı süresi
• Yeniden yönlendirme süresi
• Sayfa boyutu
• İndirme süresi

Ayrıca sayfadaki her öğenin yüklenmesi için ne kadar süre geçtiğini görebilirsiniz. Hızlı ve kolay bir web sitesi hız testi aracı arıyorsanız, PageScoring bu açıdan beklentilerinizi karşılayabilir.

11- Yellow Lab Tools

Yellow Lab Tools sayfanın yüklenmesi sırasında JavaScript ile JavaScript etkileşimlerinin ne kadar zaman aldığını ve diğer kod doğrulama sorunlarıyla ilgili olarak, diğer araçlarda görülmeyen çok sayıda bilgi ve benzersiz özellik sunar. Ayrıca aşağıdaki ölçütler çerçevesinde sayfanıza global bir skor da vermektedir:

• Sayfa boyutu
• İstekler / Cevaplar
• Dom (Document Object Model – Belge Nesnesi Modeli)
• Kötü JavaScript konfigürasyonu
• Kötü Css konfigürasyonu
• Sunucu konfigürasyonu

Test sonucundaki JavaScript zaman çizelgesi de, DOM’un sayfanın yüklenmesi sırasında tam olarak nasıl etkileşimde bulunduğunu gösterir.

12- Google Chrome DevTools

Ve elbette Google Chrome DevTools‘u unutamayız. Her zaman erişebileceğiniz, offline çalışma şansınız olan ve diğer hız testleri kadar efektif olan Chrome Geliştirici Araçlarına erişmek için Windows işletim sisteminde Ctrl + Shift + I veya F12 tuşlarına, Mac işletim sisteminde Cmd + Opt + I tuşlarına basarak erişebilirsiniz. En son geliştirici araçları güncellemesiyle birlikte istatistik görünümünde yeniliklere kavuşan bu araç zaman çizelgesi bazında test ettiğiniz sayfa hakkında oldukça değerli bilgiler sunuyor. Ayrıca DOM içerik yüklemesi sırasında neler hız düşüşüne yol açıyor, bunu görmek için ağ bölümüne de göz atabilirsiniz.

13- Sucuri Load Time Tester

Sucuri Load Time Tester, dünyanın dört bir yanından siteleriniz performansını test etmeniz hızlı ve kolay bir yol sağlar ve sitenize A’dan F’ye kadar performans notu verir. Test, sitenize bağlanmanın ne kadar zaman aldığını ve bir sayfanın tam olarak yüklenmesinin ne kadar sürdüğünü ölçer. Dikkat edilmesi gereken en önemli değerlerden biri olan ilk bayt zamanının da ölçülmesi bu test ile mümkün olabilmektedir. Bu test ile dünyanın farklı yerlerinden birçok lokasyonu kullanarak sitenizin uzak bölgelerdeki performansını ölçebilirsiniz.

14- Pagelocity

Pagelocity rakiplerine göre biraz daha kapsamlı bilgi vermeyi amaçlayan bir test aracıdır. Test sonucunda sosyal medya etkisi, SEO öğeleri, kodlama gibi faktörlerden oluşan bir puanlama sistemi sunar. Ayrıca test yaparken sitenizdeki veya rakip sitelerdeki sayfaları da karşılaştırma fırsatınız olabilir. Ayrıca kod optimizasyonu, sitenizin HTTPS üzerinden yayınlanıp yayınlanmadığını, ilk bayt süresini ve DOM öğelerinizin grafik bir arayüzünü gösterebilmektedir. Test sonucunda kaynak görünümüne de göz atarak sayfada yer alan kaynakların ağda ne kadar yük oluşturduğunu da görebilirsiniz.

15- YSlow

YSlow Yahoo’nun yüksek performanslı web sitesi kurallarına göre analiz edilen sayfaların neden yavaş olduklarını anlamanıza yardımcı olan açık kaynaklı bir proje ve araçtır. YSlow, performans testi sonuçlarını elde etmek için üç adımda çalışır:

• Tüm bileşenleri (resim, komut dosyaları vb.) bulmak için DOM’u tarar.
• Her bileşen boyutu hakkında bilgi alır (gzip vb.)
• Aldığı verilerle her kural için bir derecelendirme üretir ve sayfaya genel bir not verir.

YSlow Google Chrome eklentisini de kullanarak GTmetrics ile birlikte test yapmanız mümkündür.

16- PerfTool

PerfTool, Github üzerinde barındırılan açık kaynak performans ölçüm aracıdır. Analiz edilen sayfa hakkında çeşitli bilgiler toplar ve anlaşılır bir test raporu sunar. Test kriterleri PageSpeed ​​Insights ve W3CJS ile birlikte 200 farklı gösterge üzerinden belirlenmektedir. Perftool diğer araçlardan bir yönüyle ayrılmaktadır, birden fazla testi PageSpeed Insights içerisinde aynı anda çalıştırabilirsiniz. Sonrasında tüm test sonuçlarını birbiriyle karşılaştırabilirsiniz. Sayfalarınızı tek tek test etmenize gerek kalmadığı için, sitenizin web performansının tamamına kıyaslarsanız, bu size gerçekten çok zaman kazandırabilir.

17- DotCom Tools

Yeni ve kapsamlı teknolojilerle bezenmiş olan Dotcom-Tools’un speed test aracına göz atmanızı tavsiye ederiz

Google Chrome Eklentileriyle Web Sitesi Hız Testi

Web sayfası hızını analiz edebileceğiniz tamamen ücretsiz birkaç Chrome uzantısından bahsetmek isteriz. Bu eklentileri Google Chrome tarayıcınıza yükleyip istediğiniz zaman test yapabilirsiniz.

• Page Load Time
• app.telemetry Page Speed Monitor
• Performance-Analyser
• LoadFocus Load Testing

Mobil Siteniz İçin Hız Testi

Mobil web sitesi hız testi yapmanız gerekiyorsa, yukarıda bahsettiğimiz araçlardan WebPageTest, GTmetrics ve dotcom-monitor size yardımcı olabilir. Ayrıca Google Chrome’un Developers Tools’u da mobil cihaz simülatörü içermektedir. Bağlantı hızını, cihaz modelini ve ekran çözünürlüğünü dilediğiniz gibi değiştirerek mobil sitenizde hız ölçümü yapabilirsiniz.

Özet

Gördüğünüz gibi seçim yapabileceğiniz bir dizi sayfa yükleme hızı test aracı bulunmaktadır. Bunların her biri kendine has özelliklerine sahiptir. Sitenizi düzenli olarak test etmeniz ve bir kıyaslama geçmişi tutmanız iyi bir fikirdir, böylece zaman içinde iyileştirmeler yapabilir, yaptığınız iyileştirmelerin etkisini ölçümleyebilirsiniz.

Testler ve geliştirmeler sonrasında dar boğazların nerede olduğunu tespit ederek onları düzeltmeye başlayabilirsiniz. Yukarıdaki araçların neredeyse tamamı yükleme hızı için yapılması gerekenleri listeler. Bunlar arasında en yaygın düzeltmelerden bazıları şunlardır:

• Resimlerinizi ve dosyalarınızı sıkıştırmak
• Hızlı bir web sunucusu seçmek
• Kodlarınızı ve komut dosyalarınızı optimize etmek
• İçerik Dağıtım Ağı (CDN) kullanmak
• Ön bellekleme kurallarına uymak
• HTTP isteklerinin sayısını azaltmak

Son söz olarak, sayfa yükleme hızı optimizasyonu tek seferlik bir proje gibi düşünülmemelidir. En azından haftalık testler yaparak gerekli iyileştirmeleri düzenli olarak yapmalısınız. Ancak bunu yaptığınız takdirde sayfa yükleme hızından beklediğiniz geridönüşü elde edebilirsiniz.