Hướng dẫn cách loại bỏ Auto Sizes CSS trên WordPress 6.7

Giới Thiệu Về Auto Sizes CSS Trên WordPress 6.7

Từ phiên bản WordPress 6.7, một đoạn mã CSS inline đã được tích hợp vào mã nguồn HTML của website, với mục tiêu hỗ trợ tính năng lazy load cho hình ảnh. Tính năng này giúp giảm thời gian tải trang bằng cách chỉ tải các hình ảnh khi người dùng cuộn đến vị trí chứa hình ảnh đó. Tuy nhiên, trong một số trường hợp, mã CSS này có thể gây ra sự cố về kích thước hình ảnh, khiến chúng không hiển thị đúng. Nếu bạn không sử dụng tính năng lazy load của WordPress, hoặc thay thế bằng giải pháp khác từ theme hoặc plugin, đoạn mã này trở nên không cần thiết và có thể gây ra vấn đề về hiệu suất hoặc giao diện.

Auto Sizes CSS Là Gì?

Khi kiểm tra mã nguồn HTML của website sử dụng WordPress 6.7 hoặc phiên bản mới hơn, bạn sẽ thấy một đoạn mã CSS inline xuất hiện trong phần đầu của mã nguồn. Đây chính là đoạn mã Auto Sizes CSS được thêm vào tự động để hỗ trợ lazy load. Tuy nhiên, nếu bạn không cần tính năng này hoặc đang sử dụng phương pháp lazy load khác, đoạn mã này trở thành thừa thãi và có thể ảnh hưởng đến chất lượng hiển thị hình ảnh trên website.

Cách Loại Bỏ Auto Sizes CSS

Nếu bạn gặp phải vấn đề về kích thước hình ảnh không chính xác hoặc không sử dụng tính năng lazy load của WordPress, bạn có thể dễ dàng loại bỏ Auto Sizes CSS mà không ảnh hưởng đến các chức năng khác của website. Sau đây là cách thực hiện:

Đối Với Theme Paradise

1. Cập nhật theme Paradise lên phiên bản 6.8.6 hoặc mới hơn nếu bạn chưa thực hiện.
2. Truy cập Giao diện => Tùy biến => Thiết lập giao diện => Tối ưu tốc độ.
3. Tại mục “Loại bỏ Auto Sizes CSS”, bật chức năng này lên bằng cách chuyển sang trạng thái Có, sau đó lưu lại thay đổi.

Đối Với Các Theme Khác

Nếu bạn đang sử dụng một theme khác ngoài Paradise, bạn có thể thực hiện theo các bước sau để loại bỏ Auto Sizes CSS. Thêm đoạn mã sau vào file functions.php của theme hoặc child theme mà bạn đang sử dụng. Để đảm bảo đoạn mã này không bị mất đi khi theme được cập nhật, bạn có thể sử dụng plugin Code Snippets để chèn mã này vào.

Sau khi chèn mã, nhớ xóa bộ nhớ cache của website nếu có và kiểm tra lại mã nguồn HTML. Bạn sẽ thấy rằng đoạn mã Auto Sizes CSS không còn xuất hiện nữa, giúp hình ảnh hiển thị đúng kích thước và cải thiện hiệu suất của trang.

Lợi Ích Khi Loại Bỏ Auto Sizes CSS

Việc loại bỏ Auto Sizes CSS không chỉ giúp giải quyết các vấn đề về hiển thị hình ảnh sai kích thước mà còn giúp tối ưu hóa website, giảm thiểu mã thừa và tăng tốc độ tải trang. Đây là một bước quan trọng nếu bạn không sử dụng lazy load mặc định của WordPress và muốn đảm bảo hình ảnh của mình hiển thị chính xác nhất.

Kết Luận

Loại bỏ Auto Sizes CSS trên WordPress 6.7 và các phiên bản mới cực kỳ đơn giản và mang lại hiệu quả rõ rệt cho website của bạn. Nếu bạn không cần tính năng lazy load của WordPress hoặc đang sử dụng giải pháp khác, việc loại bỏ đoạn mã này sẽ giúp bạn giải quyết vấn đề về kích thước hình ảnh và tối ưu hiệu suất website.

Hy vọng bài viết này sẽ giúp bạn dễ dàng thực hiện các thay đổi cần thiết. Nếu bạn thấy thông tin hữu ích, đừng quên theo dõi blog của tôi để cập nhật thêm nhiều bài viết bổ ích khác về WordPress. Cảm ơn bạn đã đọc!