İçeriğe geç

Mühendislik

Kurumsal web sitelerinde performans bir tasarım kararıdır

Core Web Vitals'ı geçmek bir optimizasyon turu değil, ilk gün alınan mimari ve tasarım kararlarının sonucudur.

Yayın tarihi: Son güncelleme: 6 dk okumaNeuros Web Team · Web Mühendisliği

Kısa cevap

Site hızı kaç saniye olmalı, nasıl ölçülür?

Core Web Vitals üç eşikle ölçülür: en büyük içerik boyaması (LCP) 2,5 saniyenin, sonraki boyamaya etkileşim (INP) 200 milisaniyenin, kümülatif düzen kayması (CLS) 0,1'in altında olmalıdır. Kurumsal bir site bunları ancak performans bir bütçe olarak yazılıp dağıtım hattı tarafından denetlendiğinde geçer; bütçe olmadan her yeni bileşen sayfayı biraz daha ağırlaştırır.

Bir sitenin hızlı olması, sonradan eklenen bir özellik değildir. Kaynak bütçesi baştan konmadığında, tasarım aşamasında verilen her karar performans borcuna dönüşür.

Performans bütçesi nasıl belirlenir?

Her sayfa için toplam JavaScript, görsel ağırlığı ve üçüncü parti script sayısı üzerinde bir tavan belirleyin. Bu tavan CI'da kontrol edilsin; aşan değişiklik birleştirilemesin.

  • Sunucu bileşenlerini varsayılan yap, istemci bileşenini istisna haline getir.
  • Yazı tiplerini kendi alan adından, değişken (variable) formatta sun.
  • Görsellerde modern format ve doğru boyut zorunlu olsun.
  • Analitik ve pazarlama scriptlerini ertelenmiş yükle.

Animasyon performansa ne kadar mal olur?

Kaydırma tabanlı animasyonlar, yalnızca transform ve opacity üzerinde çalıştığında ucuzdur. Düzen (layout) tetikleyen her animasyon, mobil cihazda kare düşmesi olarak geri döner.

Core Web Vitals nasıl doğru ölçülür?

Laboratuvar testi yeterli değildir. Gerçek kullanıcı ölçümü (RUM) olmadan performansın gerçekten iyileştiğini bilemezsiniz.

Core Web Vitals eşikleri (Google, web.dev)
Metrikİyiİyileştirme gerekliZayıf
LCP — en büyük içerik boyaması≤ 2,5 sn2,5 – 4,0 sn> 4,0 sn
INP — sonraki boyamaya etkileşim≤ 200 ms200 – 500 ms> 500 ms
CLS — kümülatif düzen kayması≤ 0,10,1 – 0,25> 0,25

Kaynaklar

  1. 01Core Web Vitals — LCP, INP, CLS eşikleriGoogle · web.dev · 2024
  2. 02Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2023
  3. 03DORA — DevOps Research and Assessment metrikleriGoogle Cloud · 2024

Sık sorulan sorular

Merak edilenler

Sıralama üzerindeki etkisi tek başına belirleyici değildir; içerik kalitesi hâlâ daha ağır basar. Ancak eşiği geçemeyen bir sayfa kullanıcıyı da kaybeder: yavaş açılan sayfada ziyaretçi içeriği görmeden ayrılır. Bu yüzden performansı bir sıralama taktiği olarak değil, içeriğin okunma şartı olarak ele almak daha doğru bir çerçevedir.

Ana iş parçacığını uzun süre meşgul eden JavaScript. Kullanıcı bir düğmeye bastığında tarayıcının yanıt verebilmesi için önce sıradaki işi bitirmesi gerekir; bu iş uzunsa etkileşim gecikir. En yaygın sebepler büyük paketler, sayfa açılışında çalışan ağır hesaplamalar ve her kaydırmada tetiklenen dinleyicilerdir. Çözüm kodu bölmek ve işi kullanıcı etkileşiminden sonraya ertelemektir.

Değil. Laboratuvar testi sabit bir cihaz ve sabit bir bağlantı varsayar; gerçek kullanıcı ise eski bir telefonda ve dalgalı bir şebekede geziniyor olabilir. İki ölçüm birbirinin yerine geçmez: laboratuvar testi regresyonu yakalar, gerçek kullanıcı ölçümü ise hangi kullanıcı grubunun sorun yaşadığını gösterir. Karar için ikisi birlikte okunmalıdır.

Bu konuları ekibinizle konuşalım

Yazdıklarımızı kendi bağlamınıza uyarlamak için teknik bir oturum planlayabiliriz.