Müşterilerimizden en sık duyduğumuz şikâyetlerden biri şu: “Site açılıyor ama bir türlü yüklenip bitmiyor.” Yavaşlığın sebebi neredeyse hiçbir zaman tek bir şey değildir; birkaç küçük sorun üst üste biner. İyi haber şu ki bu sorunlar çoğu sitede aynı yerlerde çıkar. Bu yazıda yavaşlığı nasıl ölçeceğinizi ve en sık karşılaştığımız yedi nedeni sırayla anlatıyoruz.
“Bizde hızlı açılıyor” cümlesi bir ölçüm değildir. Ofisteki bilgisayar sitenin dosyalarını çoktan önbelleğe almıştır, bağlantı da hızlıdır. Ziyaretçinin büyük kısmı ise siteye ilk kez, telefondan ve mobil veriyle gelir. Test de bu koşulda yapılmalıdır.
Başlangıç için iki araç yeterli. Google'ın PageSpeed Insights aracı sayfayı hem laboratuvar ortamında test eder hem de yeterli trafik varsa gerçek kullanıcılardan toplanan verileri gösterir. Chrome'un geliştirici araçlarındaki Network sekmesi ise sayfanın hangi dosyayı ne kadar sürede indirdiğini tek tek listeler. Yavaşlığın kaynağını çoğu zaman bu listenin en uzun satırlarında bulursunuz.
Google, sayfa deneyimini Core Web Vitals adını verdiği üç ölçüyle değerlendirir: ana içeriğin görünme süresi (LCP), sayfanın tıklamaya tepki süresi (INP) ve yüklenirken sayfanın kayıp kaymadığı (CLS). “İyi” kabul edilen sınırlar sırasıyla 2,5 saniye, 200 milisaniye ve 0,1'dir. Bu üç değeri not edin; aşağıdaki her düzeltmeden sonra yeniden bakacaksınız.
İncelediğimiz yavaş sitelerin çoğunda ilk sırada görseller çıkıyor. Fotoğraf makinesinden ya da telefondan alınan bir fotoğraf olduğu gibi yükleniyor, tarayıcı da 4000 piksellik görseli indirip 400 piksellik bir kutuya küçültüyor. Ziyaretçi, hiç görmeyeceği pikseller için bekliyor.
Çözüm üç adımdan oluşur. Görseli gösterileceği en büyük boyuta göre kesin. JPEG yerine WebP gibi daha verimli bir formatı tercih edin. Sayfanın alt kısmında kalan görsellere loading="lazy" ekleyerek ancak ziyaretçi oraya kaydırdığında yüklenmelerini sağlayın. Yalnız sayfanın en üstündeki büyük görsele bunu uygulamayın: o görsel genellikle LCP'nin ta kendisidir ve geciktirilirse ölçü kötüleşir.
Hazır altyapılarla kurulan sitelerde her yeni ihtiyaç bir eklentiyle çözülür: kaydırıcı, iletişim formu, sosyal medya kutusu, canlı destek, istatistik. Her biri kendi CSS ve JavaScript dosyasını her sayfaya yükler; iletişim formu yalnızca iletişim sayfasında olsa bile.
Aynı durum dışarıdan eklenen kodlar için de geçerlidir. Sohbet balonları, reklam ve takip etiketleri, gömülü videolar başka sunuculara bağlanır ve sizin kontrolünüzde olmayan bir hızla yüklenir. Yapılacak iş basittir ama cesaret ister: listedeki her eklenti ve etiket için “Bu son altı ayda bize ne kazandırdı?” diye sorun. Cevabı olmayanları kaldırın, kalanların yalnızca gerektiği sayfada yüklenmesini sağlayın.
Network sekmesinde ilk satıra, yani sayfanın kendisine bakın. Tarayıcı isteği gönderdikten sonra ilk baytı almak için uzun süre bekliyorsa sorun sitenin içinde değil, arkasındadır. Bu bekleme süresine TTFB (Time to First Byte) denir.
Uzun TTFB'nin en yaygın nedenleri; aynı sunucuyu çok sayıda siteyle paylaşan ucuz paketler, ziyaretçilerden uzak bir veri merkezi ve her ziyarette sayfayı veritabanından yeniden üreten yapılardır. Kurumsal bir site için hosting seçerken yalnızca disk alanına değil, sunucunun konumuna ve aynı makinede kaç site barındırıldığına da bakmak gerekir. Bu konudaki seçeneklerimizi web hosting sayfamızda bulabilirsiniz.
Bir ziyaretçi sitenizde ikinci sayfayı açtığında logo, menü görselleri ve stil dosyaları değişmemiştir. Sunucu bu dosyalar için uygun önbellek başlıkları göndermiyorsa tarayıcı hepsini her sayfada baştan indirir.
Benzer şekilde metin dosyalarının (HTML, CSS, JavaScript) gzip ya da Brotli ile sıkıştırılarak gönderilmesi, aktarılan veri miktarını belirgin biçimde düşürür. Bunlar çoğu sunucuda birkaç satırlık ayarla açılır; yine de denetlediğimiz sitelerin önemli bir kısmında kapalı olduğunu görüyoruz. Dinamik sitelerde buna ek olarak sayfa önbelleği kullanmak, her ziyarette veritabanına gitme zorunluluğunu ortadan kaldırır.
Tarayıcı, sayfanın başındaki stil dosyalarını ve senkron yüklenen scriptleri indirip işlemeden ekrana hiçbir şey çizmez. Başlığa eklenmiş beş ayrı JavaScript dosyası, ziyaretçinin beş dosya boyunca boş beyaz ekrana bakması demektir.
Sayfanın görünmesi için gerekmeyen scriptleri defer özniteliğiyle sona bırakın. Kullanılmayan CSS kurallarını temizleyin; hazır temalarda stil dosyasının büyük bölümünün sitede hiç kullanılmadığı sıkça görülür. Küçük sitelerde ilk ekranın stillerini doğrudan sayfaya gömmek de ilk görüntüyü hızlandırır.
Tasarımda kullanılan özel fontlar, siteye kimlik kazandıran en önemli unsurlardan biridir; ancak her kalınlık ve her stil ayrı bir dosyadır. Normal, kalın, ince ve italik dört kesimi iki farklı aileyle kullanan bir site, daha ilk sayfada sekiz font dosyası indirir.
Gerçekten kullandığınız kesimleri seçin, Türkçe karakterleri içeren alt kümeyi yükleyin ve font yüklenene kadar metnin sistem fontuyla görünmesini sağlayan font-display: swap ayarını kullanın. Böylece ziyaretçi fontu beklerken boş satırlara bakmaz. Kurumsal kimlik çalışmasında font seçerken bu maliyeti baştan hesaba katmak en sağlıklısıdır.
Bu madde doğrudan hızla değil, hız algısıyla ilgilidir. Ziyaretçi bir butona tam basacakken üstte geç yüklenen bir banner belirir, sayfa aşağı kayar ve yanlış yere tıklanır. CLS ölçüsünün yakaladığı sorun budur.
Nedeni çoğunlukla boyutu belirtilmemiş görseller, sonradan yerleşen reklam alanları ve geç yüklenen fontlardır. Görsellere width ve height değerlerini yazmak, reklam ve gömülü içerik için yeri önceden ayırmak sorunun büyük kısmını çözer. Mobilde bu etki daha da belirgindir; responsive tasarım yazımızda anlattığımız gibi, bir sitenin telefonda nasıl davrandığı artık asıl ölçüttür.
Yedi maddenin hepsine aynı anda girişmek gerekmez. Bizim izlediğimiz sıra şöyle: önce sunucu yanıt süresine bakarız, çünkü orada sorun varsa sayfa üzerinde yapılan hiçbir iyileştirme hissedilmez. Ardından görselleri ve önbelleği ele alırız; bu ikisi genellikle en az emekle en büyük farkı yaratır. Eklenti temizliği, script sıralaması ve fontlar en sona kalır, çünkü bunlar tasarım ve işlevle ilgili kararlar gerektirir ve sitenin sahibiyle birlikte konuşulmalıdır. Her adımdan sonra baştaki üç ölçüye yeniden bakmak, hangi değişikliğin gerçekten işe yaradığını gösterir.
Yayına çıktığı gün hızlı olan bir site, aylar içinde yavaşlayabilir. Kampanya için eklenen bir kaydırıcı, pazarlama ekibinin koyduğu yeni bir takip etiketi, sıkıştırılmadan yüklenen ürün fotoğrafları birikir. Bu yüzden hızı bir proje değil bir alışkanlık olarak görmenizi öneriyoruz: büyük bir değişiklikten sonra ve her ay başında aynı sayfaları aynı araçla ölçüp sonuçları bir tabloya not etmek, sorunları büyümeden yakalamanın en ucuz yoludur.
Hız, arama motorlarındaki görünürlükle de doğrudan bağlantılıdır. Sayfa deneyimi, Google'ın sıralamada dikkate aldığı sinyaller arasındadır; teknik altyapının diğer parçalarını SEO uyumlu web sitesi rehberimizde ele aldık. E-ticaret sitelerinde ise yavaşlık, ziyaretçinin sepete ulaşmadan ayrılması anlamına gelir.
Sitenizin hızını ölçtürmek veya yavaşlığın kaynağını birlikte bulmak için web tasarım, web hosting ve SEO hizmetlerimizi inceleyebilirsiniz.