Tối ưu website WordPress với SpeedyCache

467

Tối ưu website WordPress với SpeedyCache, tăng tốc độ load trang đến mức ngạc nhiên.

Tốc độ tải trang là một yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng và hiệu quả SEO của website WordPress. Một trang web có tốc độ tải nhanh sẽ giúp tăng cường khả năng giữ chân khách truy cập, nâng cao tỷ lệ chuyển đổi và tăng thứ hạng trên các công cụ tìm kiếm. Để tối ưu tốc độ website, có rất nhiều plugin hỗ trợ, và SpeedyCache Pro là một trong những lựa chọn hàng đầu.

Cũng như các Plugin cache khác. SpeedyCache Pro là plugin mạnh mẽ và dễ sử dụng, được thiết kế để tối ưu hóa tốc độ tải trang của WordPress bằng cách giảm thiểu tài nguyên và tăng hiệu suất tải trang. Với hàng loạt tính năng từ cache di động, rút gọn CSS và JavaScript, cho đến tối ưu hóa hình ảnh và quản lý Google Fonts, SpeedyCache Pro giúp bạn tối ưu hóa website một cách toàn diện và hiệu quả.

Và trong bài viết này tôi sẽ hướng dẫn bạn cách thiết lập sử dụng các tính năng của SpeedyCache bản Pro.

Nếu bạn sử dụng dịch vụ Hosting/VPS tại AZDIGI, bạn sẽ được tặng Plugin SpeedyCache Pro hoàn toàn miễn phí.

Các tính năng nổi bật của SpeedyCache

Các tính năng cơ bản của SpeedyCache bản miễn phí

• Desktop Cache: Lựa chọn này lưu trữ bộ nhớ cache của trang web cho giao diện desktop và cung cấp cho tất cả các màn hình khác.
• Minify CSS: Tạo một tệp CSS gọn hơn, giúp giảm thời gian tải trang web.
• Combine CSS: Kết hợp các tệp CSS nhằm giảm số lượng yêu cầu cần xử lý và giảm thời gian tải.
• Combine JS: Kết hợp các tệp JS giúp giảm số lượng yêu cầu cần xử lý và giảm thời gian tải.
• GZIP: Với tính năng nén GZIP, bạn có thể giảm kích thước trang và giảm đáng kể thời gian tải trang.
• Browser Caching: Giảm thời gian tải trang bằng cách lưu trữ các tệp thường dùng của trang web vào trình duyệt của khách truy cập.
• Automatic Cache: Tự động tạo bộ nhớ cache cho nội dung, danh mục và thẻ ngay lập tức.
• Purge Varnish: Xóa bộ nhớ cache Varnish khi bộ nhớ cache từ SpeedyCache bị xóa, đảm bảo tính nhất quán.
• Test Mode: Kiểm tra các tính năng bộ nhớ cache trước khi áp dụng các thay đổi lên sản phẩm.
• Gravatar Cache: Lưu trữ hình ảnh Gravatar trên máy chủ của bạn nhằm giảm số lượng yêu cầu đến các vị trí bên ngoài.

Các tính năng cơ bản của SpeedyCache bản Pro

Lưu ý: Bản SpeedyCache Pro sẽ luôn luôn đi kèm với bản SpeedyCache thường. Nếu không cài bản SpeedyCache thường thì bản Pro sẽ không hoạt động.

