Tembel yükleme ve UX hızlandırma

1) Hedefler ve ilkeler

• Kritik yol pahasına TTI/LCP'yi azaltın.
• Öngörülebilir boyutlara sahip düzeni (düşük CLS) stabilize edin.
• Pil ve trafiği mobil cihazlara kaydedin.
• Dönüşümü Yükselt - Kullanıcı eylemi daha önce görür.

İlkeler: öncelik - ilerleme - öngörülebilirlik. İlk olarak, kritik içerik, daha sonra aşamalı içerik ve yükleme sonrası iyileştirmeler.

2) Kritik oluşturma yolu

Kritik HTML: Hemen "ekranın üst kısmında" işaretleme yapın.
Kritik CSS: satır içi ≤ 10-15 KB; Gerisi 'media = "print"' + swap/reload.
Engelleyici olarak JS: 'defer'/' async', yığın bölümleme, rotalar boyunca yük mantığı.
Fontlar: 'font-display: swap' optional ', WOFF2 preload, system fallback've.

3) Ağ kaynağı önceliklendirmesi

CDN/fontlara/görüntülere önceden bağlanın (önceden TCP + TLS).
Üçüncü alanlar için DNS prefetch.
Kritik görüntüleri/fontları/komut dosyalarını önceden yükleyin.
Öncelikli İpuçları ('önem =' yüksek 'düşük' ',' fetchpriority = 'yüksek' 'kahraman görüntüsü için).
HTTP/3/QUIC: daha az gecikme; CDN-edge kullanıcıya daha yakındır.
Önbellek ilkeleri: Sürümlü varlıklar için 'değişmez'; Doğru ETag/Son Modifiye.

4) Aşamalı Oluşturma ve İndirme Durumları

İplikçiler yerine iskeletler/Parıltılar: "atlama" olmadan görsel ilerleme.
Sabit boyutlu yer tutucular (kartlar, küçük resimler) - sıfır CLS.
Akış/Chunked HTML: hızlı bir şekilde çerçeveyi verin, ardından içerik ekleyin.
İyimser UI (dikkat): Anında eylem ve ardından doğrulama.

5) Tembel yüklenen medya içeriği

Görüntüler: 'Loading =' lazy '', 'decoding =' async '', AVIF/WebP formatları (JPEG/PNG fallback).
Duyarlı: Farklı DPR/genişlikler altında 'srcset'/' boyutlar'; 1 × yeterli olduğu 3 × yüklemeyin.
Tahmin edilebilir yükseklik: 'Genişlik/yükseklik' veya CSS 'En boy oranı'.
Video: 'Ön yükleme = "meta veriler"', yükleme sonrası posterler, viewport dışında otomatik duraklatma.
Simgeler: sprite/satır içi SVG; Gereksiz HTTP isteklerinden kaçının.

6) Tembel bileşenler ve yollar

Kod bölme: yollar/widget'lar tarafından dinamik içe aktarma.
Ada Bileşenleri/Kısmi Hidrasyon: Sadece etkileşimli alanları canlandırın.
SSR/SSG + ISR: HTML'yi sunucuda oluştur, aşamalı olarak yenile.
Suspense/Defer (kullanılan çerçevede): Verilerin ve UI'nin ayrışması.

7) Büyük listeler ve tablolar

Pencereleme-Yalnızca görünür alanı + arabelleği oluşturun.
Bağlantı yeniden yükleniyor: paketleri yeniden yüklerken konumunuzu koruyun.
Toplu güncellemeler: Kaydırırken yeniden çizimi en aza indirin.
Öngörülebilir boyutlar için sabit satır yüksekliği veya 'bitişik-içsel boyut'.

8) CSS ve tarayıcı hızlandırıcıları

'content-visibility: auto': tarayıcı görünmez olanı atlar (minimum hesaplama).
'contain'/' will-change': stillerin/düzenin etkisini sınırlar.
Animasyonlar: yalnızca transform/opacity; Düzen/boya ağırlıklı efektlerden kaçının.
Gölge ve bulanıklık - özellikle listelerde az miktarda.

9) Olay ve JS yük yönetimi

Pasif kaydırma/taka dinleyicileri ('{pasif: true}').
Yeniden boyutlandırmak/kaydırmak/işlemek için debounce/throttle.
Widget'ların viewport dışında ertelenmiş başlatılması (IntersectionObserver).
Ağır bilgisayarların Web İşçilerine taşınması.

10) Mobil bağlam

