Web Performansı: Lighthouse 100 Nasıl Alınır (ve Ne Zaman Alınmaz)

Performans bir özellik değil, saygı biçimidir: kullanıcının cihazına, kotasına ve zamanına. İşte projelerimizde en çok fark yaratan beş müdahale.

1. LCP: en büyük içeriği erken getir

Kahraman görseli/başlığı geciktiren her şey düşmandır: render-bloklayan betikler, geç keşfedilen görseller, yavaş sunucu. Reçete: kritik görsele fetchpriority="high", modern format (AVIF/WebP), ve HTML’in ilk baytını hızlandıran statik üretim ya da önbellek.

2. Fontlar: zarif yüklenmeli

font-display: swap, yalnız kullanılan ağırlıkları yüklemek ve preconnect — üçü birden. Değişken font tek dosyada dört ağırlığın yerini tutar. Metnin görünmesini fontlara rehin bırakmayın.

3. INP: ana iş parçacığını boş tut

Etkileşim gecikmesinin klasik sebebi, her şeyi yapan dev JavaScript paketidir. Bütçe koyun (bizim statik sitelerde hedef: <30KB), üçüncü taraf betikleri sorgulayın, ağır işleri parçalayın. En hızlı JavaScript, gönderilmeyendir.

4. CLS: yer ayır

Boyutu yazılmamış görsel, sonradan yüklenen banner, fontla büyüyen başlık — hepsi zıplatır. Her medyaya width/height, dinamik alanlara min-height, bildirimlere ayrılmış yer.

5. Ölçüm: laboratuvar + saha

Lighthouse laboratuvardır; gerçek kullanıcı verisi (CrUX/RUM) sahadır. Karar sahaya göre verilir: laboratuvarda 100 alıp sahada yavaş olmak mümkündür (özellikle düşük cihaz segmentinde).

Puan avcılığı ne zaman zarardır?

Skoru 97’den 100’e taşıyan üç günlük efor, kullanıcının hissetmeyeceği bir fark için harcanmış üç gündür. Sıralamamız hep aynı: önce algılanan hız (LCP, INP), sonra istikrar (CLS), en son rozet. Bu site de aynı reçeteyle kuruldu: statik HTML, tek küçük JS dosyası, sistem yazı tipi yedekli iki font ailesi.