Sơn nội dung đầu tiên là gì? + Kế hoạch hành động để cải thiện nó

Nếu bạn có thể cải thiện hiệu suất trang web của mình lên 10%, bạn có muốn không?

Chấm điểm hiệu suất trang web là một web phức tạp về số liệu và Sơn nội dung đầu tiên (FCP) chỉ là một yếu tố Google xem xét khi đánh giá tốc độ tải trang. Chịu trách nhiệm về 10% điểm hiệu suất tổng thể của trang web, FCP đóng một vai trò quan trọng trong việc tạo ra trải nghiệm người dùng tích cực cho khách truy cập.

Sơn có nội dung đầu tiên (FCP) của một trang web là tổng thời gian một trang cần tải từ thời điểm yêu cầu được gửi đến thời điểm bất kỳ nội dung nào được hiển thị trên màn hình.

→ Tải xuống ngay: Gói khởi động SEO [Free Kit]

Điểm FCP càng cao, nội dung tải càng chậm. Khi khách truy cập nghĩ rằng một trang mất quá nhiều thời gian để tải, nó có thể là một dấu hiệu nghiêm trọng. Trong một nghiên cứu của các công ty thiết kế hàng đầu, 42% số người cho biết họ sẽ để lại trang web hoạt động kém.

Nhưng điểm FCP thấp cho thấy trang đang tải nhanh, có nghĩa là nội dung sẽ được phân phối sớm hơn. Và nội dung tải nhanh là một cách để giữ cho khách truy cập cuộn trang web của bạn. Trên thực tế, Deloitte nhận thấy rằng một Cải thiện 0,1 giây trong thời gian tải tăng chuyển đổi lên 8,4% cho các trang web bán lẻ và 10,1% cho các trang web du lịch.

Khi một phần nghìn giây tạo ra sự khác biệt, tốt nhất bạn nên làm bất cứ điều gì có thể để cải thiện tốc độ trang web của mình. Vì vậy, hãy xem cách giảm FCP để làm cho trang web của bạn hoạt động nhanh nhất và thân thiện với người dùng nhất có thể.

Sơn nội dung đầu tiên là gì?

First Contentful Paint (FCP) là khoảng thời gian người dùng cần để xem nội dung đầu tiên trên trang web, cho dù đó là hình ảnh, văn bản, biểu trưng, ​​đồ họa nền hay không trắng các yếu tố. FCP đánh giá cách người dùng trải nghiệm tốc độ tải trang của trang web bằng cách đo lường những gì mọi người thực sự nhận thấy, thay vì kết quả của một công cụ kiểm tra tốc độ.

Trong dòng thời gian bên dưới, bạn có thể thấy FCP phát ra trong khung thứ hai khi các phần tử văn bản và hình ảnh đầu tiên xuất hiện trên màn hình.

Dòng thời gian sơn nội dung đầu tiên cho tìm kiếm trên web

Nguồn hình ảnh

First Contentful Paint là một trong sáu chỉ số được theo dõi trong Google Báo cáo Hiệu suất Lighthouse, cùng với Thời gian tương tác, Chỉ số tốc độ, Tổng thời gian chặn, Sơn có nội dung lớn nhất và Dịch chuyển bố cục tích lũy. Mỗi chỉ số đo lường một khía cạnh của tốc độ tải trang.

Báo cáo hiệu suất của Lighthouse First Contentful Paint

Nguồn hình ảnh

First Contentful Paint là một chỉ số quan trọng để đánh giá tiến trình tải trang vì nó đánh dấu thời điểm mà người dùng có thể thấy rằng điều gì đó đang xảy ra trên màn hình. Nếu không có sự đảm bảo này, người dùng có thể rời khỏi trang để duyệt một trang web nhanh hơn.

Bức tranh có nội dung đầu tiên khác với Core Web Vitals Sơn có nội dung lớn nhất (LCP) vì LCP đo thời gian để phần tử lớn nhất trên trang web hiển thị. Mặt khác, FCP đo lường phần tử đầu tiên tải, không nhất thiết phải là phần tử lớn nhất.

LCP nhanh giúp đảm bảo với mọi người rằng nội dung chính hữu ích cho họ. Nhưng FCP nhanh chóng trấn an mọi người rằng thứ gì đó đang diễn ra trên trang, điều này có thể giữ chúng tồn tại đủ lâu để phần còn lại của trang tải.

Cách kiểm tra sơn có nội dung đầu tiên

FCP có thể được đo trong phòng thí nghiệm (trước khi phát hành) và tại hiện trường (người dùng trong thế giới thực).

