Sayfa Yüklenme Hızını Artırmanın Yolları

Her şeyin en hızlı bir şekilde insanlara ulaştırılması önem arz ediyor. Hız çağında yaşadığımız için her alanda her şeyin en hızlısını yapma yarışı bulunuyor. Nitekim yoğun hayat akışı içerisinde, insanların beklentileri arasında işlerini hızlıca halledebilme yer alıyor. Benzer şekilde SEO açısından websitelerini el aldığımızda, bilginin hızlı bir şekilde hedef kitlelere aktarılması gerekiyor. Bu noktada SEO açısından sayfa yüklenme hızı büyük önem taşıyor. Bu haftaki blog yazımızda da sayfa yüklenme süresi ile ilgili detayları, bunun SEO açısından önemini, sayfa yüklenme hızı optimizasyonu ve site hızı test araçları ile ilgili detayları sizlerle paylaşayacağız.

Sayfa Yüklenme Hızının SEO Açısından Önemi

Site hızı her kullanıcı için önemlidir. Tıklanılan linkin hızlı bir şekilde açılması beklenir. Nitekim yapılan araştırmalar, internet kullanıcılarının sitelere açılmaları için yalnızca birkaç saniye tanıdığını gösteriyor. Nitekim hız çağında aradıkları ürünü, hizmeti ya da bilgiyi sunan onlarca farklı kaynak varken, herhangi bir sitenin açılması için sabretmek onlara anlamsız geliyor. Kullanıcı deneyimini önemli oranda etkileyen sayfa yüklenme süresi, 2010 yılında Google’ın gündemine de girdi. Google, 2010 yılında yaptığı açıklama ile birlikte, sayfa yüklenme süresinin artık önemli sıralama faktörleri arasında yer aldığını ilan etti. Dolayısıyla uzun süredir site açılma hızında yarım saniyenin bile önemi çok büyük oranda artmış bulunmaktadır.

Google’ın kullanıcı deneyimini her zaman ön plana aldığını ve bu doğrultuda sürekli olarak yeni sıralama faktörleri ve algoritmalar geliştirdiği biliniyor. Hizmet, ürün ya da bilgi sunması farketmeksizin; tüm websitelerin ana amacı daha üst sıralara tırmanıp hedef kitlesi içinden daha fazla insana seslenebilmektir. Bunun için Google’ın önemsediği konu olan kullanıcı deneyimini geliştirme yönünde aksiyonlar almak önemlidir. Bu kapsamda da dikkat edilmesi gereken en önemli noktalar arasında, sayfa yüklenme hızı optimizasyonu yer almaktadır. Dolayısıyla websitelerin hem masaüstü hem de mobil versiyonlarının hızlı olması, site hızı optimizasyonu yapılması kullanıcı deneyimini ve daha üst sıralara tırmanabilmek açısından önemlidir.

Sayfa Yükleme Hızı ile İlgili Genel Kavramlar

Sayfa yüklenme hızı optimizasyonunun nasıl yapılması gerektiği ile ilgili detaylara geçmeden önce, bu konuda hakkındaki temel kavramlara hakim olmayan kişiler için belli başlı kavramları tanıtmak faydalı olacaktır.

● Birinci Bayt Zamanlaması (Time to First Byte): Web sunucusunun tepki hızını ölçer. Tarayıcı tarafından gönderilen isteği ile ilk yanıt verme süresi arasındaki süre milisaniye cinsinden ölçülür.

● Oluşturmayı Önleyen JavaScript ve CSS Kodları: Birtakım JavaScript komut dosyaları ve CSS dosyaları, sayfa yüklenme esnasında hızlı yüklenmesinin önüne geçebilir. Bu durumu elimine etmek adına JavaScript dosyaları satır içerisine yerleştirilmelidir.

● Kaynak Optimizasyonu: Websitelerinde bulunan her detayın, kullanılan toplam kaynakta payı vardır. Özellikle HTML, JS, CSS gibi dosyalarda bulunan boşluklar, yeni satır karakterleri , yorumlar gibi detaylar dosya boyutlarının normalin üzerine çıkmasına sebebiyet verebilir. Her ne kadar tek tek bakıldığında küçük boyutlara sahip gibi gözükseler de, genel toplama bakıldığında sayfa hızını yavaşlatan bir boyuta ulaşırlar.

