Tìm hiểu về Sơn có nội dung lớn nhất – nó là gì, cách đo lường và cách tối ưu hóa nó để cải thiện điểm Core Web Vitals của bạn.
Sơn có nội dung lớn nhất (LCP) là chỉ số trải nghiệm người dùng của Google đã trở thành một yếu tố xếp hạng vào năm 2021.
Hướng dẫn này giải thích LCP là gì và làm thế nào để đạt được điểm số tốt nhất.
Sơn có nội dung lớn nhất là gì?
LCP là phép đo thời gian để nội dung chính của trang tải xuống và sẵn sàng được tương tác.
Những gì được đo là hình ảnh hoặc khối ngữ cảnh lớn nhất trong chế độ xem của người dùng. Bất kỳ thứ gì vượt ra ngoài màn hình sẽ không được tính.
Các phần tử điển hình được đo lường là hình ảnh, hình ảnh áp phích video, hình nền và các phần tử văn bản cấp khối như thẻ đoạn.
Tại sao LCP được đo lường?
LCP được chọn làm thước đo chính cho điểm Core Web Vitals vì nó đo lường chính xác tốc độ sử dụng của một trang web.
Ngoài ra, nó rất dễ dàng để đo lường và tối ưu hóa.
Các phần tử cấp khối được sử dụng để tính điểm LCP
Các phần tử cấp khối được sử dụng để tính điểm Sơn có nội dung lớn nhất có thể là các phần tử <main> và <section>, cũng như các phần tử tiêu đề, div, biểu mẫu.
Có thể sử dụng bất kỳ phần tử HTML cấp khối nào có chứa phần tử văn bản, miễn là phần tử lớn nhất.
Không phải tất cả các phần tử đều được sử dụng. Ví dụ: các phần tử SVG và VIDEO hiện không được sử dụng để tính Sơn có nội dung lớn nhất.
LCP là một số liệu dễ hiểu bởi vì tất cả những gì bạn phải làm là xem trang web của mình và xác định khối văn bản hoặc hình ảnh lớn nhất là gì và sau đó tối ưu hóa nó bằng cách làm cho nó nhỏ hơn hoặc xóa bất kỳ thứ gì có thể ngăn nó tải xuống nhanh chóng.
Bởi vì Google bao gồm hầu hết các trang web trong chỉ mục ưu tiên thiết bị di động, tốt nhất bạn nên tối ưu hóa chế độ xem trên thiết bị di động trước, sau đó mới đến máy tính để bàn.
Trì hoãn các yếu tố lớn có thể không giúp ích được gì?
Đôi khi một trang web sẽ hiển thị theo từng phần. Một hình ảnh nổi bật lớn có thể mất nhiều thời gian để tải xuống hơn phần tử cấp khối văn bản lớn nhất.
Điều gì xảy ra, trong trường hợp này, là một PerformanceEntry được ghi lại cho phần tử cấp khối văn bản lớn nhất.
Nhưng khi hình ảnh nổi bật ở đầu màn hình tải, nếu phần tử đó chiếm nhiều màn hình của người dùng hơn (chế độ xem của họ), thì một đối tượng PerformanceEntry khác sẽ được báo cáo cho hình ảnh đó.
Hình ảnh có thể khó cho điểm LCP
Các nhà xuất bản web thường tải lên hình ảnh ở kích thước ban đầu của chúng và sau đó sử dụng HTML hoặc CSS để thay đổi kích thước hình ảnh để hiển thị ở kích thước nhỏ hơn.
Kích thước ban đầu là những gì Google gọi là kích thước “nội tại” của hình ảnh.
Nếu nhà xuất bản tải lên hình ảnh có chiều rộng 2048 pixel và chiều cao 1152 pixel thì chiều cao và chiều rộng 2048 x 1152 đó được coi là kích thước “nội tại”.
Bây giờ, nếu nhà xuất bản thay đổi kích thước hình ảnh 2048 x 1152 pixel thành 640 x 360 pixel, thì hình ảnh có kích thước 640 × 360 được gọi là kích thước hiển thị.
Với mục đích tính toán kích thước hình ảnh, Google sử dụng kích thước nào nhỏ hơn giữa hình ảnh kích thước nội tại và kích thước hiển thị.
Lưu ý về kích thước hình ảnh
Có thể đạt được điểm Sơn có nội dung lớn nhất cao với hình ảnh có kích thước nội tại lớn được thay đổi kích thước bằng HTML hoặc CSS để nhỏ hơn.
Nhưng cách tốt nhất là làm cho kích thước nội tại của hình ảnh khớp với kích thước hiển thị.
Hình ảnh sẽ tải xuống nhanh hơn và điểm Sơn có nội dung lớn nhất của bạn sẽ tăng lên.
Cách LCP xử lý hình ảnh được phân phát từ miền khác
Hình ảnh được phân phát từ một miền khác, chẳng hạn như từ CDN, thường không được tính trong phép tính Sơn có nội dung lớn nhất.
Các nhà xuất bản muốn có những tài nguyên đó là một phần của phép tính cần phải đặt cái được gọi là tiêu đề Thời gian-Cho phép-Nguồn gốc.
Việc thêm tiêu đề này vào trang web của bạn có thể khó vì nếu bạn sử dụng ký tự đại diện (*) trong cấu hình, thì nó có thể mở trang web của bạn đến các sự kiện hack.
Để thực hiện đúng cách, bạn sẽ phải thêm một miền cụ thể vào trình thu thập thông tin của Google để đưa miền đó vào danh sách trắng để nó có thể xem thông tin thời gian từ CDN của bạn.
Vì vậy, tại thời điểm này, các tài nguyên (như hình ảnh) được tải từ một miền khác (như từ CDN) sẽ không được tính là một phần của phép tính LCP.
Hãy coi chừng những “Gotchas” cho điểm này
Tất cả các phần tử trong màn hình của người dùng (chế độ xem) được sử dụng để tính LCP. Điều đó có nghĩa là hình ảnh được hiển thị ngoài màn hình và sau đó chuyển sang bố cục khi chúng được hiển thị có thể không được tính là một phần của điểm Sơn có nội dung lớn nhất.
Ở phía ngược lại, các phần tử bắt đầu trong chế độ xem của người dùng và sau đó được đẩy ra khỏi màn hình có thể được tính là một phần của phép tính LCP.
Cách nhận điểm LCP
Có hai loại công cụ tính điểm. Công cụ đầu tiên được gọi là Công cụ trường và công cụ thứ hai được gọi là Công cụ phòng thí nghiệm.
Các công cụ hiện trường là các phép đo thực tế của một địa điểm.
Các công cụ phòng thí nghiệm cho điểm ảo dựa trên thu thập thông tin mô phỏng bằng cách sử dụng các thuật toán gần đúng với các điều kiện Internet mà một người dùng thông thường trên điện thoại di động có thể gặp phải.
Làm thế nào để tối ưu hóa cho bức tranh có nội dung lớn nhất
Có ba lĩnh vực chính cần tối ưu hóa (cộng thêm một lĩnh vực nữa cho JavaScript Frameworks):
- Máy chủ chậm.
- JavaScript và CSS chặn hiển thị.
- Thời gian tải tài nguyên chậm.
Máy chủ chậm có thể là một vấn đề với mức độ tấn công DDOS và loại bỏ lưu lượng truy cập trên máy chủ dùng chung hoặc VPS. Bạn có thể thấy nhẹ nhõm bằng cách cài đặt một plugin WordPress như WordFence để tìm hiểu xem liệu bạn có đang gặp phải một cuộc tấn công dữ dội hay không và sau đó chặn nó.
Các vấn đề khác có thể là do định cấu hình sai máy chủ chuyên dụng hoặc VPS. Một vấn đề điển hình có thể là dung lượng bộ nhớ được phân bổ cho PHP.
Một vấn đề khác có thể là phần mềm lỗi thời như phiên bản PHP cũ hoặc phần mềm CMS đã lỗi thời.
Trường hợp xấu nhất là một máy chủ được chia sẻ với nhiều người dùng đang làm chậm hộp của bạn. Trong trường hợp đó, chuyển sang một máy chủ tốt hơn là câu trả lời.
Thông thường, việc áp dụng các bản sửa lỗi như thêm bộ nhớ đệm, tối ưu hóa hình ảnh, sửa CSS và JavaScript chặn hiển thị cũng như tải trước một số nội dung nhất định có thể hữu ích.
Google có một mẹo nhỏ để xử lý CSS không cần thiết để hiển thị những gì người dùng thấy:
“Xóa hoàn toàn mọi CSS không sử dụng hoặc chuyển nó sang một biểu định kiểu khác nếu được sử dụng trên một trang riêng của trang web của bạn.
Đối với bất kỳ CSS nào không cần thiết để hiển thị ban đầu, hãy sử dụng loadCSS để tải tệp không đồng bộ, điều này thúc đẩy rel = ”tải trước” và tải lên.
- <link rel = ”preload” href = ”stylesheet.css” as = ”style” onload = ”this.rel =’ stylesheet ‘”>”
Công cụ trường cho điểm LCP
Google liệt kê ba công cụ hiện trường:
- Thông tin chi tiết về tốc độ trang.
- Search Console (báo cáo Core Web Vitals).
- Báo cáo trải nghiệm người dùng trên Chrome.
Báo cáo cuối cùng – Báo cáo trải nghiệm người dùng Chrome – yêu cầu tài khoản Google và Dự án đám mây của Google. Hai cách đầu tiên đơn giản hơn.
Công cụ phòng thí nghiệm cho điểm LCP
Các phép đo trong phòng thí nghiệm là điểm mô phỏng.
Google đề xuất các công cụ sau:
- Công cụ dành cho nhà phát triển của Chrome.
- Ngọn hải đăng.
- WebPageTest.org.
Hai công cụ đầu tiên được cung cấp bởi Google. Công cụ thứ ba được cung cấp bởi bên thứ ba.
