Web Siteniz Her Saniye Geciktiğinde Müşteri ve Para Kaybediyorsunuz

Sayfa hızı ile hemen çıkma oranı arasındaki ilişki doğrusal: yükleme süresi uzadıkça ziyaretçi kaybı katlanarak artar. Birkaç saniyelik gecikme, dönüşüm oranını ciddi biçimde etkiler. Her saniye para.

Bir işletmenin sitesine ilk baktığımda PageSpeed skoruna bakıyorum, özellikle mobildeki. Sorun şu: site sahibi bu rakamı görmüyor ama ziyaretçi yaşıyor. Ziyaretçi teknik altyapıyı bilmez, "site açılmadı, bekleyemem" deyip çıkar. Web yazılım ve performans optimizasyonu bu yüzden doğrudan gelirle ilgili bir konu.

Core Web Vitals nedir ve neden önemlidir?

Google, 2021'den itibaren sayfa deneyimini sıralama faktörü olarak değerlendiriyor. Core Web Vitals üç temel metrikten oluşuyor: LCP (Largest Contentful Paint), sayfanın en büyük görsel veya metin bloğunun yüklenme süresi; ideal değer 2,5 saniyenin altıdır. FID (First Input Delay), kullanıcının ilk etkileşiminden tarayıcının yanıt verdiği ana kadar geçen süre; ideal değer 100 milisaniyenin altıdır. CLS (Cumulative Layout Shift), sayfa yüklenirken elementlerin sıçrama miktarı; ideal değer 0,1'in altıdır.

Bu üç metrikte zayıf kalan siteler, içeriği iyi olsa bile Google aramalarında geride kalabiliyor. SEO'ya yatırım yapıp teknik performansı ihmal etmek, gaza basıp frene de basmaya benziyor. SEO'nun içerikten ibaret olmadığını bu yüzden söylüyorum.

PageSpeed optimizasyonunda ne yapılır?

20 yıllık tecrübemle şunu söyleyebilirim: hız sorunlarının büyük çoğunluğu birkaç temel iyileştirmeyle çözülür. Görüntü dosyalarının .webp formatına dönüştürülmesi ve lazy-load uygulanması, render-blocking JavaScript ve CSS'in temizlenmesi, gereksiz üçüncü taraf betiklerin kaldırılması, CDN kullanımı ve tarayıcı önbelleği yapılandırması. Bu adımlar doğru uygulandığında pek çok sitede PageSpeed skoru 40-50 puanlık artış gösteriyor.

Saf kod mimarisiyle yapılan sitelerde başlangıçtan yüksek skor elde etmek çok daha kolay; çünkü gereksiz yük zaten yoktur. Avcılar web tasarım projelerinde sıfırdan kurduğum sitelerin büyük bölümü masaüstünde 95+, mobilde 85+ PageSpeed skoru alıyor. Bu skor, rakiplere kıyasla hem sıralamada hem kullanıcı deneyiminde somut avantaj sağlıyor.

Hız optimizasyonu nasıl başlar?

İlk adım ölçmek. Sitenizi Google PageSpeed Insights'ta test edin, sorunlar kategorilere ayrılmış halde önünüze gelir. Sonuçları yorumlamak teknik bilgi ister. Takıldığınız yerde bana yazabilirsiniz, ücretsiz bir hız değerlendirmesi yapıyorum.

Hızı Yavaşlatan Yaygın Nedenler

Boyutu küçültülmemiş görseller, kullanılmayan eklenti ve betikler, dış kaynaktan yüklenen yazı tipleri, önbellek ayarının olmaması ve yavaş sunucu en sık karşılaşılan nedenlerdir. Görselleri küçültmek için kendi hazırladığım görsel sıkıştırma ve WebP dönüştürme aracını kullanabilirsiniz, dosyanız cihazınızdan çıkmaz.

Hız Kontrol Listesi

• Görselleri WebP ya da AVIF biçimine çevirin
• Görsellere genişlik ve yükseklik verin
• Ekran dışındaki görselleri geç yükleyin
• Yazı tiplerini kendi sunucunuzdan sunun
• Analitik betiklerini sayfa yüklendikten sonra çalıştırın

