Tăng tốc Website WordPress với WP Rocket và Cloudflare

0
398
Tăng tốc Website Wordpress với WP Rocket và Cloudflare

Tăng tốc Website WordPress với WP Rocket và Cloudflare 2019

Tăng tốc cho website là vấn đề mà tất cả chúng ta đều quan tâm, đơn giản tốc độ tải trang luôn là một trong những yếu tố hàng đầu để Google đánh giá và xếp hạng một website. Hiện nay có rất nhiều cách để bạn có thể tăng tốc trang website của mình, nhưng trong bài viết này Blog Huy Nguyễn sẽ hướng dẫn các bạn cách tăng tốc website bằng plugin WP Rocket với Cloudflare miễn phí.


Vậy WP Rocket là gì?

WP Rocket là một plugin trả phí cho phép bạn tạo cache để tăng tốc website, nếu bạn đang có một website wordpress thì WP Rocket sẽ là lựa trọn tốt nhất dành cho bạn để có thể tối ưu tốc độ của web một cách hiệu quả nhất.

 Tăng tốc Website WordPress với WP Rocket
Tăng tốc Website WordPress với WP Rocket

Tính năng cơ bản của WP Rocket

Tạo bộ nhớ đệm trang

  • Bộ nhớ đệm tạo ra giúp thời gian tải cực nhanh, một yếu tố cần thiết để cải thiện Công cụ Tìm kiếm Tối ưu hóa và tăng chuyển đổi. Khi bạn bật WP Rocket, bộ nhớ đệm trang ngay lập tức được kích hoạt.
  • Với quy trình thu thập thông tin mô phỏng lượt truy cập để tải trước bộ nhớ cache, việc lập chỉ mục trang web của bạn bằng công cụ tìm kiếm ngay lập tức được cải thiện.
  • Hình ảnh được tải chỉ khi khách truy cập cuộn xuống trang, cải thiện thời gian tải trang. YouTube, Facebook, Yahoo và các trang web lớn khác đang sử dụng kỹ thuật này. Bây giờ bạn cũng có thể.

Nén các tập tin Html, CSS, JavaScript

  • WP Rocket làm giảm trọng lượng của các tệp HTML, JavaScript và CSS thông qua việc giảm thiểu. Các tập tin nhẹ hơn có nghĩa là tải nhanh hơn!
    File Optimization

Thân thiện với nhà phát triển

  • WP Rocket được phát triển theo các phương pháp tối ưu nhất được WordPress đề xuất. Mã sạch sẽ, có rất nhiều móc để các nhà phát triển có thể dễ dàng thực hiện các tùy chỉnh của mình.

Và Clouflare là gì?

  • Cloudflare là 1 dịch vụ phân phối dữ liệu (CDN) lớn nhất thế giới hiện tại. Tức là Cloudflare sẽ chịu tải 1 phần thay vì hosting của bạn làm hết.
  • Một con số đáng kinh ngạc là 10% tổng số lượt tải web trên thế giới được “gánh” bởi Cloudflare.
  • CDN là viết tắt của Content Delivery Network. Đúng như cái tên của nó, data centers của Cloudflare trải khắp nơi trên thế giới.
Tăng tốc Website WordPress với Cloudflare
Tăng tốc Website WordPress với Cloudflare

Ngoài ra Cloudflare còn nhiều tính năng tiên tiến khác như:

  • Chống DDOS, tạo tường lửa bảo vệ website.
  • Cung cấp SSL miễn phí.
  • Stream Video.
  • Cung cấp các ứng dụng (apps) thêm tính năng cho website của bạn.
  • Gần đây, b còn kinh doanh thêm tên miền.

Hướng dẫn cấu hình tối ưu WP Rocket với Cloudflare 2019 với WP Rocket V3.3.3.1 mới nhất

Hướng dẫn cấu hình tối ưu WP Rocket với Cloudflare 2019 với WP Rocket V3.3.3.1 mới nhất

Bây giờ chúng ta bắt đầu cài đặt WP Rocket với Cloudflare để tối ưu tốc độ web của mình nhé. đầu tiên chúng ta sẽ cài đặt Cloudflare trước.

Hướng dẫn sử dụng Cloudflare 2019 tăng tốc website của bạn miễn phí

Bước 1: Đăng ký tài khoản Cloudflare

Việc đăng ký CloudFlare vô cùng đơn giản. Bạn chỉ cần truy cập CloudFlare.com và làm theo hướng dẫn.

Bước 2: Thêm website của bạn vào Cloudflare

  • Add domain của bạn vào Cloudflare:

Add domain của bạn vào Cloudflare

  • Sau đó, trỏ DNS từ nhà cung cấp domain về Clouflare:

