Việc tối ưu tốc độ trang web không còn là điều xa vời với plugin cache WP Rocket. Đặc biệt, đối với những người mới bắt đầu xây dựng trang web và các trang web nhỏ, WP Rocket tỏ ra là một công cụ hữu ích và hiệu quả. Bài viết này sẽ hướng dẫn bạn từng bước cách sử dụng plugin cache WP Rocket để tối ưu hóa tốc độ trang web của bạn, đồng thời chúng ta cũng sẽ xem xét chi tiết về những ưu điểm và hạn chế của nó đối với các trang web có quy mô nhỏ và mới bắt đầu. Hãy cùng nhau khám phá cách plugin cache WP Rocket có thể mang lại sự cải thiện đáng kể cho trải nghiệm trang web của bạn.
Dashboard
Thông tin chung về đăng ký của bạn với WP Rocket và RocketCDN. Tôi không bao giờ cho phép các plugin thu thập dữ liệu vì nó làm giảm hiệu suất (rất nhỏ). Bạn có thể xóa bộ nhớ đệm nếu bạn thực hiện thay đổi về thiết kế và không nhìn thấy chúng. Nếu không thì không có gì để làm ở đây. Tôi đã để đăng ký của mình hết hạn sau khi chuyển đổi plugin bộ đệm, đặc biệt là khi chúng tăng giá.
Cache
Có một số trường hợp nên tắt bộ nhớ đệm trang của WP Rocket bằng cách sử dụng plugin trợ giúp:
- Khi máy chủ của bạn đã xử lý bộ nhớ đệm trang.
- Khi bạn đang sử dụng Super Page Cache cho Cloudflare.
- Khi bạn đang sử dụng một plugin bộ đệm khác để lưu vào bộ đệm trang.
Mobile Cache: On – bật bộ nhớ đệm cho điện thoại (bảng được xử lý giống như máy tính để bàn nhưng có thể thay đổi bằng plugin trợ giúp). Lý do duy nhất nên tắt bộ nhớ đệm trên thiết bị di động là nếu trang web của bạn không phản hồi. Hãy kiểm tra tài liệu nếu bạn thấy hiển thị sai trên một số thiết bị nhất định.
Separate Cache Files For Mobile Devices: Off – chỉ bật nếu bạn có các thành phần dành riêng cho thiết bị di động và cần WP Rocket hiển thị chúng bằng bộ đệm di động riêng hoặc trong các trường hợp như nếu bạn đang sử dụng chủ đề Avada / WP Touch. Nếu không, bạn nên tắt cài đặt này.
User Cache: Off – chỉ bật nếu bạn có người dùng đã đăng nhập (tức là bbPress) nơi có nội dung dành riêng cho người dùng. Tuy nhiên, việc kích hoạt tính năng này cũng có thể làm tăng mức sử dụng CPU. Nếu bạn bật tính năng này và có các trang đăng nhập và đăng xuất tùy chỉnh, hãy đảm bảo rằng những trang đó được loại trừ khỏi bộ đệm. Nếu tính năng này được bật, sẽ có một số plugin trợ giúp giúp bộ nhớ đệm của người dùng hoạt động bình thường, chẳng hạn như buộc bộ nhớ đệm trang, tắt bộ nhớ đệm trang cho người dùng đã đăng nhập và bộ nhớ đệm chung cho người dùng đã đăng nhập.
Cache Lifespan: 24 hours – số thấp hơn có nghĩa là bộ nhớ đệm làm mới thường xuyên nhưng tăng mức sử dụng CPU (tốt nếu bạn xuất bản nội dung thường xuyên và cần cập nhật trang web của mình). Con số cao hơn có nghĩa là bộ đệm sẽ không làm mới thường xuyên, điều này có thể làm giảm mức sử dụng CPU (tốt nếu bạn không xuất bản nội dung thường xuyên và muốn tiết kiệm tài nguyên máy chủ). Nếu gặp sự cố về CPU, bạn cũng có thể sử dụng plugin trợ giúp của WP Rocket để tắt tính năng xóa bộ nhớ đệm tự động.
File Optimization
Đối với hầu hết các trang web, việc rút gọn CSS/JS phải BẬT, nhưng kết hợp CSS/JS thì TẮT. Trì hoãn/trì hoãn JavaScript thường phải BẬT và có thể cải thiện nhiều đề xuất Tốc độ trang.
Minify CSS/JS Files: On – hãy tắt nếu bạn đang sử dụng Perfmatters để xóa CSS không sử dụng. Việc thu nhỏ tệp sẽ loại bỏ khoảng trắng khỏi mã và làm giảm kích thước tệp. Khi sử dụng APO của Cloudflare, Cloudflare đề xuất sử dụng WP Rocket để thu nhỏ và TẮT cài đặt thu nhỏ của Cloudflare.
Combine CSS/JS Files: Off – cài đặt này không hoạt động khi “trì hoãn thực thi JavaScript” được bật. WP Johnny cũng giải thích lý do tại sao bạn không nên kết hợp, đặc biệt là trên các trang web có tệp CSS/JS lớn (bạn có thể kiểm tra biểu đồ Thác nước GTmetrix của mình). Việc kết hợp các tệp CSS/JS cũng có thể gây ra sự cố khi sử dụng máy chủ HTTP/2 và HTTP/3. Vì tất cả những lý do này, hãy tắt cài đặt này.
Excluded CSS/JS Files: nếu việc bật cài đặt thu nhỏ làm hỏng trang web của bạn, hãy xem mã nguồn của bạn, tìm tệp có vấn đề và thêm nó vào đây. Xem bài đăng của WP Rocket về cách giải quyết các vấn đề thu nhỏ.
Optimize CSS Delivery: Remove Unused CSS – hãy tắt nếu bạn đang sử dụng Perfmatters để xóa CSS không sử dụng. Ngay cả sau khi WP Rocket đã cải tiến tính năng này trong phiên bản 3.11, nó vẫn tải nội tuyến CSS đã sử dụng. Mặc dù điều này tốt hơn cho điểm số nhưng lại chậm hơn đối với người dùng vì tệp không thể được lưu vào bộ nhớ đệm và nó làm tăng kích thước HTML. Ngay cả tài liệu của Perfmatters cũng cho biết nội tuyến sẽ tốt hơn cho điểm Tốc độ trang trong khi “tệp riêng biệt” sẽ tốt hơn cho hiệu suất được cảm nhận. FlyingPress, Perfmatters và LiteSpeed Cache đều tải CSS đã sử dụng trong một tệp bên ngoài, trong khi WP Rocket là plugin bộ đệm duy nhất mà tôi biết tải CSS nội tuyến.
Media
WP Rocket không thể lười tải hình nền CSS. Cũng không có giải pháp đơn giản nào để loại trừ các hình ảnh trong màn hình đầu tiên khỏi tải từng phần ngoài việc sử dụng các plugin trợ giúp hoặc loại trừ tên/thuộc tính lớp. Nó cũng không thể tải trước hình ảnh. Nếu bạn định sử dụng Perfmatters để tải từng phần (thực hiện tất cả những điều này), hãy tắt cài đặt trong WP Rocket.
Mình không khuyên bạn sử dụng tính năng này của Wp Rocket. Cứ tắt hết là được.
Preload
Tìm hiểu cách giảm mức sử dụng CPU bằng cách chỉ tải trước các URL sơ đồ trang web quan trọng và thay đổi khoảng thời gian thu thập dữ liệu, cách tải trước phông chữ và lý do bạn (thường) không cần tìm nạp trước bất kỳ tên miền nào.
Activate Preloading: On – yêu cầu trình duyệt bắt đầu tìm nạp các tài nguyên cần thiết sớm. Nếu bạn đang có mức sử dụng CPU cao, hãy cài đặt plugin trợ giúp khoảng thời gian tải trước tùy chỉnh và thay đổi khoảng thời gian thu thập dữ liệu từ 500 mili giây mặc định thành khoảng 1000 mili giây. Bạn thậm chí có thể thiết lập một công việc định kỳ để WP Rocket bắt đầu tải trước vào một thời điểm cụ thể (tức là vào giữa đêm / giờ có lưu lượng truy cập thấp).
Activate Sitemap-Based Cache Preloading: On – tải trước toàn bộ sơ đồ trang web sẽ tăng mức sử dụng CPU. Kiểm tra sơ đồ trang web của bạn (tức là https://example.com/sitemap_index.xml) và chỉ thêm các URL quan trọng nhất để giảm mức sử dụng CPU. Trong hầu hết các trường hợp, đây chỉ là trang/bài đăng của bạn.
Preload Links: On – khi người dùng di chuột qua một liên kết trong hơn 100 mili giây (hoặc chạm vào liên kết trên thiết bị di động), trang sẽ tải xuống ở chế độ nền nên khi người dùng nhấp vào, trang sẽ có vẻ tải ngay lập tức. Điều này sẽ không cải thiện điểm số nhưng giúp cải thiện thời gian tải. Vấn đề là nếu bạn có một trang web nơi người dùng di chuột qua nhiều liên kết (tức là hình ảnh sản phẩm), điều đó có thể khiến CPU tăng đột biến.
Prefetch DNS Requests – kiểm tra tab nguồn của Công cụ dành cho nhà phát triển Chrome để xem tất cả tên máy chủ của bên thứ ba đang tải trên trang web của bạn. Hầu hết trong số này đã bị trì hoãn (thông qua việc trì hoãn thực thi JavaScript), vì vậy không có lý do gì để tìm nạp trước chúng. WP Rocket tự động kết nối trước các CNAME CDN + fonts.gstatic.com, vì vậy không có lý do gì để tìm nạp trước các CNAME này. Các miền của bên thứ ba duy nhất mà bạn nên tìm nạp trước là những miền không bị trì hoãn hoặc kết nối trước bởi WP Rocket. Trong hầu hết các trường hợp, đây chỉ là một vài miền hoặc thậm chí là 0. Mặc dù việc tải trước/kết nối trước quá nhiều URL có thể tác động tiêu cực đến tốc độ, nhưng việc tìm nạp trước sẽ dễ tha thứ hơn nếu bạn thêm các miền không được sử dụng.
Preload Fonts – bạn không cần phải làm bất cứ điều gì ở đây nếu tính năng xóa CSS không được sử dụng được bật vì WP Rocket sẽ tự động tải trước phông chữ. Nếu tính năng này không bật, bạn sẽ cần tải trước phông chữ theo cách thủ công.
Chỉ có thể tải trước các phông chữ tự lưu trữ (phông chữ được cung cấp từ trang web của bạn chứ không phải phông chữ.gstatic.com). Mặc dù chúng nhanh hơn và tuân thủ GDPR hơn, nhưng WP Rocket nên sử dụng phông chữ của bên thứ ba (tôi không sử dụng và về cơ bản thì bất kỳ ai cũng vậy). Elementor có thể lưu trữ phông chữ cục bộ trong Trình tùy chỉnh chủ đề → Hiệu suất. Có một số plugin khác thực hiện việc này, như OMGF.
Sau khi phông chữ được lưu trữ cục bộ, hãy mở biểu đồ Thác nước GTmetrix và xem tất cả các tệp phông chữ của bạn. Tìm bất kỳ phông chữ nào đang tải trong màn hình đầu tiên hoặc được đề cập trong tệp CSS của bạn, sao chép URL của chúng và dán chúng vào WP Rocket để tải trước chúng. Kiểm tra lại trang web của bạn trong GTmetrix và bạn sẽ nhận thấy thời gian chặn phông chữ nhanh hơn. Tránh tải trước quá nhiều phông chữ có thể gây tác động tiêu cực. PSI đã từng cho bạn biết phông chữ nào cần tải trước trong các yêu cầu khóa tải trước, nhưng tôi không nghĩ bây giờ điều đó sẽ xảy ra.
Advanced Rules
Chỉ có một số trường hợp bạn cần sử dụng các quy tắc nâng cao của WP Rocket, nhưng phần lớn các trang web có thể giữ nguyên các quy tắc này. WP Rocket đã tương thích với hầu hết các trang web Thương mại điện tử (tức là Woocommerce) và loại trừ các trang giỏ hàng, thanh toán và tài khoản của tôi.
Never Cache URLs – nếu bạn đang sử dụng giỏ hàng Thương mại điện tử không được WP Rocket hỗ trợ, hãy thêm giỏ hàng và trang thanh toán của bạn vào đây để loại trừ các trang này khỏi bộ đệm.
Never Cache Cookies – nguyên tắc tương tự như tùy chọn trước đó chỉ dựa trên cookie.
Never Cache User Agents – ngăn Googlebot hoặc tác nhân người dùng khác truy cập vào các trang lưu vào bộ nhớ đệm.
Always Purge URLs – giả sử bạn có danh sách blog trên trang chủ của mình. Nếu bạn tạo một bài đăng mới, bạn muốn danh sách blog trên trang chủ đó được cập nhật ngay lập tức bằng cách làm trống bộ đệm của trang chủ. Đó là những gì cài đặt này thực hiện, tuy nhiên WP Rocket sẽ tự động xóa bộ nhớ đệm cho trang chủ, danh mục và thẻ của bạn sau khi nội dung mới được tạo… vì vậy thường không cần phải làm điều này. Nhưng nếu có bộ nhớ đệm của trang khác mà bạn muốn xóa khi nội dung mới được đăng, hãy thêm nó vào.
Cache Query Strings – chuỗi truy vấn là các URL trông giống như sau: ?country=italy. Các URL này không được lưu vào bộ nhớ đệm theo mặc định nhưng nếu bạn muốn lưu chúng vào bộ nhớ đệm, hãy thêm “quốc gia” vào trường này (ví dụ).
Database
WP-Optimize tốt hơn cho việc dọn dẹp cơ sở dữ liệu, vì vậy hãy chuyển xuống phần đó.
WP-Optimize – tốt hơn WP Rocket vì nó có thể xóa các bảng không sử dụng, sao lưu qua UpdraftPlus và lưu một lượng bản sửa đổi bài đăng nhất định thay vì xóa tất cả. Chỉ cần xem các bảng này, bạn có thể biết plugin/mô-đun nào tốn nhiều chi phí cơ sở dữ liệu nhất. Điều này thường xảy ra với các plugin SEO, plugin bảo mật và các plugin thu thập/xử lý dữ liệu khác.
CDN
Nếu bạn dùng làm web ở Việt Nam thì mình khuyên không nên dùng vì nó sẽ chậm hơn. Vì vậy hãy tạm bỏ qua nó và mình sẽ nói ở phần sau.
OK. Các bạn cứ chỉnh như mình hướng dẫn là ổn.
Kết luận
Trong cuộc hành trình xây dựng và tối ưu hóa trang web, việc sử dụng plugin cache WP Rocket đã chứng minh sự hữu ích và tiện lợi, đặc biệt đối với các trang web nhỏ và người mới bắt đầu. Bằng cách đơn giản hóa việc tối ưu tốc độ, WP Rocket mang lại những lợi ích đáng kể mà không yêu cầu kiến thức kỹ thuật sâu.
Trang bài viết này đã hướng dẫn chi tiết từng bước cách sử dụng plugin cache WP Rocket, từ việc cài đặt và cấu hình cơ bản cho đến tùy chỉnh nâng cao. Chúng ta đã thấy rằng với giao diện trực quan và các tùy chọn dễ hiểu, ngay cả những người mới tiếp xúc với việc xây dựng trang web cũng có thể tận dụng được tiềm năng tối ưu hóa mà plugin này mang lại.
Mặc dù WP Rocket có những ưu điểm vượt trội trong việc cải thiện tốc độ trang web, nhưng cũng cần lưu ý rằng nó có thể không đáp ứng được những yêu cầu phức tạp của các trang web lớn và phức tạp hơn. Tuy nhiên, với các tính năng cơ bản như tối ưu hóa cache, tải trước tài nguyên, WP Rocket vẫn đủ mạnh mẽ để mang lại sự cải thiện đáng kể cho trải nghiệm trang web.
