Site Hızı Nasıl Artırılır? 12 Pratik Yöntem

01Site Hızı Neden Önemli?

Yavaş açılan bir sayfa, ziyaretçiyi içeriği görmeden kaybetmek demektir. Özellikle mobil bağlantıda birkaç saniyelik bekleme, kullanıcının geri tuşuna basması için yeterlidir. Reklam verdiğiniz bir sayfada bu, ödenmiş tıklamaların boşa gitmesi anlamına gelir.

Hız aynı zamanda arama görünürlüğünü de etkiler. Google, sayfa deneyimini ölçmek için Core Web Vitals metriklerini kullanır: LCP (en büyük içeriğin yüklenmesi) için 2,5 saniye, INP (etkileşime yanıt) için 200 milisaniye ve CLS (görsel kayma) için 0,1 değerleri “iyi” eşik kabul edilir. Bu metriklerin ayrıntısını Core Web Vitals nedir yazımızda anlattık.

Aşağıdaki 12 yöntem, çoğu sitede en büyük farkı yaratan adımlardır. Hepsini bir anda uygulamanız gerekmez; önce ölçüm yapın, en büyük sorundan başlayın.

02Önce Ölçün: Hangi Araçlar?

Ölçmeden yapılan optimizasyon, karanlıkta atış yapmaya benzer. Aşağıdaki ücretsiz araçlar, sorunun nerede olduğunu gösterir.

• PageSpeed Insights: Hem gerçek kullanıcı verisini (varsa) hem laboratuvar testini gösterir.
• Chrome geliştirici araçlarındaki Lighthouse sekmesi: Yerel testler ve ayrıntılı öneriler.
• Search Console’daki Core Web Vitals raporu: Sitenin tüm sayfalarında gerçek kullanıcı deneyimi.
• Ağ (Network) sekmesi: Hangi dosyanın ne kadar sürede ve hangi boyutta yüklendiğini gösterir.

03Görsel Optimizasyonu

Çoğu sitede sayfa ağırlığının en büyük kısmını görseller oluşturur. Bu yüzden en hızlı kazanç genellikle burada elde edilir.

1. Modern formatlara geçin

Fotoğrafları WebP ya da AVIF formatında sunmak, benzer görsel kalitede JPEG ve PNG’ye göre çok daha küçük dosyalar sağlar. Eski tarayıcılar için picture etiketiyle yedek format verebilirsiniz.

<picture>
  <source srcset="urun.avif" type="image/avif">
  <source srcset="urun.webp" type="image/webp">
  <img src="urun.jpg" alt="Ürün adı" width="800" height="600">
</picture>

2. Doğru boyutta sunun

Telefonda 400 piksel genişlikte gösterilecek bir görsel için 3000 piksellik dosya indirmek gereksizdir. srcset ve sizes nitelikleriyle tarayıcıya ekran boyutuna göre uygun dosyayı seçtirin.

3. Geç yükleme ve boyut bildirimi

Ekranın altında kalan görsellere loading=lazy ekleyin; böylece yalnızca kullanıcı oraya yaklaştığında yüklenirler. Sayfanın en üstündeki ana görseli geç yüklemeyin, çünkü genellikle LCP öğesi odur. Tüm görsellere genişlik ve yükseklik vermek, içeriğin zıplamasını (CLS) önler.

04Kod ve Kaynakları Sadeleştirin

Tarayıcı, sayfayı göstermeden önce CSS ve JavaScript dosyalarını indirip işlemek zorundadır. Bu dosyalar ne kadar büyük ve çoksa, sayfa o kadar geç görünür ve etkileşime o kadar geç yanıt verir.

4. Kullanılmayan kodu kaldırın

Chrome geliştirici araçlarındaki Coverage (Kapsam) paneli, her dosyanın ne kadarının gerçekten kullanıldığını gösterir. Kullanılmayan bileşenleri ve kütüphaneleri ayıklayın, kalan dosyaları küçültün (minify).

5. Engelleyen betikleri erteleyin

Sayfanın ilk görünümü için gerekmeyen JavaScript dosyalarını defer ile yükleyin. Böylece tarayıcı HTML’i işlemeye devam eder, betikler arka planda iner.

<script src="/js/main.js" defer></script>

6. Üçüncü taraf betikleri azaltın

