Web Performance · Part 22 — Capstone 2: Systematic Performance Investigation
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.
Filter/Tag
#web_perf_22
22 entries
-
-
Web Performance · Part 21 — Budgets, Automation & Performance Culture at Scale
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.
-
Web Performance · Part 20 — Third-Party Script Performance
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.
-
Web Performance · Part 19 — Network Protocol & Transport Performance
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.
-
Web Performance · Part 18 — Memory & Long-Session Performance
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.
-
Web Performance · Part 17 — Rendering Pipeline & CSS Performance
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.
-
Web Performance · Part 16 — INP Deep & Main-Thread Scheduling
Đà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.
-
Web Performance · Part 15 — Rendering & Delivery Strategies
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.
-
Web Performance · Part 14 — Resource Hints, Priorities & Early Hints
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.
-
Web Performance · Part 13 — RUM & Field Data Deep Dive
Đ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.
-
Web Performance · Part 12 — Capstone 1: Audit, Budget & CI Monitoring
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.
-
Web Performance · Part 11 — Network & Caching
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.
-
Web Performance · Part 10 — Fonts
Web fonts can slow LCP and cause CLS. Choose WOFF2, a deliberate font-display policy, selective preload, self-hosting, subsetting, and metric-compatible fallbacks.
-
Web Performance · Part 9 — Images & Media
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 Performance · Part 8 — JavaScript Performance & Bundle
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.
-
Web Performance · Part 7 — Optimizing CLS
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.
-
Web Performance · Part 6 — Optimizing INP
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.
-
Web Performance · Part 5 — Optimizing LCP
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.
-
Web Performance · Part 4 — Critical Rendering Path & Loading
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.
-
Web Performance · Part 3 — Measurement Tools: Lighthouse, DevTools, CrUX & RUM
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.
-
Web Performance · Part 2 — Core Web Vitals: LCP, INP & CLS
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.
-
Web Performance · Part 1 — Mental Model & the RAIL Framework
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.