Web Sitesi Hızlandırma İçin Core Web Vitals ve 7 Pratik Adım

Bir web sitesinin yavaş olduğunu çoğu zaman site sahibi en son fark eder. Kendi bilgisayarınızda, hızlı internetle ve önbellekte kayıtlı sayfalarla site gayet hızlı görünür. Oysa ziyaretçiniz sitenize ilk kez, telefondan ve belki zayıf bir mobil bağlantıyla giriyordur. Onun gördüğü site sizinkinden çok farklıdır.

Bu yazıda web sitesi hızlandırma konusunu Google'ın Core Web Vitals ölçütleri üzerinden ele alıyoruz. Önce neyi ölçmeniz gerektiğini, sonra en çok fark yaratan düzeltmeleri anlatıyoruz: görsel optimizasyonu, önbellek, CDN ve kod tarafındaki temizlik.

Hız neden önemli?

Yavaş açılan bir sayfa iki şekilde zarar verir. Birincisi kullanıcı tarafında: sayfanın açılmasını bekleyen ziyaretçi sabrını kaybeder, geri döner ve rakibinizin sitesine girer. İkincisi arama motoru tarafında: Google, sayfa deneyimini sıralama sinyallerinden biri olarak kullanır. Hız tek başına sizi ilk sıraya çıkarmaz, ama benzer içerikler arasında yavaş olan dezavantajlı başlar.

Core Web Vitals: üç temel ölçüt

Google, sayfa deneyimini üç ana ölçütle değerlendirir. Bu ölçütlerin eşik değerleri Google'ın web.dev sitesinde yayımlanmıştır ve sitenizin ziyaretlerinin büyük çoğunluğunda bu eşiklerin altında kalmanız beklenir.

Ölçüt	Neyi ölçer	İyi sayılan değer
LCP (Largest Contentful Paint)	Sayfadaki en büyük içerik öğesinin, genellikle ana görsel veya başlığın, ekranda görünme süresi	2,5 saniye veya altı
INP (Interaction to Next Paint)	Kullanıcı bir butona tıkladığında veya bir alana yazdığında sayfanın tepki verme hızı	200 milisaniye veya altı
CLS (Cumulative Layout Shift)	Sayfa yüklenirken içeriklerin beklenmedik şekilde kayması	0,1 veya altı

INP, daha önce kullanılan FID ölçütünün yerini almıştır ve sayfanın yalnızca ilk etkileşime değil, ziyaret boyunca bütün etkileşimlere verdiği tepkiyi değerlendirir.

Nasıl ölçülür?

• PageSpeed Insights: Sayfa adresini girdiğinizde hem gerçek kullanıcı verisini (yeterli trafik varsa) hem de laboratuvar ölçümünü gösterir.
• Google Search Console: Core Web Vitals raporu, sitenizdeki hangi sayfa gruplarının sorunlu olduğunu gösterir.
• Tarayıcı geliştirici araçları: Chrome'daki Lighthouse ve Performance sekmesi, sorunun kaynağını ayrıntılı incelemenizi sağlar.

Ölçümü her zaman mobil görünüm için de yapın. Masaüstünde hızlı olan site mobilde yavaş olabilir.

LCP'yi iyileştirmek

LCP genellikle sayfanın üst kısmındaki büyük görsel, slider veya kapak fotoğrafından etkilenir. En sık görülen nedenler ve çözümleri şunlar:

• Ana görsel çok büyük. Ekranda birkaç yüz piksel genişliğinde görünen bir görsel için binlerce piksellik orijinal fotoğraf yüklenmemeli.
• Ana görsel geç yükleniyor. Sayfanın ilk ekranındaki görsele tembel yükleme (lazy loading) uygulanmamalı; aksine tarayıcıya öncelikli yüklemesi söylenmeli.
• Sunucu yanıtı yavaş. Sayfa her istekte veritabanından baştan oluşturuluyorsa ilk bayt gecikir. Sunucu tarafı önbellek bu sorunu çözer.
• Yazı tipleri ve stil dosyaları sayfayı bloke ediyor. Kritik olmayan stil ve betikler ertelenmeli, yazı tipleri için uygun yükleme stratejisi kullanılmalı.
• Slider kullanımı. Ağır slider betikleri ve birden fazla büyük görsel, ilk ekranı gereksiz yere yavaşlatır. Çoğu zaman tek bir güçlü görsel daha iyi sonuç verir.

