1. Giám sát sự thay đổi bố cục tích lũy (CLS) của trang web của bạn
Sự thay đổi bố cục tích lũy (CLS) là số liệu đo tính không ổn định của nội dung trong trang web. Đó là để nói các yếu tố có thể di chuyển trong một trang web, ảnh hưởng đến việc đọc một bài báo chẳng hạn. Chỉ số này là một trong những Chỉ số Web cốt lõi do Google xác định, có tác động thực sự đến trải nghiệm người dùng. Mặc dù hình ảnh không phải là yếu tố chính ảnh hưởng đến chỉ số này, nhưng chúng có thể đóng góp. Đây là trường hợp đặc biệt khi trình duyệt web không biết kích thước của hình ảnh trước khi tải nội dung của trang web và không để lại đủ dung lượng cho hình ảnh này, theo giải thích của Alan Kent, Nhà tư vấn phát triển tại Google.
Lời khuyên: điều cần thiết là đánh giá việc tải một trang web và thực hiện các thay đổi để cải thiện nó. Lưu ý rằng cũng có nhiều công cụ có thể đo lường hiệu suất của trang web của bạn.
2. Kích thước phù hợp hình ảnh của bạn
Để tải hình ảnh nhanh hơn và hiệu quả hơn, điều cần thiết là phải chọn đúng chiều rộng và chiều cao của chúng. “Các tệp lớn hơn mất nhiều thời gian hơn để tải xuống, đặc biệt là trên smartphones mà kết nối mạng có thể chậm hơn, nhưng cũng có thể do bộ vi xử lý kém mạnh hơn của chúng, ”Alan Kent nói. Nếu trình duyệt web tự cắt hình ảnh, thời gian tải xuống sẽ lâu hơn mức cần thiết. Điều này giúp bạn có thể phát hiện các hình ảnh có kích thước không chính xác trong phần Cơ hội, trong báo cáo do PageSpeed Insights cung cấp.
Lời khuyên: hãy đặt cược vào những hình ảnh phản ứng sẽ thích ứng với phương tiện được sử dụng để truy cập trang web. Do đó, thuộc tính HTML cho phép liệt kê các định dạng và kích thước khác nhau của hình ảnh để trình duyệt web có thể chọn những gì phù hợp nhất.
3. Sử dụng định dạng hình ảnh tốt nhất
Bạn nên suy nghĩ về định dạng tốt nhất để sử dụng cho hình ảnh của mình, đặc biệt là giữa các định dạng PNG, JPEG hoặc WebP. “Định dạng tệp ảnh hưởng đến kích thước tệp. Tuy nhiên, cần cẩn thận vì các định dạng như JPEG và WebP có thể thu nhỏ tệp bằng cách sử dụng các thuật toán nén mất dữ liệu, tức là giảm chất lượng hình ảnh để đổi lấy việc giảm kích thước tệp “, Alan Kent giải thích. Tuy nhiên, chuyên gia của Google chỉ ra rằng sự suy giảm chất lượng hình ảnh không nhất thiết phải có đối với khách truy cập vào một trang web và tốc độ tải tăng lên có thể là đáng kể.
Mẹo: Kiểm tra xem trang web của bạn có được lợi khi sử dụng định dạng hình ảnh khác trong phần Cơ hội> Cung cấp hình ảnh ở định dạng thế hệ tiếp theo của báo cáo được hiển thị trên PageSpeed Insights hay không.
4. Nén hình ảnh
Một mẹo khác là sử dụng hệ số chất lượng phù hợp cho hình ảnh để mã hóa chúng một cách hiệu quả, đồng thời duy trì chất lượng hình ảnh mong muốn. Có thể xác định xem có thể tối ưu hóa hay không trong phần Cơ hội> Mã hóa hình ảnh hiệu quả của báo cáo PageSpeed Insights.
Mẹo: Để tìm ra yếu tố chất lượng phù hợp với bạn, bạn nên sử dụng công cụ chuyển đổi hình ảnh đã chọn và sử dụng các giá trị chất lượng khác nhau trên nhiều hình ảnh, sau đó so sánh hình ảnh trước và sau. Google cũng đề xuất trang Squoosh.app như một cách dễ dàng để so sánh hình ảnh có và không có nén.
5. Cho các gợi ý về bộ nhớ đệm của trình duyệt
Để đảm bảo hình ảnh tải nhanh hơn trên một trang web, trình duyệt web có thể được cho biết nó có thể lưu trữ hình ảnh một cách an toàn trong bao lâu. Khi một hình ảnh được gửi từ một trang web, có thể bao gồm tiêu đề HTTP với các gợi ý trong bộ nhớ đệm, chẳng hạn như khoảng thời gian được đề xuất để trình duyệt web lưu vào bộ nhớ cache một hình ảnh. Để tìm hiểu xem tiêu đề phản hồi có được đặt chính xác trên một trang web hay không, Google khuyên bạn nên xem phần Cơ hội> Sử dụng quy tắc bộ nhớ cache hiệu quả trên phần mục tĩnh trong báo cáo PageSpeed Insights. Điều này cho biết liệu bất kỳ hình ảnh nào có đủ điều kiện để cải thiện bộ nhớ đệm hay không.
Mẹo: Đảm bảo rằng bạn có cài đặt nền tảng hoặc máy chủ web mà bạn có thể thay đổi để điều chỉnh thời gian tồn tại của bộ nhớ cache. Nếu bạn không thay đổi hình ảnh thường xuyên, bạn có thể đặt thời gian tồn tại của bộ nhớ cache dài.
6. Đảm bảo tạo chuỗi tải xuống hình ảnh
Google cũng khuyên bạn nên sắp xếp đúng thứ tự các nội dung, bao gồm cả hình ảnh, được tải xuống. Điều này có thể cải thiện hiệu suất của một trang web. Do đó, bạn nên chọn thứ tự tải xuống sau:
Tiêu đề chính, biểu ngữ chính của trang web của bạn, Hình ảnh nằm trước đường gấp, Hình ảnh nằm ngay dưới đường gấp.
Trong phần Cơ hội> Trì hoãn việc tải hình ảnh ra màn hình của báo cáo Thông tin chi tiết về tốc độ trang, bạn có tùy chọn để xác định hình ảnh có thể tải sau các hình ảnh khác.
Để biết thêm chi tiết về lời khuyên của Google, hãy xem toàn bộ video:
