Cách sửa lỗi phân phối ảnh trong PageSpeed Insights

1. 01Mở trang gặp vấn đề trong PageSpeed Insights hoặc Lighthouse. Chọn báo cáo di động hay máy tính muốn cải thiện, mở phần phân phối ảnh và ghi URL bị đánh dấu cùng thay đổi đề xuất.
2. 02Tìm ảnh trên trang. Trong công cụ nhà phát triển của trình duyệt, so sánh ảnh đã tải với kích thước hiển thị, có tính mật độ màn hình. Kiểm tra nguồn được chọn, không chỉ bản gốc trong thư viện media.
3. 03Nếu ảnh được gửi có quá nhiều điểm ảnh, sửa kích thước linh hoạt hoặc thiết lập giao diện trước. Nếu kích thước phù hợp, so sánh nén hoặc định dạng thay thế được hỗ trợ.
4. 04Chuẩn bị bản sao có kích thước cần thiết trong trình sửa ảnh. Dùng công cụ nén ảnh Bitinz cho tệp phù hợp và kiểm tra chữ, viền, độ trong suốt cùng chuyển màu trước khi thay bất cứ thứ gì.
5. 05Xuất bản tệp thay thế hoặc thay đổi mẫu. Kiểm tra trang gọi ảnh mới thay vì bản cũ trong bộ nhớ đệm, rồi chạy lại báo cáo với cùng thiết lập thiết bị.

Chrome ước tính mức tiết kiệm từ dung lượng tải và tỷ lệ byte trên điểm ảnh hiệu quả của định dạng. Ảnh có ước tính tiết kiệm dưới 4 KiB không bị đánh dấu. Đây là ngưỡng báo cáo, không phải dung lượng ảnh tối đa khuyến nghị.

Lighthouse 13 thay các kiểm tra ảnh cũ bằng thông tin này; Lighthouse 12 trước đó đã đặt giao diện thông tin chuyên sâu làm mặc định. Cảnh báo định dạng, kích thước quá mức và ảnh động nặng có thể cần cách xử lý khác nhau. Quy trình xuất bản tổng thể có trong cách nén ảnh cho trang web.

• WordPress: kiểm tra kích thước ảnh được chọn trong khối hoặc giao diện và mã srcset, sizes thực tế. WordPress tạo các nguồn ảnh linh hoạt, nhưng mẫu tùy chỉnh hoặc mô tả bố cục không chính xác vẫn có thể gửi kích thước sai. Chỉ sửa bản gốc có thể khiến các bản đã sinh vẫn tiếp tục được dùng.
• Shopify: ảnh cửa hàng đã được tối ưu qua CDN Shopify, kể cả chọn định dạng. Shopify cho biết không cần nén thủ công trước khi tải lên. Khi có cảnh báo, kiểm tra chiều rộng ảnh giao diện yêu cầu và mã linh hoạt thay vì giảm chất lượng nguồn nhiều lần. Người phát triển giao diện có thể kiểm tra image_url và image_tag.
• Next.js: dùng thiết lập linh hoạt của thành phần Image và đặt sizes khớp bố cục thực, nhất là với fill. Nếu thiếu giá trị phù hợp, ảnh hẹp có thể bị coi là rộng toàn khung nhìn rồi tải nguồn lớn hơn. Chỉ đổi chất lượng không sửa được sự lệch bố cục này.

Giữ bản gốc có thể chỉnh sửa. Với ảnh được phục vụ độc lập, so sánh dung lượng thực và hình thức tệp đã chuẩn bị; so sánh JPG, PNG và WebP giúp chọn. Bitinz không đổi kích thước ảnh. Chuyển WebP có thể làm tệp lớn hơn, vì vậy giữ phiên bản thực sự hợp với trang.

Với công việc xuất bản lặp lại, API cho nhà phát triển có thể xử lý tệp phù hợp bằng tài khoản và hạn mức tháng. API không sửa mã giao diện hay bố cục linh hoạt. Kiểm tra lại trang được gửi sau khi nối tự động hóa.

• URL bị đánh dấu khớp với ảnh và phiên bản đã đổi.
• Trình duyệt chọn nguồn phù hợp trên các kích thước màn hình.
• Nén giữ chi tiết hữu ích, độ trong suốt và chuyển màu mượt.
• Ảnh chính nhìn thấy không bị chậm bởi thiết lập tải trì hoãn không phù hợp.
• Báo cáo mới dùng cùng thiết lập thiết bị; cũng kiểm tra hình thức và tải trang thực tế.