Web sitenizi yavaşlatan beş şey ve kodda nasıl düzeltilir

Yavaş bir site ziyaretçiyi de arama motorlarını da kaybettirir. İyi haber: yavaşlığın çoğu birkaç tekrarlayan nedenden gelir ve her birinin küçük bir çözümü vardır. Aşağıda en sık gördüklerimizi, kod örnekleriyle sıraladık.

1. Gereğinden büyük görseller

Telefon ekranında 400 piksel genişliğinde görünen bir fotoğrafı 4000 piksel olarak yüklemek, en yaygın hatadır. Tarayıcıya boyutları ve alternatif dosyaları vererek doğru olanı seçtirin:

<img
  src="villa-800.webp"
  srcset="villa-400.webp 400w, villa-800.webp 800w, villa-1600.webp 1600w"
  sizes="(min-width: 960px) 50vw, 100vw"
  width="800" height="600"
  loading="lazy"
  alt="Denize bakan teras"
/>

width ve height yer ayırır, böylece sayfa yüklenirken kayma olmaz. loading="lazy" ekranın dışındaki görselleri sonraya bırakır. Sayfanın en üstündeki ana görselde lazy kullanmayın.

2. Yazı tipi yüklenirken beklenen metin

Harici bir yazı tipi sunucusundan gelen font, metni geç gösterebilir. Yazı tipini kendi sitenizden sunun ve yüklenene kadar yedek fontla gösterin:

@font-face {
  font-family: "Marka";
  src: url("/fonts/marka.woff2") format("woff2");
  font-display: swap;
}

body {
  font-family: "Marka", system-ui, sans-serif;
}

Türkçe karakterlerin (ğ, ş, ı, İ) yazı tipi dosyasında bulunduğundan emin olun; eksikse tarayıcı o harfleri başka fonttan alır ve satır bozulur.

3. Sayfayı bekleten betikler

Sohbet kutusu, analiz ve reklam betikleri sayfayı durdurabilir. Sayfa çizimini engellemeyecek biçimde yükleyin:

<script src="/analitik.js" defer></script>
<script src="/sohbet.js" async></script>

defer betiği sayfa çizildikten sonra, sırayla çalıştırır. async ise bağımsız betikler içindir. Gerçekten gerekmeyen bir betiği kaldırmak her ikisinden de iyidir.

4. Önbellek kullanılmaması

Değişmeyen dosyaları ziyaretçinin tarayıcısında saklatmak, ikinci ziyareti neredeyse anlık yapar. Apache sunucuda .htaccess ile örnek:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/css   "access plus 1 month"
</IfModule>

Dosya adına sürüm ya da özet eklemek (stil.a1b2c3.css) önbelleği güvenle uzun tutmanızı sağlar.

5. Kullanılmayan CSS ve JavaScript

Hazır temalar ve eklentiler, sitenizin hiç kullanmadığı yüzlerce kilobayt kod yükler. Önce ölçün; tarayıcıda Geliştirici Araçları, Kapsam (Coverage) sekmesi hangi satırların hiç çalışmadığını gösterir. Sonra yalnızca gerekeni bırakın:

// Ağır bir bileşeni yalnızca gerektiğinde yükleyin
button.addEventListener('click', async () => {
  const { openMap } = await import('./harita.js');
  openMap();
});

Önce ölçün

Tahminle değil ölçümle çalışın: Google PageSpeed Insights ve tarayıcıdaki Lighthouse, hangi adımın ne kadar kazandıracağını gösterir. Bir seferde bir değişiklik yapıp yeniden ölçmek, işe yarayanı yaramayandan ayırmanın en güvenli yoludur.

Sitenizin neden yavaş olduğunu merak ediyorsanız, bize yazın; ölçüm sonuçlarıyla birlikte neyin önce düzeltilmesi gerektiğini söyleriz.