Bạn vừa kiểm tra website trên Google PageSpeed Insights và nhận được dòng cảnh báo đỏ rực: “Loại bỏ các tài nguyên chặn hiển thị” (Eliminate render-blocking resources). Điểm hiệu suất tụt dốc, thời gian tải trang chậm chạp và bạn lo lắng điều này sẽ ảnh hưởng trực tiếp đến thứ hạng SEO cũng như doanh thu bán hàng?
Đừng hoảng loạn. Đây là một trong những lỗi kỹ thuật phổ biến nhất mà hầu hết các website doanh nghiệp tại Việt Nam đều gặp phải. Vấn đề nằm ở chỗ trình duyệt bị buộc phải dừng lại để tải và xử lý các tệp tin CSS hoặc JavaScript trước khi hiển thị nội dung cho người dùng. Nó giống như việc bạn đi vào cao tốc nhưng bị chặn lại ở trạm thu phí quá lâu.
Trong bài viết này, đội ngũ kỹ thuật tại Xuyên Việt Media sẽ hướng dẫn bạn tường tận cách loại bỏ các tài nguyên chặn hiển thị. Chúng ta sẽ đi từ bản chất vấn đề đến các giải pháp thực chiến cho cả website code tay và WordPress. Mục tiêu là biến website của bạn trở nên nhanh, mượt và thân thiện với Google.
Tài nguyên chặn hiển thị là gì?
Để hiểu rõ cách xử lý, trước tiên bạn cần nắm được cơ chế hoạt động của trình duyệt. Khi người dùng truy cập website, trình duyệt sẽ đọc mã nguồn HTML từ trên xuống dưới. Trong quá trình này, nếu nó gặp các tệp tin bên ngoài như CSS (định dạng giao diện) hoặc JavaScript (tính năng động), nó sẽ dừng việc hiển thị nội dung lại (render) để tải và thực thi các tệp tin đó xong xuôi.
Những tệp tin khiến trình duyệt phải chờ đợi đó chính là tài nguyên chặn hiển thị. Chúng bao gồm:
- CSS: Các file style sheet không quan trọng nhưng được tải ngay đầu trang.
- JavaScript: Các đoạn mã kịch bản đặt trong thẻ head mà không có thuộc tính trì hoãn.
- Font chữ: Web fonts tải từ bên thứ ba.
Về mặt trải nghiệm người dùng, điều này gây ra hiện tượng màn hình trắng trong vài giây đầu truy cập. Về mặt chỉ số Core Web Vitals, nó ảnh hưởng nghiêm trọng đến chỉ số LCP (Largest Contentful Paint).
Có thể bạn quan tâm
Tại sao cần loại bỏ tài nguyên chặn hiển thị ngay lập tức?
Trong các dự án tư vấn SEO tại Xuyên Việt Media, chúng tôi luôn nhấn mạnh rằng tốc độ là tiền bạc. Việc tối ưu hóa vấn đề này mang lại ba lợi ích cốt lõi:
- Cải thiện tốc độ tải trang: Giúp nội dung quan trọng nhất (Above the fold) hiển thị gần như tức thì.
- Tăng điểm PageSpeed Insights: Google đánh giá cao các website có điểm hiệu suất tốt, từ đó ưu tiên xếp hạng SEO.
- Nâng cao trải nghiệm người dùng: Khách hàng không đủ kiên nhẫn chờ quá 3 giây. Website mượt mà giữ chân họ lâu hơn và tăng tỷ lệ chuyển đổi.
Cách xác định tài nguyên gây chậm website
Công cụ chính xác nhất để bắt bệnh chính là Google PageSpeed Insights. Bạn chỉ cần nhập URL website và chờ phân tích. Nếu website gặp vấn đề, mục “Cơ hội” sẽ liệt kê chi tiết các tệp tin URL đang chặn hiển thị.
Thông thường, danh sách này sẽ chỉ điểm các file có đuôi .css và .js. Nhiệm vụ của chúng ta không phải là xóa bỏ chúng (vì website sẽ vỡ giao diện hoặc mất tính năng), mà là thay đổi cách chúng được tải để không làm gián đoạn việc hiển thị nội dung.
Xác định tài nguyên chặn hiển thị bằng Google PageSpeed Insights
Sự có mặt của tài nguyên chặn hiển thị trên trang Web quả thật là “vô nghĩa” đúng không nào? Chíng vì thế, việc của bạn lúc này là hãy nhanh chóng xóa nó ra khỏi website của mình nhé, và tất nhiên trước khi xóa bạn cần xác định rõ Website có tài nguyên chặn hiển thị đang tồn tại hay không.
Cách xác định khá đơn giản, bạn hãy sử dụng công cụ Google Pagespeed Insight. Sau đó nhập URL muốn kiểm tra vào và nhấn Analyze để nhận kết quả.
Bạn sẽ xác định được tài nguyên chặn hiển thị thông qua điểm số mà Google đánh giá từ 0 -100, số càng thấp tốc độ càng chậm và ngược lại.
- Các trang web được đánh giá dưới 50 điểm cần được tối ưu khá nhiều.
- Những trang web từ 50 – 80 điểm nằm ở mức trung bình và chỉ cần tối ưu hóa một vài chỗ.
- Và từ 80 điểm trở lên tức website của bạn đã được đánh giá cao, không mắc lỗi và có thể hoạt động tốt.
Những cách loại bỏ các tài nguyên chặn hiển thị nhanh nhất
Sau khi xác định được tài nguyên chặn hiển thị, bạn cần tiến hành xử lý ngay để cải thiện tốc độ cho trang Web. Vậy cách loại bỏ tài nguyên chặn hiển thị như thế nào? Bạn có thể tham khảo một số cách xóa tài nguyên chặn hiển thị trên web như sau:
Khai báo sự hiện diện của file CSS bằng thuộc tính meta
Các file CSS thông thường được các trình duyệt xem là các tài nguyên chặn hiển thị. Tuy nhiên nếu bạn muốn thêm thuộc tính media vào thẻ thì có thể thông báo cho trình duyệt về sự hiện diện của file CSS.
Trong một vài trường hợp nhất định như cao hơn hoặc thấp hơn kích thước viewport thì file CSS mới được sử dụng (thẻ viewport – có nhiệm vụ cho biết kích thước website hiển thị trên từng thiết bị như thế nào)
Không sử dụng thẻ CSS theo quy luật @import
Việc sử dụng cú pháp @import sẽ giúp cho các file HTML gọn gàng hơn nhưng đối với việc trình bày và hiển thị thì đây không phải là một lựa chọn tốt nhất.
Thêm thẻ CSS sẽ khiến cho trình duyệt file CSS chậm hơn bởi nó phải tải hết tất các file được nhập vào do theo quy luật @import bạn nhập file CSS từ các stylesheet khác nhau. Khiến cho quá trình hiển thị bị chặn lại cho đến khi quá trinh này diễn ra.
Nếu bạn muốn giảm tốc độ tải trang thì nên thêm yếu tố vào thẻ page HTML thay vì thêm thẻ CSS theo quy luật @import.
Nén hoặc gộp tất cả các file có chứa tài nguyên chặn hiển thị
Song song cùng 2 cách trên đây, bạn có thể xóa những tài nguyên chặn hiển thị trên trang bằng việc dùng công cụ gộp file. Một số công cụ hỗ trợ nén/gộp file như sau:
- Post CSS: Đây là một công cụ cung cấp giao diện tuyệt vời cho phép các công cụ để xử lý và tối ưu hóa CSS, hỗ trợ biến và Mixins.
- CSS Minifier: Là một công cụ đơn giản cho phép bạn nén và rút gọn cho các tệp JS,CC lên 80% so với kích thước ban đầu.
- Minify code: Đây là các file code đã nén – min, làm giảm tối đa dung lượng thừa bằng cách loại bỏ những khoảng trắng giữa các ký tự trống, đoạn ghi chú trong tập tin, gỡ bỏ các ký tự không cần thiết cho trang web.
Sử dụng plugin để xóa các tài nguyên chặn hiển thị trên Web
Dùng Plugin W3 Total Cache
Để có thể loại bỏ các tài nguyên chặn hiển thị trên web theo cách này, bạn cần phải cài đặt và kích hoạt plugin W3 Total Cache và thực hiện theo các bước sau đây:
- Bước 1. Vào Performance tiếp tục chọn General Settings và kéo xuống mục Minify
- Bước 2. Click vào Enable, sau đó chọn tiếp Manual (trong phần Minify Mode)
- Bước 3. Bấm Save all setting để lưu lại cài đặt của bạn
- Bước 4. Chọn tiếp Performance và nhấp Minify (trong menu dashboard)
- Bước 5. Sau các bước thiết lập trên chúng ta sẽ đến giai đoạn xóa Javascript, mở menu Embed Type (trong Operations is areas) và chọn Non-blocking using “defer”.
- Bước 6. Trong mục JS file management, trong menu theme và chọn theme mà bạn đang sử dụng.
- Bước 7. Kiểm tra lại hiệu suất của trang bằng PageSpeed, nhấn vào Add script rồi dán toàn bộ URL đã được sao chép từ công cụ PageSpeed Insight vào file URI.
- Bước 8. Click vào Save settings and purge cache để lưu lại thiết lập của bạn.
Dùng plugin Autoptimize
Đây là một plugin miễn phí giúp bạn loại bỏ được các javascript và CSS chặn hiển thị trên WordPress và hoạt động bằng cách tổng hợp file, giảm bớt lượng code cải thiện được tốc độ tải của website. Cách loại bỏ tài nguyên chặn hiển thị bằng plugin Autoptimize như sau
- Bước 1. Vào Settings, sau đó chọn Autoptimize (trong phần dashboard WordPress)
- Bước 2. Đánh dấu check vào Optimize JavaScript code và đừng quên bỏ check Aggregate JS-files? trong phần Javascript Options nhé
- Bước 3. Tích vào Optimize CSS code và bỏ tích Aggregate CSS-files? ở CSS Options
- Bước 4. Ở phần cuối trang, click vào Save change và Empty Cache
- Bước 5. Xác định lại hiệu suất của trang thông qua đánh giá của Google PageSpeed Insight
Chiến lược xử lý CSS chặn hiển thị
CSS là yếu tố quyết định giao diện đẹp xấu của website. Tuy nhiên, trình duyệt mặc định coi CSS là tài nguyên chặn hiển thị. Dưới đây là các phương pháp kỹ thuật để xử lý:
1. Sử dụng Inline Critical CSS
Nguyên lý của phương pháp này là tách CSS thành hai phần:
- Critical CSS (CSS quan trọng): Là những đoạn mã cần thiết để hiển thị phần nội dung đầu tiên mà người dùng nhìn thấy (màn hình đầu tiên). Bạn nên nhúng trực tiếp (inline) đoạn mã này vào thẻ
<style>trong phần<head>của HTML. - Non-critical CSS (CSS không quan trọng): Phần còn lại của giao diện (footer, các phần dưới trang). Phần này nên được tải sau.
Việc này giúp trình duyệt có ngay định dạng để hiển thị màn hình đầu tiên mà không cần chờ tải file CSS bên ngoài.
2. Trì hoãn tải CSS không quan trọng
Với các file CSS không cần thiết cho màn hình đầu tiên, chúng ta cần hướng dẫn trình duyệt tải chúng sau khi nội dung đã hiển thị. Kỹ thuật phổ biến là sử dụng thuộc tính rel="preload" kết hợp với sự kiện onload.
Ví dụ đoạn mã kỹ thuật:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
Đoạn mã này yêu cầu trình duyệt tải file CSS ở chế độ nền (không chặn hiển thị) và chỉ áp dụng nó khi đã tải xong.
Chiến lược xử lý JavaScript chặn hiển thị
JavaScript thường nặng hơn CSS và thời gian xử lý cũng lâu hơn. Để thực hiện cách loại bỏ các tài nguyên chặn hiển thị đối với JS, bạn cần nắm vững hai thuộc tính: Async và Defer.
1. Sử dụng thuộc tính Defer (Khuyên dùng)
Khi bạn thêm thuộc tính defer vào thẻ script, trình duyệt sẽ tải file JS song song với quá trình phân tích HTML, nhưng sẽ chỉ thực thi file JS đó sau khi HTML đã được phân tích xong toàn bộ.
Đây là giải pháp an toàn nhất vì nó đảm bảo thứ tự thực thi của các đoạn mã và không làm gián đoạn quá trình hiển thị giao diện.
2. Sử dụng thuộc tính Async
Thuộc tính async cũng cho phép tải song song. Tuy nhiên, ngay khi tải xong, trình duyệt sẽ dừng HTML lại để thực thi JS ngay lập tức. Cách này phù hợp với các đoạn script độc lập như Google Analytics hay Facebook Pixel, nhưng ít dùng cho các file JS cấu trúc giao diện vì có thể gây lỗi hiển thị.
Hướng dẫn loại bỏ tài nguyên chặn hiển thị trên WordPress
Nếu bạn là chủ doanh nghiệp và sử dụng WordPress, việc can thiệp vào mã nguồn (code) có thể quá phức tạp và rủi ro. May mắn thay, hệ sinh thái WordPress cung cấp các plugin mạnh mẽ để tự động hóa quy trình này. Tại Xuyên Việt Media, chúng tôi thường đề xuất khách hàng sử dụng các công cụ sau:
1. Sử dụng Plugin WP Rocket (Trả phí – Tốt nhất)
WP Rocket là tiêu chuẩn vàng trong việc tối ưu tốc độ. Để xử lý tài nguyên chặn hiển thị, bạn chỉ cần thực hiện vài thao tác đơn giản trong tab File Optimization:
- Tích chọn Optimize CSS delivery: Plugin sẽ tự động tạo Critical CSS và tải không đồng bộ các file còn lại.
- Tích chọn Load JavaScript deferred: Tự động thêm thuộc tính defer vào các file JS.
- Tích chọn Delay JavaScript execution: Chỉ tải JS khi người dùng tương tác (cuộn chuột, click). Đây là tính năng cực mạnh giúp điểm PageSpeed tăng vọt.
2. Sử dụng Autoptimize và Async JavaScript (Miễn phí)
Nếu ngân sách hạn chế, bộ đôi Autoptimize và Async JavaScript là sự thay thế hoàn hảo.
- Autoptimize: Vào Settings, tích chọn “Optimize CSS Code” và “Aggregate CSS-files”. Quan trọng nhất, hãy tích vào “Inline and Defer CSS”. Bạn sẽ cần sử dụng một công cụ bên ngoài để tạo đoạn mã Critical CSS và dán vào ô tương ứng trong plugin.
- Async JavaScript: Plugin này cho phép bạn dễ dàng thêm thuộc tính Async hoặc Defer vào các file JS mà không cần biết code.
Lưu ý quan trọng khi tối ưu hóa
Trong quá trình áp dụng cách loại bỏ các tài nguyên chặn hiển thị, bạn cần cẩn trọng vì việc thay đổi thứ tự tải file có thể gây ra lỗi giao diện (vỡ layout) hoặc lỗi tính năng (slider không chạy, menu không sổ xuống).
- Luôn Backup website: Trước khi cài plugin hay sửa code, hãy sao lưu dữ liệu.
- Kiểm tra trên trình duyệt ẩn danh: Sau khi tối ưu, hãy xóa cache và kiểm tra kỹ giao diện trên cả máy tính và điện thoại.
- Loại trừ file lỗi: Nếu thấy một tính năng bị lỗi (ví dụ jQuery slider), hãy tìm tên file JS đó và thêm vào mục “Exclude” (Loại trừ) trong cài đặt của plugin tối ưu.
Kết luận
Việc áp dụng cách loại bỏ các tài nguyên chặn hiển thị không chỉ là một yêu cầu kỹ thuật khô khan mà là bước đi chiến lược để nâng cao trải nghiệm khách hàng. Một website tải nhanh mang lại sự chuyên nghiệp và uy tín cho thương hiệu của bạn ngay từ cái nhìn đầu tiên.
Tuy nhiên, tối ưu hóa tốc độ website là một quá trình cân bằng giữa hiệu suất và tính năng. Nếu bạn cảm thấy khó khăn trong việc xử lý các vấn đề kỹ thuật sâu hoặc cần một dịch vụ SEO tổng thể bao gồm cả tối ưu SEO Onpage và SEO Offpage, đội ngũ chuyên gia tại Xuyên Việt Media luôn sẵn sàng đồng hành cùng bạn.
Hãy bắt đầu kiểm tra và tối ưu website của mình ngay hôm nay để không bỏ lỡ bất kỳ khách hàng tiềm năng nào vì lý do tải trang chậm.
Tin liên quan khác
