Mẹo tối ưu hóa hình ảnh từ Google

Google chia sẻ sáu cách giúp trang web của bạn tải hình ảnh nhanh hơn và hiệu quả hơn. Trong một video mới từ Google, người ủng hộ nhà phát triển Alan Kent chia sẻ sáu mẹo để tối ưu hóa hình ảnh cho các trang web thương mại điện tử.

Mặc dù video đặc biệt nhắm đến các trang web thương mại điện tử, nhưng lời khuyên có thể áp dụng cho bất kỳ trang web nào cung cấp một số lượng lớn hình ảnh.

Với thời lượng hơn 14 phút, video của Google còn rất nhiều thứ để xem nếu bạn bận làm việc trên các trang web. Dưới đây là một bản tóm tắt hấp dẫn hơn mà bạn có thể sử dụng trong vòng chưa đầy năm phút. Đây là các mẹo của Google để làm cho hình ảnh tải nhanh hơn và hiệu quả hơn.

>> Tham khảo: Cách tạo trang web từ hồ sơ doanh nghiệp trên Google của bạn.

1. Loại bỏ sự thay đổi bố cục tích lũy hình ảnh (CLS)

CLS đề cập đến các trường hợp mà nội dung trên trang di chuyển một cách trực quan hoặc dịch chuyển từ nơi này sang nơi khác khi tải.

Mặc dù sự cố này không chỉ do hình ảnh gây ra nhưng chúng có thể góp phần gây ra sự cố nếu được sử dụng không đúng cách.

Trong hầu hết các trường hợp, CLS có thể dễ dàng phát hiện bằng cách tìm kiếm chuyển động trên trang trong khi tải, nhưng có một số công cụ để đo lường nó.

>> Tham khảo: Nội dung động giúp ích thế nào cho website của bạn?

2. Kích thước chính xác hình ảnh của bạn

Chọn chiều rộng và chiều cao phù hợp cho hình ảnh của bạn, vì các tệp lớn hơn sẽ mất nhiều thời gian để tải xuống hơn.

Định kích thước hình ảnh một cách chính xác có thể phức tạp do phạm vi kích thước và độ phân giải màn hình truy cập trang web của bạn. Đây là một cách tối ưu hóa hình ảnh được sử dụng phổ biến.

Nếu trình duyệt tự cắt hình ảnh, kích thước tải xuống sẽ dài hơn mức cần thiết, điều này chỉ kéo mọi thứ xuống.

Một cách dễ dàng để phát hiện hình ảnh có kích thước không chính xác là sử dụng phần hình ảnh có kích thước phù hợp trong Cơ hội trong báo cáo Thông tin chi tiết về tốc độ trang.

Sau khi xác định được hình ảnh lớn hơn mức cần thiết, bạn có thể khắc phục sự cố bằng các giải pháp như hình ảnh đáp ứng.

3. Sử dụng định dạng tệp hình ảnh tốt nhất

Suy nghĩ về định dạng tệp hình ảnh của bạn, chẳng hạn như sử dụng tệp PNG, JPEG hay webP. Bạn có thể tối ưu định dạng hình ảnh.

Định dạng tệp ảnh hưởng đến kích thước tệp, vì vậy việc chọn đúng định dạng cần phải xem xét cẩn thận.

Có những ưu và khuyết điểm cần cân nhắc cho mỗi định dạng. Ví dụ: JPEG và webP có xu hướng có kích thước tệp thấp hơn, mặc dù kích thước nhỏ hơn đạt được với chi phí chất lượng hình ảnh.

Tuy nhiên, người mua có thể không nhận thấy sự suy giảm chất lượng hình ảnh và lợi ích về tốc độ có thể là đáng kể.

Để phát hiện xem trang web của bạn có được lợi khi sử dụng định dạng hình ảnh khác hay không, hãy xem phần phân phối hình ảnh ở định dạng thế hệ tiếp theo của báo cáo PageSpeed ​​Insights. Báo cáo này liệt kê các hình ảnh có thể được chuyển đổi sang định dạng tệp hiệu quả hơn.

>> Tham khảo: Làm thế nào để cửa sổ pop-up không gây hại cho SEO?

4. Nén hình ảnh thích hợp

Sử dụng hệ số chất lượng phù hợp cho hình ảnh của bạn để mã hóa chúng một cách hiệu quả mà vẫn giữ được chất lượng hình ảnh mong muốn.

Phần Mã hóa hình ảnh hiệu quả của báo cáo Thông tin chi tiết về tốc độ trang có thể được sử dụng để xác định hình ảnh là ứng cử viên tốt cho việc tối ưu hóa nén. Báo cáo cũng cho thấy khả năng tiết kiệm kích thước tệp.

Để tìm ra yếu tố chất lượng mà bạn hài lòng, hãy sử dụng công cụ chuyển đổi hình ảnh mà bạn lựa chọn trên một số hình ảnh bằng cách sử dụng các giá trị chất lượng khác nhau và so sánh trước và sau.

Google đề xuất trang web Squoosh.app như một cách dễ dàng để so sánh hình ảnh có và không có nén.

5. Bộ nhớ đệm hình ảnh trong trình duyệt

Cho trình duyệt biết trình duyệt có thể lưu hình ảnh một cách an toàn trong bao lâu.

Khi bạn trả lại một hình ảnh, bạn có thể trả lại tiêu đề phản hồi HTTP với hướng dẫn lưu vào bộ nhớ đệm, chẳng hạn như thời gian nên trình duyệt lưu vào bộ nhớ cache của một hình ảnh.

Một lần nữa, bạn có thể sử dụng báo cáo PageSpeed ​​Insights để phát hiện xem tiêu đề bộ đệm ẩn phản hồi HTTP đã được đặt đúng cách trên trang web của bạn chưa.

Nội dung tĩnh phục vụ với phần chính sách bộ nhớ cache hiệu quả xác định các hình ảnh có thể được hưởng lợi từ các cải tiến trong bộ nhớ đệm.

Để khắc phục sự cố trên trang web của bạn, hãy xem liệu 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 cho hình ảnh trên trang web của bạn hay không.

Nếu bạn không thay đổi hình ảnh thường xuyên thì bạn có thể đặt thời gian tồn tại của bộ nhớ cache dài.

>> Tham khảo: LinkedIn thay đổi cách xếp hạng nội dung.

6. Trình tự chính xác các lần tải xuống hình ảnh của bạn

Là một mẹo nâng cao hơn, Google khuyên bạn nên sắp xếp đúng thứ tự các tài nguyên trang web được tải xuống.

Thứ tự tải xuống sau được khuyên:

Hình ảnh anh hùng ở đầu trang
Các hình ảnh khác trong màn hình đầu tiên
Hình ảnh ngay dưới màn hình đầu tiên
Phần còn lại của hình ảnh trên trang web có thể được tải chậm.

Để phát hiện xem trang web của bạn có tải hình ảnh hiệu quả hay không, bạn có thể tham khảo báo cáo PageSpeed ​​Insights. Trong phần trì hoãn hình ảnh ngoài màn hình của báo cáo, bạn sẽ thấy danh sách các hình ảnh có thể được tải sau các hình ảnh khác.