trỏ DNS từ nhà cung cấp domain về Clouflare

  • Bạn sẽ nhận được email thông báo thành công sau:

Đăng ký tài khoản Cloudflare thành công

Bước 3: Cấu hình Clouflare

  1. Tab Crypto

Nếu Website của bạn không sử dụng giao thức HTTPS thì tắt các mục Always use HTTPS và HTTP Strict Transport Security (HSTS) đi nhé

Tab Crypto

2. Tab Firewall

Tab Firewall

3. Tab Speed

4. Tab Caching

Tab Caching

5. Tab Scrape Shield

Tab Scrape Shield

Đối với các tab Access, Workers, Page Rules, Network, Traffic, Stream, Customize và Apps, các bạn có thể giữ nguyên như mặc định. Bởi vì phần lớn trong số chúng là những tính năng trả tiền, gói miễn phí không sử dụng được.


Chúng ta đã cấu hình xong với Cloudflare giờ tiếp tục cầu hình WP Rocket!

Hướng Dẫn Cấu Hình Tối Ưu WP Rocket Với Cloudflare

Cài Đặt WP Rocket V3.3.3.1 mới nhất

Download WP Rocket V3.3.3.1 mới nhất Tại đây

Các bạn sau khi đã tải về file wp-rocket.zip thì vào phần Plugins > Upload. Sau đó kích hoạt lên để bắt đầu sử dụng và cấu hình WP Rocket nhé.

1. WP Rocket – Dashboard

WPRocket-Dashboard

  • Rocket Tester: Những tính năng cấu hình WP Rocket beta.
  • Rocket Analytics: Cho phép WP Rocket thu thập thông tin từ website của bạn (ẩn danh). Nên tắt để giảm công việc/sức nặng cho máy chủ và RAM.
  • Clear Cache: Xóa cache thủ công, làm sau khi bạn đã cầu hình xong WP Rocket.
  • Purge OPcache: Xóa OPcache. Thường được sử dụng để xóa cache PHP hoặc khi WP Rocket của bạn đã update những vẫn bị hiện phiên bản cũ.
  • Regenerate Critical CSS: Sử dụng khi bạn thay đổi stylesheets trong theme hoặc chèn thêm custom code vào CSS của child theme chẳng hạn.

2. WP Rocket – Cache

WPRocket-Cache

  • Mobile Cache: Bật cache và cấu hình WP Rocket cho thiết bị di dộng.
  • Separate Cache Files For Mobile Devices: Chỉ bật chế độ này nếu bạn không sử dụng theme responsive hoặc có giao diện riêng cho thiết bị di động.
  • Enable Caching For Logged-in WordPress Users: Bật nếu bạn muốn cache trang cho người dùng đăng nhập (ví dụ bbPress). Mỗi thành viên sẽ có cache riêng vì vậy chế độ này rất hao tài nguyên hệ thống. Nếu không cần thiết thì luôn tắt.
  • Specify Time After Which The Global Cache Is Cleared: Để mặc định. Nếu bạn không thường xuyên cập nhập nội dung hoặc trang vệ tinh, hosting cấu hình yếu, bạn có thể tăng thời gian này lên cao hơn.

3. WP Rocket – File Optimization

File Optimization

  • Minify Files: lý tưởng nhất là chúng ta luôn bật chế độ tự động minify và gộp “combining” file dữ liệu nếu muốn đạt điểm 99-100% Pingdom và GTmetrix. Nhưng nhiều lúc, đối với một số theme hoặc plugin cụ thể, việc này có thể làm trang web bạn bị lỗi hiển thị (nhất là với JS và CSS). Vì vậy bạn nên bật từng mục lên một và vào trang web của mình để xem nó có bị lỗi không. Sau đó tiếp tục bật tiếp từng chế độ còn lại lên và kiểm tra. Nếu bị lỗi, thì một là bạn không nên sử dụng chức năng đó. Hoặc hai là bạn phải tự tìm ra và loại bỏ file CSS hoặc JS gây ra lỗi khi chế độ gộp file dữ liệu mình nói ở trên.
  • Combine Google Fonts File: Gộp các file Google fonts lại với nhau để giảm thiểu requests tới máy chủ Google.
  • Remove Query Strings From Static Resources: Mục này thuần túy để tăng điểm Pingdom và GTmetrix. Hoặc (hiếm khi) sữa lỗi với những nhà cung cấp CDN không có chức năng cache file theo version.
  • Minify CSS Files: Tối ưu file CSS, loại bỏ khoảng trắng và comments thừa.
  • Combine CSS Files: Gộp các file CSS lại với nhau để giảm HTTP requests tới máy chủ.
  • Excluded CSS Files: Tìm file CSS khiến cho giao diện hiển thị bị lỗi và đặt đường dẫn file đó vào đây.
  • Optimize CSS Delivery: Tự động hiển thị trang mà không phải chờ tải về CSS file. WP Rocket sẽ tự động tạo ra một chuỗi gọi là Critical CSS above-the-fold của trang web.
  • Minify JS Files: Tối ưu file JS, loại bỏ khoảng trắng và comments thừa.
  • Combine JS Files: Gộp các file JS lại với nhau để giảm HTTP requests tới máy chủ.
  • Excluded JS Files: Tìm file CSS khiến cho giao diện hiển thị bị lỗi và đặt đường dẫn file đó vào đây.
  • Load JS deferred: Cho phép tải JavaScript theo kiểu deferred mà không phải chờ, giúp tăng tốc độ tải trang.
  • Safe Mode for jQuery: Chế độ an toàn cho jQuery. Yêu cầu hệ thống tải về jQuery trước khi render trang.

