Web Sitesi Hızlandırma: Yavaş Siteyi Hızlandıran 12 Yöntem ve Core Web Vitals

Sitenize telefonunuzdan, mobil veriyle, hiç girmemiş biri gibi girmeyi deneyin. Ekran ne kadar süre boş kalıyor? Yazılar okunur hâle geldiğinde düzen kayıyor mu? Bir butona dokunduğunuzda sayfa hemen tepki veriyor mu? Bu deneyim, potansiyel müşterinizin her gün yaşadığı deneyimdir.

Web sitesi hızlandırma çoğu işletme için teknik bir ayrıntı gibi görünür; oysa ziyaretçinin sitenizde kalıp kalmamasını belirleyen ilk şeydir. İyi haber şu: yavaş sitelerin büyük çoğunluğu aynı birkaç sebepten yavaştır ve bu sebepler düzeltilebilir. Bu yazıda önce sitenizin neden yavaş olduğunu, sonra Google'ın hızı nasıl ölçtüğünü, en sonda da uygulayabileceğiniz 12 yöntemi anlatıyoruz.

Siteniz neden yavaş? En sık 6 sebep

İncelediğimiz yavaş sitelerde aşağıdaki sorunlar neredeyse her zaman karşımıza çıkıyor:

1. Büyük görseller: Fotoğraf makinesinden ya da tasarım programından doğrudan yüklenmiş, birkaç megabaytlık görseller.
2. Ağır tema ve eklentiler: Kullanılmayan onlarca özelliği yükleyen "her şey dahil" temalar ve birbirinin işini yapan eklentiler.
3. Üçüncü taraf scriptler: Sohbet araçları, reklam pikselleri, harita, video ve sosyal medya gömmeleri.
4. Yavaş sunucu: Kalabalık, ucuz paylaşımlı hosting ya da eski PHP sürümü.
5. Önbellek olmaması: Her ziyarette sayfanın sıfırdan oluşturulması.
6. Yazı tipleri: Birden fazla font ailesinin, kullanılmayan kalınlıklarıyla birlikte yüklenmesi.

Site hızı satışı nasıl etkiler?

Hızın satışa etkisi için internette sayısız yüzde dolaşır; çoğunun kaynağı belirsizdir. Rakamlara ihtiyaç duymadan da şu gözlemler herkesin kendi deneyimiyle doğrulayabileceği şeylerdir:

• Ziyaretçi, sayfa yüklenmeden geri tuşuna basarsa sitenizi hiç görmemiş olur. Reklamla gelen ziyaretçide bu, parasını ödediğiniz bir tıklamanın boşa gitmesi demektir.
• Yavaş açılan ürün sayfaları, kullanıcıyı karşılaştırma yaptığı diğer sekmeye iter.
• Sayfa yüklenirken kayan butonlar yanlış tıklamalara ve sinire yol açar; bu da markanıza dair "özensiz" izlenimi bırakır.
• Google, sayfa deneyimini sıralamada dikkate alır. Benzer içerikteki iki sayfadan hızlı olanı bir adım öne geçebilir.

Kısacası hız, reklam bütçenizin ve SEO emeğinizin karşılığını alıp almayacağınızı belirleyen bir çarpandır. Reklam tarafındaki etkiyi Google Ads reklam verme yazımızda da ele aldık.

Core Web Vitals nedir? LCP, INP ve CLS

Google, sayfa deneyimini üç temel ölçütle değerlendirir. Bunlara Core Web Vitals denir ve değerler gerçek ziyaretçilerin tarayıcılarından toplanır.

INP, Mart 2024'te eski FID ölçütünün yerini aldı. Değerlendirme, ziyaretçilerin yüzde 75'lik diliminin deneyimine göre yapılır; yani sayfanızın sadece hızlı bağlantılarda değil, ortalamanın altındaki cihazlarda da iyi çalışması gerekir. Ölçütlerin teknik ayrıntıları için Google'ın web.dev Core Web Vitals sayfası iyi bir kaynaktır.

Site hızı nasıl ölçülür? PageSpeed Insights ve Search Console

Hızlandırmaya başlamadan önce mevcut durumu kaydedin. Aksi hâlde yaptığınız değişikliğin işe yarayıp yaramadığını bilemezsiniz.

PageSpeed Insights

PageSpeed Insights adresine sayfanızın URL'sini yazdığınızda iki tür veri görürsünüz. Üstteki bölüm, sitenizin yeterli trafiği varsa gerçek kullanıcı verisini gösterir. Alttaki puan ise laboratuvar ortamında yapılan tek bir testtir ve sorunları teşhis etmek için kullanılır. Mobil sonuca odaklanın; ziyaretçilerinizin büyük kısmı muhtemelen oradan geliyor.

