Site hızı nasıl artırılır? Core Web Vitals'ı doğru ölçmek ve puanı gerçekten yükseltmek

Bir siteyi hızlandırmak çoğu zaman tek bir büyük hamle değil, sırayla yapılan küçük ölçümlerdir. Sadece Medya'nın ana sayfasında Samsun'a inen üç boyutlu bir dünya küresi var; ilk ölçümde PageSpeed'in mobil puanı 56, masaüstü puanı 48 çıktı. Görsel tarafta hiçbir şeyi değiştirmeden iki puanı da 100'e çıkardık. Bu yazıda o işte ve kendi sitemde öğrendiklerimi, bir işletme sitesine uygulanabilecek sırayla anlatıyorum.

Core Web Vitals nedir?

Google, bir sayfanın kullanıcıya nasıl hissettirdiğini üç metrikle ölçer. LCP (Largest Contentful Paint), ekrandaki en büyük içeriğin, çoğu zaman ana görselin ya da başlığın görünme süresidir; 2,5 saniyenin altı iyi sayılır. INP (Interaction to Next Paint), bir düğmeye dokunduğunuzda sayfanın tepki verme süresidir; 200 milisaniyenin altı iyidir ve 2024'te eski FID metriğinin yerini aldı. CLS (Cumulative Layout Shift), sayfa yüklenirken içeriğin ne kadar kaydığını ölçer; 0,1'in altı iyidir. Okumak üzere olduğunuz satırın, üstte geç yüklenen bir reklam yüzünden aşağı kayması CLS'nin ta kendisidir.

Önce doğru ölç: laboratuvar mı, gerçek kullanıcı mı?

PageSpeed Insights iki ayrı şey gösterir ve çoğu karışıklık buradan çıkar. Üstteki bölüm, sitenize son dört haftada gelen gerçek Chrome kullanıcılarının verisidir; ancak yeterli ziyaretçisi olan sitelerde görünür. Alttaki puan ise bir laboratuvar ölçümüdür: Lighthouse sayfanızı yavaş bir mobil bağlantı ve dört kat yavaşlatılmış bir işlemciyle taklit ederek yükler. Küçük işletme sitelerinin çoğunda gerçek kullanıcı verisi olmadığı için elinizde yalnız laboratuvar puanı olur; bu puan iyi bir yol göstericidir ama tek başına sıralama demek değildir.

Ölçerken üç alışkanlığım var. Mobil sonuca bakarım, çünkü ziyaretçilerin çoğu telefondan gelir. Aynı sayfayı birkaç kez ölçerim, çünkü tek ölçüm dalgalanır. Değişiklikten önce ve sonra aynı koşulda ölçerim; aksi halde neyin işe yaradığını bilemem. Search Console'daki Önemli Web Verileri raporu da yeterli trafiği olan sitelerde hangi sayfa grubunun sorunlu olduğunu gösterir.

Sahada en çok işe yarayan düzeltmeler

Görseller. İşletme sitelerinde yavaşlığın bir numaralı sebebi, telefondan çekilip olduğu gibi yüklenen birkaç megabaytlık fotoğraflardır. Görseli gösterileceği boyuta küçültün, WebP ya da AVIF gibi modern bir biçime çevirin ve farklı ekranlar için birkaç boy hazırlayıp tarayıcının uygun olanı seçmesini sağlayın. Kendi sitemde iş görsellerini 720, 1080 ve 1440 piksel genişlikte üç boy olarak sunuyorum; telefon küçüğünü, geniş ekran büyüğünü indiriyor. İlk ekranda görünmeyen görselleri sonradan yükletin, ilk ekrandaki ana görseli ise asla.

Görsellere yer ayırın. Görselin genişlik ve yükseklik bilgisi sayfada yazılı değilse tarayıcı ona yer ayıramaz, görsel geldiğinde altındaki her şey kayar. Çerez bandı, duyuru şeridi gibi sonradan beliren öğeler için de yer önceden ayrılmalı. CLS sorunlarının çoğu bu iki kuralla çözülür; kendi sitemde CLS sıfır.

Yazı tipleri. Her ağırlık için ayrı dosya yüklemek yerine değişken yazı tipi kullanıyorum; iki dosya bütün ağırlıkları karşılıyor. Yalnızca Türkçe için gereken karakterleri içeren alt kümeler dosyaları küçültür. Dikkat edilecek ince bir nokta var: Sadece Medya'da sayfanın ilk karesinden önce indirilen yazı tipleri, Lighthouse'un hesabında ekrana ilk içerik gelme süresini uzatıyordu; ilk ekranda gerekmeyen ağırlıkları geri plana almak bu süreyi kısalttı.

