Hướng dẫn sử dụng plugin WP Rocket tạo cache website toàn tập

Nếu bạn đã từng đọc qua một số bài viết của mình về tăng tốc website thì chắc cũng không ít lần bạn thấy mình nhắc đến việc tạo cache cho website. Và bài viết này, mình sẽ đi vào hướng dẫn chi tiết cách tạo cache và tối ưu tốc độ load cho website với plugin trả phí thông dụng nhất hiện nay – WP Rocket.

1. Tải và cài đặt plugin WP Rocket tăng tốc website

Để tải plugin thì bạn có thể lên trang chủ wp-rocket.me để mua với gia cho 1 website là 39$ hoặc 199$ cho bản không giới hạn website. Hoặc bạn cũng có thể tham khảo tại đây để có thể sở hữu plugin này với mức giá rẻ hơn rất nhiều lần.

Sau khi sở hữu plugin WP Rocket thành công, bây giờ đến đoạn cài đặt plugin. Việc cài đặt plugin khá đơn giản, bạn cứ cài như cài bao plugin trả phí khác. Hoặc nếu không biết thí có thể xem hướng dẫn ở dưới.

Đầu tiên, hãy vào Gói mở rộng -> Cài mới -> Tải Plugin lên -> Chọn File WP Rocket-> Cài đặt

Cài đặt plugin WP Rocket cho website wordpress

Cài đặt plugin WP Rocket cho website wordpress

Sau khi WordPress tiến hành cài đặt thành công thì bạn ấn vào Kích hoạt để kích hoạt plugin là xong.

Để kiểm tra xem plugin đã hoạt động hay chưa, bạn hãy mở cửa sổ ẩn danh của trình duyệt lên (Ctrl + Shift + N) và truy cập vào website. Sau đó ấn Ctrl + U và kéo xuống tận cuối cùng của trang. Thấy dòng như hình dưới là oke.

Kiểm tra xem Plugin WP Rocket đã hoạt động hay chưa.

Kiểm tra xem Plugin WP Rocket đã hoạt động hay chưa.

2. Cơ chế hoạt động của WP Rocket

WP Rocket hoạt động theo phương thức Browser Cache. Nghĩa là nó sẽ ép trình duyệt của người dùng lưu toàn bộ những file không thay đổi vào bộ nhớ Cache của trình duyệt. Thường là những file hình ảnh, css, javascript,… Gần như toàn bộ trang web dều có thể lưu được. Từ đó, trình duyệt sẽ không mất thời gian tải lại cho những lần sau nữa. Sẽ làm giảm đáng kể thời gian load trang của người dùng.

Ngoài ra, plugin còn hỗ trợ thêm rất nhiều tiện ích khác nữa như Lazyload, Tối ưu Database, hỗ trợ dịch vụ cloudflare,… Mình sẽ hướng dẫn chi tiết trong bài viết này, để giúp website của bạn có thể load nhanh gấp vài lần thông thường.

So sánh tốc độ load trước khi cache và sau khi cache

Sau đây sẽ là bảng so sánh tốc độ load của haminh.net trước khi cache và sau khi cache.

So sách tốc độ load sau khi cache của plugin WP Rocket

So sách tốc độ load sau khi cache của plugin WP Rocket

3. Hướng dẫn thiết lập plugin WP Rocket

Bây giờ, để bắt đầu thiết lập cho WP Rocket, bạn hãy vào Thiết Lập -> WP Rocket. Bỏ qua phần Dashboard , bạn chuyển xuống tab CACHE để bắt đầu thiết lập:

Thiết lập tab cache trong WP Rocket

Thiết lập tab cache trong WP Rocket

Mình sẽ giải thích một vài tùy chọn như sau:

  • Mobile Cache: Cho phép tạo cache trên trình duyệt điện thoại. Bạn nên tích chọn cả 2 để hoạt động hiệu quả.
  • User Cache: Tạo cache cho người dùng đã đăng nhập website wordpress. Trong đa số trường hợp, mình khuyên bạn không nên bật tùy chọn này.
  • Cache Lifespan: Thiết lập tuổi thọ của cache. Ví dụ trong ảnh là Cache được lưu trong 10 tiếng sẽ tự động xóa 1 lần. Nếu bạn không muốn tự xóa, có thể để về 0.

Chuyển xuống tab tiếp theo, FILE OPTIMIZATION

Tab File Optimization trong WP Rocket

Tab File Optimization trong WP Rocket

Basic Settings

  • Minify HTML: Tùy chọn này sẽ xóa các khoảng trắng và comments trong HTML để giảm kích thước file HTML.
  • Combine Google Fonts files: Kết hợp Google Fonts sẽ làm giảm số lượng yêu cầu đến HTTP
  • Remove query string từ static resources: Xóa phiên bản truy vấn chuỗi từ file tĩnh(ví dụ: style.css?ver=1.0) và mã hóa nó thành một file thay thế( ví dụ style-1.0.css). Tuy nhiên, không phải tất cả các file đều bị thay thế.