● HTTP İstekleri: Tarayıcılar herhangi bir sunucudan verileri alma işlemlerini http kullanarak yapmaktadırlar. HTTP isteklerinin artması ise sunucunun yanıt süresini de arttıracaktır. Bu sürenin kısaltılması için CSS ve JS dosyalarının birleştirilmesi, CSS Sprite kullanımına yer vermek, sayfa hızı optimizasyonu gibi işlemler yapılmalıdır.

Google Lighthouse Kapsamlı Türkçe Rehberi

Sayfa Yükleme Hızı Optimizasyonu Süreci

Konu ile ilgili genel kavramlara kısaca değinmemizin ardından, sayfa yükleme hızı optimizasyonu sürecinde yapılması gereken işlemler ile ilgili detaylara geçiş yapabiliriz.

1. Küçültme, Sıkıştırma ve Ön Belleğe Alma

Küçültme işlemi (minify) HTML, CSS ve JavaScript üzerine uygulanabilmektedir. Sıkıştırma (compress) işlemi ile benzese de aslında farklıdır. Küçültme işleminin işlevi gereksiz boşlukları, yorumları koddan kaldırarak tarayıcının gereksiz vakit kaybını engellemektir. Sıkıştırma işlemi ise gzip ya da brotli benzeri bir sıkıştırma şeması ile dosya boyutunu azaltır. Ön belleğe alma işleminde ise herhangi bir sayfa ilk kez ziyaret edildiğinde, eğer ilgili site sunucuda ön belleğe alınmışsa, kullanıcı tarayıcısı ilgili içeriği indiriyor. Kullanıcının bir sonraki ziyaretinde ise ilgili sayfa sunucudan değil, ön bellekten getiriliyor. Sıkıştırma ve ön belleğe alma işlemleri sunucu tarafında yapılırken, küçültme işlemi sunucuya aktarılmadan yapılmaktadır. Sonuç olarak site hızı optimizasyon sürecine küçült, sıkıştır ve ön belleğe al işlemleri ile başlanabilir.

2. Inline CSS & Media

CSS tamamlanmadan DOM ve JavaScript bekletildiğinden dolayı CSS sürecini azaltmak önemlidir. Bu doğrultuda temel olarak CSS’ dış bir kaynaktan yüklenmek yerine, inline olarak nitelendirilen HTML kaynağı içinde açık verme işlemi yapılarak söz konusu süre kısaltılabilir. Bununla birlikte CSS içerik sayısı fazlaysa, söz konusu çözüm işe çok da yaramayabilir. Bu tip durumlarda ‘media’ seçeneği ön plana alınmalıdır.

Bu doğrultuda ilk linke bakalım. Herhangi bir media açıklaması olmaması, süreci durdurucu etki yapar, yani CSS işlemi tamamlanmadan DOM’un devam etmeyeceği anlamına gelir. İkinci linkte media=print yer alıyor. Bu durumda yalnızca içerik basılı ise CSS uygulanır. Bunun anlamı içerik gelmeden herhangi bir işlemin yapılmamasıdır. Sürecin ertelenmesi gibi nitelendirilebilir. Sonuç itibarıyla CSS inline yapılabiliyorsa yapılmalı, eğer CSS içerik yoğunluğundan dolayı yapılamıyorsa da ‘media’ işaretlemeleri kontrol edilmelidir.

3. JavaScript Async ve Defer İşareti

JavaScript’in DOM sürecini baltaladığından daha önce bahsetmiştik. Ancak bu durum için çözüm geliştirilebilir. Farklı bir şekilde komut verilmediği müddetçe JavaScript senkronize olarak çalışmaktadır. Async olarak işaretlendiği takdirde, senkronize olarak çalışmayı durdurur. Asenkronize olarak çalışmaya başladığında ortalama olarak 25 saniye daha az sürede çalışır. Sonuç olarak da DOM sürecini bekletmez. Bununla birlikte inline JavaScript yapılması halinde async olarak çalışmayacağını unutmamakta fayda bulunmaktadır. Async ile benzer bir etkiye sahip olan defer işaretlemesine de değinmekte fayda var. Defer işareti async gibi işaretlenir ancak her şey tamamlandıktan sonra JavaScript’i çalıştır manasına gelir.

