Categories Cache WP Cloudflare Super Page Cache

Hướng dẫn sử dụng plugin WP Cloudflare Super Page Cache: giản dị, nội tâm và cơ bắp!

Sử dụng Cloudflare để cache HTML ở máy chủ biên CDN

Nếu bạn dùng hosting tại Việt Nam, ví dụ như AZDIGI, Vietnix, BKNS, vân vân thì combo máy chủ LiteSpeed Enterprise sẵn có + Plugin LiteSpeed cache miễn phí hoàn toàn là vô địch thiên hạ xét cả ở khía cạnh chi phí lẫn hiệu suất.

Tuy nhiên nếu bạn dùng hosting nước ngoài tình hình sẽ khác, tốc độ chỉ được đảm bảo cao nhất nếu bạn dùng CDN chất lượng có PoP ở Việt Nam, chẳng hạn như BunnyCDN, BizFly. Nhưng kể cả như thế thì cũng chỉ giải quyết được với các file tĩnh như CSS, JS và ảnh mà thôi, còn bản thân HTML tải từ máy chủ gốc vẫn ở xa.

CDN ở cấp độ HTML hiện trong hiểu biết của tôi chỉ có QUIC cloud và Cloudflare APO là làm được trọn vẹn. QUIC cloud thuộc hệ sinh thái của LiteSpeed, và nếu hosting của bạn không phải LiteSpeed Enterprise thì dung lượng miễn phí tương đối giới hạn (trên website nhỏ thì vẫn rất OK). Và dù cài đặt của QUIC không quá phức tạp, nhưng người chưa quen vẫn cảm thấy khó khăn và hay gặp lỗi. Còn Cloudflare APO là sản phẩm ra đời sau, chất lượng cũng tốt nhưng có phí 5$ / tháng, chẳng là bao với trang kinh doanh, nhưng vẫn là vấn đề với các blogger eo hẹp.

Bỗng ở đâu có anh bạn plugin WP Cloudflare Super Page Cache (miễn phí hoàn toàn, không có premium nào hết) sẽ giúp bạn cache HTML ở máy chủ biên CDN của Cloudflare hết sức dễ dàng. Điều này dĩ nhiên là đẩy tốc độ lên cao hơn, giảm tải tối đa cho máy chủ gốc (và nếu bạn dùng cả CDN nữa, thì nhiều request từ người dùng sẽ chẳng động đả gì đến máy chủ gốc cả, đúng nghĩa đen trên mây luôn!).

Hôm nay chúng ta sẽ đi vào phần cài đặt plugin này.

  1. Lưu ý đầu tiên là để dùng plugin WP Cloudflare Super Page Cache thì dĩ nhiên bạn cần dùng Cloudflare rồi. Và nhớ bật “đám mây màu vàng” lên để không chỉ dùng DNS, mà còn cả proxy ngược của nó nữa.
  2. Không nên kết hợp plugin này với các plugin cache khác như LiteSpeed cache, WP-Rocket hay Cache Enabler (mặc dù về lý thuyết vẫn được nhưng nó sẽ làm các cài đặt rắc rối hơn nhiều). Nếu cần dùng các tính năng như tối ưu CSS, JS, lazy load ảnh, hãy tìm các plugin chuyên cho việc này thay vì dùng thêm một plugin cache nữa.

Cái tiêu đề ở trên có phần văn vở, nhưng dần bạn sẽ hiểu nó chỉ đang mô tả sự thật mà thôi!

Nói plugin WP Cloudflare Super Page Cache giản dị là vì nó chỉ thuần túy cache page (tức là nó khá giống với plugin Cache Enabler của KeyCDN, tình cờ lại là một dịch vụ CDN có tiếng khác). Nó không có các tính năng nâng cao tối ưu cho CSS, JS, lazy load ảnh, video, can thiệp vào font, vân vân và mây mây.

Nói nó cơ bắp vì plugin này giúp bạn đẩy lên hệ thống CDN của Cloudflare – một trong các hệ thống mạnh và bảo mật thuộc top đầu thế giới.

Nói nội tâm thì để giải thích sau nhé. Giờ chúng ta đi vào bài.

#1. Tiến hành các cài đặt cơ bản