• Mobile Cache: Lưu trữ bộ nhớ cache của trang web cho màn hình di động và cung cấp khi cần thiết.
• Minify HTML: Chuyển đổi HTML từ kích thước ban đầu sang kích thước nhỏ nhất mà không làm hỏng nội dung.
• Image Optimization: Tối ưu hóa hình ảnh cho web bằng cách chuyển đổi sang định dạng thế hệ mới như WebP, giúp hình ảnh tải nhanh hơn.
• Advanced Minify CSS: Chuyển đổi CSS từ kích thước ban đầu sang kích thước nhỏ nhất mà không làm hỏng nội dung.
• Minify JS: Chuyển đổi JS từ kích thước ban đầu sang kích thước nhỏ nhất mà không làm hỏng nội dung.
• Advanced Combine JS: Kết hợp JS của nội dung ở phần footer. Tệp đã kết hợp sẽ tải sau phần header.
• Render Blocking JS: Hoãn tải JS gây chặn hiển thị, giúp trang web hiển thị nhanh hơn.
• Cache Statistics: Cung cấp số liệu thống kê về bộ nhớ cache đã lưu hoặc các tệp đã rút gọn hoặc kết hợp trên bảng điều khiển.
• Delete Cache Logs: Hiển thị dạng bảng các bộ nhớ cache đã bị xóa gần đây.
• Google Fonts Async: Hiển thị Google Fonts theo cách không đồng bộ để cải thiện tốc độ tải trang.
• Local Google Fonts: Tải Google Fonts về máy chủ và cập nhật URL để sử dụng phiên bản cục bộ.
• Lazy Load: Chỉ hiển thị hình ảnh trong trang khi chúng xuất hiện trong khung nhìn.
• Instant Page: Tải trước trang ngay trước khi người dùng bấm vào liên kết.
• Critical CSS: Trích xuất CSS cần thiết cho phần trên cùng của trang, cải thiện chỉ số First Contentful Paint và loại bỏ cảnh báo CSS chặn hiển thị.
• Display Swap: Thêm chế độ hiển thị thay thế vào Google Fonts, giúp giữ văn bản hiển thị trong khi Google Fonts đang tải.
• Bloat Remover: Loại bỏ hoặc vô hiệu hóa các tính năng không cần thiết hoặc không sử dụng để tiết kiệm tài nguyên và giảm yêu cầu đến máy chủ.
• Preload Critical Images: Tải trước các hình ảnh trong khung nhìn khi trang tải để cải thiện chỉ số Largest Contentful Paint.
• Lazy Render HTML: Hiển thị các phần tử HTML khi chúng xuất hiện trong khung nhìn.

Tối ưu website với SpeedyCache Pro

1. Dashboard

Trang Dashboard sẽ hiển thị thông tin trang thái website của bạn, giấy phép, trạng thái cache cũng như cho phép xoá cache trực tiếp tại đây.

2. Cache

Giao diện cho phép bạn bật/tắt các tính năng cache như là

• Enalbe cache: Bật sử dụng cache, bạn hãy bật tính năng này
• Mobile Override: Vô hiệu hóa hiển thị cache desktop trên các thiết bị di động.
• Mobile cache: Bộ nhớ cache riêng cho phiên bản di động của website của bạn
• Preload: Tạo cache cho toàn bộ trang web tự động. Bạn có thể click vào Settings để thiết lập thời gian tải trước
• Browser Caching: Cache ở trình duyệt sẽ giúp web tải nhanh hơn.
• Logged-in Users: Không hiển thị phiên bản cache cho người dùng đã đăng nhập.
• GZIP Compressions: Nén các tệp văn bản để giảm kích thước gửi trên mạng.
• Purge Varnish: Xóa cache được tạo bởi Varnish khi xóa cache từ SpeedyCache.

3. File Optimization

Tính năng này sẽ cho phép bạn tối ưu xoá các tệp như: HTML, JS, CSS …

• Minify HTML: Xóa các comment và khoảng trắng thừa.
• Minify CSS: Giảm kích thước của các tệp CSS.
• Combine CSS: Kết hợp các tệp CSS để giảm số lượng yêu cầu HTTP.
• Critical CSS: Trích xuất CSS cần thiết cho viewport khi tải để cải thiện tốc độ tải.
• Unused CSS – Settings: Xóa các CSS không sử dụng.
• Minify JS: Giảm kích thước của các tệp JS.
• Combine JS: Giảm số lượng yêu cầu HTTP bằng cách kết hợp các tệp JS.
• Delay JS – Settings: Trì hoãn JS cho đến khi có tương tác của người dùng (như cuộn, nhấp, v.v.) để cải thiện hiệu suất.
• Defer JS – Settings: Trì hoãn các tài nguyên JavaScript gây chặn việc render.
• Disable Emojis: Xóa CSS emoji inline và tệp wp-emoji-release.min.js.
• Lazy Render HTML Element – Settings: Chỉ render một phần tử HTML (class hoặc id) khi nó không nằm trong viewport.