Ağ: Yavaş 3G/high RTT - tembel indirme daha agresif.
Pil ve ısı: zamanlayıcıların sıklığını sınırlayın, arka plan animasyonlarının FPS'sini azaltın.
Sıkıştırma: Metin için brotli, doğru 'Kabul-Kodlama'.
Wi-Fi üzerinden Prefetch sadece olası geçişler için (tıklama geçmişi).

11) Kullanılabilirlik ve SEO

İskelet ≠ içeriği: ekran okuyuculara müdahale etmez; Mantıksal odaklanma sırası.
Anahtar metnin sunucu HTML'si - her şeyi JS'nin arkasına saklamayın.
Alt metinler ve başlıklar yeniden yüklenene kadar kullanılabilir durumda kalır.
Tembel içerik klavyeden yolları engellememelidir.

12) Metrikler ve hedefler

LCP (hero-image/header): ≤ 2. 5 s (mobil).
INP (giriş yanıtı): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms; TTI: ≤ 3s.
Tel üzerindeki baytlar (ilk görünüm): sıkı bütçe (örneğin, ≤ 200-300 KB Girit. Kaynaklar).
Scroll-jank: <1 % frames> 16. 7 ms.

• 'lazy _ enqueued'/' lazy _ loaded' (id, type, size, latency),
• 'component _ hydrated' (zaman, ağırlık JS),
• 'virtualized _ window _ resize',
• 'lcp _ candidate _ showed', 'skeleton _ time _ visible',
• errors ('img _ error', 'decode _ timeout').

13) Tipik bölgeler için desenler

Ev/Dizin: SSR + iskelet kartları, tembel görüntüler, aşamalı filtreler.
Ürün/oyun kartı: kahraman görüntü ön yükleme + yüksek öncelikli; galeri - tembel; Yorumlar - tıklama ile.
Uzun makaleler/wiki: TOC, okuma ilerlemesi, medya/kod blokları için tembel, içeriğin gecikmeli tabloları.
Canlı teypler: satır sanallaştırma, otomatik kaydırma duraklatma, arabellek sınırı.

14) Antipatterns

Tam ekran döndürücü> ilerleme olmadan 1-2 s.
Yerel tutucular olmadan tembel - düzen atlamaları (CLS ↑).
Nadir senaryolar için'tüm JS'leri bir kerede "indirme.
Ağır fontları/görüntüleri kritik kısma yerleştirin.
Öngörülemeyen kart boyutları - dolaşım içeriği.
Tembel kritik yükleme (logo, kahraman metni) - LCP'yi kırar.
"Geri'den sonra pozisyon dönüşü yok.

15) Uygulama kontrol listesi (adım adım)

Sprint 1 - Teşhis: LCP/INP/CLS/TTFB'yi ölçün; Harita kaynakları ve kritik yol.
Sprint 2 - Eleştiri/Öncelik: Kritik CSS/HTML, 'preconnect'/' preload', JS parçalarını azaltın.
Sprint 3 - Medya: AVIF/WebP, 'srcset/size', sabit boyutlar, kahraman olmayanlar için tembel.
Sprint 4 - Listeler: sanallaştırma, çapa yeniden yükleme, iskeletler/ışıltı.
Sprint 5 - Mimari: kısmi hidrasyon/adalar, SSR/SSG/ISR, akış.
Sprint 6 - İnce ayar: 'Içerik görünürlüğü', öncelikli ipuçları, debounce, Web İşçileri.
Sprint 7 - A/B ve telemetri: iskelet seçeneklerini, tembel seviyeleri, bütçeleri karşılaştırın.
Sprint 8 - Serbest bırakma hijyeni: varlık sürümleri, nakit basma, geri alma stratejileri.

16) Sözlük (kısa)

Tembel yükleme - görünmez içeriğin gecikmeli yüklenmesi.
LCP/INP/CLS/TTFB/TTI/TBT ana UX oranı metrikleridir.
Kod bölme/Hidrasyon/Adalar - UI kırma ve canlandırma teknikleri.
Sanallaştırma - Görünür bir liste kutusu oluşturun.
Öncelikli İpuçları/Preconnect/Ön Yükleme - tarayıcıya daha önce ne yükleneceğine dair talimatlar.
İçerik görünürlüğü - görünmez içerik için hesaplamaları atlama.

17) Alt satır

Lazy-loading "put 'loading =" lazy've done değildir. Sistem bu: kritik yol, doğru medya formatları, ada etkileşimi, sanallaştırma ve telemetri. Önemli anı, ikincil ince ve ucuz ve düzeni öngörülebilir hale getirin. Daha sonra ürün herhangi bir cihazda ve herhangi bir ağda hızlı hissedecektir.