UI Performansını Optimize Etme
1) "Hızlı" sayılan şey
TTFB (time to first byte) - hızlı sunucu/CDN yanıtı.
LCP (Biggest Contentful Paint) -'ana "içerik hızlı bir şekilde ortaya çıktı.
INP (Interaction to Next Paint - Sonraki Boyaya Etkileşim) - Etkileşim sırasında yanıt verme.
CLS (Kümülatif Mizanpaj Kayması) - arabirim jitter yokluğu.
TTI (Time to Interactive) - Her şey zaten yanıt verdiğinde.
Önerilen referans noktaları: LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (gerçek kullanıcıların yüzde 75'i için).
2) Süreç: ölçün - darboğazları bulun - bütçeleri düzeltin
1. Ölçü: RUM (gerçek kullanıcılar, ülkeye/ağa/cihaza göre yüzdeler) + sentetikler (Deniz feneri/tarayıcılar).
2. Bul: Performans profilcisi (uzun görevler> 50ms, düzen bozma, ekstra render).
3. Düzeltme: CI'daki bütçeler (JS/CSS/yazı tiplerinin ağırlığı, LCP/INP) ve "kırmızı çizgiler".
3) Ağ ve kaynak yükleme
3. 1 HTTP ve öncelikler
HTTP/2/3, Brotli sıkıştırmasını etkinleştir.
Kritik alanlara 'preconnect'; ' dns-prefetch 'ikincil etki alanlarına.
Kritik kaynaklar için 'ön yükleme' (kahraman resmi, ana yazı tipi).
Desteklenen yerlerde' fetchpriority =" high/low"'ve' priority 'ipuçları.
3. 2 Önbelleğe alma
Dosya karması ile statik: 'Cache-Control: public, max-age = 31536000, immutable'.
HTML - CDN aracılığıyla kısa TTL + bayat-while-revalidate.
Çevrimdışı/tekrar ziyaretler için ETag/Last-Modified ve Service Worker.
4) Kod: daha az, daha sonra, "düz"
4. 1 Meclis
Ağaç sallama, minify (в т. ч. ölü kod-elim).
Rotalara/widget'lara göre kod bölme, dinamik içe aktarma.
Temel pakette "global'ağır paketlerden kaçının (moment> Intl/Day. js).
4. 2 HTML Oluşturma ve Teslim
SSR/ISR/streaming: Önce çerçeveyi ve ana içeriği verin.
Kısmi/Adalar hidrasyon: Sadece etkileşimli alanları hidrat.
Kritik olmayan tüm erteleyin: '<script type = "module" defer>'.
4. 3 Reaksiyon özgüllüğü (React kullanılıyorsa)
'Tepki verin. Tembel widget'lar için tembel '+' Suspense '.
Ağır filtreler/aramalar için 'startTransition've' useDeferredValue '.
RSC (Sunucu Bileşenleri) - Sunucu hesaplamaları, istemcide JS'den daha az.
(zustand/redux) içindeki seçiciler: bileşeni parçalar halinde imzalar, yığının tamamını değil.
5) Oluşturma ve durum: "yavaşladığı" yer
5. 1 Yeniden oluşturucuların izolasyonu
Büyük bileşenleri ezin, memoize edin ('memo', 'use' Memo ',' use 'Callback').
Liste anahtarları sabittir; Gereksiz yere sahne içinde yeni işlevler/nesneler oluşturmayın.
Sık değişen veriler için "global" bağlamdan kaçının - seçiciler veya olay veri yolları kullanın.
5. 2 Sanallaştırma ve büyük listeler
Sayfalar/tablolar - sanallaştırma (oluşturma penceresi).
Backpressure ile sayfa oluşturma/sonsuz kaydırma (bir kerede 100k satır yüklemeyin).
Görünüm portu dışındaki ağır widget'ların gecikmeli başlatılması.
5. 3 Düzen ve boya
İçerik görünürlüğü: otomatik; Gizli bölümler için (tarayıcı görünmez oluşturmaz).
Öngörülebilir boyutlar için 'içermeli-içsel boyut' içerir ve içerir.
Sık mizanpaj okuma girişlerinden kaçının (mizanpaj bindirmesi); grup ölçümleri.
Will-change kullanım dozlanmış (aksi takdirde ekstra bellek/katmanlar).
6) Görüntüler ve grafikler
Biçimler: AVIF/WebP (PNG/JPEG'de geri dönüş).
Duyarlı yaklaşım: 'srcset' + 'boyutlar', retina için yoğunluğa dayalı.
Kahraman olmayan görüntüler için 'loading =' lazy '; Öncelik/ön yükleme - yalnızca LCP adayı için.
Sabit boyutlu yer tutucular - CLS sıçraması yok.
Canvas/charts: hesaplamalar için offscreen canvas ve Web Worker; Kızarmış patatesleri yağlamak.
7) Fontlar ve metin
Birçok stil yerine bir veya iki değişken font.
'font-display: swap'/' optional', temel stil için ön yükleme.
Fontu değiştirirken "atlama'yı azaltmak için 'boyut-ayarlama'.
Benzer metriklere sahip yerel fallback fontları.
8) CSS ve animasyonlar
Kritik CSS sıralı (<14-20 kB), dinlenme - ertelenecek.
Kullanılmayan stilleri silin (Temizle/CSSTree).
Animasyonlar, mümkünse, transform/opacity; 'prefers-reduced-motion'.
Derin basamaklardan ve patlatma seçicilerinden kaçının.
9) Web İşçileri, Akış ve Ağır Görevler
Tüm CPU-ağır - İşçi (ayrıştırma, sıralama, toplama, ML).
Uzun yanıtlar için akış API'leri ('ReadableStream', akışlarla 'getir').
Yanıt verebilirliği korumak için 'requestIdleCallback'/mikrotasklar aracılığıyla görevleri parçalara ayırmak.
10) Düzen Kararlılığı (CLS)
LCP öğesi için yer ayırın (görüntü/widget).
Sabit boyutlar olmadan afiş/şerit eklemeyin.
Asimetrik tultips/tostlar - içeriği taşımayın; katmanları/portalları kullanın.
11) Snippet örnekleri
Kritik yazı tipi ve LCP görüntüsü
html
<link rel="preload" href="/fonts/Inter. var. woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/hero. avif" imagesrcset="/hero. avif 1x, /hero@2x. avif 2x" fetchpriority="high">Tembel ve güvenli widget başlatma
js const Widget = React. lazy(() => import('./Widget'));
function Section() {
const inView = useInViewport('#sec');
return <div id="sec">{inView? <React. Suspense fallback={null}><Widget/></React. Suspense>: null}</div>;
}Düzen stabilizasyonu
css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}12) Regresyon kontrolü ve bütçeler
Paket bütçe: toplam JS ≤ N kB, CSS ≤ M kB, başlangıç-yığın ≤ K kB.
Web-Vitals in CI (emulated) + RUM-alerts (on percentiles).
Paket analizi: PR'de kaynak-harita-kaşif/analizör.
Bileşenlerin performans kıyaslamaları (10k elemanların oluşturulması, reaksiyon süresi).
13) Anti-desenler
"Hepsini bir kerede" yükleyin: ilk ekranda grafikler, editörler, haritalar.
Büyük küresel devlet - basamaklı renderers.
Görüntüler 'srcset/size' olmadan, istenen boyutta 2-4 ×.
Ana iş parçacığı üzerinde uzun senkron döngüler.
'outine: yok've optimizasyon olmadan özel hileler - render göstergeleri ile müdahale.
'Üst/sol' animasyonlar (düzeni kırmak ve reflü çağırmak).
14) Ekran kontrol listesi
- LCP ≤ 2. 3G/mobile trafiğinde 5 s, CLS ≤ 0. 1, INP ≤ 200ms
- Kritik kaynaklar: ön yükleme/öncelikler; Gerisi ertelemek/tembel
- Paketler: kod bölmeli, ekstra bağımlılık yok
- Liste/Tablo Sanallaştırma, Ağır Widget Gecikmeli Başlatma
- Görüntüler: AVIF/WebP, 'srcset/size', 'loading =' lazy ''
- Fontlar: değişken + 'font-display', yalnızca istenen ön yükleme
- CSS: critical inline, Purge, 'content-visibility've uygun olan yerlerde' contain '
- Ağır bilgi işlem için işçiler/boşta
- Bütçeler ve Web-Hayati göstergeler/uyarılar bağlanır
15) Uygulama planı (3 yineleme)
Yineleme 1 - Hızlı Kazançlar (1-2 hafta)
Brotli/HTTP-2/3, CDN'yi etkinleştir. Kritik CSS ve ön yükleme LCP kaynakları.
Ağır widget'ları dinamik içe aktarmalara taşıyın.
Görüntüler - AVIF/WebP + 'srcset'. Fontlar: 'font-display: swap'.
Yineleme 2 - Yapısal İyileştirmeler (3-4 hafta)
Rotaya göre kod bölünmesi, paket analizi,'ağır "libslerin kaldırılması.
Liste sanallaştırma, içerik görünürlüğü, contain-intrinsic-size.
SSR/streaming/islands (ilgili olduğu durumlarda) uygulayın.
Web-Vitals ile RUM, CI'da bütçeler.
Yineleme 3 - Ölçek ve Sağlamlık (Sürekli)
Workers/offscreen canvas, butching calculations, startTransition/deferredValue.
Düzenli perf denetimi, regresyon otomatik sindirimi, takım eğitimi.
16) Mini-SSS
Mobilde en çok ne hızlanacak?
Orijinal JS, SSR/akışın azaltılması ve LCP görüntüsünün optimize edilmesi.
SSR'a her zaman ihtiyacım var mı?
Hayır. Sayfa dinamik olarak etkileşimliyse ve kötü önbelleğe alınmışsa, adalar/kısmi hidrasyon daha iyi olabilir.
INP neden "hafif'bir paketle kötü?
Muhtemelen ana iş parçacığındaki uzun görevler (sıralama, grafikler) - bunları Worker'a getirin ve görevleri bölün.
Toplam
Hızlı UI, bir disiplinler topluluğudur: ağ öncelikleri ve önbellek, daha küçük ve geç paketler, öngörülebilir atlamasız oluşturma, ekonomik görüntüler ve yazı tipleri ve sürekli gerçek dünya metrik kontrolü. Bütçeleri girin, kontrolleri otomatikleştirin ve ekibe her adımda hız hakkında düşünmeyi öğretin - bu şekilde arayüz bugün ve bir yıl içinde hızlı kalacaktır.