Hướng dẫn cài đặt và sử dụng plugin WP Rocket phiên bản 3.0.
Như đã từng giới thiệu qua trong bài viết trước, WP Rocket là một trong những plugin tạo cache cho WordPress tốt nhất hiện nay. Plugin trả phí này không những sở hữu những tính năng vượt trội so với các đối thủ mà việc cài đặt và cấu hình nó cũng vô cùng đơn giản. Có thể nói, WP Rocket là một plugin rất đáng đồng tiền bát gạo. Nếu bạn đã đặt mua plugin này thì ngay sau đây là hướng dẫn cài đặt và sử dụng nó. Hãy nhanh chóng kích hoạt WP Rocket trên website của bạn để trải nghiệm tốc độ tuyệt vời mà nó mang lại nhé.
Tham khảo thêm:
- Sở hữu plugin WP Rocket chính hãng với giá chỉ 200k
- Plugin WP Rocket 2.8 có gì mới và đáng để nâng cấp?
Hướng dẫn cài đặt và sử dụng plugin WP Rocket
1. Để bắt đầu sử dụng plugin WP Rocket, trước tiên, các bạn cần phải cài đặt và kích hoạt nó. Vì plugin này không có sẵn trên kho plugin của WordPress.org nên các bạn phải upload để cài đặt.
2. Sau khi kích hoạt WP Rocket, hãy vô hiệu hóa và xóa các plugin hỗ trợ tạo cache, minify dữ liệu, lazyload… mà bạn đã cài đặt trước đó.
3. Truy cập vào Settings => WP Rocket. Tại đây, các bạn sẽ tiến hành thiết lập thêm một số tùy chọn khác cho WP Rocket. Còn những tính năng cơ bản, WP Rocket đã tự động kích hoạt ngay sau khi bạn active plugin này.
Tab Dashboard
Trong đó:
- Remove all cached files: xóa toàn bộ file cache.
- Start cache preloading: tạo mới lại file cache.
- Purge OPCache content: xóa OpCode cache.
Tab Cache
Trong đó:
- Enable caching for mobile devices: kích hoạt tính năng cache cho thiết bị di động.
- Separate cache files for mobile devices: tách riêng các files cache dành cho thiết bị di động và máy tính. Nếu giao diện của bạn có khả năng responsive thì không nên tick vào mục này.
- Enable caching for logged-in WordPress users: bật tính năng cache cho người dùng đã đăng nhập.
- Specify time after which the global cache is cleared (0 = unlimited ): thiết lập thời gian tự động xóa toàn bộ cache web, để giá trị là 0 nếu bạn muốn tắt tính năng này.
Tab File Optimization
Trong đó:
- Minify HTML: nén HTML.
- Combine Google Fonts files: gộp các file Google Fonts.
- Remove query strings from static resources: loại bỏ query strings khỏi các file JS, CSS.
- Minify CSS files: nén file CSS.
- Combine CSS files (Enable Minify CSS files to select): gộp chung các file CSS lại thành một, yêu cầu phải kích hoạt tính năng Minify CSS files trước. Tính năng này không nên bật nếu website của bạn có hỗ trợ HTTP/2.
- Optimize CSS delivery: tối ưu hóa việc hiển thị của các file CSS, giúp bạn khắc phục lỗi CSS chặn hiển thị nội dung trên Google PageSpeed Insights.
- Excluded CSS Files: loại bỏ các file CSS mà bạn không muốn nén và gộp, giúp giải quyết tình trạng vỡ giao diện.
- Minify JavaScript files: nén file JS.
- Combine JavaScript files (Enable Minify JavaScript files to select): gộp chung các file JS lại thành một, yêu cầu phải kích hoạt tính năng Minify JavaScript files trước. Tính năng này không nên bật nếu website của bạn có hỗ trợ HTTP/2.
- Load JavaScript deffered: tối ưu hóa việc load các file JS, giúp bạn khắc phục lỗi JS chặn hiển thị nội dung trên Google PageSpeed Insights.
- Safe Mode (recommended): xuất hiện nếu bạn kích hoạt tính năng Load JavaScript deffered. Nên tick vào mục này để các file jQuery được load trước, hạn chế tình trạng vỡ giao diện và lỗi tính năng.
- Excluded JavaScript Files: loại bỏ các file JS mà bạn không muốn nén và gộp, giúp giải quyết tình trạng vỡ giao diện và lỗi tính năng.
Tab Media
Trong đó:
- Enable for images: bật tính năng lazyload cho hình ảnh.
- Enable for iframes and vides: bật tính năng lazyload cho iframe và video.
- Disable Emoji: vô hiệu hóa Emoji (biểu tượng cảm xúc trong WordPress).
- Disable WordPress embeds: vô hiệu hóa Embed Script.
Tab Preload
Trong đó:
- Activate sitemap-based cache preloading: kích hoạt tính năng preload (tạo lại cache) theo XML Sitemaps.
- Manual: tạo lại cache thủ công.
- Automatic: tạo lại cache tự động. Vô hiệu hóa tính năng này nếu nó làm server của bạn quá tải.
- URLs to prefetch: tìm nạp trước DNS (DNS prefetch) có thể làm cho các tập tin nằm ngoài host tải nhanh hơn, đặc biệt là trên mạng di động. Nhập URL của các tập tin bạn muốn prefetch vào mục này.
Tab Advanced Rules
Trong đó:
- Never Cache URL(s): điền những URL mà bạn không muốn cache.
- Never Cache Cookies: điền ID của những cookies mà bạn không muốn cache.
- Never Cache User Agent(s): điền string của những user agent mà bạn không muốn cache.
- Always Purge URL(s): điền những URL mà bạn muốn xóa cache khi đăng tải hoặc cập nhật bài viết.
- Cache Query String(s): điền những query string mà bạn muốn cache.
Tab Database
Trong đó:
- Revisions: xóa các bản sửa đổi.
- Auto Drafts: xóa các bản nháp được lưu tự động.
- Trashed Posts: xóa các bài viết rác (trong mục Trash).
- Spam Comments: xóa các bình luận spam.
- Trashed Comments: xóa các bình luận rác (trong mục Trash).
- Expired transients: xóa các transient đã hết hạn.
- All transients: xóa tất cả các transient.
- Optimize Tables: tối ưu các bảng trong database.
- Schedule Automatic Cleanup: thiết lập dọn dẹp database theo chu kỳ hàng ngày, hàng tuần hoặc hàng tháng.
Tab CDN
Trong đó:
- Enable Content Delivery Network: kích hoạt tính năng này nếu site của bạn có sử dụng CDN (MaxCDN, KeyCDN…). Nếu bạn sử dụng CloudFlare thì không cần kích hoạt.
- CDN CNAME(s): điền link CDN của bạn vào đây, chẳng hạn như
cdn.wpcanban.com. Ngoài ra còn có tùy chọn cho phép bạn chạy toàn bộ file, chỉ hình ảnh, CSS và JS, chỉ JS hoặc chỉ CSS trên CDN. - Exclude files from CDN: điền URL của những file mà bạn không muốn chạy trên CDN.
Tab Add-ons
Trong đó:
- Varnish: chuyển sang trạng thái ON nếu host của bạn có hỗ trợ Varnish cache.
- CloudFlare: chuyển sang trạn thái ON nếu website của bạn sử dụng CloudFlare.
Khi CloudFlare ở trạng thái ON, sẽ xuất hiện thêm 1 tab cho phép các bạn thiết lập kết nối với tài khoản CloudFlare của mình:
Trong đó:
- Global API key: API của CloudFlare, các bạn có thể xem hướng dẫn lấy API tại đây.
- Account email: email tài khoản CloudFlare của bạn.
- Domain: điền domain website của bạn.
- Development mode: chuyển sang trạng thái ON nếu bạn không muốn CloudFlare cache dữ liệu website, thường được dùng khi bạn chỉnh sửa các file CSS hoặc JS.
- Optimal settings: chuyển sang trạng thái ON nếu bạn muốn WP Rocket tự động tối ưu các thiết lập cho CloudFlare. Bạn nên cẩn thận khi sử dụng tính năng này, tốt nhất nên tự thiết lập thủ công.
- Relative protocol: chỉ sử dụng với flexible SSL của CloudFlare. URL của các file JS và CSS sẽ được sửa thành
//thay vìhttp://hayhttps:// - Clear all CloudFlare cache files: xóa toàn bộ file cache trên CloudFlare.
Tab Tools
Trong đó:
- Export settings: cho phép bạn download file cấu hình plugin WP Rocket về máy tính. Bạn có thể sử dụng file này để thiết lập nhanh plugin WP Rocket trên các website khác.
- Import settings: cho phép bạn upload file cấu hình plugin WP Rocket từ máy tính lên.
- Rollback: tính năng này sẽ cho phép bạn hạ cấp WP Rocket về phiên bản cũ hơn trong trường hợp phiên bản hiện tại bị lỗi hoặc không tương thích với website.
Cuối cùng, click vào nút Save Changes để lưu toàn bộ các thiết lập.
Xong! Bạn đã hoàn tất việc cài đặt và cấu hình plugin WP Rocket. Thật đơn giản phải không nào? Giờ là lúc để trải nghiệm những hiệu quả mà WP Rocket mang lại cho website của bạn.
Mọi thắc mắc về việc cài đặt và sử dụng plugin WP Rocket, vui lòng gửi vào khung bình luận bên dưới để được hỗ trợ và giải đáp. Đừng quên cho chúng tôi biết đánh giá của bạn về hiệu năng của plugin này nhé.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Mình có mail mà k thấy bạn trả lời, mình comment có bác nào biết thì hỗ trợ giúp. Web mình cứ mỗi lần qua ngày mới là kkrating lại bị lỗi. Nó báo là k đọc được file js của kkrating.Trước đó đã loại trừ nén hết cả rồi. Clear cache thì nó lại bình thường. Mình quên chụp ảnh lại cái lỗi.
Mình vào trang của bạn thấy vote bình thường mà. Có lỗi gì đâu? Bạn lưu ý không sử dụng đồng thời cả 2 tính năng tối ưu CSS, JS của WP Rocket và CloudFlare nhé. Nếu có bật Rocket Loader thì tắt nó đi. :P
Tắt rocket load nó vẫn vậy Hiếu ơi, Clear cloudflare nó vẫn còn. Chỉ đến lúc nào clear cache thì nó mới bt lại. Lúc bạn vào thì mình cho nó bt lại rồi. Mình chưa có thời gian cài đặt tải không đồng bộ trong rocket nên vẫn đang còn xài rocket loader. Vì tắt rocket load thì nó vẫn bị nên mình nghĩ nó k vì thế. Giờ đang update lên 2.9. Để xem ngày mai có bị tiếp k rồi tính tiếp. Nó mà lỗi k load dc cái js đó thì nó liên lụy luôn đến cái booking k book dc. Chán. Cám ơn bạn, để mình test vài trường hợp xem ntn.
Sử dụng plugin này có cần sử dụng thêm Autoptomize và WP Super Cache không bạn?
Không nhé. WP Rocket tổng hợp tính năng của 2 thằng kia rồi. :P
Bác Hiếu ơi. Mình chọn gộp js lại thành 1 thì xảy ra 1 số vấn đề booking nên mình k gộp js nữa. Chỉ nén html, css, js thôi. Tuy nhiên kkrating của mình dở chứng quá. Lúc thì nó dc. Giờ mình k gộp js, chỉ gộp css thôi. Nhưng kkrating của mình vẫn mất hiển thị ngôi sao. mình có sử dụng cloudflare và rocket-load của cloudflare. Bác coi giúp sao với ạ.
Bạn thử bỏ tính năng nén JS, CSS và Roket Load của CloudFlare đi xem nhé. Xong nhớ clear cache WP Rocket và cache CloudFlare đi. Mình nghĩ do conflict giữa WP Rocket với CloudFlare. :P
Mình tắt rocket load rồi nhưng vẫn bị. Không biết ban cài đặt plugin rocket trên web mình như thế nào nhỉ. K thấy sinh ra các file cache. Bên mình sinh ra mấy file cache. Chắc gỡ hết ra rồi cài lại quá. Ngoài dùng plugin Rocket ra mình nên sử dụng thêm hoặc cấu hình thêm gì để tối ưu web hơn nhỉ.
Bạn gửi thông tin đăng nhập WordPress và đăng nhập CloudFlare qua form liên hệ mình kiểm tra cho nhé. :)
Mình gửi qua mail nhé. Lúc trước có trao đổi mail. Giờ mình rep luôn.
Ok bạn. :)
Mình đang cài 2 web cùng theme .1 web supper cache load 1.7s. Web xài rocket load 2.2s. Làm sao đây ta :(
Web bạn chạy chung server không? Các plugin dùng hoàn toàn giống nhau không? Và cả lượng dữ liệu nữa? :P Chúng phải giống hệt nhau thì mới so sánh chính xác được chứ. :P
Mỗi plugin đều có cài vài cái khác thêm để tối ưu tốt nhất theo từng plugin. Nếu kết hợp tốt thì supper k thua gì rocket cả.Theo Hiếu nói là nếu gộp lại thành 1 file như js, css thì tốc độ load sẽ nhanh, nhưng mình có đọc hướng dẫn của plugin thì k gộp có thể sẽ nhanh hơn vì load song song, còn gộp thì load 1 nhưng dư liệu lớn. Mình nên ntn nhỉ.
Nén lại thành 1 thì nó giảm thiểu lượng request tới máy chủ bạn ạ. Còn lượng dữ liệu cần tải thì vẫn tương đương nhau mà. Chỉ khi bạn nén gây xung đột thì site mới tải chậm hơn thôi. Phần lớn trường hợp là tải nhanh hơn. :P
Mình cài plugin này vào thì khi sửa css nó ko cập nhật. Tắt đi thì ok mà mở lại thì nó vẫn như cũ @@ Mình đã thử clear cache trong setting của plugin rồi mà vẫn bị
Bạn đã clear luôn cả cache trình duyệt chưa? :P
Rồi bạn, mình làm đủ thứ hết mà vẫn bị @@ ko biết trong plugin có tùy chọn để disable cái link css đó ko nữa @@
http://suckhoecongdong24h.net/
Hi Hiếu kiểm tra dùm mình web này với, mình cài wp-rocket rồi nhưng sao tốc độ speed trên pagespeed insight vẫn màu đỏ, có 50 điểm ah.
Ảnh của bạn chưa hề được nén. Cài plugin EWWW Image Optimizer vào và nén chúng đi nhé. Check Google PageSpeed mà không đọc mấy cái thông báo lỗi của nó à bạn? :P
EWWW Image Optimizer cái này có giống plugin nén ảnh Smush không bạn. Tại mình nén ảnh bằng plugin này rùi.
Hoàn toàn giống nhau. Site của bạn có một số ảnh kích thước quá lớn + nhiều ảnh lưu trữ ở ngoài host => không tối ưu được bằng plugin. Bạn phải giảm kích thước ảnh xuống + chuyển ảnh về lưu trữ trên host thì mới giải quyết được vấn đề. :P
Thank you Hiếu tư vấn rất tận tình, mình rất thích website của bạn.
Ah tại cái này do mình dùng theme mới tải về, chắc sau này viết bài rồi dùng hình ảnh khác chắc tốt hơn.
Hai plugin trên thì cái nào tốt hơn vậy Hiếu.
Nếu là bản miễn phí thì mình đánh giá EIO cao hơn WP Smush. :)
P/s: Bạn nên lưu ảnh trên host thay vì sử dụng ảnh từ nguồn khác, không thể tối ưu nổi đâu. Bị Google nó cho điểm thấp là điều hiển nhiên thôi. :P
Nếu website đang hoạt động bình thường giờ mình cài EWWW Image Optimizer thì nó có tối ưu ảnh đang có trên website ko hay là mình up ảnh nào lên nó mới tối ưu ảnh đó vậy Hiếu
Bạn có thể tối ưu toàn bộ ảnh bằng tính năng Bulk Optimization nhé. :P
sao mình cấu hình như trên, mà web lại chậm đi gấp 10 lần @@
lúc trước dùng W3 total cache thì test chỉ khoảng 5-6s là load xong.
hôm qua sao khi gỡ W3 Total Cache cài WP Rocket thì sáng nay test lại toàn 60-90s =.=
mà cái page size nó giảm từ 1.4MB xuống còn 700Kb
Bạn cấu hình như trên là cấu hình như thế nào? Cụ thể thì bạn đã tick chọn những mục nào? :P
như trong bài hướng dẫn á bác :D
bên tab Basic thì stick Images, Iframes & Videos, HTML và Google Font
bên tab Advance thì em ko stick gì cả
tab Varnish thì e stick chọn “Enable the Varnish caching auto-purge”. vì host e có dùng Varnish
có sai sót chỗ nào ko bác, mà sao giờ test toàn 60s đến 90s :((
Bỏ hết các tính năng kia đi. Chỉ giữ lại tính năng cache xem sao. :P
Mỗi lần cập nhật nội dung lại bị xóa hết cache, có cài đặt được để nó ko xóa đi ko bác Hiếu?
Nó buộc phải xóa để tránh lỗi không hiển thị nội dung mới bạn ạ. :P
Mình cài plugin này cho site http://phuonglong.com.vn/, có bật chức năng nén html, giờ thêm thẻ tiếp thị lại của gg vào nó nén mất đoạn này /* <![CDATA[ */, có cách nào khắc phục ko bác, ko lẽ phải bỏ nén đi
Không có cách nào khác là phải bỏ tính năng nén HTML thôi bạn. :P
Mình cũng định dùng nhưng mà mình có khoảng 200 site chạy webserver nginx. Đọc cái link hướng dẫn của bạn thấy cái plugin này hình như phải config cron job và file cấu hình cho từng site mà thấy oải quá :(
200 site thì nghe thôi đã thấy sợ rồi. :P