Web sitesi neden yavaş açılır? Hız ve mobil uyum için kontrol rehberi

Bir sitenin yavaş olduğunu çoğu firma sahibi fark etmez, çünkü kendi sitesini ofisteki bilgisayardan ve hızlı internetten açar. Müşteri ise aynı siteyi şantiyede, yolda ya da markette telefonundan açıyor. Hız ve mobil uyumu ölçerken bakılacak yer de orasıdır.

Önce ölçün: PageSpeed Insights

Google'ın ücretsiz PageSpeed Insights aracına sitenizin adresini yazın ve sonuçta "Mobil" sekmesine bakın. Ekranda iki ayrı bilgi görürsünüz:

• Gerçek kullanıcı verisi: Sitenize Chrome ile giren insanların yaşadığı hız. Trafiği az olan sitelerde bu bölüm boş kalabilir.
• Laboratuvar testi ve puan: Aracın o anda yaptığı tek bir deneme. Sorunları bulmaya yarar, ama iki ölçüm arasında puan oynayabilir.

Ana sayfayla yetinmeyin. Reklam verdiğiniz ya da en çok ziyaret alan hizmet sayfanızı da ölçün. Ziyaretçilerin çoğu siteye ana sayfadan girmeyebilir.

Google'ın baktığı üç ölçüm

Bu ölçümlerin ortak adı Core Web Vitals. Google, ziyaretlerin en az yüzde 75'inde aşağıdaki sınırların tutturulmasını "iyi" sayar:

• LCP, en büyük içeriğin yüklenmesi: 2,5 saniye veya altı. Sayfanın ana görseli ya da büyük başlığı ne zaman göründü?
• INP, tıklamaya tepki: 200 milisaniye veya altı. Menüye dokununca sayfa ne kadar çabuk karşılık verdi?
• CLS, sayfa kayması: 0,1 veya altı. Tam bir düğmeye basarken içerik aşağı kaydı mı?

Bu rakamlar sıralamayı tek başına belirlemez. Google için içeriğin konuyla uyumu daha ağır basar. Ama yavaş sayfa önce müşteriyi kaçırır; reklam veriyorsanız o tıklamanın parasını da boşa ödersiniz.

En sık görülen yavaşlık sebepleri

1. Dev görseller ve videolar

En yaygın sebep budur. Telefonla çekilmiş 5 MB'lık fotoğraf, ekranda 400 piksel genişlikte gösteriliyordur. Görseller WebP biçimine çevrilmeli, ekrana uygun boyutlarda hazırlanmalı, ilk ekranın dışındakiler de sayfa aşağı indikçe yüklenmelidir. Açılışta otomatik başlayan büyük bir video ise telefonda çoğu zaman en pahalı tercihtir.

2. Fazla eklenti ve dış betik

Her sohbet aracı, takip kodu, slider eklentisi sayfaya yeni dosyalar ekler. Bir kısmı yıllar önce denenmiş ve unutulmuştur. Kullanılmayanı kaldırmak, çoğu zaman en ucuz hızlandırma yöntemidir.

3. Yetersiz ya da yanlış sunucu

Sunucunun ilk yanıtı geciktiğinde, sonrasındaki tüm iyileştirmeler geç başlar. Paylaşımlı pakette sorun sürüyorsa önbellek ayarlarına, PHP sürümüne ve sunucunun konumuna bakılmalıdır. Paket yükseltmeden önce sorunun gerçekten sunucuda olduğunu ölçmekte fayda var.

4. Boyutu belirtilmemiş görseller ve geç yüklenen yazı tipleri

Görselin genişliği ve yüksekliği kodda belirtilmezse tarayıcı yer ayıramaz, yüklenince içerik aşağı kayar. CLS sorununun temel sebeplerinden biri budur. Çok sayıda yazı tipi dosyası da hem yüklemeyi yavaşlatır hem kaymaya yol açabilir.

5. Ağır animasyonlar

Gölge ve bulanıklık efektlerini sürekli hareket ettiren animasyonlar güçlü bir bilgisayarda fark edilmez, orta seviye telefonda ise sayfayı takılır hale getirebilir. Animasyonların gerçek cihazda denenmesi gerekir.

Mobil uyum yalnız ekrana sığmak değildir

Google siteleri ağırlıklı olarak mobil sürümleri üzerinden değerlendirir. Bu nedenle telefondaki içerik, masaüstündekinden eksik olmamalıdır. Telefonunuzu elinize alıp şunları kontrol edin:

• Sayfa yana kayıyor mu? Yatay taşma olmamalı.
• Metin yakınlaştırmadan rahat okunuyor mu?
• Düğmeler parmakla, yanındakine basmadan tıklanabiliyor mu?
• Menü kolay açılıp kapanıyor mu, içindeki bağlantılar çalışıyor mu?
• Telefon numarasına dokununca arama ekranı açılıyor mu?
• Formu telefondan doldurup gönderebiliyor musunuz? Bunu gerçekten deneyin, kendinize bir talep bırakın.
• Görselin üstündeki yazı okunuyor mu? Yazı, görselin altına alındığında çoğu zaman telefonda çok daha rahat okunur.

Tek bir telefonda denemek yetmez. Farklı ekran genişliklerinde, özellikle küçük ekranda da bakın. Tarayıcının geliştirici araçlarındaki cihaz görünümü iyi bir başlangıçtır, ama son kontrol gerçek telefonda yapılmalıdır.

Sırayla ne yapmalı?

1. En çok trafik alan üç sayfayı telefon ayarında ölçün.
2. Görselleri düzeltin: WebP, doğru boyut, tembel yükleme, belirtilmiş genişlik ve yükseklik.
3. Kullanılmayan eklenti ve betikleri kaldırın.
4. Sunucu yanıtına ve önbelleğe bakın.
5. Değişikliklerden sonra tekrar ölçün, tarih ve sonucu bir yere not edin.

Sitenin teknik temelini tek ekranda görmek isterseniz Site Röntgeni aracımızı kullanabilirsiniz. Sitenizi baştan bu kurallarla kurmak isterseniz kurumsal web tasarım hizmetimizi inceleyin.

Sık sorulan sorular

PageSpeed puanım 100 olmazsa sorun olur mu?

Hayır. Puan bir teşhis aracıdır, hedef değildir. Önemli olan gerçek kullanıcıların sitenizi hızlı ve sorunsuz kullanabilmesidir. Puan uğruna gerekli içeriği silmek ters etki yapabilir.

Hız artınca sıralamam yükselir mi?

Garantisi yoktur. Sayfa deneyimi sıralamayı etkileyen unsurlardan biridir, ancak içerik ve rakipler de belirleyicidir. Hızın daha doğrudan etkisi, ziyaretçinin sayfada kalıp iletişime geçme ihtimalindedir.

Daha pahalı hosting almak sorunu çözer mi?

Sorun sunucudaysa çözer. Ama asıl yük dev görseller ve fazla betiklerse paket yükseltmek farkı çok az değiştirir. Önce ölçün, sebebi bulun, sonra para harcayın.

WordPress siteler yavaş mı olur?

Zorunlu olarak değil. İyi kurulmuş bir WordPress hızlı çalışabilir. Yavaşlık genellikle ağır temadan ve çok sayıda eklentiden gelir. Altyapı seçenekleri için karşılaştırma yazımıza bakabilirsiniz.