Laboratuvar Verisi ile Gerçek Kullanıcı Verisi

PageSpeed raporunun iki ayrı bölümü var. Üstte, gerçek ziyaretçilerden toplanan veri görünür, ama bu yalnızca yeterli trafiği olan sitelerde çıkar. Altta ise Google'ın sayfayı kendi ortamında denediği laboratuvar sonucu bulunur. Trafiği az bir sitede yalnızca laboratuvar verisini göreceksiniz. Bu veri bir ipucu, ziyaretçinizin gerçek deneyiminin birebir ölçüsü değil.

Mobil Skor Neden Masaüstünden Düşük?

Mobil test, yavaş bir ağ ve daha zayıf bir işlemciyi taklit ediyor. Bu yüzden aynı sayfa masaüstünde 99 alırken mobilde daha düşük çıkabilir. Mobil skoru esas almak daha gerçekçi, çünkü ziyaretçilerin önemli bir kısmı telefondan giriyor. Masaüstü skoru tek başına güven verici görünebilir ama mobildeki sorunu gizler.

Skor Neden Her Testte Değişiyor?

Aynı sayfayı üst üste test ettiğinizde skor birkaç puan oynayabilir. Sunucunun o anki yükü, ağ koşulu ve üçüncü taraf betiklerin yanıt süresi sonucu etkiliyor. Tek bir ölçüme bakmak yerine üç ölçümün ortalamasını alın ve değişikliklerin etkisini bu ortalamayla karşılaştırın.

Üçüncü Taraf Betikler Neyi Yavaşlatır?

Analitik, sohbet düğmesi, harita ve reklam kodları siteye dışarıdan yük bindirir. Bunların her biri ayrı bir istek ve ek bir betik demek. Kendi sitemde analitik kodunu sayfa açılır açılmaz değil, ziyaretçi sayfayla etkileşime girdikten sonra yüklüyorum. Böylece ilk açılış bu yükten etkilenmiyor.

Yazı Tipleri ve Düzen Kayması

Geç yüklenen bir yazı tipi, sayfa açıldıktan sonra metnin yer değiştirmesine yol açar ve bu kayma hem rahatsız eder hem de ölçüm raporlarında düzen kayması olarak görünür. Yazı tiplerini kendi sunucunuzdan sunmak ve yükleme davranışını doğru ayarlamak bu kaymayı azaltır. Görsellere genişlik ve yükseklik vermek de aynı sorunu önlüyor.

Önbellek Değişikliği Nasıl Etkiler?

Statik dosyalar uzun süre önbellekte tutulursa ziyaretçi ikinci girişte çok hızlı açar. Ama bir dosyayı güncellediğinizde eski sürümü görmeye devam edebilir. Bunu önlemek için dosya adına bir sürüm etiketi eklenir ve dosya değiştiğinde etiket de değişir. Önbellek ayarı yapan herkesin bu sürüm etiketini unutmaması gerekir.

Önce Hangisini Düzeltmeli?

Raporda onlarca öneri çıkabilir ve hepsini aynı anda düzeltmek gerekmiyor. Önce en büyük dosya boyutunu azaltan değişiklikleri yapın, çoğu zaman bunlar görseller. Sonra gereksiz betikleri çıkarın. Küçük etkili önerilere ancak büyükler bittikten sonra bakın. Görselleri küçültmek için görsel sıkıştırma aracımı kullanabilirsiniz.

Hız Çalışması Ne Zaman Yeterli Sayılır?

Hedef mükemmel bir skor değil, ziyaretçinin beklemediği bir deneyim. Mobilde sayfa üç dört saniye içinde kullanılabilir hale geliyorsa ve ziyaretçi düzen kaymasından rahatsız olmuyorsa çalışma amacına ulaşmıştır. Bundan sonrası için harcanacak emek genellikle sonuca orantılı katkı yapmaz. Mobil tarafı ayrıca mobil öncelikli tasarım yazımda anlattım.

Düzenli Ölçüm

Hız bir kez düzeltilip bırakılacak bir iş değildir. Yeni içerik ve özellik eklendikçe ölçümü tekrarlayın ve Search Console'daki Core Web Vitals raporunu izleyin.

Sık Sorulan Sorular