Khắc phục lỗi LCP chậm do hình ảnh
LCP thường là ảnh hero. Định dạng, kích thước, preload và fetchpriority, theo thứ tự thực sự giúp cải thiện chỉ số.
Khắc phục hình ảnh Largest Contentful Paint (LCP) bị chậm trong 4 bước: thay đổi kích thước về kích thước hiển thị thực tế, chuyển đổi sang WebP hoặc AVIF, tải trước (preload) và đặt fetchpriority thành high. 2 bước đầu tiên mang lại phần lớn hiệu quả cải thiện và không yêu cầu thay đổi mã nguồn trang web của bạn.
Trên hầu hết các trang, phần tử LCP lớn nhất là một hình ảnh hero duy nhất, điều này có nghĩa là LCP thực chất là vấn đề về một tệp tin cụ thể chứ không phải toàn bộ trang web của bạn. Khắc phục tệp tin duy nhất đó thường cải thiện chỉ số đo lường nhiều hơn bất kỳ tối ưu hóa nào khác.
LCP đo lường điều gì
LCP ghi lại thời gian cần thiết để phần tử hiển thị lớn nhất được hiển thị, tính từ khi trang bắt đầu tải. Google coi mức 2.5 giây trở xuống là tốt, từ 2.5 đến 4 giây là cần cải thiện và trên 4 giây là kém.
Phần tử được đo lường thường là một hình ảnh, đôi khi là một khối văn bản tiêu đề, và luôn là thứ hiển thị được mà không cần cuộn trang. Phần tử này có thể thay đổi giữa các thiết bị, vì một hình ảnh hero chiếm ưu thế trên bố cục máy tính để bàn có thể nằm dưới màn hình đầu tiên (below the fold) trên điện thoại.
Tìm phần tử chịu trách nhiệm
Chạy Lighthouse và đọc mục phần tử Largest Contentful Paint, mục này sẽ chỉ đích danh phần tử chính xác đang được đo lường. Việc tự đoán chỉ lãng phí thời gian, vì phần tử đó thường không phải là phần tử mà mọi người nghĩ.
Hãy kiểm tra trên cả thiết bị di động cũng như máy tính để bàn, vì bố cục khác nhau và kết quả cũng khác nhau. Dữ liệu thực tế (field data) từ khách truy cập thực tế đáng tin cậy hơn một lần chạy thử nghiệm trong phòng thí nghiệm (laboratory run), vì điều kiện mạng trong thực tế biến động nhiều hơn trong môi trường thử nghiệm. Khi 2 dữ liệu này không khớp nhau, hãy tin tưởng dữ liệu thực tế và sử dụng dữ liệu phòng thí nghiệm để chẩn đoán.
Khắc phục hình ảnh theo thứ tự mức độ ảnh hưởng
Để cải thiện LCP cho một hình ảnh, hãy thực hiện qua 6 bước này theo thứ tự.
- Thay đổi kích thước hình ảnh về kích thước lớn nhất mà nó sẽ hiển thị, nhân đôi đối với màn hình có mật độ điểm ảnh cao.
- Chuyển đổi sang WebP, hoặc sang AVIF nếu hình ảnh lớn và là ảnh chụp.
- Nén về mục tiêu dưới 200 KB cho một hình ảnh hero, mức này có thể đạt được ở chiều rộng đầy đủ trên hầu hết các thiết kế.
- Thêm các thuộc tính width và height để trình duyệt dự phòng không gian và không xảy ra hiện tượng thay đổi bố cục (layout shift).
- Tải trước (preload) hình ảnh trong phần đầu (head) của trang để trình duyệt bắt đầu tải tệp ngay lập tức.
- Đặt fetchpriority thành high trên phần tử hình ảnh, điều này báo cho trình duyệt biết tệp này là quan trọng nhất.
Bước 1 và 2 thường mang lại phần lớn hiệu quả cải thiện, và đây là 2 bước không yêu cầu chạm vào mã nguồn trang web.
Tại sao thay đổi kích thước tốt hơn nén ảnh
Kích thước quyết định phần lớn dung lượng tệp, vì vậy việc thay đổi kích thước giúp giảm dung lượng nhiều hơn bất kỳ cài đặt chất lượng nào. Một bức ảnh 4000 pixel hiển thị ở mức 1200 pixels chứa lượng dữ liệu pixel nhiều gấp 11 lần so với mức trang web có thể hiển thị.
| Hình ảnh hero | Kích thước | Định dạng | Dung lượng tệp | LCP điển hình |
|---|---|---|---|---|
| Trực tiếp từ máy ảnh | 4032 x 3024 | JPEG chất lượng 90 | 4.2 MB | Trên 6 giây |
| Chỉ nén | 4032 x 3024 | JPEG chất lượng 70 | 1.4 MB | Khoảng 3 giây |
| Chỉ thay đổi kích thước | 1920 x 1440 | JPEG chất lượng 90 | 620 KB | Khoảng 2 giây |
| Thay đổi kích thước và chuyển đổi | 1920 x 1440 | WebP chất lượng 80 | 190 KB | Dưới 1.5 giây |
Hàng thứ ba cho thấy tại sao việc thay đổi kích thước lại được ưu tiên hàng đầu. Chỉ thay đổi kích thước mang lại kết quả tốt hơn chỉ nén, và việc kết hợp cả hai mang lại kết quả tốt hơn cả. Các số liệu có thể thay đổi tùy theo hình ảnh và kết nối, trong khi thứ tự ưu tiên này luôn nhất quán.
Preload và fetchpriority
Tải trước (preloading) báo cho trình duyệt tải hình ảnh hero trước khi nó hoàn thành việc phân tích cú pháp trang, điều này thường tiết kiệm được từ 200 đến 500 mili giây. Cài đặt này quan trọng vì các trình duyệt thường phát hiện ra hình ảnh khá muộn trong quá trình phân tích cú pháp.
Chỉ tải trước một hình ảnh duy nhất. Tải trước nhiều hình ảnh sẽ làm mất đi lợi ích, vì khi đó trình duyệt sẽ phân chia sự chú ý của nó giống như bình thường. Đặt fetchpriority thành high mang lại kết quả tương tự với ít mã nguồn hơn và thường là đủ đối với một hình ảnh đã có sẵn trong HTML ban đầu.
Những sai lầm làm LCP tệ hơn
- Tải chậm (lazy loading) hình ảnh hero. Lazy loading làm trì hoãn chính tệp tin mà bạn muốn tải đầu tiên. Chỉ áp dụng nó cho các phần dưới màn hình đầu tiên.
- Tải ảnh hero thông qua JavaScript. Một hình ảnh được chèn bằng script không thể bắt đầu tải xuống cho đến khi script đó chạy.
- Sử dụng hình nền CSS (background image). Hình nền được phát hiện muộn hơn các phần tử img và không thể được ưu tiên dễ dàng.
- Tải trước nhiều hình ảnh. Các mức ưu tiên cạnh tranh nhau sẽ làm mất hoàn toàn lợi thế.
- Bỏ qua width và height. Thay đổi bố cục làm hỏng một chỉ số đo lường khác trong khi chỉ số này được cải thiện.
Khi phần tử LCP là văn bản
LCP dựa trên văn bản thường bị trì hoãn bởi phông chữ web (web fonts) chứ không phải do chính văn bản đó. Trình duyệt có các từ ngay lập tức nhưng phải chờ tệp phông chữ trước khi hiển thị chúng.
Đặt font-display thành swap để văn bản hiển thị bằng phông chữ dự phòng và chuyển đổi khi phông chữ web được tải xong. Tải trước một tệp phông chữ quan trọng nhất và rút gọn phông chữ (subset) chỉ giữ lại các ký tự mà trang của bạn thực sự sử dụng, điều này thường giúp giảm phông chữ từ 200 KB xuống dưới 30 KB. Việc phân phối phông chữ từ tên miền của riêng bạn giúp loại bỏ một kết nối bổ sung đến bên thứ ba.
Thời gian phản hồi của máy chủ đặt ra giới hạn tối thiểu
LCP không thể nhanh hơn thời gian máy chủ của bạn phản hồi byte đầu tiên, vì vậy máy chủ chậm sẽ giới hạn mọi cải tiến khác. Hãy hướng tới mục tiêu dưới 600 mili giây cho byte đầu tiên.
Hãy kiểm tra con số đó trước khi tối ưu hóa hình ảnh, bởi vì phản hồi của máy chủ mất 2 giây sẽ khiến mục tiêu LCP 2.5 giây trở nên bất khả thi cho dù bạn có làm gì với các tệp tin đi nữa. Bộ nhớ đệm (caching), máy chủ nhanh hơn hoặc địa chỉ mạng phân phối nội dung (CDN) sẽ giải quyết vấn đề đó. Việc tối ưu hóa hình ảnh sau đó sẽ cải thiện những gì còn lại thay vì phải chống lại một giới hạn được thiết lập ở nơi khác.
Các tập lệnh bên thứ ba cũng làm chậm hình ảnh
Các tập lệnh phân tích, biểu ngữ đồng ý, tiện ích trò chuyện và quảng cáo cạnh tranh băng thông và thời gian xử lý với hình ảnh hero của bạn. Một hình ảnh được tối ưu hóa hoàn hảo vẫn hiển thị muộn khi có 12 tập lệnh tải trước nó.
Biểu ngữ đồng ý (consent banner) là gây hại nhất, vì nhiều biểu ngữ chặn việc hiển thị cho đến khi khách truy cập đưa ra lựa chọn. Hãy tải các tập lệnh bên thứ ba với thuộc tính defer hoặc async để chúng không cản trở trang web, và kiểm tra xem có bao nhiêu tập lệnh thực sự cần thiết. Việc loại bỏ 3 tập lệnh theo dõi không sử dụng thường cải thiện LCP nhiều hơn một đợt nén hình ảnh tiếp theo.
Kiểm tra thay đổi một cách chính xác
Kiểm tra trong cửa sổ ẩn danh đã tắt các tiện ích mở rộng, và chạy đo lường 3 lần thay vì tin tưởng vào một kết quả duy nhất. Điểm số giữa các lần chạy có thể chênh lệch một khoảng đáng kể.
Xác minh xem trình duyệt thực sự nhận được tệp nhỏ hơn hay chưa. Mở công cụ dành cho nhà phát triển (developer tools), chuyển sang tab Network, lọc theo hình ảnh và tải lại trang. Dung lượng đã truyền và định dạng sẽ xuất hiện trong danh sách. Một trang vẫn tải tệp cũ thường có nghĩa là lớp bộ nhớ đệm đang giữ phiên bản trước đó chứ không phải do việc tối ưu hóa thất bại.
Giữ LCP nhanh sau khi khắc phục
Hãy thiết lập một quy tắc cho các hình ảnh hero thay vì sửa từng ảnh một, bởi vì các trang mới sẽ lặp lại vấn đề này. Một trang web được khắc phục một lần sẽ bị giảm hiệu suất trở lại trong vòng vài tháng nếu người biên tập tải ảnh trực tiếp từ máy ảnh lên.
Thống nhất chiều rộng tối đa và dung lượng tệp tối đa cho hình ảnh hero, ghi lại quy tắc đó và áp dụng cho mọi trang mới. Một quy tắc như rộng 1920 pixels và dưới 200 KB rất dễ kiểm tra và đáp ứng hầu hết mọi thiết kế. Khi có nhiều người cùng đăng bài, quy tắc bằng văn bản quan trọng hơn kỹ thuật, vì chỉ số đo lường sẽ phản ánh trang tệ nhất chứ không phải trang tốt nhất.
Chuẩn bị hình ảnh hero trong một lượt
Xử lý hàng loạt mọi hình ảnh hero trên trang web cùng nhau, vì chúng chia sẻ chung một thông số kỹ thuật và một kích thước mục tiêu. Hầu hết các trang web có từ 10 đến 100 ảnh hero trên các trang đích, trang danh mục và bài viết.
Đặt chiều rộng và dung lượng KB mục tiêu một lần, thả các hình ảnh vào và mọi tệp trả về đều khớp thông số. Có thể chạy tối đa 500 hình ảnh mỗi đợt, hoàn toàn bên trong trình duyệt trên bộ vi xử lý của riêng bạn. Không có gì được tải lên mạng, vì vậy các tài nguyên thử nghiệm, trang chiến dịch chưa xuất bản và sản phẩm của khách hàng vẫn nằm an toàn trên máy của bạn trong khi toàn bộ thư viện được chuẩn bị.