4. CRP Kaynaklarının ve Uzunluğunun Azaltılması

Sayfa hızı optimizasyonu bir nevi CRP optimizasyonudur. CRP’de HTML, CSS ve JavaScript gibi kaynakların fazla olması tarayıcının cevap verme süresini uzatır ve buna bağlı olarak da sayfa açılma süresi olumsuz yönde etkilenir. Kaynakların azaltılması ve CRP sürecinin kısaltılması, doğal olarak sayfa hızına arttırıcı bir etkide bulunacaktır.

5. Görsel Optimizasyonu

Sayfa yüklenme hızına etki eden faktörler arasından yüksek kaliteli görseller de yer almaktadır. Görsel kullanımında aynı anda hem kullanıcının kendisi hem de SEO göz önünde bulundurulmalıdır. Görsel optimizasyonunda küçültme işlemi SEO performansı açısından olumlu etki edecek olsa da, kullanıcı açısından görsel kalitesi sorgulanabilir olacaktır. Dolayısıyla websitesinde kullanılacak görseller için optimizasyon yaparken hem site performansını hem de kullanıcıyı bir arada düşünerek hareket edilmelidir.

Scalling adı verilen işlem, görsel boyunu değiştirme işlemidir. Her sayfada görselin kendi boyutundan ayrı olarak, görselin konulabileceği alanların da belli bir piksel genişliği bulunmaktadır. Kaynak kodunda açılan görselin altında doğal ve görüntülenen boyut olmak üzere iki farklı boyut bulunmaktadır. Doğal boyut görselin kendisine ait genişlik ve yüksekliği gösterir. Görüntülenen boyut ise sayfanın piksel genişliğine bağlı olarak görselin sayfa üzerinde görüntülendiği boyut anlamına gelir. Bu açıdan görüntülenen boyut ile doğal boyutun ölçüleri birbirlerine olabildiğince yakın olmalıdır. Bu hem SEO hem de kullanıcı deneyimi açısından önem teşkil eder. Bu yüzden bir görsel hazırlanırken, görselin doğal boyutu sayfanın görüntülenen boyutu ile uyumlu olacak şekilde düzenlenmelidir.

Site hızını arttırmak için yapılan görsel optimizasyonu konusunda sıkıştırma (compress) işlemine de değinmekte fayda var. Sıkıştırma işlemi kısaca dosya boyutunu küçültmeye yarayan bir işlemdir. Kayıplı (lossly) ve kayıpsız (lossless) olmak üzere iki farklı küçültme biçimi bulunmaktadır. Kayıpsız küçültmede görsel kalitesi düşmeksizin gereksiz meta veriler kaldırılır. Kayıplı sıkıştırma da görsel kalitesi biraz düşmektedir. Ancak bununla birlikte kayıplı sıkıştırma da kayıpsız sıkıştırmaya kıyasla daha fazla küçültme işlemi sağlanır. Görsel sıkıştırma işlemlerini kraken.io, imagify.io, compressjpeg.com gibi websiteler üzerinden yapabilirsiniz.

6. Lazy Load Metodu