INP'yi iyileştirmek

INP sorunu genellikle sayfada çok fazla JavaScript çalıştığında ortaya çıkar. Kullanıcı menüye tıklar, ama tarayıcı o sırada başka bir betiği işlediği için tepki gecikir.

• Kullanılmayan eklenti ve betikleri kaldırın. Bir zamanlar denenip unutulan sohbet balonları, pop-up araçları ve analitik kodları sık rastlanan yüklerdir.
• Üçüncü taraf betikleri (reklam, takip, sosyal medya gömmeleri) sayfanın ana yüklemesinden sonra yükleyin.
• Uzun süren JavaScript işlemlerini küçük parçalara bölün; bu genellikle geliştirici müdahalesi gerektirir.
• Ağır sayfa oluşturucu (page builder) eklentilerinin ürettiği kodu gözden geçirin. Bazı sayfa oluşturucular basit bir sayfa için bile çok fazla kod yükler.

CLS'yi iyileştirmek

CLS, kullanıcının bir şeye tıklamak üzereyken içeriğin kayması ve yanlış yere tıklamasıyla kendini gösterir. Çözümü genellikle basittir:

• Bütün görsellere ve videolara genişlik ve yükseklik değeri verin, böylece tarayıcı yer ayırır.
• Reklam alanları, çerez bildirimleri ve duyuru bantları için sabit yer ayırın veya bunları içeriğin üstüne bindirerek gösterin.
• Web yazı tipleri yüklendiğinde metnin boyutu değişmeyecek şekilde yedek yazı tipi ayarlayın.
• Sayfa yüklendikten sonra içeriğin üstüne dinamik olarak eleman eklemekten kaçının.

Görsel optimizasyonu

Çoğu sitede sayfa ağırlığının en büyük kısmı görsellerden gelir. Görsel optimizasyonu, en az emekle en çok kazanç sağlanan adımdır.

1. Doğru boyut: Görseli gösterileceği boyuta göre kesin. Farklı ekranlar için farklı boyutlar sunmak (responsive görseller) mobilde ciddi kazanç sağlar.
2. Modern format: WebP ve AVIF formatları, aynı görsel kalitesini genellikle JPEG ve PNG'den daha küçük dosya boyutuyla sunar.
3. Sıkıştırma: Görselleri yüklemeden önce bir sıkıştırma aracından geçirin. Gözle fark edilmeyen kalite kaybıyla dosya boyutu belirgin şekilde düşer.
4. Tembel yükleme: Sayfanın alt kısımlarındaki görseller, kullanıcı oraya kaydırdığında yüklenmeli. İlk ekrandaki görsel hariç.
5. Logo ve ikonlar: Basit grafikler için SVG kullanmak hem keskin görüntü hem de küçük dosya boyutu sağlar.

Önbellek

Önbellek, bir kez hazırlanan içeriğin tekrar tekrar hazırlanmadan sunulmasıdır. Üç katmanda düşünülebilir:

• Tarayıcı önbelleği: Ziyaretçinin tarayıcısı stil dosyaları, betikler ve görselleri saklar; sonraki sayfa geçişlerinde yeniden indirmez. Bu, sunucu ayarlarında doğru önbellek başlıklarıyla sağlanır.
• Sayfa önbelleği: Sayfanın hazır HTML hali saklanır, her ziyarette veritabanına gidilmez. WordPress sitelerde bu genellikle bir önbellek eklentisi veya sunucu tarafı çözümle yapılır.
• Nesne önbelleği: Sık kullanılan veritabanı sorgularının sonuçları bellekte tutulur. Dinamik ve yoğun sitelerde fark yaratır.