Kích hoạt plugin xong, bạn vào Cài đặt > Super Page Cache for Cloudflare, đập vào mắt chúng ta là cái API key trông có vẻ phiền phức, nhưng bạn đừng lo, nó dễ thôi.

  • Authentication mode: bạn để như mặc định, tức là API Key
  • Cloudflare e-mail: chính là cái email bạn dùng để đăng nhập vào Cloudflare
  • Cloudflare API Key: đoạn nghe hơi phiền đây rồi, nhưng đơn giản thôi, sau khi đăng nhập vào Cloudflare, bạn gõ chữ API vào phần tìm kiếm trên cùng, rồi click vào API Tokens:
Tìm API
Tìm API

Click vào View ở dòng Global API key để lấy khóa:

Lấy khóa API
Lấy khóa API

Vì đây là thông tin quan trọng, nó có khả năng sẽ yêu cầu bạn nhập mật khẩu lại trước khi xem được API. Nhập đúng thì bạn sẽ vào được, và copy cái API về và đưa nó vào phần Cloudflare API Key.

Log mode là cái như kiểu nhật ký theo dõi quá trình trao đổi giữa Cloudflare và plugin, mặc định nó bật, cơ mà thật lòng thì người dùng nâng cao họ mới để ý nó, còn chúng ta thông thường ít khi động đến. Do vậy bật tắt không quan trọng. Bạn có thể tắt nó đi nếu muốn.

Sau đó nhấn Update Settings để lưu. Khi bạn click cái này, một ô mới có tên Cloudflare Domain Name sẽ hiện ra, và bạn click vào để chọn tên miền của bạn. Rồi lại click Update Settings.

Nhìn lên phía trên và lick vào Enable Page Caching Now.

Một giao diện mới hiện ra, và để kiểm tra cache đã hoạt động hay chưa, bạn hãy click vào Test Cache:

Test Cache
Test Cache

Nếu nó hiện dấu tick xanh là OK. Nếu nó không hiện tick xanh, khả năng cao là bạn chưa bật “đám mây màu vàng” ở phần trỏ tên miền về IP hosting trên Cloudflare.

Cần bật đám mây vàng lên
Cần bật đám mây vàng lên như thế này

#2. Tab cache

Các mặc định nó thiết lập sẵn là ổn rồi, bạn đừng sờ vào trừ khi hiểu rất rõ. Ở đây tôi sẽ chỉ nói về việc điều chỉnh mấy thứ căn bản mà thôi.

  • Automatically purge the Cloudflare’s cache when something changes on the website: nghĩa là xóa cache trên Cloudflare khi có gì đó thay đổi trên website, cụ thể nên chọn như mặc định là Purge cache for related pages only, tức là chỉ xóa cache các trang liên quan mà thôi, thay vì phải xóa toàn bộ cache của cả website (những trang không thay đổi gì với cập nhật đó thì đâu cần xóa cache đúng không ạ?).
  • Automatically purge single post cache when a new comment is inserted into the database or when a comment is approved or deleted: nghĩa là tự động xóa cache khi có bình luận mới hoặc khi bình luận được phê duyệt hoặc khi nó bị xóa. Nếu trang bạn có bình luận thì nên bật tính năng này, ngược lại thì để như mặc định. Tức là tắt.
  • Automatically purge the cache when the upgrader process is complete: mặc định tắt, cái này nghĩa là khi cái gì đó được cập nhật xong, chẳng hạn như theme hoặc plugin thì cache sẽ tự động xóa. Nếu cẩn thận thì bạn bật, còn nhìn chung tắt không ảnh hưởng gì đáng kể, vì đa số các cập nhật không làm cache HTML trở nên lỗi thời đáng kể, và cực hiếm gây vấn đề gì. Tổng quan thì mấy trang blog có thể tắt cái này, mấy trang thương mại điện tử nên bật.
  • Purge HTML pages only: tức là khi xóa cache trên CDN, thay vì xóa toàn bộ nội dung bao gồm cả HTML, CSS, JS, ảnh, và các tài nguyên tĩnh khác thì ở đây bạn chỉ xóa HTML mà thôi. Điều này thường ổn, vì thay đổi thường nằm ở HTML chứ không phải các tài nguyên kia (các tài nguyên kia khi thay đổi, sẽ có version kèm theo để cache cập nhật mới). Do vậy nhìn chung nên bật tùy chọn này.
  • Enable fallback page cache: nên bật, ở đây nó sẽ tạo một lớp cache nữa ngay trong hosting của bạn, phòng trường hợp người dùng lần đầu truy cập trang (khi đó cache chưa lưu ở CDN của Cloudflare) thì dùng cache này thay vì phải truy cập trang động chậm hơn (hoặc vì lý do nào đó Cloudflare không cache lên CDN của nó trang nào đấy). Dĩ nhiên là nếu dùng tính năng này thì tuyệt đối không nên dùng tính năng cache ở các plugin khác nữa, vì sẽ gây xung đột với nhau.
  • Automatically purge the fallback cache when Cloudflare cache is purged: để bật như mặc định, cái này nghĩa là fallback cache tự động xóa khi cache Cloudflare được xóa.

