Ảnh lớn đầu trang thường tạo ấn tượng đầu tiên, nhưng cũng có thể khiến khách nhìn thấy một khoảng trống quá lâu. Nén ảnh là một hướng xử lý, chưa chắc là nguyên nhân duy nhất. Cần biết trình duyệt phát hiện ảnh lúc nào, tải tệp nào và có phải chờ mã khác trước khi hiển thị hay không.
Xác định đúng phần tử cần kiểm tra
Chọn URL và kích thước màn hình cụ thể. Ảnh nổi bật trên máy tính có thể khác ảnh được dùng trên điện thoại; một tiêu đề lớn cũng có thể là phần tử nội dung lớn nhất được đo. Đừng mặc định tất cả vấn đề LCP đều xuất phát từ banner.
Mở công cụ kiểm tra hiệu năng để nhận diện phần tử liên quan, sau đó đối chiếu với ảnh thực tế trên trang. Ghi URL tệp, kích thước ảnh gốc, dung lượng và cách ảnh được chèn. Ảnh nền trong giao diện có thể được phát hiện khác với ảnh có sẵn trong nội dung HTML.
Kiểm tra kích thước trước khi đổi định dạng
Một ảnh dùng trong vùng hẹp không cần giữ nguyên kích thước rất lớn từ máy ảnh. Chuẩn bị phiên bản phù hợp với vị trí hiển thị và mật độ màn hình cần hỗ trợ. Nếu website có nhiều kích thước ảnh, kiểm tra trình duyệt thực sự chọn phiên bản nào thay vì chỉ nhìn danh sách trong thư viện.
Có thể thử định dạng hiện đại và mức nén khác nhau, nhưng cần so sánh chất lượng ở vùng có chữ, đường nét và màu chuyển. Giữ bản gốc để chỉnh lại. Không giảm chất lượng đến mức thông tin sản phẩm hoặc công trình khó nhìn chỉ để có tệp nhỏ hơn.
Xem thời điểm tải và hiển thị
Ảnh quan trọng đang nằm ngay đầu trang thường không nên bị trì hoãn như ảnh ở cuối bài. Kiểm tra tùy chọn tải chậm của giao diện hoặc tiện ích có áp dụng nhầm cho ảnh này không. Việc đặt mức ưu tiên tải cũng cần dựa trên phần tử thật, tránh ưu tiên hàng loạt mọi ảnh.
Nếu ảnh tải xong nhưng vẫn chưa xuất hiện, xem hiệu ứng mở đầu, slider hoặc mã đang giữ phần tử ẩn. Nếu yêu cầu ảnh bắt đầu muộn, kiểm tra cách phát hiện tài nguyên. Chỉ giảm dung lượng sẽ không xử lý hết những khoảng chờ do cấu trúc trang gây ra.
Kiểm tra lại phần nhìn thấy đầu tiên
Sau khi sửa, thử truy cập mới trên điện thoại và mạng chậm. Kiểm tra ảnh không bị cắt sai chủ thể, tiêu đề vẫn đọc rõ và nút chính không bị đẩy xuống ngoài dự kiến. So sánh cả thời gian xuất hiện lẫn chất lượng hình ảnh.
Bạn có thể trao đổi với Tý Hon về ảnh đầu trang, kèm URL và tệp gốc nếu có quyền sử dụng. Phạm vi cần chốt là xử lý ảnh, cấu hình tải hay chỉnh phần giao diện đang hiển thị ảnh.
Tham khảo: Tối ưu Largest Contentful Paint.