4. WP Rocket – Media

WP Rocket – Media

  • Enable For Images: bật chế độ lazy load cho ảnh. Mình thì muốn ảnh được tải luôn vậy nên mình bỏ qua mục này.
  • Enable For Iframes And Videos: bật lazy load cho iframes và video.
  • Replace Youtbe Iframe WIth Preview Image: Thay iframe của Youtube bằng ảnh thumbnail. Giúp giảm HTTP requests tới máy chủ Youtube.
  • Disable Emoji: Tắt Emoji.
  • Disable WordPress Embeds: Tắt chế độ embeds.

5. WP Rocket – Preload

WP Rocket – Preload

Activate Preloading:  Preload, để hiểu một cách đơn giản, là làm mới lại cache trên bộ nhớ mỗi khi bạn gia lệnh xóa cache hoặc khi cache cũ hết hạn. Mình luôn bật chức năng này vì nó không chỉ giúp tăng tốc độ tải lần đầu cho trang web mà còn cải thiện tốc độ index của Google. Chú ý là khi bật chế độ này, máy chủ sẽ hoạt động ở công suất rất cao, không nên sử dụng nếu bạn đang dùng share hosting hay máy chủ cấu hình yếu.

Activate sitemap-based cache preloading: Bật chế độ Preload cho toàn bộ trang web bao gồm cả trang chủ và các trang con. Tự động tối ưu khi sử dụng với Yoast SEO. Nếu bạn sử dụng plugin SEO khác thì nhớ chèn link sitemap vào đây.

Prefetch DNS Requests: chèn tên miền của bên thứ ba vào để tăng tốc độ tải trang (ví dụ: Google Fonts, Analytics, Tag Manager, Facebook Pixel).

6. WP Rocket – Advanced Rules

Mục này chủ yếu cho các trang web thương mại điện tử, ví dụ như Woocommerce hoặc các plugin ecommerce khác của WordPress. Nếu bạn không sử dụng Woocommerce thì có thể bảo qua mục này.

Advanced Rules

  • Never Cache URL(s): Nếu bạn sử dụng nền tảng ecommerce khác Woocommerce, thì bạn chèn link giỏ hàng và link checkout tại đây.
  • Never Cache Cookies: Cũng tương tự như trên nhưng dựa trên cookies.
  • Never Cache User Agent(s): Cấm Googlebots hoặc các bots khác truy cập trang cache.
  • Always Purge URL(s): Chèn link mà bạn muốn luôn luôn cache lại sau khi bạn xuất bản hoặc thay đổi nội dung trên trang web.
  • Cache Query String(s): Sử dụng chủ yếu để cache các link tìm kiếm cho trang thương mại điện tử.

7. WP Rocket – Database

WP Rocket – Database

8. WP Rocket – Heartbeat, Add-ons

Bật add-ons Cloudflare

WPRocket-Cloudflare

Nhập thông tin Global API Key, Email Cloudflare và Zone ID của website vào. Khuyến khích bạn sử dụng luôn chức năng Optimal Settings để WP Rocket tự động tối ưu.

Trên đây là các thiết lập mà Blog Huy Nguyễn đang sử dụng để tối ưu tốc độ cho website của mình. Bạn có đang sử dụng CloudFlare cho blog/ website của mình hay không? Bạn đã tối ưu nó như thế nào để mang lại hiệu suất tốt nhất? Hãy chia sẻ với chúng tôi những kinh nghiệm sử dụng CloudFlare của bạn trong khung bình luận bên dưới.

Xin cảm ơn!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

Gửi phản hồi