Web sitesi hızını artırmanın en etkili yolu; önce Core Web Vitals metrikleriyle darboğazı ölçmek, ardından görselleri, önbelleklemeyi, sunucu yanıt süresini ve JavaScript yükünü bu ölçüme göre sırayla iyileştirmektir. Rastgele eklenti kurmak ya da yalnızca tek bir test puanını kovalamak yerine, gerçek kullanıcıların yaşadığı yavaşlığın nedenini bulmak kalıcı sonuç verir.
Yavaş açılan sayfalar ziyaretçinin sabrını tüketir, marka algısını zedeler ve arama görünürlüğünü olumsuz etkileyebilir. Google, sayfa deneyimini değerlendirirken Core Web Vitals sinyallerini de dikkate alır. Bu rehberde performansı nasıl ölçeceğinizi, hangi metriğin neyi anlattığını ve her metrik için uygulanabilir iyileştirme adımlarını ele alıyoruz.
Performansı Doğru Ölçün: Saha Verisi ve Laboratuvar Verisi
Optimizasyona başlamadan önce iki tür veriyi ayırt etmek gerekir:
- Saha verisi (field data): Sitenizi gerçekten ziyaret eden Chrome kullanıcılarından toplanan veridir. PageSpeed Insights’ın üst bölümünde ve Search Console’daki Core Web Vitals raporunda görünür. Google’ın değerlendirmesi bu gerçek kullanıcı deneyimine dayanır.
- Laboratuvar verisi (lab data): Lighthouse’un sabit bir cihaz ve ağ koşulunda yaptığı simülasyondur. Sorunun nedenini bulmak ve bir değişikliğin etkisini hemen görmek için idealdir, ancak gerçek kullanıcı deneyiminin birebir karşılığı değildir.
Lighthouse puanı yüksek olduğu hâlde saha verisi zayıf olabilir ya da tersi yaşanabilir. Karar verirken saha verisini esas alın, nedeni bulmak için laboratuvar testini kullanın. Trafiği düşük sayfalar için saha verisi oluşmayabilir; bu durumda aynı şablonu kullanan sayfaların verisine ve laboratuvar testlerine bakın.
Core Web Vitals: Üç Metrik, Üç Farklı Sorun
Google’ın Core Web Vitals seti, kullanıcı deneyiminin üç farklı yönünü ölçer. Eşikler, sayfa ziyaretlerinin 75. yüzdelik dilimi üzerinden değerlendirilir; yani ziyaretlerin büyük çoğunluğunun “iyi” aralıkta kalması hedeflenir.
| Metrik | Neyi ölçer? | “İyi” eşiği |
|---|---|---|
| LCP (Largest Contentful Paint) | Görünür alandaki en büyük içerik öğesinin ne zaman çizildiği | 2,5 saniye veya altı |
| INP (Interaction to Next Paint) | Tıklama, dokunma ve tuş vuruşlarına sayfanın ne kadar hızlı görsel yanıt verdiği | 200 milisaniye veya altı |
| CLS (Cumulative Layout Shift) | Yükleme sırasında beklenmedik düzen kaymalarının toplamı | 0,1 veya altı |
INP, Mart 2024’te FID’nin yerini alarak resmi Core Web Vitals metriği oldu. FID yalnızca ilk etkileşimin gecikmesine bakarken INP sayfadaki etkileşimlerin genel yanıt hızını değerlendirir; bu nedenle ağır JavaScript kullanan siteler için daha zorlayıcıdır.
LCP’yi İyileştirmek: Görseller ve Sunucu Yanıtı
Çoğu sayfada LCP öğesi, üst bölümdeki büyük bir görsel ya da başlık metnidir. LCP’yi düşürmek için bu öğenin olabildiğince erken keşfedilmesi ve hızlı indirilmesi gerekir.
Görsel optimizasyonu
- Modern biçimler kullanın: WebP ve AVIF, benzer görsel kalitede genellikle JPEG ve PNG’den daha küçük dosyalar üretir. Eski tarayıcılar için yedek biçim sunmayı unutmayın.
- Doğru boyutta sunun: srcset ve sizes öznitelikleriyle her ekran genişliğine uygun boyutta görsel gönderin; masaüstü boyutundaki görseli telefona indirtmeyin.
- LCP görselini önceliklendirin: Üst bölümdeki ana görsele fetchpriority=“high” ekleyin ve bu görsele lazy loading uygulamayın. Gecikmeli yüklenen bir LCP görseli, LCP’yi doğrudan geciktirir.
- Ekran dışını erteleyin: Sayfanın aşağısındaki görsellere ve iframe’lere loading=“lazy” ekleyin.
- Ana görseli CSS arka planına gömmeyin: Tarayıcı, CSS içindeki arka plan görsellerini HTML’deki görsellerden daha geç keşfeder.
Sunucu yanıt süresi ve önbellekleme
Tarayıcı ilk baytı geç alıyorsa, ön yüzde yapılan hiçbir iyileştirme LCP’yi tam olarak kurtaramaz. Sunucu tarafında şu adımlar öne çıkar:
- Sayfa önbelleği: WordPress gibi dinamik sistemlerde her istekte sayfayı yeniden üretmek yerine hazır HTML çıktısını sunun.
- Tarayıcı önbelleği: CSS, JavaScript, font ve görseller için uzun süreli Cache-Control başlıkları tanımlayın; dosya adlarına sürüm ekleyerek güncellemelerin anında yansımasını sağlayın.
- İçerik dağıtım ağı (CDN): Statik dosyaları kullanıcıya coğrafi olarak yakın noktalardan sunarak gecikmeyi azaltın.
- Güncel altyapı: Desteklenen bir PHP sürümü, HTTP/2 veya HTTP/3 ve Brotli ya da Gzip sıkıştırması temel gereksinimlerdir.
INP’yi İyileştirmek: JavaScript’i Hafifletin
Kullanıcı bir butona dokunduğunda tarayıcının ana iş parçacığı meşgulse, yanıt gecikir. INP sorunlarının çoğunun kaynağı uzun süren JavaScript görevleridir.
- Kullanılmayan kütüphaneleri ve eklentileri kaldırın; her yeni eklentinin sayfaya ne kadar kod eklediğini kontrol edin.
- Kritik olmayan betikleri defer ya da async ile yükleyin.
- Sohbet araçları, ısı haritaları ve reklam etiketleri gibi üçüncü taraf betikleri gözden geçirin; gerçekten kullanılmayanları çıkarın, gerekenleri etiket yöneticisi üzerinden kontrollü yükleyin.
- Uzun görevleri daha küçük parçalara bölerek tarayıcının araya kullanıcı etkileşimlerini sıkıştırabilmesini sağlayın.
- Etkileşim sonrası yapılan ağır işleri, örneğin büyük DOM güncellemelerini, mümkün olduğunca sadeleştirin.
CLS’yi Önlemek: Düzeni Sabitleyin
Okumaya başladığınız metin bir anda aşağı kayıyorsa, CLS sorunu yaşıyorsunuz demektir. Bu sorun hem kullanıcıyı rahatsız eder hem de yanlış tıklamalara yol açar.
- Tüm görsellere ve videolara width ve height öznitelikleri ekleyin ya da CSS’te en-boy oranı tanımlayın.
- Reklam, gömülü içerik ve çerez bildirimi gibi sonradan yüklenen alanlar için önceden yer ayırın.
- Web fontlarında font-display: swap kullanın, kritik fontları önceden yükleyin ve yedek fontu boyut olarak ana fonta yakın seçin.
- Mevcut içeriğin üstüne, kullanıcı etkileşimi olmadan yeni öğe eklemeyin.
Performans sorunları çoğu zaman mobilde daha belirgin yaşanır; tasarım aşamasında mobil öncelikli yaklaşımı benimsemek bu sorunların önemli bir kısmını baştan engeller.
Adım Adım Performans Optimizasyonu Planı
- Search Console’daki Core Web Vitals raporundan sorunlu sayfa gruplarını belirleyin.
- Her gruptan temsilci bir sayfayı PageSpeed Insights ile test edin ve hangi metriğin zayıf olduğunu not edin.
- Lighthouse önerilerini, zayıf metriğe etkisine göre sıralayın.
- Değişiklikleri önce test ortamında uygulayın ve laboratuvar testiyle etkisini doğrulayın.
- Canlıya aldıktan sonra saha verisinin güncellenmesini bekleyin; bu veri geçmiş haftaların toplamını yansıttığı için değişim zamanla görünür.
- Yeni eklenti, tema güncellemesi ya da kampanya sayfası sonrası ölçümü tekrarlayın.
Performans, teknik SEO’nun yalnızca bir parçasıdır; tarama, dizinleme ve site yapısıyla birlikte ele alındığında anlam kazanır. Bu bütünü teknik SEO rehberimizde ayrıntılı olarak anlattık.
Sık Yapılan Hatalar
- Yalnızca Lighthouse puanını hedeflemek: Puan bir teşhis aracıdır; asıl hedef saha verisindeki Core Web Vitals değerleridir.
- Her görsele lazy loading uygulamak: Üst bölümdeki LCP görselini de geciktirir.
- Üst üste performans eklentisi kurmak: Birden fazla önbellek ya da küçültme eklentisi birbiriyle çakışabilir ve sayfayı bozabilir.
- Önbelleği kontrolsüz açmak: Sepet, üye paneli ve form sayfaları gibi kişiye özel içerikler önbellekten sunulmamalıdır.
- Tek seferlik iş sanmak: Her yeni içerik, görsel ve betik performansı yeniden etkileyebilir.
Sonuç
Web sitesi performansı, doğru ölçümle başlayan ve düzenli takiple sürdürülen bir süreçtir. LCP için görselleri ve sunucu yanıtını, INP için JavaScript yükünü, CLS için sayfa düzenini ele aldığınızda hem kullanıcılarınız daha akıcı bir deneyim yaşar hem de siteniz arama motorlarına sağlıklı bir sayfa deneyimi sunar. Bu iyileştirmelerin kalıcı olması için performans kontrolünü güncelleme ve yayın rutininizin bir parçası hâline getirin; düzenli web sitesi yönetimi ve SEO yönetimi bu disiplini sürdürmeyi kolaylaştırır.
Sitenizin hız sorunlarını birlikte incelemek isterseniz iletişim sayfamızdan bize yazabilirsiniz.