Üçüncü taraf sohbet araçları, takip kodları, sosyal medya eklentileri ve video yerleştirmeleri sayfaya ciddi yük bindirebilir. Her birinin gerçekten gerekli olup olmadığını sorgulayın; videoları kullanıcı tıklayana kadar küçük bir önizleme görseliyle gösterin.

05Yazı Tiplerini Hafifletin

Web fontları sitenin karakterini belirler ama yanlış yüklendiğinde metnin geç görünmesine ya da sayfanın kaymasına yol açar.

7. WOFF2 ve alt küme kullanın

Yazı tiplerini WOFF2 formatında ve yalnızca ihtiyaç duyduğunuz karakter setiyle (örneğin Latin ve Türkçe karakterler) sunun. Kullanmadığınız kalınlıkları yüklemeyin; çoğu site iki ya da üç kalınlıkla yetinebilir.

8. Görünürlüğü ve önceliği ayarlayın

font-display: swap ile font yüklenene kadar metnin sistem yazı tipiyle görünmesini sağlayın. Sayfanın üst kısmında kullanılan ana fontu preload ile önceden yükletebilirsiniz.

<link rel="preload" href="/fonts/ana-font.woff2" as="font" type="font/woff2" crossorigin>

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

06Sunucu ve Önbellek Ayarları

Kod ve görseller ne kadar hafif olursa olsun, sunucu yavaş yanıt veriyorsa sayfa yine geç açılır. Bu katmandaki iyileştirmeler tüm sayfaları aynı anda etkiler.

9. Tarayıcı önbelleğini açın

Logo, CSS, JavaScript ve font gibi sık değişmeyen dosyalar için uzun süreli önbellek başlıkları tanımlayın. Böylece tekrar gelen ziyaretçi bu dosyaları yeniden indirmez. Dosya güncellendiğinde adına sürüm eki vererek önbelleği kırabilirsiniz.

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

10. Sıkıştırma ve modern protokol

Metin tabanlı dosyaları (HTML, CSS, JavaScript, SVG) Brotli ya da gzip ile sıkıştırarak gönderin. Sunucunuzun HTTP/2 ya da HTTP/3 desteklediğinden emin olun; bu protokoller çok sayıda küçük dosyanın paralel indirilmesini kolaylaştırır.

11. Sunucu yanıt süresini kısaltın

İlk baytın gelme süresi (TTFB) uzunsa sorun genellikle yavaş veritabanı sorguları, önbelleksiz dinamik sayfalar ya da yetersiz sunucu kaynağıdır. Sayfa önbelleği kullanmak, sorguları iyileştirmek ya da daha uygun bir barındırma planına geçmek bu süreyi düşürür.

12. CDN kullanın

İçerik dağıtım ağı (CDN), statik dosyalarınızı ziyaretçiye coğrafi olarak yakın sunuculardan dağıtır. Farklı şehir ve ülkelerden ziyaret alan sitelerde gecikmeyi belirgin biçimde azaltır, ana sunucunun yükünü hafifletir.

07Hangi Yöntem Neyi İyileştirir?

Her yöntem farklı bir metriği etkiler. Ölçüm raporunuzda hangi metrik kötüyse önce o satırdaki yöntemlere odaklanın.

08Hız Bir Kez Yapılıp Bitmez

Yeni eklenen bir kampanya bandı, yüklenen büyük bir fotoğraf ya da eklenen bir takip kodu, aylarca süren optimizasyonu birkaç günde geri alabilir. Bu yüzden hız ölçümünü düzenli bakımın parçası hâline getirin; her büyük güncellemeden sonra PageSpeed Insights testini tekrarlayın. Bakım rutininin diğer adımlarını web sitesi bakımı yazımızda bulabilirsiniz.

Hız, tasarım aşamasında baştan planlandığında en ucuza elde edilir. Hafif bileşenler, doğru görsel düzeni ve sade bir kod yapısı, yayından sonra yapılacak düzeltmelerin çoğunu gereksiz kılar. Bu yaklaşımı SEO uyumlu web tasarımı ve mobil uyumlu tasarım süreçlerimizde birlikte uyguluyoruz; teknik SEO tarafındaki kontrol listesini ise SEO uyumlu web tasarım rehberimizde topladık.

Ölçüm ve raporlamayı düzenli takip etmek isteyen işletmeler için SEO ve analiz hizmetimiz, hız verilerini arama performansıyla birlikte değerlendirir.