4. Exclude Settings

Tính năng Exclude này sẽ cho phép bạn loại trừ các thành phần không cache. Ví dụ như website bạn có những file hoặc thành phần mà bạn không muốn cache.

5. Preloading

Tính năng này rất hữu ích và rất đặc biệt. Tính năng tải trước các thành phần của trang web.

• Preload Critical Images – Settings: Tải trước các hình ảnh quan trọng để cải thiện LCP.
• Instant Page: Cải thiện tốc độ tải trang.
• DNS Prefetch – Settings: Tính năng DNS prefetching có thể giúp các tệp bên ngoài tải nhanh hơn.
• Preload Resources – Settings: Gợi ý cho trình duyệt tải tài nguyên sớm.
• PreConnect – Settings: Thiết lập kết nối sớm để tăng tốc độ tải trang.

6. Media

Gravatar Cache: Lưu trữ Gravatar tại chỗ.
Lazy Load – Settings: Tải hình ảnh và iframe khi chúng vào viewport của trình duyệt.
Image Dimensions: Thêm kích thước cho hình ảnh để giảm CLS.
Local Google Fonts: Tải Google Fonts từ máy chủ cục bộ của bạn.
Google Fonts: Tải Google Fonts bất đồng bộ.
Improve Font Rendering: Cải thiện việc hiển thị phông chữ bằng cách thêm CSS text-rendering.

7. CDN

Tính năng CDN (Content Delivery Network) trong SpeedyCache hay các hệ thống tối ưu hóa trang web khác thường bao gồm những điểm chính sau:

8. Object Cache

Tính năng Object Cache trong SpeedyCache hay các hệ thống tối ưu hóa khác thường có các điểm chính sau:

• Lưu trữ đối tượng: Object Cache cho phép lưu trữ các đối tượng dữ liệu (như kết quả truy vấn cơ sở dữ liệu, dữ liệu từ API, v.v.) vào bộ nhớ cache, giúp giảm thời gian truy cập và tải dữ liệu cho các lần truy cập tiếp theo.
• Tăng tốc độ truy xuất dữ liệu: Bằng cách lưu trữ các đối tượng trong bộ nhớ, Object Cache giúp giảm thiểu số lượng truy vấn đến cơ sở dữ liệu, từ đó cải thiện tốc độ tải trang và hiệu suất tổng thể của ứng dụng.
• Giảm tải cho cơ sở dữ liệu: Khi nhiều yêu cầu dữ liệu có thể được phục vụ từ bộ nhớ cache thay vì thực hiện truy vấn trên cơ sở dữ liệu, điều này giúp giảm tải cho cơ sở dữ liệu, làm cho nó hoạt động hiệu quả hơn.

9. Image Optimization

Tính năng Image Optimization trong SpeedyCache thường bao gồm các chức năng giúp tối ưu hóa hình ảnh trên trang web nhằm cải thiện tốc độ tải trang và giảm kích thước tệp hình ảnh mà không làm giảm chất lượng hình ảnh. Dưới đây là một số điểm chính về tính năng này:

• Nén hình ảnh: Tối ưu hóa kích thước tệp hình ảnh bằng cách nén chúng mà không làm giảm chất lượng đáng kể, giúp tiết kiệm băng thông và tăng tốc độ tải trang.
• Tải hình ảnh lười (Lazy Loading): Chỉ tải hình ảnh khi chúng xuất hiện trong viewport của trình duyệt, giúp giảm thời gian tải trang ban đầu và cải thiện trải nghiệm người dùng.
• Thêm kích thước hình ảnh: Thêm thuộc tính chiều rộng và chiều cao cho hình ảnh để giúp trình duyệt có thể xác định không gian cần thiết để hiển thị hình ảnh, từ đó giảm thiểu hiện tượng Layout Shift (CLS).
• Chuyển đổi định dạng hình ảnh: Một số plugin có thể hỗ trợ chuyển đổi hình ảnh sang các định dạng tối ưu hơn (như WebP) giúp giảm kích thước tệp mà vẫn giữ chất lượng.

