Hiệu năng web từ gốc

Các phần

1. 1

   Phần 1

   Core Web Vitals: hiểu đúng LCP, INP, CLS và cách tối ưu

   Ba chỉ số Google dùng để đo trải nghiệm thật của người dùng — đo thế nào, được tính ra sao, vì sao ảnh hưởng SEO, và quy trình cụ thể để tìm đúng nguyên nhân rồi sửa.

   26 thg 4, 202614 phút

2. 2

   Phần 2

   Tối ưu ảnh từ đầu đến cuối: định dạng, srcset, lazy loading và next/image

   Chọn định dạng nào, srcset và sizes giúp trình duyệt chọn ảnh ra sao, khi nào lazy và khi nào eager, giữ chỗ để tránh CLS, CDN ảnh, art direction với picture và cách dùng next/image trong Next.js 16.

   26 thg 3, 20259 phút

3. 3

   Phần 3

   Web font đúng cách: nhanh, không nhảy layout và hiển thị tiếng Việt chuẩn

   Font ảnh hưởng LCP và CLS ra sao, chọn font-display thế nào, preload font quan trọng, subset với unicode-range cho tiếng Việt, variable font, tự host hay dùng CDN, chỉnh metric font fallback và next/font trong Next.js.

   31 thg 12, 20259 phút

4. 4

   Phần 4

   Caching cho frontend developer: từ HTTP cache đến CDN và data cache

   Cache-Control, ETag, tên file có hash, s-maxage và stale-while-revalidate ở CDN, service worker, staleTime trong TanStack Query — mỗi lớp cache làm gì, nên đặt header thế nào cho từng loại tài nguyên, và những lỗi khiến người dùng thấy dữ liệu cũ.

   24 thg 9, 20259 phút

5. 5

   Phần 5

   Code Splitting và Lazy Loading trong React

   Hướng dẫn thực tế giúp giảm lượng JavaScript tải ban đầu bằng cách kết hợp lazy loading theo route và theo component.

   20 thg 7, 20251 phút

6. 6

   Phần 6

   Hiệu năng render trong React: đo trước, tối ưu sau, và biết khi nào nên dừng

   Điều gì khiến component render lại, vì sao re-render không đồng nghĩa với cập nhật DOM, cách đo bằng React DevTools Profiler, chi phí thật của memo/useMemo/useCallback, tách context, đặt state đúng chỗ, key trong danh sách, và React Compiler thay đổi bức tranh thế nào.

   31 thg 5, 20259 phút

7. 7

   Phần 7

   List virtualization từ con số 0: render 100.000 dòng mà vẫn mượt

   Tự tay viết một virtual list bằng React + TypeScript: toán windowing với số liệu cụ thể, overscan, chiều cao thay đổi với prefix sum và binary search, đo bằng ResizeObserver, chống giật khi scroll, accessibility — và khi nào không nên virtualize.

   7 thg 3, 202618 phút

8. 8

   Phần 8

   Event loop, microtask và rendering: vì sao giao diện của bạn bị đơ

   Hiểu đúng mô hình event loop của trình duyệt — task, microtask, khung hình — qua các bài đoán thứ tự output, rồi dùng nó để giải thích vì sao UI bị đơ và cách chia nhỏ, nhường main thread, đẩy việc sang Web Worker.

   9 thg 4, 202616 phút