Các nội dung chính
Google chia sẻ 6 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, Alan Kent đã chia sẻ 6 mẹo giúp 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ử. Tuy nhiên, 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 5 phút.
Đây là các mẹo của Google giúp tối ưu hóa hình ảnh có thể tải nhanh hơn và hiệu quả hơn.
Xem thêm:
- Cách sử dụng Google Analytics để kiểm tra mạng xã hội
- Cách quản lý các bài đánh giá trên Google cho nhiều địa điểm
1. Loại bỏ dịch chuyển bố cục tích lũy hình ảnh – Cumulative Layout Shift (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. Tuy nhiên, chúng có thể sẽ 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. Tuy nhiên, bạn có thể sử dụng một số công cụ để đo lường nó.
2. Kích thước chính xác cho 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ì vậy 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 trong một vài trường hợp. Có thể là 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. Việc này sẽ khiến cho hình ảnh nặng hơn.
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 ở “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 của bạn. 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. Hãy nhớ rằng kích thước nhỏ hơn sẽ ảnh hưởng đến chất lượng hình ảnh.
Tuy nhiên, người xem có thể không nhận thấy sự suy giảm chất lượng hình ảnh. Do đó, lợi ích về tốc độ có thể là đáng kể với bạn.
Để phát hiện xem website của bạn có được lợi khi sử dụng định dạng hình ảnh khác hay không. Bạn 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. Công cụ này giúp bạn xác định hình ảnh là ứng cử viên tốt cho việc tối ưu hóa nén hình ảnh trên Google. 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ạn có thể 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
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. Ví dụ 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. Để từ đây có thể 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 liên quan đến hình ảnh. 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. Lúc này 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.
Adsplus.vn
Cảm ơn bạn đã xem bài viết này. Hãy cập nhật thêm các bài viết từ Adsplus để biết thêm những thông tin mới nhất về Google. Và các Tips chạy quảng cáo hiệu quả.
- Tham khảo các khóa học Google Ads, Facebook Ads tại guru.edu.vn
- Tham khảo các gói setup tài khoản quảng cáo Google Ads, Facebook Ads tại 1ad.vn
