Hızlı Yüklenen Bir Web Sitesi Tasarlamak İçin İpuçları

Web sitesi performansı, kullanıcı deneyimi ve SEO açısından kritik öneme sahiptir. İşte hızlı yüklenen bir web sitesi tasarlamak için uygulayabileceğiniz önemli ipuçları:

1. Görsel Optimizasyonu

Görseller genellikle bir web sayfasının en ağır öğeleridir. Bunları optimize etmek önemlidir.

<!-- Responsive görsel kullanımı -->
<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 500px) 100vw, (max-width: 1000px) 50vw, 800px"
     alt="Responsive görsel örneği">

<!-- WebP format kullanımı -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="WebP örneği">
</picture>

<script>
// Lazy loading
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
</script>

2. Minifikasyon ve Sıkıştırma

CSS, JavaScript ve HTML dosyalarını minify edin ve sunucu tarafında sıkıştırın.

<!-- .htaccess dosyasında GZIP sıkıştırma -->
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript
</IfModule>

<!-- Minify edilmiş dosyaları kullanma -->
<link rel="stylesheet" href="styles.min.css">
<script src="script.min.js"></script>

3. Tarayıcı Önbellekleme

Statik kaynaklar için tarayıcı önbelleklemeyi etkinleştirin.

<!-- .htaccess dosyasında önbellekleme kuralları -->
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType text/x-javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresDefault "access plus 2 days"
</IfModule>

4. Kritik CSS'i Inline Olarak Ekleme

Sayfa yüklenirken ilk görünen alan için gerekli olan CSS'i inline olarak ekleyin.

<!-- Kritik CSS'i inline olarak ekleme -->
<style>
  /* Kritik CSS kuralları buraya */
  body { font-family: Arial, sans-serif; }
  .header { background-color: #f8f8f8; padding: 20px; }
  /* ... */
</style>

<!-- Geri kalan CSS'i asenkron olarak yükleme -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

5. Asenkron ve Ertelenmiş Yükleme

JavaScript dosyalarını asenkron veya ertelenmiş olarak yükleyin.

<!-- Asenkron yükleme -->
<script src="analytics.js" async></script>

<!-- Ertelenmiş yükleme -->
<script src="non-critical.js" defer></script>

6. CDN (İçerik Dağıtım Ağı) Kullanımı

Statik içerikleriniz için CDN kullanın.

<!-- CDN üzerinden jQuery yükleme örneği -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

7. HTTP/2 Kullanımı

Sunucunuzda HTTP/2'yi etkinleştirin. Bu, çoklu istek işleme ve başlık sıkıştırma gibi avantajlar sağlar.

8. Veritabanı Sorgularını Optimize Etme

Veritabanı sorgularınızı optimize edin ve gereksiz sorguları azaltın.

// PHP ve MySQL örneği
$query = "SELECT * FROM users WHERE active = 1 LIMIT 10";
$result = $mysqli->query($query);

// Sorgu sonuçlarını önbellekleme
$cache_file = 'cached_users.txt';
$cache_time = 3600; // 1 saat

if (file_exists($cache_file) && (filemtime($cache_file) > (time() - $cache_time))) {
   $result = file_get_contents($cache_file);
} else {
   // Veritabanı sorgusu ve sonucu dosyaya kaydetme
   $result = $mysqli->query($query);
   file_put_contents($cache_file, $result);
}

9. Gereksiz Eklentileri ve Scriptleri Kaldırma

Kullanılmayan veya gereksiz eklentileri ve scriptleri sitenizden kaldırın.

10. Web Fontlarını Optimize Etme

Web fontlarını optimize edin ve gerekli olanları yükleyin.

<!-- Web font optimizasyonu -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
  body {
    font-family: 'Roboto', sans-serif;
    font-display: swap;
  }
</style>

Bu ipuçlarını uygulayarak web sitenizin yükleme hızını önemli ölçüde artırabilirsiniz. Ancak, her optimizasyon tekniğinin sitenizin özel ihtiyaçlarına ve yapısına göre uyarlanması gerektiğini unutmayın. Düzenli performans testleri yaparak ve kullanıcı geri bildirimlerini dikkate alarak, sitenizin hızını sürekli olarak iyileştirebilirsiniz.