10. Bloat Remover

Bloat Remover là một công cụ hữu ích trong việc tối ưu hóa hiệu suất trang web, giúp giảm thiểu các yếu tố không cần thiết để cải thiện tốc độ tải trang và hiệu suất tổng thể của trang web như là

• Disable XML RPC: XML-RPC có thể gây ra vấn đề về hiệu suất và bảo mật.
• Disable Google Fonts: Sử dụng phông chữ hệ thống của người dùng để ngăn việc tải phông chữ từ máy chủ.
• Disable jQuery Migrate: Vô hiệu hóa jQuery Migrate để cải thiện tốc độ.
• Disable DashIcons: DashIcons được sử dụng trong quản trị WordPress và có thể không cần thiết trên Front End.
• Disable Gutenberg: Tách biệt Gutenberg nếu bạn sử dụng trình xây dựng trang khác.
• Disable Block Editor CSS: Một số giao diện có thể không sử dụng CSS của Block Editor trên front end.
• Disable OEmbeds: OEmbeds làm tăng tải cho trang web nếu có nhiều nhúng được sử dụng.
• Update Heartbeat: Thay đổi tần suất kiểm tra heartbeat.
• Limit Post Revision: Thay đổi số lượng phiên bản bài viết bạn muốn giữ lại.
• Disable Cart Fragments: Vô hiệu hóa các fragment giỏ hàng của WooCommerce để cải thiện hiệu suất.
• Disable WooCommerce Assets: Vô hiệu hóa các tài nguyên của WooCommerce để giảm tải các tài nguyên không cần thiết.
• Disable RSS feeds: Vô hiệu hóa RSS feeds để giảm yêu cầu sử dụng tài nguyên máy chủ.

11. Database

Database Optimizer là một công cụ hữu ích giúp duy trì và cải thiện hiệu suất của cơ sở dữ liệu, đảm bảo rằng trang web hoạt động mượt mà và nhanh chóng.

• Clean everything: Chạy tất cả các tùy chọn.
• Run optimization: Thực hiện tối ưu hóa.
• Post Revisions: Xóa tất cả các phiên bản bài viết.
• Clean the all post revisions: Dọn dẹp tất cả các phiên bản bài viết.
• Trashed Contents: Xóa tất cả các bài viết và trang đã xóa.
• Clean the all trashed posts & pages: Dọn dẹp tất cả các bài viết và trang đã xóa.
• Trashed & Spam Comments: Xóa tất cả các bình luận trong thùng rác và spam.
• Clean the all comments from trash & spam: Dọn dẹp tất cả các bình luận từ thùng rác và spam.
• Trackbacks and Pingbacks: Xóa tất cả trackbacks và pingbacks.
• Clean the all trackbacks and pingbacks: Dọn dẹp tất cả trackbacks và pingbacks.
• Transient Options: Xóa tất cả các tùy chọn tạm thời.
• Clean the all transient options: Dọn dẹp tất cả các tùy chọn tạm thời.
• Expired Transients: Xóa các tùy chọn tạm thời đã hết hạn.
• Clean the expired transients: Dọn dẹp các tùy chọn tạm thời đã hết hạn.

Việc tối ưu website WordPress với SpeedyCache không chỉ giúp tăng cường hiệu suất mà còn cải thiện trải nghiệm duyệt web tổng thể. Hy vọng rằng qua bài viết này, bạn đã có cái nhìn rõ hơn về cách cấu hình và sử dụng SpeedyCache để đạt được hiệu quả tối ưu nhất cho website của mình. Hãy áp dụng những kiến thức đã học để biến website của bạn thành một công cụ mạnh mẽ thu hút và giữ chân khách hàng!