PageSpeed Puanı Yükseltme: Web Sitesini Hızlandırmanın 10 Yolu

PageSpeed Insights raporunuzda kırmızı ya da turuncu bir puan gördüyseniz endişelenmeyin: yavaşlığın büyük kısmı birkaç tanıdık nedenden kaynaklanır. Bu rehberde, en çok kazanç sağlayandan başlayarak web sitenizi hızlandırmanın 10 yolunu örnek kodlarla anlatıyoruz. Raporu nasıl okuyacağınızı henüz bilmiyorsanız önce PageSpeed Insights nasıl kullanılır yazımıza göz atın.

1. Önce Ölçün, Sonra İyileştirin

Değişiklik yapmadan önce ana sayfanızı ve en çok ziyaret alan birkaç sayfanızı mobilde üç kez test edin, ortanca sonuçları not alın. Hangi metriğin zayıf olduğunu bilmek, doğru işe zaman harcamanızı sağlar: LCP yüksekse görsellere ve sunucuya, TBT yüksekse JavaScript'e, CLS yüksekse boyutu belirtilmemiş öğelere odaklanın.

2. Görselleri Modern Formatlara Çevirin

Görseller çoğu sitede en büyük yüktür. WebP ve AVIF, aynı görüntü kalitesinde JPEG ve PNG'ye göre genellikle çok daha küçük dosyalar üretir ve bugün tüm güncel tarayıcılar tarafından desteklenir. Eski cihazlar için picture etiketiyle yedek format sunabilirsiniz:

<picture>
  <source srcset="kapak.avif" type="image/avif">
  <source srcset="kapak.webp" type="image/webp">
  <img src="kapak.jpg" alt="Kapak görseli" width="1200" height="630">
</picture>

3. Görselleri Doğru Boyutta Sunun

300 piksel genişliğinde gösterilecek bir görsel için 3000 piksellik dosya yüklemek, bant genişliğini boşa harcar. Görseli kullanılacağı en büyük boyuta göre küçültün, sıkıştırın ve farklı ekranlar için srcset ile birden çok boyut sunun. Her görselde width ve height değerlerini belirtmek, yüklenirken içeriğin kaymasını (CLS) önler.

4. En Büyük Görseli Önceliklendirin

Sayfanın üst kısmındaki büyük görsel çoğu zaman LCP öğesidir. Bu görselin geç yüklenmesi LCP süresini doğrudan uzatır. Tarayıcıya bu görselin öncelikli olduğunu söyleyin ve onu kesinlikle geç yüklemeye (lazy load) bırakmayın:

<img src="hero.webp" alt="Ana görsel" width="1200" height="630" fetchpriority="high">

5. Ekran Dışındaki Görselleri Lazy Load ile Erteleyin

Lazy load, ekranın altında kalan görsellerin ve iframe'lerin yalnızca kullanıcı onlara yaklaştığında yüklenmesini sağlar. Tarayıcıların yerleşik özelliği olduğu için ek bir kütüphaneye gerek yoktur:

<img src="galeri-1.webp" alt="Galeri görseli" width="600" height="400" loading="lazy">
<iframe src="https://www.example.com/harita" title="Konum haritası" loading="lazy"></iframe>

Kural basit: ilk ekranda görünen görseller hemen, geri kalanlar geç yüklensin.

6. CSS ve JavaScript Dosyalarını Hafifletin

• Kullanılmayan kodu kaldırın: Artık kullanılmayan eklentiler, kütüphaneler ve stiller her sayfada yüklenmeye devam eder.
• Küçültün (minify): Boşluk ve yorumları kaldırmak dosya boyutunu azaltır.
• Engellemeyin: Sayfanın çizilmesi için gerekli olmayan betikleri defer ile yükleyin; ilk ekran için gereken kritik CSS'i öne alın.

<script src="/js/app.min.js" defer></script>

7. Yazı Tiplerini Akıllıca Yükleyin

Her yazı tipi kalınlığı ayrı bir dosyadır. Yalnızca kullandığınız kalınlıkları yükleyin, WOFF2 formatını tercih edin ve metnin yazı tipi gelene kadar görünmez kalmaması için font-display: swap kullanın:

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

8. Üçüncü Taraf Kodları Denetleyin

Analiz, reklam, harita, canlı sohbet ve sosyal medya kodları sayfanıza ciddi yük bindirebilir. Her birinin gerçekten gerekli olup olmadığını sorgulayın. Analiz ve reklam kodlarının yalnızca ziyaretçi çerezlere onay verdikten sonra yüklenmesi hem KVKK açısından doğru bir yaklaşımdır hem de ilk açılışı hafifletir.

9. Sunucu, Sıkıştırma ve Önbellek

• Sunucu yanıt süresi: Yavaş bir sunucu, diğer tüm iyileştirmelerin önünde engeldir. Sayfa önbelleği ve güncel bir PHP sürümü fark yaratır.
• Sıkıştırma: Metin dosyaları (HTML, CSS, JS) Brotli veya gzip ile sıkıştırılarak gönderilmelidir.
• Tarayıcı önbelleği: Değişmeyen dosyalar için uzun önbellek süresi tanımlayın; dosya güncellendiğinde adını ya da sürüm parametresini değiştirin.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
</IfModule>

10. Etkileşim Hızını (INP) İyileştirin

Sayfanın hızlı açılması yetmez; dokunuşlara ve tıklamalara da hızlı tepki vermesi gerekir. Mart 2024'ten bu yana Google bunu INP metriğiyle ölçüyor. Uzun süren JavaScript görevlerini parçalara bölün, gereksiz olay dinleyicilerini kaldırın ve ağır kütüphaneleri yalnızca gerektiği sayfada yükleyin. Ayrıntılar için Core Web Vitals 2026 rehberimize bakabilirsiniz.

İyileştirmeyi Doğrulayın

Her değişiklikten sonra testi tekrarlayın ve ortanca sonuçları karşılaştırın. Laboratuvar puanı hemen değişir; gerçek kullanıcı verisinin güncellenmesi ise 28 güne kadar sürebilir. Mobil tarafta neler yapabileceğinizi mobil uyumlu web sitesi yazımızda ayrıca ele aldık.

Sonuç

PageSpeed puanını yükseltmenin sırrı, en çok kazanç sağlayan adımlardan başlamaktır: görseller, kritik görselin önceliği, gereksiz JavaScript ve sunucu tarafı. Mevcut sitenizde bu adımları uygulamak zaman alıyorsa, hızı baştan düşünülmüş bir yapıyla başlamak daha verimli olabilir. Hızlı Web Sitesi paketimizde siteniz sade ve mobil uyumlu bölümlerle kurulur; size özel işlevler gerekiyorsa yönetim panelli özel web sitesi hizmetimizi inceleyebilirsiniz.