Cách tối ưu script & plugin để giảm render-blocking
Peter Nguyễn·14/10/2025·4 phút đọc·1.653 lượt xem
Khám phá 'Cách tối ưu script & plugin để giảm render-blocking' và phương pháp triển khai hiệu quả để tăng khả năng hiển thị tìm kiếm.
Cách Tối Ưu Script & Plugin Để Giảm Render-Blocking – Tăng Tốc Website Chuẩn SEO & Core Web Vitals
1. Giới thiệu
Một trong những nguyên nhân phổ biến khiến website tải chậm và bị Google đánh giá thấp về Core Web Vitals là render-blocking scripts — tức các đoạn mã (JavaScript, plugin, CSS) ngăn trình duyệt hiển thị nội dung chính trước khi tải xong toàn bộ.
Đặc biệt với website WordPress, Shopify hay Webflow, việc cài quá nhiều plugin, tracking và script ngoài (Google Tag, Facebook Pixel, chat widget, v.v.) thường khiến First Contentful Paint (FCP) và Largest Contentful Paint (LCP) tăng gấp đôi.
💡 Mục tiêu tối ưu ở đây là:
“Cho người dùng thấy nội dung sớm nhất, còn các script phụ tải sau.”
2. Render-blocking là gì?
Render-blocking xảy ra khi trình duyệt gặp một file JS hoặc CSS cần tải trước khi render phần hiển thị.
Điều này khiến người dùng phải chờ lâu hơn để thấy trang – dù nội dung đã sẵn sàng.
Loại tài nguyên | Ví dụ | Tác động |
|---|---|---|
JavaScript | analytics.js, jquery.js, chat widget | Chặn render khi chưa tải xong |
CSS nặng | main.css, theme.css | Trì hoãn việc vẽ giao diện |
Plugin ngoài | social share, popup, slider | Thêm request, tăng thời gian phản hồi |
3. Dấu hiệu website bị render-blocking
Điểm PageSpeed Insights / Lighthouse thấp, cảnh báo “Eliminate render-blocking resources”.
FCP > 1.8s hoặc LCP > 2.5s.
Cảm giác “trang trắng” trong vài giây đầu.
Tệp JS / CSS nặng (>200KB) tải trước nội dung chính.
💡 Bạn có thể kiểm tra chi tiết bằng tab Network trong DevTools → lọc “JS” hoặc “CSS”, xem tệp nào blocking trước DOMContentLoaded.
4. Cách tối ưu script để giảm render-blocking
✅ 1. Sử dụng defer và async
Thêm thuộc tính này vào <script> để trì hoãn tải JS sau khi HTML được render.
Thuộc tính | Cách hoạt động | Khi nên dùng |
|---|---|---|
async | Tải JS song song, chạy ngay khi tải xong | Script độc lập, không phụ thuộc thứ tự |
defer | Tải JS song song, chạy sau khi HTML parse xong | Script cần chạy sau khi DOM sẵn sàng |
Ví dụ:
<script src="analytics.js" async></script>
<script src="main.js" defer></script>
✅ 2. Đưa script xuống cuối <body>
Các file JS nên đặt trước thẻ </body>, không để trong <head> (trừ script cực kỳ cần thiết như critical CSS hoặc preloader).
✅ 3. Gộp và nén script
Gộp nhiều file nhỏ → giảm số request HTTP.
Nén bằng UglifyJS, Terser, hoặc plugin (WP Rocket, Autoptimize).
Bật Gzip / Brotli compression để giảm kích thước tệp.
✅ 4. Chỉ tải khi cần (conditional loading)
Ví dụ:
Chỉ load chat widget ở trang có form liên hệ.
Không load slider script ở trang không có banner.
Dùng JS để import động khi người dùng tương tác.
✅ 5. Dùng CDN và cache
Lưu script phổ biến (jQuery, FontAwesome, Bootstrap) qua CDN toàn cầu giúp:
Giảm latency
Tăng khả năng cache chéo domain
💡 Đặt header Cache-Control: public, max-age=31536000 để file JS có thể cache dài hạn.
5. Tối ưu plugin (đặc biệt cho WordPress)
Loại plugin | Ảnh hưởng | Giải pháp |
|---|---|---|
Page builder (Elementor, Divi) | Tạo nhiều JS/CSS thừa | Xóa module không dùng, bật “optimize asset delivery” |
Chat & popup | Blocking JS & API ngoài | Lazy load hoặc bật sau 5s |
Social share | Gọi script từ mạng xã hội | Dùng icon tĩnh, load API khi user hover |
Analytics / Tag Manager | Script nặng, nhiều request | Gộp tag, dùng server-side tracking |
Slider / Gallery | Render-blocking lớn | Lazy load, chỉ giữ 1 slider library |
💡 Nguyên tắc: mỗi plugin thêm = 1 request blocking tiềm ẩn → chỉ giữ plugin thực sự cần thiết.
6. Critical CSS & JS Split
Critical CSS: tách phần CSS cần cho phần hiển thị đầu tiên (above the fold) và inline vào
<head>.JS splitting: chia file JS lớn thành các chunk nhỏ, tải theo hành vi người dùng.
👉 Dễ thực hiện với frameworks như Next.js, Nuxt.js, hoặc plugin như WP Rocket / FlyingPress.
7. Theo dõi & đo hiệu suất sau tối ưu
Công cụ cần kiểm tra:
PageSpeed Insights → mục “Diagnostics: Reduce render-blocking resources”.
Lighthouse Performance → FCP, LCP, TBT, INP.
WebPageTest.org → biểu đồ waterfall & thời gian parse JS.
Chrome DevTools Coverage tab → kiểm tra % JS không dùng.
Mục tiêu:
LCP < 2.5s
TBT < 200ms
JS unused < 30%
Request JS < 20
8. Case Study – NaviWebsite tối ưu script cho site bán hàng WordPress
Tình huống:
Website thương mại điện tử WordPress cài 28 plugin, PageSpeed chỉ đạt 52/100 (mobile).
Giải pháp:
Xóa 10 plugin không cần thiết (chat, share, slider).
Đưa toàn bộ script xuống cuối body + thêm
defer.Gộp CSS/JS + bật Gzip & cache CDN.
Lazy load widget và chat sau khi load DOM.
Kết quả:
Điểm PageSpeed tăng từ 52 → 93 (mobile).
LCP từ 4.8s → 1.9s.
INP giảm 70%.
Tỷ lệ thoát giảm 34%, CTR tăng 18%.
9. Kết luận
Giảm render-blocking không chỉ là “tăng tốc độ”, mà là nâng cấp toàn bộ trải nghiệm người dùng & tín hiệu SEO kỹ thuật.
Khi script và plugin được quản lý đúng cách, website sẽ:
Hiển thị nhanh hơn,
Googlebot crawl sâu hơn,
Và người dùng ở lại lâu hơn.
👉 NaviWebsite hỗ trợ audit & tối ưu script, plugin, Core Web Vitals giúp website của bạn đạt tốc độ vượt chuẩn và hiệu suất SEO tối đa.
