Cấu hình cache với Plugin WP Rocket và Rocket-Nginx

Plugin WP Rocket và cấu hình Rocket-Nginxbộ đôi hoàn hảo khi bạn sử dụng LEMP sever. Nó cho phép Nginx phân phối trực tiếp các tệp đã lưu trong bộ nhớ cache trước đó mà không phải thông qua các khâu xử lý PHP.

Một quy trình bình thường truy vấn sẽ đi từ NGINX → PHP-FPM → PHP → Static file, khi bạn cấu hình sử dụng Rocket – Nginx thì quá trình này đơn giản sẽ là NGINX → Static file.

Chính vì rút gọn quá trình như vậy nên với combo này bạn có thể tăng x20 – x30 lần sức chịu tải của server, lý tưởng có thể lên tới 1000 client mỗi giây 😀 nói dễ hiểu là khoảng 86.400.000 views /ngày với VPS Vultr 1Gb ram! Không dài dòng nữa dưới đây là các cài đặt cần thiết.

Tùy chỉnh plugin WP Rocket

Tab Cache

Ở đây nếu bạn muốn cache cho cả người dùng di dộng thì hãy tích vào tùy chọn Mobile Cache tuy nhiên ở đây mình không chọn. Và tùy chỉnh lại thời gian lưu cache là 2 giờ.

plugin wp rocket và rocket-nginx

Tab File Optimization

Ở tab này mình chỉ dùng Tối ưu hóa phân phối CSS

Thật sự thì mình đánh giá không cao khả năng Minify của WP Rocket lắm. Do đó Optimize CSS delivery là lựa chọn duy nhất của mình ở mục CSS Files

plugin wp rocket và rocket-nginx

Tương tự ở mục CSS Files, Load JavaScript deferredDelay Javascript execution là 02 lựa chọn của mình ở mục JavaScript Files.

Bạn có thể thêm đường dẫn các file java bỏ qua tải chậm và delay ở phần Excluded JavaScript Files. Nhớ chọn save changes sau khi hoàn thành cá tùy chọn.

plugin wp rocket và rocket-nginx

Tab Media

Bạn lựa chọn như hình.

plugin wp rocket và rocket-nginx

  • Mục Lazy load lý đo mình không chọn do không có nhu cầu, và theme GeneratePress mình sử dụng không hiệu quả lắm với lazy load. Tuy nhiên nếu bạn có up kèm video ở youtube thì nên bật tùy chọn Enable for iframes and videos.
  • Mình đều bật các tùy chọn còn lại là Image Dimensions, Embeds, Wep compatibility (nếu bạn sử dụng Webp như New2h).

Tab Preload

Đây được coi là tính năng mạnh nhất của plugin WP Rocket. Khi bạn chức năng này WP Rocket sẽ tạo bộ nhớ cache bắt đầu bằng các liên kết trên trang chủ của bạn, sau đó là các sơ đồ trang web mà bạn chỉ định.

plugin wp rocket và rocket-nginx
Cache các bài viết và chuyên mục được tải trước.

Các bạn tùy chọn như sau:

plugin wp rocket và rocket-nginx

  • Ở đây bạn dán đường link sitemap vào mục Sitemaps for preloading để WP Rocket tạo cache trước.
  • Nếu các bạn sử dụng Google Fonts hay các font chử khác thì hãy dán đường link vào mục Font to preload để tăng tốc tải fonts.
  • Các mục tùy chỉnh khác bạn có thể xem thêm tại mục Need help hay more info.

Tab Advanced Rules

Đây là mục tùy chỉnh các thành phần cache và không cache chi tiết. Đây cũng là một trong những mục đáng giá của WP Rocket các bạn cần khai thác.

Trong mục Never cache URLs

/(.*)preview=true(.*)
/wp-admin/(.*)

Hai tùy chọn này để WP Rocket không cache phần wp-admin và các post nháp khi bạn chỉnh sửa bài viết.

plugin wp rocket và rocket-nginx

Tab Database

Mục này để thiết lập tối ưu cho database của Wordpres, xóa các tập tin rác, lưu trữ. Bạn cứ chọn hết như mình và nhớ lựa chọn thời gian WP Rocket tự động tiến hành dọn dẹp (mình chọn 1 tuần) ở mục Automatic cleanup

plugin wp rocket và rocket-nginx

Nhớ chọn Save changes and optimize để WP Rocket tiến hành tối ưu và ghi nhớ các lựa chọn của bạn.

Tab CDN

Đây là 1 tính năng khá hay của WP Rocket, không nhiều plugin CDN có tính năng tách ảnh, file css, js ra từng domain như họ, kiểu bạn muốn dùng file ảnh từ Jetpack, css và js từ 1 dịch vụ khác thì cứ điền vào là được, file nào không muốn dùng qua CDN thì add thêm vào Exclude files from CDN

plugin wp rocket và rocket-nginx

Tab Heartbeat

Tính năng Heartbeat dùng để giảm tải sever khá ổn. Tuy nhiên mình đã tắt tính năng này do nó không cần thiết đối với mình.

plugin wp rocket và rocket-nginx

Tab Add-ons

Ở đây mình sử dụng 02 Add-ons là CloudflareSucuri do đây là 02 plugin mình sử dụng. Bạn tích vào tùy chọn này và làm theo hướng dẫn, mục đích là để WP Rocket tối ưu hai lựa chọn này cho các quá trình cache diễn ra nhanh và ổn định.
plugin wp rocket và rocket-nginxTab Image Optimization