Betiklerin önceliği. Sonradan çalışması yeten betikleri öne almak sık yapılan bir hata. Sadece Medya'da ertelenmiş bir betiğe verilmiş ön yükleme ipucu onu yüksek öncelikli hâle getiriyor ve ilk içeriğin önüne geçiriyordu; ipucunu kaldırınca süre kısaldı. Ağır dosyaların önceden indirilmesini de sayfa yüklendikten birkaç saniye sonraya bıraktık.

Ağır parçayı ilk etkileşime bırakın. Üç boyutlu küre, harita, video oynatıcı ya da canlı sohbet penceresi gibi ağır bileşenler ilk saniyede gerekmez. Sadece Medya'da küre motoru, kullanıcı sayfayı kaydırdığı, dokunduğu ya da fareyi oynattığı anda yükleniyor; o ana kadar aynı motorla önceden çizilmiş bir görsel duruyor. Ziyaretçi farkı görmüyor, ama telefonun işlemcisi ilk saniyelerde boş kalıyor.

Üçüncü taraf kodlar. Analiz, reklam pikseli ve sohbet araçları sayfaya en çok yük getiren kodlardır. Kendi sitemde ölçüm ve Meta Pikseli, ziyaretçi çerez onayı vermeden hiç yüklenmiyor; bu hem KVKK açısından doğru, hem de onay vermeyen her ziyaretçide sayfayı hafifletiyor. Kullanmadığınız her eklentiyi ve takip kodunu kaldırın.

Sunucu ve önbellek. Sunucunun ilk yanıtı geç geliyorsa ön yüzde yapılan her şey bir yere kadar işe yarar. İyi yapılandırılmış bir hosting, sayfa önbelleği ve görseller için uzun süreli önbellek başlıkları, özellikle tekrar gelen ziyaretçide farkı hemen gösterir. Hosting seçerken nelere baktığımı web hosting nasıl seçilir yazısında anlattım.

Puan bir araç, hedef değil

Bir iş için hiçbir zaman puan sözü vermiyorum. Bir sonraki sürümde eklenen tek bir üçüncü taraf kod ya da yüksek çözünürlüklü bir görsel puanı birkaç basamak düşürebilir; önemli olan sitenin telefonda gerçekten hızlı açılması ve bunun her güncellemeden sonra yeniden ölçülmesidir. Kendi sitemde de büyük bir değişiklikten sonra mobil ölçümü yeniden yapıyorum.

Site yavaş açılıyorsa ilk beş kontrol

1. PageSpeed Insights'ta mobil ölçüm yapın ve en büyük içeriğin hangi öğe olduğuna bakın.
2. İlk ekrandaki görsellerin boyutunu ve biçimini kontrol edin.
3. Sayfada çalışan üçüncü taraf kodlarını listeleyip gereksiz olanları kaldırın.
4. Görsellerin ve sonradan beliren şeritlerin yer ayırdığından emin olun.
5. Sunucunun ilk yanıt süresine bakın; tek başına bir saniyeyi aşıyorsa hosting ve önbellek ayarı gündeme gelir.

Samsun'da nasıl çalışıyorum?

Yaptığım sitelerde hız, tasarımın sonradan eklenen bir ayarı değil, ilk günden ölçülen bir kriter. Mevcut bir sitenin yavaşlığına bakarken de yukarıdaki sırayla ölçüp neyin ne kadar kazandıracağını yazılı olarak iletiyorum. Ayrıntılar Samsun web tasarım sayfasında; sitenizin ölçümünü birlikte yapmak için WhatsApp'tan yazabilirsiniz.

Sık sorulanlar

Site hızı Google sıralamasını etkiler mi? Sayfa deneyimi Google'ın değerlendirdiği sinyallerden biridir; ama aramaya cevap veren içeriğin yerini tutmaz. Hız, benzer içerikler arasında fark yaratır ve en çok ziyaretçinin sayfada kalıp kalmamasını etkiler.

PageSpeed puanım neden her ölçümde değişiyor? Laboratuvar ölçümü ağ ve sunucu koşullarından etkilenir; birkaç puanlık dalgalanma normaldir. Karar vermeden önce aynı sayfayı birkaç kez ölçün.

Mobil puan masaüstünden neden düşük? Mobil ölçüm yavaş bir bağlantı ve yavaşlatılmış bir işlemciyle yapılır. Masaüstünde fark edilmeyen ağır görseller ve betikler mobilde puanı belirgin biçimde düşürür.

Core Web Vitals'ı nereden takip ederim? Yeterli trafiği olan sitelerde Search Console'daki Önemli Web Verileri raporundan; trafiği az sitelerde PageSpeed Insights'ın laboratuvar ölçümünden.

İlyas Saltay

Samsun'daki işletmelerin web sitesini kuruyor, sosyal medyasını ve reklamlarını yürütüyorum; burada yazdıklarım canlı sistemlerde ölçülerek çıktı. Sorun sende de varsa yaz, bakarım.