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.

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ó.

Loại bỏ dịch chuyển bố cục tích lũy hình ảnh

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.”

Inbound Marketing - Mô hình marketing hiệu quả nhất hiện nay

Inbound Marketing là phương pháp thu hút cả thế giới về phía thương hiệu một cách tự nhiên:

    • Chủ động chiến lược tiếp cận khách hàng từ các kênh có sẵn.
    • Biến khách hàng thành người ủng hộ thương hiệu liên tục.
    • Giúp giải quyết lo lắng và thúc đẩy hành động mua hàng.
    • Mang lại hiệu quả dài hạn, bền vững và thu hồi vốn đầu tư (ROI).
    • Dẫn đầu ngành hàng kinh doanh với nền tảng đa kênh hiệu quả.
    • 115-100 bài viết bán hàng và bài SEO hiệu quả mỗi tháng.
    • 130-500 bài sưu tầm biên tập chuẩn SEO, hút khách mỗi tháng.
    • 100-1.000 từ khóa được SEO tổng thể theo ngành hàng liên tục.
    • Thu hút 3.000 - 100.000 khách truy cập tự nhiên mỗi tháng.
Chỉ từ 6 triệu/tháng

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.

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

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.

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

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.

Nguồn Adsplus

ONESE – Nhà Máy Sản Xuất Nội Dung Chuyển Đổi Bán Hàng & SEO 4.0 – giúp doanh nghiệp bạn tối ưu trang web, sản xuất nội dung và phân phối nội dung lên các kênh truyền thông phù hợp. Chúng ta cùng nhau làm việc để doanh nghiệp của bạn Bán Nhiều Hàng & Tăng Lợi Nhuận với thứ hạng từ khóa được xếp hạng cao và nội dung chuyển đổi mua hàng tăng trưởng liên tục.

ONESE Digital Marketing

Điện thoại028 6292 1313

Emailinfo@onese.vn