Kiểm tra FCP trong phòng thí nghiệm là một cách tốt để giải quyết các vấn đề trước khi trang web của bạn hoạt động, nhưng nó không phải là cách chính xác nhất để đánh giá hiệu suất. Đó là lúc thử nghiệm thực địa xuất hiện, cho bạn thấy cách mọi người tương tác với trang web của bạn khi có sự khác biệt về thiết bị, kết nối mạng và tương tác của người dùng.

Bạn có thể sử dụng các công cụ sau để kiểm tra First Contentful Paint:

Công cụ hiện trường

Công cụ phòng thí nghiệm

Đối với bài viết này, hãy cùng tìm hiểu xem chạy thử nghiệm với Lighthouse – một công cụ mã nguồn mở, tự động để cải thiện chất lượng của các trang web trông như thế nào. (Nếu bạn chưa từng chạy kiểm tra này trước đây, hãy nhấp vào liên kết để có hướng dẫn từng bước dễ dàng).

Sau khi bạn chạy thử nghiệm cho một URL nhất định, Lighthouse sẽ mở một tab mới để chia sẻ tổng quan về hiệu suất trang web. Trong ví dụ bên dưới, trang web đang hoạt động tốt về SEO và Khả năng truy cập nhưng cần hoạt động về Hiệu suất và Các phương pháp hay nhất.

Tổng quan về hiệu suất của trang Lighthouse

Nguồn hình ảnh

Đi sâu hơn, kiểm tra cũng cho điểm cho từng chỉ số trong số sáu chỉ số hiệu suất, bao gồm cả First Contentful Paint (FCP). Trong bài kiểm tra được hiển thị bên dưới, điểm FCP là 2,5 giây – một khoảng thời gian “cần cải thiện”.

Các chỉ số về hiệu suất của trang web Lighthouse bao gồm Bản vẽ nội dung đầu tiên

Nguồn hình ảnh

Nhưng bạn cần biết điều gì tạo nên điểm “tốt” để cải thiện FCP.

Tốc độ sơn có nội dung đầu tiên lý tưởng

Google đề xuất điểm Sơn có nội dung đầu tiên là 1,8 giây hoặc ít hơn để cung cấp cho khách truy cập trang web của bạn trải nghiệm duyệt web tốt.

Điểm sơn hài lòng đầu tiên

Nguồn hình ảnh

Nhưng điều gì quyết định điểm FCP của bạn?

Giống như tất cả mọi thứ trên Google, có một phương pháp để đo lường. Điểm FCP của bạn được xác định bằng cách so sánh thời gian FCP trên trang web của bạn với thời gian FCP cho các trang web thực, sử dụng dữ liệu từ Lưu trữ HTTP. Bạn có thể tìm hiểu sâu hơn để xem cách Lighthouse xác định ngưỡng và điểm số.

Khi đánh giá điểm FCP của bạn, Google cho biết “ngưỡng tốt để đo lường là phần trăm tải trang thứ 75, được phân đoạn trên các thiết bị di động và máy tính để bàn”. Điều này giúp thể hiện chính xác trải nghiệm người dùng.

Nếu trang web của bạn có điểm FCP thấp, bạn có thể thực hiện các bước để loại bỏ vài giây và tạo một trang web nhanh hơn mà khách truy cập muốn cuộn qua. Nhưng trước tiên, chúng ta hãy tìm hiểu điều gì dẫn đến điểm kém.

Nguyên nhân nào gây ra bức tranh có nội dung đầu tiên cao

Tệp văn bản lớn, thời gian phản hồi chậm của máy chủ và chuyển hướng nhiều trang đều có thể góp phần tạo nên điểm số First Contentful Paint cao. Nếu bạn có Sơn nội dung đầu tiên (FCP) cao, có thể là do một trong những yếu tố sau:

  • Thời gian tải phông chữ chậm
  • Thời gian phản hồi của máy chủ chậm (TTFB)
  • Số lượng yêu cầu cao và kích thước chuyển lớn
  • Tài nguyên chặn hiển thị
  • CSS không được sử dụng hoặc không hiệu quả
  • Các phần tử dựa trên tập lệnh trong màn hình đầu tiên
  • Tải chậm trong màn hình đầu tiên
  • Không nội tuyến hình ảnh trong màn hình đầu tiên
  • Kích thước DOM quá lớn
  • Nhiều trang chuyển hướng

Nhưng hãy nhớ rằng, điểm Hiệu suất ngọn hải đăng là điểm trung bình có trọng số của tất cả các điểm số – và FCP chiếm 10% trong tổng số đó. Do đó, điểm số có trọng số lớn sẽ có tác động lớn hơn đến điểm Hiệu suất tổng thể của bạn. Dưới đây là cách tính trọng số của các chỉ số Lighthouse khác:

Trọng lượng điểm hiệu suất web của Lighthouse cho sơn nội dung đầu tiên

