Danh mục dự án
Vào năm 2019, Google đã thông báo rằng họ sẽ xếp hạng các trang web dựa trên hai chỉ số hiệu suất khác: Sơn có nội dung đầu tiên và Độ trễ đầu vào đầu tiên.
Sau đó, Google đã giới thiệu ba Điểm quan trọng của Web cốt lõi : Độ trễ đầu vào đầu tiên , Sự thay đổi bố cục tích lũy.
Trong bài viết này, chúng ta sẽ nói về First Contentful Paint vì nó tiếp tục là thước đo trải nghiệm người dùng quan trọng và chiếm điểm hiệu suất tổng thể của một trang web.
Điểm Nội dung Đầu tiên là gì?
Sơn có nội dung đầu tiên của trang web là khi trình duyệt truy xuất và hiển thị phần tử DOM đầu tiên của trang. Các phần tử canvas, hình ảnh hoặc tex, các phần tử không phải màu trắng và SVG được coi là nội dung DOM.
Nói một cách đơn giản, FCP là thời gian cần thiết để người dùng trang web xem bất kỳ nội dung nào trên trình duyệt của họ sau khi họ nhấp vào liên kết trang web.
Do đó, FCP nhanh như chớp đảm bảo rằng người dùng tìm thấy điều gì đó hữu ích ngay khi họ truy cập vào trang.
Gần đây, chúng tôi đã xuất bản một bài đăng về Độ trễ đầu vào đầu tiên. Nếu bạn đã đọc nó, bạn có thể tự hỏi sự khác biệt giữa First Contentful Paint và First Input Delay là gì?
Sự khác biệt giữa Sơn có nội dung đầu tiên và Độ trễ đầu vào đầu tiên:
Độ trễ đầu vào đầu tiên (FID)
FID đo lường tính tương tác: thời gian một trang web cần để phản hồi sau khi khách truy cập tương tác (ví dụ: nhấp vào nút hoặc liên kết) với nó.
Sơn có nội dung đầu tiên (FCP):
FCP đo thời gian một trang mất từ lần tải đầu tiên đến khi nội dung hiển thị đầu tiên hiển thị trên màn hình.
Một số bạn có thể thắc mắc rằng sơn đầu tiên khác với sơn nội dung đầu tiên như thế nào. Hãy cùng xem:
First Paint so với First Contentful Paint:
Đối với không đảo ngược, sơn đầu tiên là khi trình duyệt phát hiện kết xuất. Kết xuất này có thể tinh tế như màu nền.
- Sơn đầu tiên:
First Paint được kích hoạt rất sớm khi tải trang nhưng chúng không cung cấp bất kỳ thông tin hoặc ‘nội dung’ nào cho người dùng. Màu nền thường được vẽ nhanh, trong khi nội dung thực tế sẽ mất nhiều thời gian hơn để xuất hiện trên màn hình.
Do đó, thời gian sơn đầu tiên không hữu ích vì trang web không thực sự hiển thị bất kỳ thông tin hữu ích nào.
- Sơn nội dung đầu tiên:
First Contentful Paint biểu thị việc tải bất kỳ ‘nội dung’ nào cung cấp thông tin cho người dùng cuối. Nó được kích hoạt khi bất kỳ nội dung nào được vẽ; kết xuất văn bản, hình ảnh hoặc canvas.
Thời gian First Contentful Paint cung cấp thông tin chi tiết hữu ích về việc người dùng biết đến trang web của bạn sớm như thế nào vì nó thể hiện thời gian tải nội dung thực tế trên trang. Vì trọng tâm là ‘nội dung’, nó là một số liệu hữu ích hơn so với lần sơn đầu tiên.
Làm thế nào để đánh giá Sơn có nội dung đầu tiên?
Quản trị viên web hoặc nhà xuất bản có thể đo lường Bức tranh có nội dung đầu tiên trên trang web của họ thông qua nhiều công cụ bao gồm:
- Ngọn hải đăng
- WebPageTest
- Công cụ dành cho nhà phát triển của Chrome
- PageSpeed Insights
- Báo cáo trải nghiệm người dùng Chrome
Điểm FCP tốt là gì?
Theo nguyên tắc của Google, nội dung đầu tiên của một trang web sẽ xuất hiện trong vòng 1,8 giây. Khi một trang web tải trong vòng 2 giây, nó đảm bảo trải nghiệm người dùng tốt cho khách truy cập vì họ có thể truy cập thông tin nhanh hơn.
Nếu bức tranh có nội dung đầu tiên của một trang web mất hơn 3 giây để tải, nó được coi là chậm.
Google xếp hạng thời gian FCP trong ba danh mục khác nhau:
- Tốt – từ 0 giây đến 1,8 giây
- Cần cải thiện – từ 1,8 giây đến 3 giây
- Kém – hơn 3 giây
Cách cải thiện thời gian Sơn có nội dung đầu tiên (FCP):
Bây giờ chúng ta đã hiểu FCP là gì và tại sao nó lại quan trọng, hãy cùng xem và làm thế nào để cải thiện thời gian FCP:
- Loại bỏ tài nguyên chặn kết xuất:
Tài nguyên chặn hiển thị là các tệp trên trang web phải hiển thị. Chúng có thể bao gồm phông chữ, tệp CSS, JavaScript và HTML. Các tệp này được gọi là ‘chặn hiển thị’ vì chúng được ưu tiên hơn các phần tử khác của trang (ví dụ: hình ảnh, văn bản hoặc nội dung hướng đến người dùng khác).
Sự chậm trễ này tạo ra sự gia tăng đột ngột trong FCP vì các tệp chặn hiển thị thường có kích thước lớn và chúng thậm chí không chứa nội dung trang web.
Thời gian FCP có thể giảm nếu bạn xóa tài nguyên kết xuất khỏi đường dẫn kết xuất quan trọng, trì hoãn các tài nguyên không quan trọng hoặc xóa JS không cần thiết.
- Giảm thời gian phản hồi của máy chủ:
TTFB hoặc Thời gian đến byte đầu tiên là tổng thời gian trình duyệt cần để nhận byte đầu tiên của nội dung trang. Nếu TTFB ít hơn, thời gian FCP cũng sẽ ít hơn.
Đây là cách,
FCP = TTFB + Thời gian hiển thị + Thời gian tải nội dung
Như bạn có thể thấy, FCP phụ thuộc vào TTFB. Do đó, việc tối ưu hóa TTFB sẽ tự động cải thiện điểm FCP. Bạn có thể giảm TTFB bằng cách sử dụng CDN chất lượng, kích hoạt bộ nhớ đệm cho trang web của bạn và chọn nhà cung cấp dịch vụ lưu trữ nhanh.
- Loại bỏ CSS không cần thiết
Nếu bạn có các tệp trong bảng định kiểu của mình không được sử dụng, nhưng có tốc độ đáng kể, thì không có lý do gì để giữ chúng. Do đó, nên xóa mọi mã cũ hoặc không sử dụng để không ảnh hưởng đến thời gian tải trang web của bạn.
- Giảm thiểu HTML, JavaScript và CSS
Việc hợp nhất HTML, JavaScript và CSS có thể làm giảm đáng kể thời gian FCP trên trang web của bạn. Minification đang xóa tất cả các ký tự thừa, chẳng hạn như khoảng trắng khỏi các tệp CSS, HTML và JavaScript trên trang web của bạn. Mặc dù khoảng cách giúp dễ đọc, nhưng các trình duyệt không cần chúng. Trên thực tế, những khoảng trống này chiếm nhiều byte và việc thu nhỏ chúng sẽ làm giảm kích thước trang và cải thiện thời gian sơn nội dung Đầu tiên.
Điểm mấu chốt:
Vì Google coi trọng tốc độ trang là thước đo hiệu suất quan trọng, First Contentful Paint sẽ tiếp tục là thước đo quan trọng cho các trang web.
Có tiến trình FCP thấp không chỉ giữ chân người dùng trên trang web của bạn mà còn nâng cao trải nghiệm người dùng tổng thể.
Chúng tôi đồng ý rằng, FCP có thể là một số liệu khó để bắt đầu nhưng một chút tối ưu hóa khi giảm FCP chắc chắn sẽ làm tăng UX và thời gian tải tổng thể của trang web của bạn.
