Hình ảnh – 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.
1. Loại bỏ dịch chuyển 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ả
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ó. Để biết thêm về CLS, cách đo lường và cách khắc phục, hãy xem hướng dẫn toàn diện của chúng tôi:
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.
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. Đị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 Thông tin chi tiết về tốc độ trang. 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.
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. Cache 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 một 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 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 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.
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.
Xem thêm:
9 Thói quen ăn uống để giảm mỡ bụng ở mọi lứa tuổi
10 sản phẩm Bác sĩ da liễu nói rằng bạn cần bổ sung vào quy trình chăm sóc da cho mùa hè