Nguồn hình ảnh

Nếu điểm Hiệu suất tổng thể của bạn cần cải thiện, tốt nhất bạn nên dành thời gian tối ưu hóa cho Tổng thời gian chặn hoặc Sơn có nội dung lớn nhất trước khi xử lý Sơn có nội dung đầu tiên. Khi bạn thực hiện các phương pháp phát triển tốt trên toàn bộ trang web, có thể điểm FCP của bạn sẽ thấp hơn.

Nhưng nếu bạn muốn cải thiện FCP, bạn có thể thực hiện một số bước được nhắm mục tiêu để chuyển từ điểm màu đỏ sang màu xanh lá cây.

Cách cải thiện Sơn có nội dung đầu tiên

Không phải lúc nào cũng đơn giản để cải thiện điểm Sơn có nội dung đầu tiên (FCP). Nhưng với kế hoạch hành động phù hợp, việc ưu tiên các lỗi chính có ảnh hưởng lớn nhất sẽ dễ dàng hơn. Hãy chia nhỏ cách thực hiện nó.

1. Tạo danh sách các vấn đề có mức độ ưu tiên cao.

Bước đầu tiên để giảm điểm FCP cho bất kỳ trang web nào là chạy danh sách các bài kiểm tra trong phòng thí nghiệm và hiện trường được chia sẻ ở trên để hiểu chính xác những gì bạn cần làm.

Hãy quay trở lại báo cáo hiệu suất của Ngọn hải đăng trước đó. Nếu điểm FCP “cần cải thiện”, tốt nhất bạn nên tham khảo các cơ hội hoặc đề xuất chẩn đoán trong báo cáo. Để xem tất cả các đề xuất, hãy chuyển sang tab “Tất cả”. Hoặc đối với các đề xuất cụ thể cho điểm Bức tranh có nội dung đầu tiên (FCP), hãy chuyển sang tab “FCP”.

Cơ hội vẽ và chẩn đoán nội dung đầu tiên

Nguồn hình ảnh

Thử nghiệm trên chia sẻ hai cơ hội để cải thiện FCP: loại bỏ tài nguyên chặn hiển thị và đảm bảo văn bản vẫn hiển thị trong quá trình tải Webfont.

Bằng cách tìm hiểu các vấn đề hàng đầu ảnh hưởng đến FCP, bạn sẽ có một danh sách về nơi cần tập trung và những gì cần khắc phục.

2. Học những gì cần bỏ qua.

Một tính năng hữu ích khác của báo cáo hiệu suất Lighthouse là cho bạn biết những gì bạn đừng cần tập trung vào. Danh sách này được tạo trong phần “Đánh giá đã vượt qua” của báo cáo hiệu suất.

Sơn nội dung đầu tiên đã vượt qua kiểm tra trong Lighthouse

Nguồn hình ảnh

Mặc dù bạn có thể bỏ qua những vấn đề không phải này, nhưng hãy biết rằng Google liên tục cập nhật các chỉ số được sử dụng để đánh giá tốc độ tải trang. Một phương pháp hay là chạy thử nghiệm thường xuyên để đảm bảo hiệu suất trang web đi đúng hướng – bạn có thể cần ưu tiên “kiểm tra đã vượt qua” vào một ngày nào đó.

3. Làm việc với nhóm web của bạn để khắc phục sự cố.

Khi bạn biết những vấn đề nào cần chú ý, bạn chỉ cần thực hiện hành động để cải thiện những vấn đề ảnh hưởng đến First Contentful Paint (FCP).

Bài đăng này sẽ không đi vào cỏ dại của sự phát triển web. Nhưng những hướng dẫn chi tiết này của Google là tài nguyên tuyệt vời để hiểu từng yếu tố ảnh hưởng đến tốc độ và hiệu suất trang. Nếu một điểm ảnh hưởng đến điểm FCP của bạn, bạn có thể xem để tìm hiểu cách khắc phục vấn đề.

Cho dù điểm Sơn nội dung đầu tiên (FCP) của bạn đang hiển thị màu đỏ, vàng hay xanh lá cây, luôn có những cải tiến cần được thực hiện. Đó là niềm vui – và đôi khi, gây khó chịu – một phần của việc phát triển web.

Nhưng hãy nhớ rằng, những thay đổi nhỏ có thể có tác động lớn. Giảm thời gian phản hồi của máy chủ, nén hình ảnh và nhận thức được các yếu tố trong màn hình đầu tiên có thể làm giảm điểm FCP, tăng tốc trang web của bạn và đảm bảo khách truy cập trang web có trải nghiệm duyệt web nhanh hơn, lâu hơn.

tiếp thị

Leave a Comment