Google Search Console

Search Console'daki Core Web Vitals raporu, tek bir sayfa yerine sitenizin tamamını gösterir ve URL'leri "iyi", "iyileştirme gerekli" ve "kötü" olarak gruplar. Aynı şablonu kullanan sayfalar genellikle aynı sorunu paylaştığı için bu rapor, nereden başlamanız gerektiğini gösterir.

Önce görseller ve fontlar: 1-5. yöntemler

1. Görselleri doğru boyutta yükleyin

Ekranda 800 piksel genişliğinde görünecek bir fotoğrafı 4000 piksel olarak yüklemek, hızın en yaygın düşmanıdır. Her görseli göründüğü en büyük boyuta göre küçültün ve farklı ekranlar için birden fazla boyut sunun (srcset). Böylece telefon, masaüstü için hazırlanmış dev görseli indirmek zorunda kalmaz.

2. WebP ve AVIF biçimlerine geçin

WebP ve AVIF, JPEG ve PNG'ye göre aynı görüntü kalitesini çok daha küçük dosya boyutuyla verir. Güncel tarayıcıların tamamı WebP'yi, büyük çoğunluğu AVIF'i destekler. WordPress'te bunu yapan eklentiler var; özel yazılımda ise dönüşüm görsel yüklenirken otomatik yapılabilir.

3. Gecikmeli yükleme (lazy load) kullanın

Sayfanın alt kısımlarındaki görseller, kullanıcı oraya kaydırana kadar yüklenmemeli. Bunun için görsel etiketine loading="lazy" eklemek yeterlidir. Tek bir istisna var: sayfanın en üstündeki ana görsel gecikmeli yüklenmemeli, aksine öncelikli yüklenmelidir. Aksi hâlde LCP değeri kötüleşir.

4. Görsellere boyut verin, kaymayı önleyin

Görsellerin genişlik ve yükseklik değerleri tanımlı değilse tarayıcı yer ayıramaz; görsel yüklendiğinde altındaki metin aşağı kayar. Bu, CLS değerini doğrudan bozar. Aynı sorun sonradan yüklenen banner'lar ve çerez uyarıları için de geçerlidir.

5. Yazı tiplerini sadeleştirin

İki font ailesi ve her biri için gerçekten kullanılan iki ya da üç kalınlık çoğu site için yeterlidir. Fontları mümkünse kendi sunucunuzdan, WOFF2 biçiminde sunun ve font-display: swap ile metnin font yüklenmeden de görünmesini sağlayın. Türkçe karakterlerin doğru göründüğünden emin olun.

Sonra kod, sunucu ve önbellek: 6-12. yöntemler

6. Gereksiz eklenti ve scriptleri kaldırın

Sitenizdeki her eklenti ve üçüncü taraf script için şu soruyu sorun: Bunu son üç ayda kim kullandı, ne işe yaradı? Artık kullanılmayan analiz kodları, eski kampanyalardan kalan pikseller, kimsenin yazmadığı sohbet kutuları sayfayı boşuna yavaşlatır. Gerekli olanları da sayfa yüklendikten sonra çalışacak şekilde erteleyin.

7. CSS ve JavaScript'i küçültün, erteleyin

Kod dosyalarındaki boşluk ve yorumların temizlenmesi (minify) dosya boyutunu küçültür. Daha önemlisi, sayfanın ilk görünümü için gerekmeyen JavaScript'in defer ya da async ile ertelenmesidir. Böylece tarayıcı önce içeriği gösterir, sonra kodları çalıştırır. Bu adım INP değerini de iyileştirir.

8. Sıkıştırmayı açın

Sunucunuzun HTML, CSS ve JavaScript dosyalarını Gzip ya da Brotli ile sıkıştırarak göndermesi, aktarılan veri miktarını belirgin biçimde azaltır. Çoğu sunucuda bu tek bir ayardır; ama açık olduğunu varsaymayın, kontrol edin.

9. Önbelleği doğru kurun

İki tür önbellek vardır. Sayfa önbelleği, dinamik olarak oluşturulan sayfanın hazır bir kopyasını saklar ve her ziyarette veritabanına gitmeyi önler. Tarayıcı önbelleği ise görsel, CSS ve JavaScript gibi dosyaların ziyaretçinin cihazında saklanmasını sağlar; ikinci sayfa ziyareti çok daha hızlı olur.

10. Hosting ve sunucu yanıt süresini (TTFB) iyileştirin

