WP Manifestindependent plugin directory
manifest / performance / render-blocking-optimizer

Render Blocking Optimizer

Tối ưu CSS và JavaScript để giảm render blocking và cải thiện tốc độ tải trang

by Your Name · github.com/nguyenkhoi489/render-blocking-optimizer · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/nguyenkhoi489/render-blocking-optimizer/archive/refs/heads/master.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/nguyenkhoi489/render-blocking-optimizer ↗

Plugin WordPress tối ưu hóa CSS và JavaScript để giảm render blocking, cải thiện tốc độ tải trang và điểm số PageSpeed Insights.

📋 Mô tả

Render Blocking Optimizer là một plugin mạnh mẽ giúp tối ưu hóa cách trình duyệt tải và xử lý tài nguyên CSS/JS của website. Plugin tự động thêm các thuộc tính defer, async và tối ưu hóa việc tải fonts, giúp cải thiện đáng kể hiệu suất trang web.

✨ Tính năng chính

🚀 Tối ưu JavaScript

  • Defer JavaScript: Tự động thêm thuộc tính defer cho tất cả script
  • Loại trừ jQuery linh hoạt:
    • Loại trừ toàn site
    • Loại trừ theo URL cụ thể (hỗ trợ checkout, cart, widget pages)
  • Danh sách loại trừ tùy chỉnh: Thêm script handles/URLs cần giữ nguyên

🎨 Tối ưu CSS

  • Async CSS Loading: Load CSS không đồng bộ với fallback
  • Bảo vệ Critical CSS: Tự động giữ nguyên CSS quan trọng
  • Danh sách CSS được bảo vệ:
    • Flatsome (style, base-css, shop)
    • WooCommerce (layout, general, smallscreen)
    • WordPress core (wp-block-library, global-styles)

🔤 Tối ưu Fonts

  • Preload Local Fonts:
    • Tự động phát hiện fonts trong /wp-content/fonts/
    • Preload Flatsome icon fonts
    • Hỗ trợ cấu trúc thư mục con
  • Google Fonts Optimization:
    • Tự động thêm display=swap
    • Preconnect & DNS-prefetch
    • Tự động disable nếu có local fonts tương ứng
    • Preload fonts quan trọng từ theme settings

⚡ Resource Hints

  • Preconnect cho Google Fonts
  • DNS-prefetch cho các domain bên ngoài
  • Preload cho critical CSS và fonts
  • Preload fonts từ theme customizer

📦 Cài đặt

Cài đặt thủ công

  1. Tải plugin về và giải nén
  2. Upload thư mục render-blocking-optimizer vào /wp-content/plugins/
  3. Kích hoạt plugin trong WordPress admin
  4. Vào Settings > RB Optimizer để cấu hình

Cài đặt qua Git

cd wp-content/plugins/
git clone [repository-url] render-blocking-optimizer

⚙️ Cấu hình

Tùy chọn cơ bản

Defer JavaScript

  • ✅ Bật để thêm defer cho tất cả JavaScript
  • Giúp JS không chặn quá trình render trang

Async CSS

  • ✅ Bật để load CSS không đồng bộ
  • CSS quan trọng vẫn được bảo vệ tự động

Loại trừ jQuery (Toàn site)

  • ✅ Bật nếu website dùng nhiều plugin jQuery
  • jQuery sẽ load bình thường trên toàn bộ site

Loại trừ jQuery theo URL

Nhập mỗi URL một dòng, hỗ trợ:

  • URL đầy đủ: https://yourdomain.com/widget/
  • Partial URL: /checkout, /cart, /my-account

Ví dụ:

https://www.yoursite.com/widget/
/checkout
/cart
/product-category

Loại trừ Scripts

Danh sách handle hoặc URL cách nhau bằng dấu phẩy:

google-analytics, gtm, recaptcha

Loại trừ Styles

Danh sách handle hoặc URL cách nhau bằng dấu phẩy:

admin-bar, dashicons, custom-style

🎯 Hướng dẫn sử dụng

Bước 1: Cấu hình cơ bản

  1. Kích hoạt plugin
  2. Vào Settings > RB Optimizer
  3. Bật các tùy chọn:
    • ✅ Defer JavaScript
    • ✅ Async CSS

Bước 2: Test website

  1. Kiểm tra tất cả trang quan trọng
  2. Test chức năng giỏ hàng, checkout
  3. Kiểm tra forms, sliders, popup

Bước 3: Xử lý lỗi (nếu có)

Nếu gặp lỗi JavaScript:

  1. Bật "Loại trừ jQuery (Toàn site)" hoặc
  2. Thêm URL cụ thể vào "Loại trừ jQuery theo URL"
  3. Thêm script handle vào "Loại trừ Scripts"

