Xoá CSS img:is([sizes=”auto” i], [sizes^=”auto,” i]) khỏi header

Từ phiên bản WordPress phiên bản 6.7 có tên mã “Rollins” đã được phát hành sau khi nâng cấp bạn view-source sẽ thấy thêm đoạn code mới được thêm vào ở header

Đoạn code được thêm vào như sau:

<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>

Mục đích của CSS này

CSS này được áp dụng cho các hình ảnh có thuộc tính sizes="auto", sử dụng thuộc tính contain-intrinsic-size nhằm cải thiện hiệu suất hiển thị hình ảnh. Cụ thể, nó có tác dụng ngăn chặn việc layout bị xáo trộn khi hình ảnh được lazy loading (tải chậm).

Tại sao WordPress 6.7 thêm CSS này?

1. Cải thiện Core Web Vitals: CSS này giúp cải thiện điểm số Cumulative Layout Shift (CLS) – một trong những chỉ số quan trọng của Google.
2. Hỗ trợ responsive images: Thuộc tính sizes="auto" giúp trình duyệt tự động chọn kích thước hình ảnh phù hợp.
3. Tương thích với lazy loading: Ngăn chặn việc layout “nhảy” khi hình ảnh được tải.

Khi nào nên loại bỏ CSS này?

• Khi sử dụng plugin tối ưu hình ảnh: Một số plugin như WP Rocket, Optimole có thể xung đột.
• Website có custom CSS riêng: Nếu bạn đã có hệ thống quản lý kích thước hình ảnh riêng.
• Giao diện theme có xử lý đặc biệt: Một số theme premium đã có cơ chế riêng.

Cách loại bỏ CSS này

Nếu bạn chỉ sử dụng classic editor hoặc không có image nào dùng class kia thì có thể vô hiệu hóa bằng cách thêm đoạn code sau vào file functions.php:

remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );

contain-intrinsic-size được thêm vào WordPress 6.7 rất hữu ích cho các website sử dụng Block editor, nhưng đối với những website chỉ dùng classic editor hoặc đã được tùy chỉnh đặc biệt, việc loại bỏ nó có thể là cần thiết để đảm bảo tính nhất quán trong thiết kế.