Görsel sayısının çok ve sayfanın uzun olduğu yerlerde, ilgili sayfanın daha hızlı açılmasına yardımcı olan bir JavaScript dosyasıdır. Lazy load yöntemi sayesinde kullanıcıların henüz görüntülemediği ve önemli olmayan kaynakların yüklemesi ertelenebilir. Yani uzun sayfada kullanıcının henüz göremediği detaylar hemen yüklenmez, kullanıcının ilk gördüğü yerdekiler yüklenir. Sayfa açıldıktan sonra kullanıcı ilk çıkan yeri incelemeye başladığında ise, aşağıda kalan ve yüklemesi ertelenen detaylar yüklenmeye başlanır. Böylelikle sayfanın yüklenme ağırlığı dağıtılmış ve hafifletilmiş olur. Dolayısıyla bu da görsel sayısının fazla olduğu ve sayfanın uzun olduğu sayfaların normalden daha hızlı açılmasına yardımcı olur. Bununla birlikte lazy loading metodu her ne kadar ilk bakışta kusursuz gibi gözükse de, performans açısından dezavantajları da bulunmaktadır. Örneğin, Google botları lazy load metodu ile gelen kaynakların taramasını her zaman yapamayabiliyor. Dolayısıyla böyle durumlarda Google Search Console üzerinde fetch and render testi yapılırken ilgili hatalarla karşılaşılabilir.

7. CDN (Content Delivery Network)

Kısaca CDN olarak adlandırılan içerik dağıtım ağı, statik içeriklerin farklı yerlerde bulunan sunuculara yüklenmesini ve böylelikle kullanıcılara en yakın lokasyondan sayfaların yüklenmesine yardımcı olur. Nitekim çok uzakta bulunan bir sayfa ziyaret edildiğinde, sayfa açılma hızında gecikme olacaktır. CDN, özellikle farklı ülkelerden ve şehirlerden ziyaretçilerin olduğu, trafiği yüksek olan, sitesinde birçok medya içeriğini barındıran websiteler için önemli artılar getirecektir. Küçük çaplı websiteler için CDN çalışmaları pek de gerekli olmayacaktır. CDN hizmeti sağlayan şirket arasında AmazonCloudFront, Cachefly ve MaxCDN gibi şirketleri sayabiliriz.

Sayfa yüklenme hızı optimizasyonu ile yapılabilecekler listesi uzun uzadıya gider. Nitekim site hızını optimize etme konusunda birçok detay bulunmaktadır. Ancak bununla birlikte sizler için en önemli olanları sıralamaya ve açıklamaya çalıştık.

Site Hızı Test Araçları

Website yüklenme hızı için yapılabilecek belli başlı optimizasyon süreçlerine değinmemizin ardından, site hızı test araçlarına da değinebiliriz. Yazımızın bu bölümünde, ön plana çıkan site hızı test araçlarının adlarını belirtip, kısaca özelliklerine değineceğiz.

● Google PageSpeed Insights

Google PageSpeed Insights, sayfaları 1–100 arasında derecelendiren bir web sitesi hız testi aracıdır. Skorun yüksek olması, site hızının iyi olduğu anlamına gelmektedir. Genel olarak 85 ve üzeri puan almayı başaran sayfaların yüklenme hızının gayet iyi olduğu söylenebilir. Google PageSpeed Insights ile sayfaların hem masaüstü hem de mobil versiyonlarının hızını test edebilirsiniz.

● Google Lighthouse

Oldukça faydalı bir site hızı test aracı olan Google Lighthouse, site hızını farklı aşamalarda ölçmeye yaramaktadır. Özellikle sayfaların mobil versiyonlarının hızları ile ilgili detaylı bilgiler sunan Google Lighthouse, site hızını öğrenmek için iyi bir ölçüttür.

● Pingdom Speed Test

Rapor, istatistik dökümü, performans notu, sayfa analizi ve geçmişi olmak üzere 4 farklı bölümden oluşan Pingdon Speed test ile websitelerin sayfa açılış hızını birçok yönden ölçmek mümkündür. Öte yandan sayfa analizi, boyut analizi, alan adı boyutu, en çok aranan içerik türü gibi ek bilgileri de bu site hız testi aracı üzerinden bulmak mümkündür.

● GTmetrix

GTmetrix, PageSpeed ve YSlow ölçümlerinin kontrolünü sağlayarak ilgili sitenin A’dan F’ye derecelendiren ayrıntılara girer. Sunduğu raporların 5 ana gruba ayrıldığı GTmetrix’e ücretsiz olarak kayıt olabilir ve 7 farklı noktadan, Chrome ve Firefox tarayıcısı üzerinden GTmetrix’te sayfa hızı testi yapabilirsiniz.

