Series · 22 parts
Web Performance & Core Web Vitals
Series tiếng Việt đưa bạn từ "trang chậm mà không biết tại sao" đến làm chủ hiệu năng web một cách có hệ thống. Chặng nền tảng 1–12 đi từ RAIL và Core Web Vitals (LCP, INP, CLS), lab vs field, Lighthouse/Performance/WebPageTest/CrUX/RUM và critical rendering path tới tối ưu LCP, INP, CLS, JavaScript bundle, ảnh/media, font, network/cache — rồi gom lại bằng capstone audit, performance budget và Lighthouse CI. Chặng chuyên sâu 13–22 tiếp tục với RUM attribution và sampling, resource hints/Fetch Priority/Early Hints/Speculation Rules, kiến trúc CSR–SSR–SSG–streaming, LoAF và main-thread scheduling, CSS rendering/containment, memory của phiên dài, HTTP/2–3 + compression/cache policy, third-party governance, guardrail ở quy mô tổ chức — kết bằng capstone điều tra triệu chứng tới nguyên nhân gốc. Mỗi phần có code, giới hạn hỗ trợ và cách đo lại.
-
Opening the series: why performance is a feature, perceived vs actual performance, the RAIL model with human-perception time thresholds, and the "measure first, fix later" principle.
-
The three metrics Google uses to score experience: LCP (loading), INP (interaction), CLS (layout stability). What each measures exactly, "good" thresholds, the p75 percentile, and measuring with web-vitals.
-
Measure right before you fix right. Lighthouse and the Performance tab for diagnosis (lab), CrUX and self-built RUM for real users (field), plus how to throttle to match typical hardware.
-
The journey from HTML to pixels: DOM, CSSOM, render tree, layout, paint. Why CSS and JS block rendering, and resource hints (preload, preconnect, prefetch, defer, async) to control load order.
-
Break LCP into TTFB, resource load delay, resource load duration, and element render delay; then fix discovery, priority, bytes, rendering, or delivery at the actual bottleneck.
-
Janky clicks mean the main thread is blocked. Chunk long tasks, yield with scheduler.yield/setTimeout, split urgent from non-urgent updates, and offload heavy computation to Web Workers.
-
Layout jumps happen when content is inserted without reserving space. Set image/iframe dimensions, reserve space for dynamic content and ads, handle font swap, and use transform instead of layout changes.
-
Client JavaScript is often costly because it must download, parse, compile, and execute. Measure bundles, split by route/component, tree-shake, lazy-load, and trim dependencies.
-
Images are often the heaviest part of a page. Modern formats (AVIF/WebP), responsive images with srcset/sizes, lazy loading in the right places, decoding, and video/iframe optimization.
-
Web fonts can slow LCP and cause CLS. Choose WOFF2, a deliberate font-display policy, selective preload, self-hosting, subsetting, and metric-compatible fallbacks.
-
The network layer matters: HTTP caching (Cache-Control, ETag, immutable), CDN and edge, Brotli/Zstandard/Gzip compression, HTTP/2-3, and service-worker strategies for offline cache.
-
Combine all 11 parts into a real A–Z audit workflow, set concrete performance budgets, and block regressions with Lighthouse CI plus RUM alerts. Includes a full checklist.
-
Đo người dùng thật như senior: web-vitals Attribution để phân rã LCP/INP/CLS, lấy mẫu, percentile p75, gửi bằng sendBeacon, và CrUX API/BigQuery.
-
Rút ngắn đường tới byte quan trọng: preconnect/dns-prefetch, preload/modulepreload/prefetch, fetchpriority & Priority Hints, 103 Early Hints, và Speculation Rules cho prefetch/prerender.
-
CSR, SSR, SSG, ISR, streaming SSR và islands/partial/progressive hydration ảnh hưởng LCP, INP, CLS, TTFB ra sao — và khung quyết định chọn kiến trúc render theo mục tiêu hiệu năng.
-
Đào sâu INP: phân rã input delay / processing / presentation, Long Animation Frames (LoAF) để tìm thủ phạm, scheduler.postTask/yield, fallback đa trình duyệt, và Web Worker.
-
Nửa sau hiệu năng render: forced reflow / layout thrashing, content-visibility, CSS containment, kỷ luật will-change, selector cost, và animation chỉ chạm compositor để giữ 60fps.
-
Vì sao SPA chậm dần sau nhiều giờ: rò rỉ bộ nhớ, detached DOM, listener/timer không gỡ, đo bằng heap snapshot và measureUserAgentSpecificMemory, và giữ app nhẹ qua phiên dài.
-
Tầng truyền tải ảnh hưởng tốc độ ra sao: HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC), head-of-line blocking, nén Brotli/Zstd, TLS 1.3 & 0-RTT, CDN/edge, và cache-control nâng cao.
-
Chế ngự analytics, ads, embed và tag manager: đo tác động bên thứ ba, facade pattern cho embed, Partytown để đẩy sang worker, lazy iframe, async/defer, và đặt budget cho third-party.
-
Giữ hiệu năng không trôi theo thời gian: ngân sách bundle với size-limit, treemap analysis, cổng CI ổn định, bisect hồi quy, scorecard, và văn hóa performance.
-
Ghép mọi phần chuyên sâu thành khung chẩn đoán triệu chứng → metric → công cụ → cách sửa, từ field data tới nguyên nhân gốc xuyên mọi tầng.