Lazy load background images trong website WordPress

Lazy load background images trong website WordPress giúp khắc phục lỗi “Defer offscreen images”.

Trên blog WP Căn bản, tôi đã từng chia sẻ với các bạn rất nhiều bài viết liên quan đến việc lazy load hình ảnh rồi phải không nào? Tuy nhiên, trong một số trường hợp, các plugin tối ưu mã nguồn không thể lazy load được background images (ảnh nền), khiến cho website vẫn bị báo lỗi “Defer offscreen images” (Trì hoãn tải các hình ảnh ngoài màn hình). Mới đây, website WP Shop của tôi cũng đã gặp phải vấn đề tương tự. Plugin LiteSpeed Cache không thể lazy load được background images nằm ở footer. Vậy tôi đã giải quyết nó như thế nào?

Tham khảo thêm:

• Hướng dẫn lazyload hình ảnh với plugin LiteSpeed Cache
• Vô hiệu hóa lazy load hình ảnh mặc định của WordPress

Lazy load background images trong WordPress

1. Đầu tiên, các bạn cần cài đặt và kích hoạt một plugin có tên là LazyLoad Background Images (download).

2. Nếu ảnh nền của bạn được load trong CSS, bạn chỉ cần truy cập Settings => Lazyload Background => chuyển mục Lazyload Background Images sang trạng thái kích hoạt => lưu lại => xóa cache website (nếu có) và kiểm tra kết quả bằng Google PageSpeed Insights.

3. Nếu ảnh nền của bạn không được load bằng CSS, bạn sẽ cần tìm và copy selector của nó bằng cách sử dụng chính báo cáo của Google PageSpeed Insights:

Hoặc copy nó thông qua Google Chrome Developer Tools:

4. Quay trở lại trang cài đặt của plugin LazyLoad Background Images và paste nó vào khung CSS selector. Các bạn có thể chèn cùng lúc nhiều selector, mỗi cái nằm trên một dòng.

Lưu lại => xóa cache website (nếu có) và kiểm tra kết quả bằng Google PageSpeed Insights.

Cũng khá là đơn giản phải không nào? Chúc các bạn thành công!

Một số giải pháp khác

• Nếu bạn đang sử dụng tính năng lazy load hình ảnh của plugin Autoptimize, hãy cài đặt thêm plugin Lazy Optimization (xem chi tiết).
• Nếu bạn đang sử dụng Elementor hoặc Elementor Pro, hãy cài thêm plugin Lazy Load Elementor Background Images (xem chi tiết) hoặc kích hoạt tính năng Lazy Load Background Images trong Elementor => Settings => Features.

• Nếu bạn đang sử dụng plugin Perfmatters để lazy load hình ảnh, hãy kích hoạt thêm tính năng CSS Background Images trong Settings => Perfmatters => Lazy Loading. Các background images trong CSS sẽ mặc định được lazy load. Trong các trường hợp khác, các bạn sẽ cần phải thêm selector của chúng vào khung Background Selectors. Cách làm tương tự như với plugin LazyLoad Background Images.

Bạn biết giải pháp khác đơn giản và hiệu quả hơn để lazy load background images trong WordPress? Đừng quên chia sẻ nó với chúng tôi thông qua khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)