● KeyCDN Speed Test

KeyCDN üzerinden sitenin hız performansına dair bilgileri ve verileri hızlıca alabilirsiniz. Dünya üzerindeki farklı 14 bölgeyi seçebileceğiniz bu site hızı test aracı üzerinden, test sonuçlarınızı dilerseniz özel dilerseniz de herkese açık hale getirebilirsiniz.

● WebPageTest

40’tan fazla lokasyona sahip olan WebPageTest üzerinden, mobil de dahil olmak üzere 25’ten fazla tarayıcı arasından seçim yapılabilmektedir. Notun A’dan F’ye kadar belirlendiği bu site hızı test aracı ilk bayt süresi, sıkıştırma, ön belleğe alma gibi farklı performans testlerine dayanmaktadır.

● Varvy Pagespeed Optimization

CSS dağıtımı, JavaScript kullanımı bulunan sayfa hızı sorunları ve kullanılan hizmetler gibi 5 farklı kategoride raporlar ve veriler sunmaktadır. Varvy PageSpeed site hız testi aracından, yükleme hızı hakkında ihtiyacınız olan tüm dosyaları da bulabilirsiniz.

● Uptrends

Uptrends, kullanımı son derece kolay olan ve kullanıcı dostu bir arayüze sahip olan website hız testi araçları arasında yer almaktadır. Uptrends üzerinden yapılan site hızı testlerinde 35 adetten fazla lokasyon seçimi yapılabilmektedir. Yapılan analizler neticesinde istatistiki döküm ve alan olmak üzere, sunduğu raporları iki ana grup halinde karşınıza çıkarıyor. Raporun ilk bölümü genel istatistiklerden meydana gelmektedir. Burada CDN, sosyal medya, reklam gibi alanlarda sayfada bulunan kaynaklar gruplandığı için, farklı bir bakış açısı kazanmanıza yardımcı olur.

● PageScoring

Son derece sade bir tasarıma sahip olan PageScoring, anlaşılması son derece kolay olan site hızı test raporları sunmasıyla bilinmektedir.PageScoring ile yapılan website hız testlerinin neticesinde sayfanın toplam yüklenme süresi, alan adı aramaları, bağlantı süresi, yeniden yönlendirme süresi, sayfa boyutu ve indirme süresi gibi bilgiler bir rapor halinde sizlere sunulmaktadır. Hem hızlı sonuçlar almak hem de yorumlanması kolay verilere ulaşmak isteyenler için uygun bir site hız analiz aracı olabilir.

● Yellow Lab Tools

Yellow Lab Tools üzerinden JavaScript etkileşimlerin ne kadar sürdüğü, kod doğrulama sorunları gibi konularda rapor alabilirsiniz. Buna benzer olan ve diğer araçlarda sık görülmeyen birçok bilgiyi sizlere sunmaktadır. Yapılan site hızı analizi neticesinde sunduğu bilgiler arasında sayfa boyutu, istek ve cevaplar, DOM, JavaScript konfigürasyonu gibi birçok konuda rapor hazırlamaktadır.

Dijital pazarlama ve SEO ajansı olan Stratejik SEO olarak sayfa yüklenme hızı optimizasyonu ile ilgili hazırladığımız blog yazısının sonuna geldik. Yazı boyunca ilk önce sayfa yüklenme hızının SEO açısından neden önemli olduğuna değinip konu ile ilgili belli başlı terimlerin tanımlarını sunduk. Ardından sayfa yüklenme hızı optimizasyon sürecinde yapılması gereken belli başlı işlemleri sıraladık. Son olarak da sayfa hızı testi yapabileceğiniz en iyi 10 site hızı test araçlarından kısaca bahsettik. Umarız sizler için okuması keyifli ve faydalı bir blog yazısı olmuştur. Hazırladığımız bu yazı hakkındaki sorularınızı ve düşüncelerinizi yorumlarınız ile kaynak linki üzerinden de bizlere aktarabilirsiniz.

Kaynak: https://www.stratejikseo.com/sayfa-yuklenme-hizi-optimizasyon/