TTFB, tarayıcının sunucudan ilk baytı alana kadar geçen süredir. Bu değer yüksekse diğer tüm iyileştirmeler sınırlı kalır. Kalabalık paylaşımlı sunucudan daha güçlü bir pakete geçmek, güncel PHP sürümü kullanmak ve veritabanını temizlemek TTFB'yi düşürür. Ziyaretçilerinizin çoğu Türkiye'deyse, sunucunun konumu da fark yaratır.

11. CDN kullanın

İçerik dağıtım ağı (CDN), sitenizin statik dosyalarını dünyanın farklı noktalarındaki sunuculara kopyalar ve ziyaretçiye en yakın noktadan sunar. Yurt dışından ziyaretçi alan siteler, özellikle oteller ve ihracat yapan firmalar için CDN neredeyse zorunludur. Pek çok CDN aynı zamanda sıkıştırma, görsel dönüştürme ve temel güvenlik koruması da sağlar.

12. Video, harita ve sosyal medya gömmelerini hafifletin

Sayfaya gömülen bir video oynatıcı ya da harita, tıklanmasa bile yüzlerce kilobaytlık kod yükler. Bunların yerine önce yalnızca bir önizleme görseli gösterip, kullanıcı tıklayınca asıl oynatıcıyı yüklemek (facade yöntemi) aynı deneyimi çok daha hafif sunar.

Hangi işi önce yapmalısınız?

On iki yöntemin hepsini aynı anda uygulamaya çalışmak yerine şu sırayla ilerleyin:

1. PageSpeed Insights ve Search Console ile mevcut durumu kaydedin.
2. Görselleri küçültün ve WebP/AVIF'e dönüştürün. Çoğu sitede en hızlı ve en büyük kazanç buradadır.
3. Kullanılmayan eklenti ve scriptleri kaldırın.
4. Önbellek ve sıkıştırmayı açın.
5. Hâlâ yavaşsa sunucu tarafına, yani TTFB ve hosting paketine bakın.
6. Her adımdan sonra yeniden ölçün ve sonucu not edin.

WordPress sitelerde hızlandırma için ek notlar

Türkiye'deki kurumsal sitelerin önemli bir kısmı WordPress üzerinde çalışıyor ve bu sitelerde yavaşlığın sebepleri birbirine çok benziyor. Yukarıdaki yöntemlere ek olarak şunlara bakın:

• Sayfa oluşturucu yükü: Sürükle bırak sayfa oluşturucular her sayfaya ciddi miktarda ek kod ekler. Yeni bir site yapıyorsanız daha hafif bir yapı tercih edin; mevcut sitede ise kullanılmayan modülleri kapatın.
• Eklenti sayısından çok eklenti kalitesi: On hafif eklenti, tek bir ağır eklentiden daha az sorun çıkarabilir. Hangi eklentinin sayfayı yavaşlattığını görmek için eklentileri test ortamında tek tek devre dışı bırakıp ölçüm yapın.
• Veritabanı temizliği: Yıllar içinde biriken yazı revizyonları, silinmiş eklentilerden kalan tablolar ve geçici veriler sorguları yavaşlatır.
• Güncel PHP sürümü: Hosting panelinizden PHP sürümünü kontrol edin. Eski bir sürüm hem yavaştır hem de güvenlik güncellemesi almaz.

Hız tek seferlik iş değil

Bir siteyi bir kez hızlandırmak yetmez. Yeni eklenen her kampanya görseli, her yeni eklenti ve her pazarlama scripti siteyi yeniden yavaşlatabilir. Bu yüzden hızı bir proje değil, düzenli kontrol edilen bir değer olarak görün. Ayda bir kez Core Web Vitals raporuna bakmak, sorunları büyümeden yakalamanızı sağlar. Yeni bir eklenti ya da kampanya sayfası eklediğinizde de aynı ölçümü tekrarlamayı alışkanlık hâline getirin; böylece sorunun hangi değişiklikle başladığını hemen bilirsiniz.

Site hızı, daha geniş bir site sağlığı resminin bir parçasıdır. SEO, güvenlik ve mobil uyumla birlikte nasıl değerlendirileceğini web sitesi analizi nasıl yapılır yazımızda anlattık. Altyapı seçiminin hıza etkisini merak ediyorsanız hazır site mi, özel yazılım mı karşılaştırmamıza da göz atabilirsiniz.

Bu işlerle kendiniz uğraşmak istemiyorsanız, Fietto Creative'in dijital süreklilik hizmeti kapsamında hız, SEO ve teknik bakımı düzenli olarak takip ediyoruz. Önce sitenizin bugün nerede durduğunu görmek isterseniz Site Röntgeni ile ücretsiz bir ölçüm yapabilirsiniz.

Sık sorulan sorular