Kể từ khi Lighthouse ra đời, các thông số mới liên quan đến tốc độ trang đã xuất hiện. Một trong những thông số quan trọng nhất là First Contentful Paint (FCP). Trong Lighthouse phiên bản 10, có hiệu lực từ tháng 2024 năm 10, tác động của FCP lên tổng điểm là XNUMX%.
Để chấp nhận và hiểu FCP như một thước đo, điều cần thiết trước tiên là phải kiểm tra tâm lý đằng sau nó. Khái niệm này tương tự như gương lắp đặt trong thang máy:
Tóm tắt ngắn gọn: Trong nửa đầu những năm 1900, việc sử dụng thang máy trong các tòa nhà cao tầng tăng lên đáng kể, nhưng hệ thống thang máy còn thô sơ so với ngày nay. Vì vậy, ý tưởng lắp gương trong thang máy nảy sinh nhằm khiến thời gian ở trong thang máy có cảm giác ngắn hơn.
Quay lại chủ đề của chúng ta: Điểm khiến bạn phải chờ đợi trong thời gian tải khi cố gắng truy cập một trang là FCP. Định nghĩa của First Contentful Paint là thời gian để văn bản, hình ảnh, khung vẽ không phải màu trắng, v.v. đầu tiên được hiển thị cho người dùng. Đơn vị của FCP là giây.
Trong Lighthouse, thang màu cho FCP được xác định như sau:
- 0-2 giây: Xanh => Nhanh
- 2-4 giây: Cam => Cần cải thiện
- 4 giây trở lên: Đỏ => Chậm
Theo dữ liệu HTTP Archive, số lượng trang web có thể được xem xét nhanh là 25%và 50% trang web hiện tại được phân loại là chậm.
Có thể làm gì để cải thiện FCP?
Giảm thời gian phản hồi của máy chủ
Nói chung, điều này có thể được hiểu là những cải tiến cần thiết ở phía máy chủ và phần mềm. Để liệt kê các vấn đề tác động tiêu cực đến thời gian phản hồi của máy chủ:
- Việc chia sẻ, cấu hình của máy chủ (tức là cài đặt máy chủ) và tài nguyên máy chủ có thể là vấn đề. Dung lượng máy chủ của bạn sẽ được tăng lên theo lưu lượng truy cập của bạn. Trong một số trường hợp, các truy vấn cơ sở dữ liệu được viết kém và các thành phần phần mềm có độ phức tạp cao có thể ảnh hưởng nghiêm trọng đến thời gian phản hồi của máy chủ.
- Không sử dụng CDN (Content Delivery Network) có thể gây chậm trễ trong việc truy cập nội dung, ảnh hưởng đến FCP. Ví dụ: khi kích thước nội dung tăng lên, nếu cố gắng gọi một GIF hoặc video động lớn mà không có CDN và máy chủ chính ở một lục địa khác, bạn có thể cần phải xem xét các giải pháp CDN để giải quyết FCP.
- Không cung cấp nội dung tĩnh với chính sách bộ đệm phù hợp và nhất quán có thể gây quá tải máy chủ của bạn không cần thiết khi số lượng khách truy cập tăng lên. Ví dụ: nếu bạn không lưu logo của mình vào bộ nhớ đệm dài hạn khi tải nó trên mỗi trang, bạn sẽ gây tổn hại đến thời gian phản hồi của máy chủ một cách không cần thiết.
- Chuyển hướng trang không cần thiết trong khi truy cập trang có thể ảnh hưởng đến FCP của bạn một cách không cần thiết.
Ví dụ: trước đây, thường có các thiết lập như thế này: khi người dùng muốn vào một trang web, sẽ có chuyển hướng HTTP sang HTTPS, sau đó nếu là thiết bị di động thì chuyển hướng HTTPS sang thiết bị di động (ví dụ: https:// www thành https://m) và nếu trang bị xóa và chuyển hướng đến nơi khác bằng 301, có cảm giác như người dùng đang được chuyển từ bàn này sang bàn khác trong cơ quan thuế. Đây là một ví dụ điển hình để bạn hiểu rõ hơn, nhưng nếu bạn chuyển hướng một trang đến một URL khác có chuyển hướng 301 và sau đó chuyển hướng trang đó sang một trang khác có chuyển hướng 301, thì bạn có thể đang thực hiện cùng một thiết lập phi logic.
- Nếu bạn không sử dụng kết nối trước hoặc tìm nạp trước DNS tiền tố khi kết nối với dịch vụ bên thứ ba của bạn và kết nối với nhiều dịch vụ bên thứ ba, bạn không làm được gì có lợi cho FCP.
Giảm tài nguyên chặn hiển thị
Tôi phải thừa nhận rằng điểm duy nhất được viết dưới dạng chi tiết đơn hàng này có thể mất hàng tháng để giải quyết.
Để đạt được điều này, có một phương pháp giải pháp trong đó tất cả JS, CSS và các tài nguyên tương tự chặn hiển thị trang sẽ được tải sau thời gian tạo trang, nhưng phần hiển thị ban đầu của trang web sẽ được tải trước tiên trong khi trang web đang tải. Tuy nhiên, để làm được điều này, tất cả JS, CSS và các tài nguyên tương tự cần phải được kiểm tra và các quy trình tốn nhiều thời gian nhất cần phải được tách riêng. Ngoài ra, việc sử dụng càng ít dịch vụ của bên thứ ba càng tốt sẽ giúp tối ưu hóa FCP.