Nhấn Update Settings để lưu cài đặt.

#3. Tab Advanced

Để như mặc định cũng ổn.

Với đa số người dùng, nếu bạn tò mò có thể bật tùy chọn Enable preloader.

Cái này là cái gì? Đây gọi là tạo trước cache. Nó giống như việc bạn là đứa thông minh, lanh lợi, dư thời gian và bạn tự tìm hiểu trước điều cần học trước khi cô giáo giảng, thường thì điều này sẽ làm bạn hiểu bài nhanh hơn. Tương tự, cái tạo trước cache này thay vì để người dùng đầu tiên kích hoạt cache thì nó tạo sẵn đấy rồi, ai vào là nhanh luôn.

Nhược điểm của việc tạo trước cache đó là đây là hoạt động tốn tài nguyên trên các website lớn hoặc hosting yếu (cũng vì lý do đó đa số các hosting khóa tính năng này trên các plugin, điển hình là LiteSpeed cũng có tạo trước cache, nhưng hầu hết các hosting đều khóa cả). Nếu bạn bật thì để như mặc định của nó sẽ ổn hơn (do số lượng tạo trước cache không lớn, do vậy sẽ không gây quá tải).

#4. Third Party / Phối hợp với các bên thứ ba

Cái này bạn chỉ quan tâm nếu bạn có cài một trong các plugin trong danh sách bạn thấy. Đây hầu như là các plugin cache hoặc tối ưu hiệu suất khác – cái có thể gây xung đột hoặc giảm hiệu suất khi cài cùng plugin WP Cloudflare Super Page Cache (không phải plugin nào tệ, mà vì chúng có các chức năng tương tự hoặc rất liên quan, dẫn đến việc mâu thuẫn nếu sử dụng cùng nhau). Nếu thấy chữ INACTIVE PLUGIN nghĩa là bạn đang không dùng plugin đó, và dĩ nhiên sẽ không phải lo lắng gì cả. Nếu ngược lại, thì cũng nên để như cài đặt mặc định, trừ khi bạn hiểu rõ bạn đang điều chỉnh cái gì.

Nếu được thì bạn có thể thực hiện kết hợp sau nếu dùng hosting ở nước ngoài. Combo sẽ cho tốc độ tốt không chỉ ở Việt Nam mà trên toàn cầu (dù thường cũng không nhiều website có khách truy cập quốc tế đáng kể, nhưng nếu bạn có thì điều này càng có lợi):

Plugin WP Cloudflare Super Page Cache cho riêng việc cache HTML + BunnyCDN cho việc CDN các tài nguyên tĩnh khác (CSS, JS, ảnh, vân vân) + chọn một giao diện được tối ưu tốt (để những thứ như CSS, JS không tác động xấu đến tốc độ trang).

Giải pháp trên đơn giản, hiệu quả cao, và chi phí thấp.

PS: hãy đọc thêm các câu hỏi thường gặp về plugin WP Cloudflare Super Page Cache để hiểu rõ hơn về nó.

#5. Điểm yếu

Plugin này nhìn tổng thể ổn, nhưng nó có điểm yếu về cache phía trình duyệt với các website dùng server Nginx. Cụ thể thì thao tác phức tạp cho người không rành kỹ thuật, đó là phải vào file config rồi nhập đoạn sau vào, lưu và khởi động lại Nginx (nghe đã thấy phiền lắm!):

location ~* \.(xml|xsl)$ { add_header Cache-Control "no-cache, no-store, must-revalidate, max-age=0"; expires -1; }
location /robots.txt { add_header Cache-Control "no-cache, no-store, must-revalidate, max-age=0"; expires -1; }
location /wp-cron.php { add_header Cache-Control "no-cache, no-store, must-revalidate, max-age=0"; expires -1; }
location = /wp-content/wp-cloudflare-super-page-cache/100ngaylamweb.com/debug.log { access_log off; deny all; }

Cái này sẽ giải quyết đơn giản qua giao diện người dùng nếu dùng CDN, thông thường chúng ta sẽ chủ động thiết lập được thời gian này qua nó, ví dụ điển hình là BunnyCDN.

Back to Top