CSS Files

  • Miniffy CSS: Tương tự HTML
  • Combine CSS: Gộp tất cả các File CSS vào thành 1 file duy nhất
  • Optimize CSS delivery: Tối ưu thành phần CSS chặn hiển thị để có tốc độ load nhanh hơn

2 tùy chọn đầu mình không khuyến khích kích hoạt vì có thể làm lỗi, hỏng giao diện của trang. Tùy chọn thứ 3 nếu bạn nào có nhu cầu tìm hiểu về lập trình thì có thể ấn vào More info để tìm hiểu thêm. Còn blog của mình viết cho người kinh doanh nên mình sẽ không giải thích chi tiết.

JavaScript Files

  • 2 cái đầu tương tự css
  • Load JavaScript deferred: Cũng gần tương tự bên trên nhưng áp dụng với JavaScript. Bạn nên tích chọn cả tùy chọn bên dưới để cho hoạt động hiệu quả.

Tiếp tục hãy chuyển sang tab MEDIA

Tối ưu hóa media cho website

Tối ưu hóa media cho website

Lazyload: Bạn có thể hiểu đơn giản là, khi người dùng cuộn trang đến vị trí của ảnh thì ảnh mới được load thay vì load ngay từ đầu.

  • Enable for images: Áp dụng Lazyload với hình ảnh. Bạn hãy bật thử nó lên. Sau đó xem website của bạn hoạt động. Nếu theme không gặp lỗi gì thì cứ để. Còn nếu bạn thấy cách hiển thị hình ảnh gặp vấn đề thì bỏ chọn nó đi.
  • Enable for iframes and video: Áp dụng với iframes và video. Nếu bạn không biết iframe là gì thì có thể xem ví dụ này để hiểu rõ hơn. Tóm gọn, nó sẽ lấy nội dung của trang khác và chèn vào website của bạn.

Emoji: Biểu tượng cảm xúc. Disable để tăng tốc độ load cho trang. Tất nhiên nếu bạn có sử dụng emoji trong nội dung thì nó sẽ hiển thị xấu hơn rất nhiều.

Embeds: Từ phiên bản wordpress 4.4, các lập trình viên của wordpress đã cho ra mắt tính năng này. Nó cho phép bạn nhúng bất kỳ bài viết nào(được viết trên nền tảng wordpress) vào trang của bạn. Tuy nhiên, nó lại làm tăng kích thước cho trang web. Do đó, nếu bạn không sử dụng đến tính năng này, thì hãy tắt nó đi. Điều này sẽ làm giảm kích cỡ trang và số lượng truy vấn HTTP.

Giờ đến tab PRELOAD

Chức năng Pre-load trong WP Rocket

Chức năng Preload trong WP Rocket

Giải thích một chút về Preload Cache. Cái này áp dụng phương thức HTML Cache. Nghĩa là thay vì phải chờ có người đầu tiên truy cập để trang web đó được tạo cache, thì nó sẽ được tạo trước một cách tự động. Điều này sẽ làm tăng tốc độ load của người dùng ngay cả với lần truy cập đầu tiên.

Thiết lập để tối ưu website như vậy là ổn rồi. Bây giờ hãy chuyển sang tab DATABASE

Tối ưu cơ sở dữ liệu trong WP Rocket

Tối ưu cơ sở dữ liệu trong WP Rocket

Lưu ý: trước khi tối ưu Database, bạn hãy tạo một bản sao lưu cơ sở dữ liệu trước để tránh không may xóa nhầm dữ liệu quan trọng thì có thể khôi phục lại được.

Post Cleanup

  • Revisions: tích chọn tùy chọn này để xóa toàn bộ bản sửa đổi của Post, Page.
  • Auto Drafts: Toàn bộ bản lưu nháp tự động
  • Trashed Post: Những Post bị xóa tạm

Comments Cleanup

  • Spam comment
  • Trash comment

Mình không giải thích nữa, vì có gì đáng để giải thích đâu 😐

Transients Cleanup

Cái này là phần nâng cao, liên quan đến code. Nên mình không giải thích. Cái này bạn muốn xóa hay không đều được.

Database Cleanup

Nó sẽ tối ưu lại các bảng có thể tối ưu trong cơ sở dữ liệu

Automatic Cleanup

Đặt lịch dọn dẹp database tự động. Bạn có thể chọn hàng ngày, hàng tuần, hoặc hàng tháng. Tùy ý.

Sau khi đã chọn những mục cần tối ưu, hãy ấn OPTIMIZE và để WP Rocket xóa toàn bộ dữ liệu không cần thiết đi.

Vậy là mình vừa hướng dẫn bạn gần như toàn bộ về tối ưu website với plugin WP Rocket. Những phần còn lại do không phải ai cũng cần đến nên mình không hướng dẫn. Nếu bạn cần dùng đến, bạn chắc chắn cũng sẽ tự biết cách sử dụng, đừng lo. Còn với người dùng thông thường thì như vậy là đủ rồi. Chúc bạn thành công.

2018-07-19T11:08:57+00:00

2 Comments

  1. […] Plugin WP Rocket – 199$ […]

  2. […] Tham khảo: Hướng dẫn sử dụng plugin WP Rocket tạo cache website toàn tập […]

Leave A Comment