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-vitals
10 entries
-
-
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 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.
-
Tối ưu External Fonts — Hết Flash, Hết CLS, Hết chờ
Từ font-display, preconnect, preload, self-host, subsetting, variable fonts đến metric-compatible fallback — các kỹ thuật thực chiến giúp loại bỏ FOUT/FOIT và cải thiện LCP/CLS khi dùng webfont bên ngoài.
-
SEO ở frontend — deep dive từ robots.txt tới prerender React SPA
Toàn cảnh SEO cho frontend engineer: cách Googlebot crawl & render 2-wave, robots.txt và sitemap, meta/OG/JSON-LD, canonical & hreflang, Web Vitals, spectrum CSR/SSR/SSG/ISR, vì sao SPA React dễ tàng hình và prerender giải quyết ra sao.
-
Infinite scroll & Virtual scroll — deep dive từ IntersectionObserver tới windowing
Đào sâu cách render danh sách dài: pagination vs infinite scroll vs virtual scroll, sentinel pattern với IntersectionObserver, fixed/variable-height windowing, bidirectional list (chat, feed), và mọi pitfall production.
-
CSS Optimization by Level — From Junior to Principal
A progressive guide to CSS performance optimization structured by developer seniority. Each level builds on the previous — from writing clean selectors to architecting compositor-only animation pipelines.
-
Tối ưu performance CSS — deep dive từ render pipeline tới production
Đi sâu vào cách browser xử lý CSS, chi phí của Layout/Paint/Composite, critical CSS, containment, content-visibility, GPU acceleration, và mọi kỹ thuật giúp CSS không còn là nút thắt performance.
-
Frontend Caching toàn tập — Browser, CDN, Proxy, Service Worker
Đào sâu các tầng cache giữa user và origin: cache headers, browser memory/disk/bfcache, CDN edge, reverse proxy, Service Worker, và mọi pitfall thường gặp.