Hướng dẫn tăng tốc độ website bằng plugin WP Rocket

Website của bạn sau khi hoàn thiện thì bị tình trạng load quá lâu, không mượt mà làm ảnh hưởng tới trải nghiệm người dùng và đặc biệt là ảnh hưởng đến điểm số trên Google PageSpeed. Trong bài viết này TADA sẽ hướng dẫn tăng tốc độ website bằng một cách đơn giản bằng cách sử dụng plugin WP Rocket.

WP Rocket và tính năng vượt trội

WP Rocket là gì?

WP Rocket là một plugin tạo cache cho WordPress tốt nhất hiện nay, nó có nhiều tính năng vượt trội và cách cài đặt vô cùng dễ dàng. Trước khi tìm hiểu cách hoạt động của WP Rocket chúng ta hãy làm rõ khái niệm cache là gì để hiểu rõ cách thức tối ưu tốc độ của nó.

Có hai loại web caching:

Caching phía trình duyệt: Khi bạn vào một trang web thì web cache sẽ thu tập tất cả dữ liệu của trang web sau đó lưu lại dưới dạng HTML. Khi bạn vào lần thứ hai sẽ nhanh hơn bởi vì lần trước khi vào trang web bạn đã tải nội dung về rồi.

Caching phía server: Khi bạn vào một trang web thì trình duyệt của bạn sẽ gửi một yêu cầu đến server. Với các plugin hỗ trợ tạo cache thì nó sẽ tạo một cache sẵn chứa file HTML để trình duyệt có thể tải về mà không cần gửi yêu cầu đến server từ đó tăng được tốc độ load của server.

Tính năng vượt trội của WP Rocket

Tính năng của WP Rocket:

• Lưu đệm toàn bộ trang và bài viết trên website
• Kích hoạt tính năng caching trên trình duyệt
• Giảm băng thông sử dụng với công cụ nén Gzip
• Tối ưu hóa tải font chữ
• Hỗ trợ plugin, theme, hosting

Ngoài ra bạn có thể thiết lập thêm các tính năng như:

• Cache Preloading – điều này giúp bạn xây dựng bộ nhớ cache luôn sẵn sàng
• Minify / Combine – Thu gọn và kết hợp các tệp CSS / JS của bạn
• Remove query từ tài nguyên tĩnh
• Lazyload – Trì hoãn quá trình tải hình ảnh, video cuộn đến đâu tải đến đó
• Trì hoãn tải JS
• Disable biểu tượng cảm xúc / nhúng
• Combine các file Google Fonts

Tăng tốc độ website và cấu hình Plugin

Cài đặt Plugin

Để cài đặt Plugin bạn phải tải về file cài đặt trên trang của nhà cung cấp bởi vì đây là plugin trả phí và không có sẵn trên kho Plugin của WordPress.

Sau khi tải về bạn vào Dashboard -> Plugin -> Add New chọn Upload Plugin, sau đó up file .zip đã tải về từ trang của nhà cung cấp plugin WP Rocket.

Lưu ý: 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 đó.

Cấu hình Plugin

Dashboard – Bảng điều khiển

• Clear Cache: xóa toàn bộ file cache
• Preload Cache: Tạo mới lại file cache
• Regenerate Critical CSS: Tạo mới CSS quan trọng

Cache

• 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: thiết lập thời gian tự động xóa toàn bộ cache web

File Optimization – Tối ưu hóa tập tin

• 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: 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
• Excluded CSS Files: Loại bỏ các file CSS mà bạn không muốn nén và gộp
• Optimize CSS delivery: Tối ưu hóa việc hiển thị của các file CSS, giúp khắc phục lỗi CSS chặn hiển thị nội dung trên Google PageSpeed Insights
• Remove jQuery Migrate: Loại bỏ một tệp JS và có thể cải thiện thời gian tải
• Minify JavaScript files: Nén file JS
• Combine JavaScript files: gộp chung các file JS lại thành một
• Excluded JavaScript Files: Loại bỏ các file JS mà bạn không muốn nén và gộp
• Load JavaScript deferred: Tối ưu hóa việc load các file JS
  • Safe Mode (recommended): 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

Media – Thư viện hình ảnh

• Enable for images: Bật tính năng lazyload cho hình ảnh
• Enable for iframes and videos: 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
• Enable WebP caching: Kích hoạt cache ảnh WebP

Preload – Tải trước

• Active Preloading: Kích hoạt tính năng tải trước
• Activate sitemap-based cache preloading: Kích hoạt tính năng tải trước theo XML Sitemaps
• URLs to prefetch: Tìm nạp trước DNS có thể làm cho các tập tin nằm ngoài host tải nhanh hơn

Advanced Rules – Quy tắc nâng cao

• 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 chuỗi 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

Database

Trước khi thực hiện chức năng này, bạn cần phải backup dữ liệu trước tránh các phát sinh lỗi ngoài ý muốn.

• 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
• Spam Comments: Xóa các bình luận spam
• Trashed Comments: Xóa các bình luận rác
• 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

CDN

• Enable Content Delivery Network: Kích hoạt tính năng này nếu website của bạn sử dụng CDN. 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
• Exclude files from CDN: Điền URL của những file mà bạn không muốn chạy trên CDN

Heartbeat

Chức năng này có thể thay đổi cấu trúc của website, bạn nên cân nhắc khi sử dụng chức năng này.

• Control Heartbeat: Giảm hoặc vô hiệu hóa các hoạt động API, có thể giúp hạn chế sử dụng tài nguyên trên máy chủ của bạn
  • Behavior in backend: Giao diện quản trị
  • Behavior in post editor: Công cụ soạn thảo
  • Behavior in frontend: Giao diện cho người dùng
    • Reduce activity: Giảm hoạt động (khuyên dùng)
    • Do not limit: Không giới hạn
    • Disable: Vô hiệu hóa

Tools

• Export settings: Cho phép bạn download file cấu hình plugin WP Rocket về máy tính
• 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

Cuối cùng, click vào nút Save Changes để lưu toàn bộ các thiết lập.