Önbellekle ilgili en sık sorun, içerik güncellendiğinde eski halin görünmeye devam etmesidir. Önbelleğin güncelleme sonrası doğru temizlendiğinden emin olun. E-ticaret sitelerinde sepet ve ödeme sayfalarının önbelleğe alınmaması gerekir.

CDN

CDN (içerik dağıtım ağı), sitenizin statik dosyalarını dünyanın farklı noktalarındaki sunuculara kopyalar ve ziyaretçiye en yakın noktadan sunar. Ziyaretçileriniz farklı ülke veya bölgelerden geliyorsa, sunucunuz ise tek bir noktadaysa CDN gecikmeyi belirgin şekilde azaltır.

CDN'lerin çoğu ek olarak görsel optimizasyonu, sıkıştırma ve temel güvenlik koruması da sunar. Ücretsiz katmanı olan CDN hizmetleri küçük siteler için çoğu zaman yeterlidir. Kurulum genellikle alan adının DNS ayarlarında değişiklik gerektirir; bu adımı yaparken e-posta kayıtlarınızın bozulmamasına dikkat edin.

Barındırma ve sunucu tarafı

Bütün optimizasyonları yapsanız bile, kaynakları aşırı paylaşılan yetersiz bir hosting siteyi yavaşlatmaya devam eder. Güncel bir PHP veya kullandığınız dilin güncel sürümü, HTTP/2 veya HTTP/3 desteği, sıkıştırma (Gzip veya Brotli) ve yeterli bellek, sunucu tarafında kontrol edilmesi gereken temel noktalardır.

Sık yapılan hatalar

• Sadece puana odaklanmak. Laboratuvar puanını yükseltmek için siteyi işlevsiz hale getirmek, örneğin gerekli bir formu kaldırmak, doğru yaklaşım değildir. Amaç gerçek kullanıcının deneyimini iyileştirmektir.
• Birden fazla önbellek eklentisi kullanmak. Aynı işi yapan iki eklenti birbiriyle çakışır ve sorunları çözmek yerine yenilerini doğurur.
• Telefonla çekilen fotoğrafları doğrudan yüklemek. İçerik ekleyen ekip görsel kurallarını bilmiyorsa, yapılan optimizasyon birkaç ay içinde boşa gider. Ekibe basit bir görsel yükleme kuralı verin.
• Değişiklikleri ölçmeden yapmak. Her adımdan sonra ölçüm yapmazsanız hangi değişikliğin işe yaradığını, hangisinin bir şeyi bozduğunu anlayamazsınız.
• Yedek almadan optimizasyon yapmak. Betik erteleme ve birleştirme gibi ayarlar bazen sitenin bir bölümünü bozar. Geri dönebilmek için önce yedek alın.

Uygulama sırası

Hepsini aynı anda yapmak yerine şu sırayla ilerlemek genellikle en hızlı sonucu verir:

1. Mevcut durumu PageSpeed Insights ve Search Console ile ölçün, sonuçları not edin.
2. Görselleri boyutlandırın, sıkıştırın ve modern formata çevirin.
3. Kullanılmayan eklenti ve betikleri kaldırın.
4. Sayfa ve tarayıcı önbelleğini kurun.
5. CLS sorunlarını giderin: görsel boyutları, sabit alanlar.
6. Gerekiyorsa CDN ekleyin.
7. Tekrar ölçün ve ilk ölçümle karşılaştırın.

Hız, sitenizin genel bakımının bir parçasıdır. Yeni eklenen her eklenti ve görsel, zamanla siteyi tekrar yavaşlatabilir. Düzenli bakım tarafında neler yaptığımızı bakım ve güvenlik sayfamızda bulabilirsiniz. WordPress siteniz eklentilerle ağırlaştıysa WordPress mi özel yazılım mı yazımız da size fikir verebilir.

Sitenizin adresini paylaşın, hangi ölçütte sorun olduğunu ve hangi düzeltmelerin en çok fark yaratacağını birlikte çıkaralım. Teklif Al sayfasından bize ulaşabilirsiniz.

Sık sorulan sorular