Ở đây WP Rocket khuyến khích các bạn sử dụng plugin IMAGIFY để tối ưu hình ảnh. Tuy nhiên, do mình sử dụng cách tối ưu ảnh qua định dạng Webp và Jetpack Image CDN nên mọi thứ đã quá đủ.

plugin wp rocket và rocket-nginx

Tab Tools

Là nơi bạn sao lưu và phục hồi các lựa chọn của mình

plugin wp rocket và rocket-nginx

Như vậy là mình đã hoàn thành các thiết lập trên plugin WP Rocket. Bây giờ website của bạn đã tương đối ổn và khá là nhanh rồi, tuy nhiên để tối ưu hơn các thiết lập của WP Rocket với sever Nginx, mình sẽ cấu hình thêm Rocket-Nginx.

Cài Đặt Rocket-Nginx

Đây là một vài đoạn mã cấu hình plugin WP Rocket tối ưu hơn với sever Nginx, nó được phát triển và chia sẽ bởi SatelliteWP ở địa chỉ này https://github.com/SatelliteWP/rocket-nginx

Thiết lập WP-Cron

Trước khi bắt đầu bạn cần các cài đặt WP-Cron cụ thể là tắt nó đi.

Để tắt WP-cron của WordPress, hãy thêm dòng sau vào wp-config.php (ở thư mục root) của bạn: define ('DISABLE_WP_CRON', true); Sau đó, chạy 1 trong 3 đoạn mã sau để thực hiện WP-cron theo cách thủ công sau mỗi 15 phút (thông thường 15p đã đủ cho hầu hết các trang web, các bạn có thể chỉnh thấp hơn).

*/15 * * * * wget -q -O - http://www.website.com/wp-cron.php?doing_wp_cron &>/dev/null

hoặc

*/15 * * * * curl http://www.website.com/wp-cron.php?doing_wp_cron &>/dev/null

hoặc

*/15 * * * * cd /home/user/public_html; php wp-cron.php &>/dev/null

Cấu hình Nginx

Để cấu hình và sử dụng Rocket-Nginx bạn cần quyền root và chạy các câu lệnh qua một SSH client như MobaXterm chẳng hạn.

  • Bước 1: Tải và tạo thư mục cấu hình Rocket-Nginx

Thường thư mục cấu hình nginx ở Ubuntu nằm ở /var/nginx (cấu hình của Webinoly cũng có đường dẫn tương tự).

cd /etc/nginx
git clone https://github.com/satellitewp/rocket-nginx.git

Chạy 2 đoạn mã trên để truy cập và tải về file cấu hình rocket-nginx

plugin wp rocket và rocket-nginx
Đây là các file cấu hình được tải về.
  • Bước 2: Xác định file cấu hình nginx và thực thi file cấu hình default.conf

Để xác định file cấu hình nginx bạn sử câu lệnh nginx -t chú ý đường dẫn file cấu hình.

Ở đây đường dẫn là /etc/nginx/nginx.conf bạn mở file cấu hình này bằng lệnh vi /etc/nginx/nginx.conf kéo xuống một tý và thấy dòng này.

Đây là nơi đặt các file cấu hình trang web của bạn. Cụ thể mình đang sử dụng Webinoly nên file cấu hình của mình sẽ có định dạng /etc/nginx/sites-available/new2h.com

Các bạn lưu ý tùy từng máy chủ và hệ điều hành bạn sử dụng, nơi lưu trữ các tập tin cấu hình này sẽ khác, nhưng tụ chung bạn dễ dàng tìm ra chúng nếu làm theo các bước trên.

Mở file new2h.com bằng lệnh vi /etc/nginx/sites-available/new2h.com nhấn i hoặc INSERT để chỉnh sửa và thêm vào dòng include /etc/nginx/rocket-nginx/default.conf; như hình.

Nhấn ESC và :X để thoát và lưu file. Để test bạn nhấn nginx -t nếu ra như hình dưới là ổn.

Vậy là bạn đã cấu hình Rocket-nginx thành công. Bây giờ để kiểm tra trang web đã được cấu hình hay chưa bạn thực hiện như sau:

  • Bạn truy cập vào trang quản trị website, vào Plugin WP-Rocket thực hiện Clear cache và Preaload lại cache.
  • Tiếp đó bạn truy cập website và nhấn F12 , chọn tab Network => Headers để kiểm tra => bạn để ý dòng X-Rocket-Nginx-Bypass: Yes là đã cấu hình thành công rồi nhé.

Tổng kết

Như vậy mình đã hướng dẫn chi tiết cấu hình plugin WP Rocket và cấu hình Rocket Nginx cho website. Các bạn hãy kiểm tra tốc độ website và cảm nhận sự khác biệt. Nếu có thắc mắc hay đóng góp hãy để lại một bình luận, mình trả lời sớm nhất có thể.

New2h – TranAnn

 

 

Nguyễn Khang

Xin chào mình là Khang Nguyễn thành viên của GCS TEAM. Hiện tại mình đang là một freelance, chuyên môn của mình là tối ưu Wordpress, Design và Digital Marketing. Twitter + Facebook

Viết một bình luận