Loại bỏ tài nguyên chặn hiển thị (CSS và JavaScript)

Dev Pro · Lúc 14:31:35

Tài nguyên chặn hiển thị là những file quan trọng nhưng làm chậm việc hiển thị nội dung trang, ảnh hưởng đến các chỉ số Core Web Vitals như Largest Contentful Paint. Bài viết này giải thích những file nào gây chặn, cách phát hiện và các biện pháp để giảm thiểu tác động của chúng.

Render-blocking resources là gì?

Tài nguyên chặn hiển thị là các file hoặc script khiến trình duyệt phải chờ cho đến khi chúng được tải xong trước khi hiển thị nội dung trang. Mặc dù trình duyệt có thể yêu cầu hàng chục hoặc hàng trăm tài nguyên, chỉ một vài file quan trọng mới thực sự chặn việc render hoàn toàn.

Các loại file thường gây chặn

CSS stylesheets (đặc biệt khi được tham chiếu trong <head>)
JavaScript tải đồng bộ (scrips không dùng async hoặc defer)

Các file phổ biến nhưng không luôn chặn toàn bộ render

Hình ảnh và video: không chặn toàn bộ nhưng có thể ảnh hưởng phần tử cụ thể
Web fonts: có thể trì hoãn hiển thị chữ nếu font chưa tải
Widget JavaScript: nội dung widget chỉ xuất hiện sau khi script chạy

Tại sao vấn đề này quan trọng?

Các tài nguyên chặn kéo dài các mốc hiển thị như First Contentful Paint (FCP) và Largest Contentful Paint (LCP). Vì LCP là chỉ số Core Web Vitals quan trọng cho SEO, bạn cần tối ưu để LCP xảy ra càng sớm càng tốt. Google đánh giá trải nghiệm người dùng trên diện rộng, cần ít nhất 75% người dùng có trải nghiệm tốt để tránh bị ảnh hưởng thứ hạng tìm kiếm.

Yếu tố quyết định mức độ ảnh hưởng

Vị trí của tài nguyên trong HTML (head vs body)
Chuỗi yêu cầu: khi một tài nguyên chặn lại kéo theo yêu cầu chặn khác
Thời gian thiết lập kết nối tới host khác (ví dụ fonts.googleapis.com sẽ chậm hơn nếu cần kết nối mới)
Tốc độ phản hồi máy chủ (Time to First Byte) cũng ảnh hưởng tổng thời gian tải

Chuỗi request chặn (request chain)

Khi một file chặn tải tiếp file khác (ví dụ CSS dùng @import), chuỗi sẽ kéo dài và làm chậm render hơn. Càng nhiều liên kết trong chuỗi thì tác động càng lớn.

Vị trí của script trong HTML

Scripts và styles ở trong <head> nếu tải đồng bộ thường chặn render hoàn toàn. Scripts trong body có thể được đánh dấu là parser-blocking; nếu ở cuối body thường không chặn, nhưng nếu ở đầu body thì vẫn có thể chặn render.

Công cụ phát hiện tài nguyên chặn

DebugBear: hiển thị request waterfall và đánh dấu tài nguyên chặn
WebPageTest: hiển thị request waterfall và badge đánh dấu
Chrome DevTools: performance profile với các request có ô màu đỏ cho thấy render-blocking
PageSpeed Insights / Lighthouse: có audit "Eliminate render-blocking resources" (cần kiểm tra thêm vì Lighthouse đôi khi bỏ sót)

Cách xử lý và tối ưu

JavaScript

Sử dụng async để tải không chặn và chạy khi sẵn sàng (không bảo đảm thứ tự chạy)
Sử dụng defer để tải không chặn và chạy sau khi parser hoàn thành (giữ thứ tự)
Di chuyển script không cần thiết xuống cuối <body>

[*]CSS

Inline critical CSS (phần CSS cần thiết để vẽ phần nhìn thấy đầu tiên)
Gộp và tối giản CSS, tránh dùng @import
Sử dụng preload hoặc prefetch cho stylesheet quan trọng nếu phù hợp

[*]Fonts

Sử dụng font-display để tránh chặn hiển thị văn bản
Preconnect đến domain font để giảm thời gian thiết lập kết nối

[*]Giảm chuỗi yêu cầu: tránh tải tài nguyên chồng chéo qua các @import hoặc host khác không cần thiết
[*]Tối ưu server: rút ngắn Time to First Byte nếu trang phản hồi chậm dù ít tài nguyên chặn

Lưu ý cho WordPress

Nhiều plugin và theme có thể thêm script hoặc stylesheet tự động. Kiểm tra và áp dụng async/defer, kết hợp stylesheet, hoặc inline critical CSS để cải thiện. Có các hướng dẫn riêng cho WordPress để loại bỏ tài nguyên chặn.

Kết luận

Xác định và tối ưu các tài nguyên chặn hiển thị là bước quan trọng để cải thiện FCP, LCP và trải nghiệm người dùng, từ đó giúp SEO tốt hơn. Dùng công cụ phù hợp để phát hiện, rồi áp dụng async/defer, inline critical CSS, preload/preconnect, và giảm chuỗi request để giải quyết vấn đề.

Nguồn: https://www.debugbear.com/blog/render-blocking-resources