Bước 4: Tối ưu Fonts

Sử dụng Local Fonts (Khuyến nghị)

  1. Tạo thư mục /wp-content/fonts/
  2. Upload fonts theo cấu trúc:
    wp-content/fonts/
├── lato/
│   ├── lato-regular.woff2
│   ├── lato-bold.woff2
│   └── ...
├── roboto/
│   └── ...
└── dancing-script/
 └── ...
  3. Plugin sẽ tự động:
    • Preload local fonts
    • Disable Google Fonts tương ứng
    • Cải thiện tốc độ tải trang

Bước 5: Kiểm tra kết quả

  1. Xóa cache website
  2. Test với PageSpeed Insights
  3. Kiểm tra tab Network trong DevTools

🔍 Tương thích

Themes

  • ✅ Flatsome (Tối ưu đặc biệt)
  • ✅ Các theme WordPress khác
  • ✅ Theme tùy chỉnh

Plugins

  • ✅ WooCommerce
  • ✅ Contact Form 7
  • ✅ Yoast SEO
  • ✅ Các cache plugins (WP Rocket, W3 Total Cache, etc.)
  • ✅ Hầu hết các plugin phổ biến

WordPress

  • Yêu cầu: WordPress 5.0 trở lên
  • PHP: 7.0 trở lên (Khuyến nghị 7.4+)

💡 Tips & Best Practices

Kết hợp với Cache

  • Sử dụng cùng WP Rocket hoặc W3 Total Cache
  • Xóa cache sau mỗi lần thay đổi cài đặt
  • Kết hợp với CDN để tối ưu tốt nhất

Tối ưu Fonts

  1. Ưu tiên Local Fonts:

    • Tốc độ nhanh hơn
    • Không phụ thuộc Google
    • GDPR friendly

  2. Giảm số lượng fonts:

    • Chỉ dùng 2-3 font families
    • Giới hạn font weights (regular, bold)

  3. Font formats:

    • Ưu tiên WOFF2 (modern browsers)
    • WOFF làm fallback

Debug & Troubleshooting

  • Kiểm tra Console cho JavaScript errors
  • Sử dụng Network tab để xem loading order
  • Test trên nhiều browsers khác nhau
  • Tạm thời tắt plugin khác để isolate issues

📊 Hiệu quả

Trước khi sử dụng

  • ❌ Render Blocking Resources: 10-15 items
  • ❌ PageSpeed Mobile: 40-60
  • ❌ First Contentful Paint: 3-4s

Sau khi sử dụng

  • ✅ Render Blocking Resources: 2-3 items
  • ✅ PageSpeed Mobile: 70-90+
  • ✅ First Contentful Paint: 1-2s

🐛 Xử lý sự cố

JavaScript không hoạt động

Giải pháp:

  1. Bật "Loại trừ jQuery (Toàn site)"
  2. Hoặc thêm URL vào "Loại trừ jQuery theo URL"
  3. Xóa cache và test lại

Slider/Carousel lỗi

Giải pháp:

  • Thêm script handle vào "Loại trừ Scripts"
  • Ví dụ: swiper, slick, owl-carousel

Checkout page lỗi

Giải pháp:

  • Thêm /checkout vào "Loại trừ jQuery theo URL"
  • WooCommerce scripts sẽ load bình thường

CSS hiển thị sai

Giải pháp:

  • Thêm CSS handle vào "Loại trừ Styles"
  • Kiểm tra Critical CSS có được bảo vệ không

🔐 Bảo mật

  • ✅ Sanitize tất cả user inputs
  • ✅ Escape outputs
  • ✅ Nonce verification
  • ✅ Capability checks
  • ✅ No direct file access

📝 Changelog

Version 1.0.0

  • ✨ Initial release
  • ⚡ Defer JavaScript
  • 🎨 Async CSS loading
  • 🔤 Font optimization (Google + Local)
  • 📋 Critical CSS protection
  • ⚙️ Flexible exclusion rules
  • 🎯 jQuery exclusion by URL
  • 🚀 Resource hints & preloading

👨‍💻 Đóng góp

Contributions, issues và feature requests đều được chào đón!

📄 License

GPL v2 or later

🙏 Credits

Phát triển bởi [Your Name]

📧 Liên hệ

⚠️ Lưu ý quan trọng:

  • Luôn backup website trước khi cài đặt
  • Test kỹ trên staging trước khi lên production
  • Xóa cache sau mỗi thay đổi cài đặt
  • Giữ plugin và WordPress luôn được cập nhật

💪 Kết quả: Website nhanh hơn, điểm PageSpeed cao hơn, trải nghiệm người dùng tốt hơn!