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. :)
sao không tick vào Enable caching for mobile Hiếu ơi
Kiểm tra xem nó có bị conflict với plugin nào khác không. Deactive toàn bộ plugin (ngoại trừ WP Rocket) sau đó active lần lượt là biết ngay mà. :P
Mình muốn sử dụng plugins này . Ad hướng dẫn cách đăng ký với thanh toán với ạ . À cho mình hỏi chút thế cái này cài được nhiều site ko
Bạn điền thông tin vào form ở cuối bài viết rồi chuyển khoản thanh toán giúp mình là được nhé. Nội dung thanh toán ghi rõ mua plugin WP Rocket + địa chỉ email của bạn. Plugin sử dụng không giới hạn số site. :)
Hi Hiếu,
Plugin này mình share lại của bạn, nó sử dụng tốt nhưng gần đây không biết sao bị dính cache safari trên iphone( còn trình chrome trên mobile thì android hoặc ios đều ổn). Lỗi là Ko chịu xóa cache trên trang chủ thì phải. Nhấn F5 thì mới chịu load mới, mình nghi là do cache trình duyệt, & mình cấu hình sai ở chỗ nào rồi.
Bạn thử debug giúp mình xem: https://thuyetphapmoi.com/
Hoặc gửi support hỏi nó xem
Bạn có dùng CDN hay plugin tạo cache nào khác ngoài WP Rocket không? :P
Không dùng plugin nào khác & cũng ko dùng cdn. Có thêm 1 file tối ưu rocket-nginx.conf để truy vấn qua cache trước rồi mới php. Dùng firebug thì thấy 30 ngày mới mã hạn cache html. Còn trang của hiếu thì thấy có 15p
NginX thì mình cũng không rành lắm. :P
Chào bạn,
Khi mình cài Wp rocket thì trang checkout của mình trường tỉnh thành phố ko chọn được tỉnh, bạn biết do đâu ko, chỉ mình cách khắc phục với.
Bạn có bật tính năng nén, gộp CSS và JS không? Nếu có thì thử tắt nó đi xem sao. :P
Tắt đi và xóa cache nhưng vẫn ko đc. Dùng Wp rocket thì công nhận web load nhanh hơn nhưng lại lỗi
http://www.upsieutoc.com/image/hsLa Khi ẩn danh
http://www.upsieutoc.com/image/hsLy Khi đăng nhập admin
:(
Tham khảo link này thử xem: http://docs.wp-rocket.me/article/27-using-wp-rocket-on-your-ecommerce-site :P
Sau khi thử thì thấy tốt nhất là ko nên tic vào css và js, vậy cũng đủ nhanh rồi :D
Nén, gộp CSS và JS dễ gây lỗi giao diện lắm. :)
Ừ đúng, mà mình bị lỗi lặt vặt thôi, mỗi font chữ bị đổi màu, còn chủ yếu một số cái plugin nhỏ nó nhảy vị trí.
À mà sao ko tick vào lazyload thấy nhanh hơn mới buồn cười chứ :P
Trước đây bạn có sử dụng plugin lazyload nào không? Chắc nó load nhanh quá nên không nhận ra chứ gì? :D Bạn kéo xuống dưới và thấy ảnh hiện ra dần dần thì có nghĩa là lazyload hoạt động bình thường. :P
Trước đây mình có dùng 1 plugin tên là lazyload luôn thì phải, sau đó cũng thấy giống như bây giờ nên gỡ ra rồi. Mình ko tick vào lazyload thì nó load tất cả ảnh đồng thời, mà nhanh lắm, còn tick vào thì lúc kéo xuống khoảng 1s nó mới load xong ảnh :D
Như vậy chứng tỏ tính năng lazyload của WP Rocket vẫn chưa hoàn hảo lắm. Thỉnh thoảng mình cũng bị lỗi tải chậm do lazyload. Chắc nó sẽ được khắc phục và cải tiến trong những phiên bản sau. :)
Cái plugin lazyload cũng bị y như vậy mà, dùng wp rocket nếu ko dùng lazyload đã thấy nhanh lắm rồi, còn không biết ảnh nó load lúc nào nữa, nên với web mình thì thấy không cần cải tiến nó nữa :P
Vậy thì thôi, tốt nhất là không dùng lazyload nữa, đỡ lo bị lỗi. :D
Mình dùng KeyCDN thì cấu hình như thế nào Hiếu nhỉ ?
Bạn cấu hình đầy đủ các yêu cầu có trong phần CDN là được thôi. Cũng đơn giản mà. :)
Mình đã cấu hình được, khá đơn giản. Nhưng plugin này gây xung đột nhiều quá Hiếu ơi. Nó xung đột với JSON API plugin, mình không hoạt động tốt trên ứng dụng di động Android và iOS. Bạn có giải pháp nào liên hệ tác giả WP Rocket để hỏi xem sao ko
Ủa. Từ bản 2.4.1 họ đã thông báo là khắc phục lỗi xung đột với JSON API rồi mà nhỉ? http://wp-rocket.me/changelog/ :P
Bản cậu gửi tớ vẫn bị lỗi xung đột với JSON API. Với iOS thì nó crash ứng dụng ra, còn với Android thì nó cho thumbnail nhảy loạn xạ cả lên :( Tớ rất thích plugin cache này nhưng đành deactived nó đi :( Cậu có idea nào ko.
Việc thứ 2 là: Audio mp3 bên tớ bị lỗi Missing Plugin khi chạy trên Safari, cậu có plugin audio nào support cho các trình duyệt ko. Tớ ko muốn convert mp3 sang ogg nữa, tại như thế dung lượng nó đầy VPS quá. Cậu có giải pháp nào ko chỉ tớ với
Bạn dùng plugin Jetpack không? Kích hoạt cái module JSON API lên thử xem. Nếu vẫn lỗi thì mình nghĩ thứ cần hi sinh là apps chứ sao lại là plugin tạo cache nhỉ? :D Bạn có thể truy cập và quản lý web thông qua trình duyệt mà. Mình cũng dùng trình duyệt mobile chứ chẳng bao giờ dùng app WordPress trên điện thoại cả. :P
Ý bạn là trình phát nhạc MP3 mặc định của WordPress bị lỗi trên Safari à? Thử plugin này xem sao: https://www.tipsandtricks-hq.com/wordpress-audio-music-player-plugin-4556 :P
Mình không dùng Jetpack. Mình thử các cách rồi mà nó vẫn xung đột. Bên web của mình có responsive template, nhưng mình vẫn dùng app để tiện cho nhiều khách hàng.
Dùng app chủ yếu để quản lý bình luận, đăng bài thôi chứ? :D Bạn vào Advanced Options => Never cache the following pages => Chèn link JSON API vào đó rồi lưu lại xem sao. Link này có dạng https://wpcanban.com/wp-json/ :)
Dùng app có cái tiện là nó có thông báo khi có bài viết mới, ngoài ra một số template app còn có hỗ trợ trình youtube, Tumblr, fanpage, Inst…Để mình thử cách của bạn xem sao
Mình vừa gửi một ticket đến support. Chắc họ sẽ reply lại theo email của Hiếu đã đăng ký.
Nếu họ trả lời thì mình sẽ phản hồi lại cho bạn. :P
Cảm ơn Hiếu, sẽ ủng hộ web của bạn dài dài
“Hi Trung Hieu,
Alice from WP Rocket here.
I just checked your site with Android and it seems that all the thumbnails are there.
When you activated WP Rocket and saw the crush and missing thumbnails, was minification CSS/JS enabled? Upon activation of these options, a nice popup said that these options may pose display worries. In this cases, it’s sufficient to simply disable the minification or locate the correct files that cause the issue and exclude them.
Here is the step by step solution: http://docs.wp-rocket.me/article/19-resolving-issues-with-minification
Let me know if you need help implementing that.
If minification was disabled instead, did you have any other option?
Wishing you a great day.”
Nguyên văn câu trả lời từ WP Rocket nhé. :P
Đã cài đặt và thấy tốc độ load nhanh hơn, thanks Hiếu nhiều hy vọng trong thời gian tới nhiều nhiều cái hay hơn để cho cộng đồng mạng dùng.
Cảm ơn feedback của anh. :)
em cài đặt tối ưu tùm lum rồi tốc độ tải trang nhanh hơn đc khoảng 1s. mà điểm page speed của gg thì giảm vài chục là sao nhỉ
Bạn có dùng CDN không? :P
Chào bác Hiếu !
Bác cho e hỏi, link bài viết liên quan ở giữa bài viết bác dùng cách nào vậy?
Mình thêm thủ công nhé. Không sử dụng plugin. :P
Chào bác Hiếu
Em không dùng CDN mà chỉ set ở cái Basic thôi
Như vậy tính năng cache của nó có phát huy được không bác
Ok bạn nhé. Blog của mình cũng đâu có dùng CDN. :)
Mình đang định làm cái CDN mà thấy phức tạp quá … làm bài hướng dẫn chi tiết đi Hiếu
Có nhiều loại CDN mà. Biết hướng dẫn loại nào bây giờ? :P