Đo và tối ưu First Contentful Paint (FCP)

Nhật Quang · Lúc 15:44:20

First Contentful Paint (FCP) đo tốc độ xuất hiện nội dung đầu tiên trên trang web — thường là văn bản hoặc ảnh. Bài viết này giải thích FCP là gì, cách đo và những bước thực tế để cải thiện chỉ số này.

FCP là gì?

First Contentful Paint (FCP) là chỉ số đo thời gian kể từ khi người dùng mở trang web tới khi nội dung đầu tiên (văn bản, hình ảnh) bắt đầu hiển thị. Đây là một mốc hiển thị (rendering milestone) giúp người dùng biết rằng trang đang tải và có tiến trình.

So sánh với First Paint và Largest Contentful Paint

First Paint (FP) là thời điểm trình duyệt bắt đầu hiển thị bất kỳ thứ gì, kể cả nền hoặc khung trắng. FCP thường trùng hoặc xấp xỉ với FP khi phần hiển thị đầu tiên là nội dung thực sự.

Largest Contentful Paint (LCP) đánh dấu thời điểm phần tử nội dung lớn nhất trên trang được hiển thị — thường cho thấy phần lớn nội dung đã sẵn sàng. LCP không thể tốt hơn FCP; nếu LCP là ảnh thì thường xảy ra sau khi FCP đã xuất hiện.

Ngưỡng đánh giá và liên quan tới SEO

- Khuyến nghị: FCP nên ở 1.8 giây hoặc nhanh hơn.

- Nếu người dùng phải chờ >3 giây để nhìn thấy bất kỳ nội dung nào thì được coi là kém.

FCP là một Web Vital nhưng không nằm trong ba Core Web Vitals ảnh hưởng trực tiếp tới thứ hạng Google. Tuy nhiên FCP thường đặt giới hạn dưới cho LCP — cải thiện FCP thường giúp LCP tốt hơn.

Lưu ý: cải thiện FCP đôi khi khiến layout bị thay đổi nhiều hơn (tăng CLS) hoặc làm INP thay đổi, vì nội dung xuất hiện sớm có thể khiến người dùng bắt đầu tương tác khi trang chưa hoàn toàn khởi tạo xong.

Yếu tố kỹ thuật ảnh hưởng tới FCP

- Thời gian phản hồi server (TTFB): tải HTML là bước đầu để bắt đầu render. Kết nối HTTPS thường cần ít nhất 4 vòng mạng (DNS, TCP, SSL, HTTP). Trên giả lập mobile Lighthouse, mỗi vòng khoảng 150ms nên FCP tối thiểu lý thuyết có thể là ~600ms, chưa tính thời gian xử lý server và mạng ISP.

- CSS và các tệp chặn render: hầu hết stylesheet là render-blocking. Trình duyệt phải tải và xử lý CSS trước khi hiển thị nội dung, nên CSS lớn hoặc nhiều file làm chậm FCP.

- JavaScript: thẻ script theo mặc định chặn render. JavaScript nặng hoặc thực thi sớm sẽ trì hoãn FCP.

- Web fonts, ảnh nhúng trong CSS hoặc các tài nguyên liên quan tới layout cũng ảnh hưởng trực tiếp đến thời điểm nội dung xuất hiện.

Các bước cụ thể để cải thiện FCP

Giảm TTFB: tối ưu backend, cache, CDN, giảm truy vấn cơ sở dữ liệu, tối giản plugin (ví dụ với WordPress), dùng hosting nhanh hơn hoặc render trước (pre-render/static HTML).
Giảm hoặc tối ưu CSS chặn render: tách CSS quan trọng (critical CSS) và inline phần cần thiết để render phần trên màn hình, trì hoãn hoặc tải bất kỳ CSS không cần thiết muộn hơn.
Tránh nhúng ảnh trong CSS: ảnh nhúng làm render-blocking; dùng URL hoặc thẻ cho ảnh không bắt buộc hiển thị ngay.
Hoãn và bất đồng bộ JavaScript: dùng async/defer, di chuyển script không cần thiết xuống cuối body, giảm ưu tiên tải cho file JS ít quan trọng.
Tối ưu font web: preload font quan trọng, dùng font-display: swap để tránh chặn hiển thị văn bản, hạn chế số font/phông chữ.
Tối ưu hình ảnh: dùng định dạng hiện đại, nén, lazy-load cho ảnh ngoài màn hình đầu và chỉ tải ảnh lớn sau FCP nếu có thể.
Sử dụng CDN và kết nối nhanh: giảm độ trễ mạng cho người dùng bằng CDN, HTTP/2 hoặc HTTP/3 để giảm thời gian round-trip.
Kiểm tra và đo lường: dùng công cụ tốc độ (ví dụ DebugBear, Lighthouse) để xem waterfall, tìm tài nguyên chặn render và thử nghiệm các thay đổi (ví dụ hoãn JS) để đo tác động lên FCP.

Kết luận

FCP là chỉ báo quan trọng cho trải nghiệm ban đầu của người dùng — giúp họ biết trang bắt đầu tải. Tập trung vào giảm TTFB, tối ưu CSS và hoãn JavaScript thường mang lại cải thiện rõ rệt. Mục tiêu thực tế: FCP ≤ 1.8s để người dùng cảm nhận trang tải nhanh và giảm khả năng họ rời đi.

Nguồn: https://www.debugbear.com/docs/metrics/first-contentful-paint