Tối Ưu Tốc Độ Website Lazy Load Ảnh Nền WordPress

Tối ưu hóa ảnh nền với Lazy Load trong WordPress

Lazy Load giúp trì hoãn việc tải hình ảnh cho đến khi người dùng cuộn đến vị trí của chúng trên trang. Điều này giúp cải thiện tốc độ tải trang và khắc phục lỗi “Defer offscreen images” khi kiểm tra hiệu suất với Google PageSpeed Insights. Tuy nhiên, nhiều plugin tối ưu hóa thông thường không hỗ trợ lazy load cho ảnh nền được đặt trong CSS, dẫn đến trang web vẫn bị báo lỗi.

Xem thêm: Hướng dẫn cách vô hiệu hóa WooCommerce Brands để tăng tốc độ

Cách kích hoạt Lazy Load cho ảnh nền

Sử dụng Plugin LazyLoad Background Images

Một trong những giải pháp đơn giản nhất là sử dụng plugin LazyLoad Background Images. Sau khi cài đặt và kích hoạt, bạn có thể làm như sau:

• Truy cập Settings -> Lazyload Background
• Bật tùy chọn Lazyload Background Images
• Lưu thay đổi và xóa bộ nhớ đệm (cache) của trang web
• Kiểm tra lại bằng công cụ Google PageSpeed Insights để xem kết quả

Xác định và thêm Selector nếu cần

Nếu ảnh nền không tự động được lazy load, bạn cần xác định chính xác phần tử chứa ảnh bằng cách:

• Sử dụng Google PageSpeed Insights để tìm selector bị ảnh hưởng

• Hoặc dùng công cụ Google Chrome Developer Tools để sao chép selector

Sau đó, quay lại cài đặt plugin LazyLoad Background Images và thêm selector vào mục CSS Selector. Mỗi selector cần đặt trên một dòng riêng biệt.

Các giải pháp thay thế khác

Sử dụng Autoptimize và Lazy Optimization

Nếu bạn đang dùng plugin Autoptimize, có thể cài đặt thêm Lazy Optimization để bổ sung khả năng lazy load cho ảnh nền.

Kích hoạt tính năng Lazy Load trong Elementor

Nếu website của bạn sử dụng Elementor, bạn có thể kích hoạt tùy chọn Lazy Load Background Images trong:
Elementor -> Settings -> Features để giảm thời gian tải trang.

Lazy Load ảnh nền với Perfmatters

Với plugin Perfmatters, bạn có thể bật tính năng lazy load cho ảnh nền bằng cách:

• Truy cập Settings -> Perfmatters -> Lazy Loading
• Kích hoạt tùy chọn CSS Background Images
• Nếu cần, thêm các selector ảnh nền vào mục Background Selectors

Kết luận

Việc tối ưu hóa hình ảnh nền bằng Lazy Load giúp cải thiện tốc độ tải trang và tối ưu trải nghiệm người dùng. Tùy vào cách trang web hiển thị ảnh nền, bạn có thể sử dụng plugin phù hợp hoặc thiết lập thủ công bằng cách thêm selector. Nếu bạn có giải pháp nào khác tối ưu hơn, hãy chia sẻ để cùng thảo luận!