Cách trì hoãn hình ảnh ngoài màn hình trong WordPress

Chúng ta đều biết rằng tốc độ rất quan trọng đối với SEO và chuyển đổi. Việc tạo một trang web nhanh có thể giúp trang web đó xếp hạng cao hơn trên Google. Và nó cũng có thể làm cho độc giả của bạn hài lòng. Ai mà không thích một trang web nhanh chứ?

Nhưng khi cố gắng tối ưu hóa tốc độ của một trang web, có thể mất nhiều thời gian vì có quá nhiều việc phải làm. Tôi thường thử kiểm tra trang web của mình và đảm bảo rằng nó không hoạt động kém. Bạn không bao giờ biết có gì mới ngoài kia. Trong thế giới SEO, mọi thứ thay đổi rất thường xuyên.

Nếu bạn đã kiểm tra tốc độ trang web của mình bằng các công cụ như Google PageSpeed ​​Insight hoặc Web.dev, một trong những cảnh báo bạn có thể nhận được là "trì hoãn hiển thị hình ảnh ngoài màn hình".

Trong bài viết này, tôi sẽ giải thích điều đó có nghĩa là gì, hướng dẫn bạn cách khắc phục và đề xuất các plugin bạn có thể sử dụng để khắc phục.

Tuy nhiên, bạn nên biết rằng mặc dù việc trì hoãn hiển thị hình ảnh ngoài màn hình có thể tăng tốc độ tải trang trên thiết bị di động, nhưng các yếu tố quan trọng nhất ảnh hưởng đến tốc độ lại chính là dịch vụ lưu trữ và giao diện (theme) của bạn. Tại BloggingTools, chúng tôi sử dụng Cloudways vì đây là dịch vụ lưu trữ WordPress nhanh nhất. Nếu bạn không đủ điều kiện sử dụng Cloudways, thì Bluehost hoặc Hostinger là những lựa chọn tốt. Về giao diện, chúng tôi sử dụng giao diện WordPress nhanh nhất có tên là GeneratePress.

Trì hoãn hình ảnh ngoài màn hình có nghĩa là gì?

Trì hoãn hình ảnh ngoài màn hình có nghĩa là trì hoãn việc tải hình ảnh mà người dùng chưa nhìn thấy. Điều này sẽ khiến trình duyệt tập trung vào việc chỉ tải những gì cần thiết và cuối cùng làm cho trang web nhanh hơn.

Nếu bạn có nhiều hình ảnh trên bài đăng hoặc trang chủ, khi người dùng truy cập trang web của bạn, trình duyệt sẽ ngay lập tức bắt đầu tải mọi thứ. Nếu có nhiều hình ảnh, có thể mất nhiều thời gian để hiển thị trang cho người dùng.

Nhưng khi bạn trì hoãn hình ảnh ngoài màn hình, hình ảnh sẽ chỉ tải khi người dùng cuộn đến hình ảnh đó.

Lưu ý rằng bạn không chỉ có thể hoãn hình ảnh mà hầu hết các nội dung trên trang web của bạn cũng có thể được hoãn lại cho đến khi cần đến.

Cách trì hoãn hình ảnh ngoài màn hình trong WordPress

Bạn có thể trì hoãn hình ảnh ngoài màn hình bằng cách tải hình ảnh một cách lười biếng. Tải chậm sẽ đảm bảo rằng hình ảnh sẽ chỉ tải khi cần thiết. Điều này sẽ làm cho trang web nhanh hơn.

Khi bạn có thể tải chậm hình ảnh và các tài sản khác đang ngăn trang của bạn tải nhanh. "Trì hoãn hình ảnh ngoài màn hình" từ Google PageSpeed ​​Insight và các công cụ kiểm tra khác sẽ biến mất.

Thực hiện theo các bước sau để trì hoãn hình ảnh ngoài màn hình trong WordPress:

1. Cài đặt plugin Lazy loading

Có nhiều plugin lazy loading miễn phí trong thư mục plugin WordPress. Bạn có thể vào Plugin, thêm mới rồi nhập lazy loading. Cài đặt bất kỳ plugin nào có đánh giá tốt.

Nhưng bạn không cần cài đặt bất kỳ plugin nào nếu bạn đã có plugin có thể xử lý tải chậm. Hầu hết các plugin lưu trữ đệm đều có tải chậm. Kiểm tra plugin lưu trữ đệm của bạn để biết tùy chọn tải chậm. Các plugin tối ưu hóa hình ảnh chủ yếu có tùy chọn tải chậm.

Ngoài ra, nếu bạn sử dụng Jetpack và tự động tối ưu hóa, họ có tùy chọn tải chậm.

2. Kích hoạt tùy chọn tải chậm

Sau khi cài đặt plugin, hãy đảm bảo rằng bạn kích hoạt tùy chọn tải chậm. Nếu bạn có plugin bộ nhớ đệm có chức năng tải chậm, hãy đảm bảo rằng bạn kích hoạt tùy chọn đó.

3. Xóa bộ nhớ đệm.

Sau khi tính năng tải chậm được kích hoạt, hãy xóa bộ nhớ đệm và thế là xong!

Bạn có thể kiểm tra lại trang web của mình, cảnh báo sẽ biến mất!

Plugin WordPress hoãn hình ảnh ngoài màn hình

Các plugin Defer offsreen images cũng giống như các plugin lazy loading. Dưới đây là một số plugin:

1. jetpack

Jetpack là một trong những plugin WordPress phổ biến nhất với hơn 5 triệu lượt cài đặt đang hoạt động. Nếu bạn đã cài đặt Jetpack, bạn không cần cài đặt thêm plugin nào khác để hỗ trợ tải chậm (lazy loading).

Chỉ cần kích hoạt tải chậm trong Jetpack. Để kích hoạt, hãy vào cài đặt Jetpack sau đó trong tab hiệu suất, cuộn xuống và bật tải chậm.

2. Tự động tối ưu hóa

Autoptimize là một plugin tối ưu hiệu năng rất phổ biến. Nếu bạn đang sử dụng Autoptimize, bạn không cần cài đặt thêm plugin tải chậm (lazy loading) vì Autoptimize đã có tính năng tương tự.

Vào cài đặt Tự động tối ưu hóa rồi nhấp vào tab hình ảnh và bật Tải chậm.

3. WP Rocket

WP Rocket là plugin bộ nhớ đệm WordPress cao cấp phổ biến nhất. Nếu bạn sử dụng WP Rocket, bạn không cần bất kỳ plugin nào khác, vì nó đã hỗ trợ tải chậm (lazy loading).

Vào cài đặt WP Rocket rồi nhấp vào phương tiện, từ đó bạn có thể bật tính năng tải chậm.

4. LiteSpeed ​​Cache

Nếu bạn đang sử dụng plugin LiteSpeed ​​Cache , nó có tính năng tải chậm (lazy loading). Để kích hoạt, chỉ cần điều hướng đến phần media, và ở đó bạn có thể bật tính năng tải chậm.

5. a3 Tải Lười

Nếu bạn chỉ cần một plugin để tải chậm (lazy loading) thì a3 Lazy Load là một lựa chọn tốt. Chỉ cần vào Plugin > Thêm mới. Tìm kiếm a3 Lazy Load. Cài đặt và kích hoạt. Sau đó vào cài đặt plugin và kích hoạt tính năng tải chậm.

Nói chung, một số chủ đề, một số plugin bộ nhớ đệm và một số plugin tối ưu hóa hình ảnh đều có tính năng tải chậm.

Những câu hỏi thường gặp (FAQs)