- Core Web Vitals là gì? Ba metrics chính là gì?
Core Web Vitals là bộ ba chỉ số của Google đo trải nghiệm người dùng thực, là yếu tố SEO ranking từ 2021. - LCP (Largest Contentful Paint) — tốc độ loading: thời điểm render phần tử lớn nhất trong viewport. Good <2.5s, poor 4s.…
- LCP (Largest Contentful Paint) là gì? Cách cải thiện LCP?
LCP đo thời điểm render phần tử lớn nhất trong viewport — thường là hero image, block text lớn hoặc video poster. Good <2.5s, poor 4s. Cách cải thiện: - Cải thiện TTFB trước — server response time, CDN, edge caching; TTFB là phần nền…
- CLS (Cumulative Layout Shift) là gì? Nguyên nhân và cách fix?
CLS đo mức layout shift ngoài ý muốn trong suốt vòng đời trang (không chỉ lúc loading). Good <0.1, poor 0.25. Cách tính (định nghĩa hiện tại, từ 6/2021): - Mỗi shift có điểm = impact fraction × distance fraction. - Các shift được gom…
- Lazy loading là gì? Cách implement trong React?
Lazy loading trì hoãn tải resource đến khi thực sự cần — giảm initial load time và Time to Interactive. - Ảnh — <img loading='lazy' native: browser tự tải khi scroll gần đến; không dùng cho LCP image. - Component React — const HeavyChart =…
- Code splitting là gì? Các chiến lược code splitting trong web apps?
Code splitting chia bundle thành nhiều chunk nhỏ — initial load nhẹ hơn, phần còn lại tải on demand. Nền tảng là dynamic import(): trả về Promise, bundler tự tách chunk riêng. Các chiến lược: - Route-based — mỗi route một chunk (React Router +…
- HTTP caching hoạt động như thế nào? Cache-Control headers?
HTTP caching giảm bandwidth và latency bằng cách lưu response tại browser hoặc CDN, điều khiển qua header Cache-Control. Directives chính: - max-age=3600 — cache 1 giờ trước khi stale; no-cache — phải revalidate với server trước khi dùng (không phải 'không cache'); no-store —…
- Image optimization trong web: các kỹ thuật phổ biến?
Tối ưu ảnh là một trong những cách hiệu quả nhất để giảm page weight và cải thiện LCP. - Format hiện đại — WebP nhỏ hơn JPEG 25–34%, AVIF ~50% (encode chậm hơn); dùng <picture với fallback cho browser chưa support. - Responsive images…
- Bundle analysis: cách phát hiện và giảm bundle size?
- Service Worker và caching strategy trong PWA là gì?
- Virtual scrolling (windowing) là gì? Khi nào cần dùng?
- Lighthouse là gì? Làm sao cải thiện điểm Lighthouse cho website?
Lighthouse là công cụ của Google đánh giá website theo 4 tiêu chí: - Performance: lazy load images (loading='lazy'), code splitting với React.lazy, compress assets (gzip/brotli), preload fonts quan trọng. - Accessibility: mọi image có alt text, color contrast đủ ratio, dùng ARIA cho interactive…
- Các chỉ số web performance LCP, INP, CLS, TTFB là gì và tối ưu thế nào?
LCP (Largest Contentful Paint) đo thời gian phần tử lớn nhất hiển thị trên màn hình, phản ánh tốc độ tải mà người dùng cảm nhận. INP (Interaction to Next Paint) đo thời gian phản hồi của tất cả tương tác trong suốt vòng đời…
- Browser rendering pipeline. Critical rendering path?
Browser rendering pipeline gồm các bước: (1) parse HTML thành DOM tree, (2) parse CSS thành CSSOM tree, (3) kết hợp DOM và CSSOM thành render tree, (4) tính toán layout (vị trí, kích thước), (5) paint (vẽ pixel), (6) composite (ghép các layer). Critical…
- Website load chậm — bạn tiếp cận debug thế nào?
Nguyên tắc: đo trước khi sửa — xác định chậm ở khâu nào (server, network hay render) rồi mới optimize. - Chạy Lighthouse / PageSpeed Insights — lấy tổng quan LCP/INP/CLS và danh sách opportunities; PageSpeed có cả field data từ user thật (CrUX). -…
- Reflow (layout) vs repaint khác nhau gì? Layout thrashing là gì và tránh thế nào?
Reflow (layout) là browser tính lại vị trí và kích thước phần tử — tốn kém; repaint chỉ vẽ lại pixel — rẻ hơn; layout thrashing là ép reflow đồng bộ lặp lại do xen kẽ đọc–ghi style. - Reflow trigger — thay đổi ảnh…
- Dùng `useMemo`/`useCallback` sai có thể làm app chậm hơn không dùng. Vì sao?
Có. Cả hai đều không miễn phí: mỗi hook thêm một entry vào bộ nhớ của component, thêm mảng dependency phải tạo và so sánh mỗi lần render, và giữ giá trị cũ trong bộ nhớ lâu hơn cần thiết. Ba kiểu dùng sai hay…
- Trang bị khựng khi gõ vào một ô input ở form lớn. Bạn chẩn đoán và sửa thế nào?
Nguyên nhân điển hình: state đặt quá cao. Ô input controlled giữ state ở component cha (hoặc ở App), nên mỗi ký tự gõ vào làm render lại toàn bộ cây con — kể cả bảng, biểu đồ, danh sách không liên quan. Hướng sửa…
- Bảng 10.000 dòng scroll giật. Bạn xử lý theo thứ tự nào, và virtualization có những cạm bẫy gì?
- Trang danh sách sản phẩm tải chậm vì ảnh. Bạn tối ưu những gì?
Ảnh thường chiếm phần lớn dung lượng trang, và xử lý sai còn gây layout shift. Việc cần làm: - Lazy load ảnh dưới màn hình đầu: loading="lazy". Ảnh trong viewport đầu tiên (LCP) phải để loading="eager" kèm fetchpriority="high" — lazy load ảnh hero làm…
- Chia bundle bằng `lazy` + `Suspense` nên đặt ranh giới ở đâu? Đặt sai gây vấn đề gì?
lazy biến một import tĩnh thành import() động, tạo chunk riêng chỉ tải khi component được render lần đầu. Ranh giới nên chọn: - Theo route — mặc định hợp lý nhất, người dùng chỉ tải code trang đang xem. - Component nặng, ít dùng…
- Dùng React DevTools Profiler thế nào để tìm ra component gây chậm?
Quy trình thực tế: 1. Bật "Highlight updates when components render" trong tab Components. Thao tác thử vài lần — viền nhấp nháy chỉ ngay những vùng render lại ngoài mong đợi (gõ một ký tự mà cả sidebar nháy là dấu hiệu rõ). 2.…
- Vì sao Next.js khuyên dùng `next/image` thay cho thẻ `<img>` thường? Khi nào `<img>` vẫn chấp nhận được?
next/image là một <img được bọc thêm bốn thứ mà tự làm tay rất tốn công: - Chuyển định dạng và resize theo yêu cầu: server sinh ra bản WebP/AVIF đúng kích thước màn hình đang xem, thay vì bắt điện thoại tải ảnh 3000px.…
- `next/font` giúp gì cho hiệu năng? Nó chống layout shift do font bằng cách nào?
next/font xử lý ba vấn đề của web font: 1. Self-host tự động. File font Google được tải về lúc build và phục vụ từ chính domain của bạn. Không còn request sang fonts.googleapis.com → bớt một vòng DNS + TLS tới host lạ, và…
- First Load JS của trang lên 800KB. Bạn điều tra và giảm bằng cách nào?
Đo trước, sửa sau. Bật bundle analyzer để biết chunk nào nặng: Bản đồ treemap cho thấy ngay thư viện nào chiếm chỗ. Bảng tổng kết của next build cũng liệt kê First Load JS từng route. Các cách cắt giảm, theo thứ tự hiệu…
- Lighthouse chấm 95 điểm nhưng người dùng vẫn kêu chậm. Đo Core Web Vitals thật của người dùng trong Next.js bằng cách nào?
Vì Lighthouse là lab data: một lần chạy, một thiết bị mô phỏng, mạng mô phỏng, không cache, không extension. Người dùng thật thì đủ loại máy, mạng 3G, tab chạy nền. Cái quyết định xếp hạng là field data — số liệu thu từ…
- Reflow và repaint khác nhau thế nào? Thao tác nào gây reflow?
Reflow (layout) là khi trình duyệt phải tính lại hình học — vị trí, kích thước của box. Repaint chỉ vẽ lại pixel mà hình học không đổi. Reflow luôn kéo theo repaint; repaint thì không kéo theo reflow. Gây reflow: đổi width, height, padding,…
- `preload`, `prefetch`, `preconnect` và `dns-prefetch` khác nhau thế nào? Dùng cái nào khi nào?
Cả bốn đều là resource hint, khác nhau ở thời điểm và mức độ công việc trình duyệt làm trước. - preload — tải ngay, ưu tiên cao một tài nguyên trang hiện tại chắc chắn cần nhưng trình duyệt phát hiện muộn (font trong…
- LCP, INP, CLS đo cái gì? Ngưỡng tốt là bao nhiêu và cải thiện từng chỉ số ra sao?
Ba chỉ số Core Web Vitals đo ba trải nghiệm khác nhau: - LCP (Largest Contentful Paint) — thời điểm phần tử nội dung lớn nhất trong viewport hiển thị. Tốt: ≤ 2.5s. Thường là ảnh banner hoặc khối heading. Cải thiện: giảm TTFB, preload…
- `loading="lazy"` và `fetchpriority` dùng thế nào cho đúng? Vì sao ảnh trên màn hình đầu không nên lazy-load?
loading="lazy" bảo trình duyệt hoãn tải ảnh cho tới khi sắp lọt viewport, làm nhẹ đợt tải đầu. fetchpriority thì không đổi thứ tự phát hiện, chỉ chỉnh mức ưu tiên khi trình duyệt xếp hàng tải. Cách dùng đúng theo vị trí: Vì sao…
- Passive event listener là gì? Vì sao nó làm cuộn trang mượt hơn?
Với touchstart, touchmove, wheel, trình duyệt không biết trước handler có gọi preventDefault() để chặn cuộn hay không. Nếu listener không khai gì, trình duyệt phải chờ handler chạy xong rồi mới quyết định cuộn — mỗi lần chạm là một lần trễ, cuộn thấy…
- Long task là gì và ảnh hưởng INP thế nào? Cắt nhỏ công việc trên main thread bằng cách nào?
- Một trang tải rất chậm vì bundle JavaScript quá lớn — bạn chia nhỏ thế nào?
Đo trước, cắt sau. Mở bundle analyzer để biết dung lượng đến từ đâu; thường 2–3 thư viện nặng chiếm phần lớn (thư viện biểu đồ, trình soạn thảo rich text, thư viện xử lý ngày tháng, bản đồ). Thứ tự xử lý theo mức…
- p99 tính từ histogram thế nào? Vì sao không được lấy trung bình p99 của nhiều instance?
Histogram không lưu từng giá trị mà đếm số quan sát rơi vào các bucket cộng dồn: le=0.1, le=0.5, le=1, le=+Inf. Mỗi bucket là một counter, cộng được giữa các instance. p99 được nội suy từ các bucket này (histogramquantile(0.99, ...) trong PromQL), nên độ…
- Người dùng báo "API chậm". Bạn chẩn đoán từ đầu đến cuối thế nào?
