Tối ưu WordPress với Plugin LiteSpeed cache

Tối ưu WordPress với Plugin LiteSpeed cache. Tăng tốc website bạn lên nhiều lần.

Plugin LiteSpeed Cache (LSCache) là một công cụ mở rộng (plugin) phổ biến cho các trang web sử dụng máy chủ web LiteSpeed. LiteSpeed là một loại máy chủ web nhanh và hiệu quả được sử dụng rộng rãi, thường được coi là mạnh hơn và tiết kiệm tài nguyên hơn so với Apache hoặc Nginx.

Plugin LiteSpeed Cache (LSCache) cung cấp khả năng lưu trữ tạm thời (caching) nội dung của trang web để giảm thời gian tải trang và tối ưu hiệu suất. Khi một trang web được truy cập, plugin sẽ tạo bản sao tạm thời của trang đó và lưu nó lại. Khi người dùng truy cập lại trang web đó, nội dung tạm thời sẽ được phục vụ nhanh chóng thay vì phải xử lý lại từ máy chủ gốc, giúp giảm tải cho máy chủ và cải thiện trải nghiệm người dùng.

So sánh plugin LiteSpeed cache với các Plugin cache khác

Dựa vào bảng so sánh trên phần nào chúng ta thấy được LScache tốt hơn so với các dòng Plugin cách khác.

Tổng quan tính năng cơ bản

LiteSpeed Caching plugin vẫn có thể chạy với các môi trường máy chủ khác như Apache, nginx, nhưng sẽ cung cấp các tính năng cơ bản.

Miễn phí CDN cache QUIC.cloud
Hỗ trợ Object Cache (Memcached/LSMCD/Redis)
Hỗ trợ nén ảnh (Lossless/Lossy)
Nén file CSS, JavaScript, và HTML
Nén inline & các CSS/JS ngoài (do bên thứ ba nhúng vào)
Gộp file CSS/JS
Tự động tạo Critical CSS
Tải chậm (Lazy-load) ảnh/iframe
Tạo ảnh placeholder trên đa thiết bị
Hỗ trợ nhiều nhà cung cấp CDN khác nhau
Tải CSS trễ
Bật Defer/delay JS
Hỗ trợ cache trình duyệt
Có công cụ dọn dẹp và tối ưu Cơ sở dữ liệu
Tối ưu chỉ số PageSpeed (bao gồm Core Web Vitals)
Hỗ trợ cache OPcode
Cung cấp HTTP/2 Push cho CSS/JS (tuỳ máy chủ hỗ trợ)
Sử dụng DNS Prefetch
Tích hợp Cloudflare API

Một số ưu điểm khác cũng của LiteSpeed WordPress plugin:

Có thể xuất/nhập tuỳ chọn của plugin
Giao diện khá dễ dùng và tuỳ biến sâu
Hỗ trợ định dạng ảnh WebP
Điều chỉnh tần suất Heartbeat

Tính năng đặc biệt chỉ có trên OpenLiteSpeed & LiteSpeed

Các nhóm tính năng phát triển riêng cho môi trường máy chủ web server OpenLiteSpeed, LiteSpeed bao gồm:

Tự động tạo cache trang
Tự động xoá cache trang liên quan theo thời điểm xác định
Cache riêng cho tài khoản đã đăng nhập
Caching các request của WP REST API
Chia bản cache cho mobile và máy tính riêng
Có thể lên lịch xoá cache cho các URL set riêng
Hỗ trợ tương thích với WooCommerce, bbPress
Có sẵn WP-CLI để gõ lệnh nhanh hơn
Có hệ thống API để tích hợp cache dễ dàng
Có thể cấu hình loại trừ cache theo URI, danh mục, tag, cookie, User Agent
Có crawler (máy) thu thập trước (preload) theo sitemap
Có nhiều crawler (máy) cho các bản cache khác nhau
Hỗ trợ HTTP/2 support
Hỗ trợ HTTP/3 & QUIC
Hỗ trợ ESI (Edge Side Includes)

Hướng dẫn cài đặt và sử dụng plugin LiteSpeed Cache

1. Hướng dẫn cài đặt plugin LiteSpeed Cache

Bạn truy cập vào admin WordPress sau đó tìm tên Plugin litespeed và chọn Install Now để cài đặt

2. Thiết lập chung theo Presets có sẵn

Một điểm đặc biệt mà tôi rất thích là LiteSpeed cache cung cấp cho chúng ta các Presets có sẵn. Mỗi Presets đã được tối ưu theo từng bậc khác nhau. Tuỳ vào nhu cầu sử dụng và hiện trạng website bạn hãy chọn những Presets phù hợp để sử dụng.

Bạn truy cập vào LiteSpeed Cache => Presets => Apply Preset

Một số Presets của LiteSpeed đã tạo sẵn như sau

2.1. Essentials

Cài đặt này không có rủi ro, phù hợp với tất cả các web, tốt cho người dùng mới, trang web đơn giản hoặc phát triển theo định hướng bộ nhớ cache

Default Cache: Lưu trữ các phiên bản tĩnh của trang web để phục vụ người dùng nhanh hơn.
Higher TTL: Tăng thời gian lưu trữ dữ liệu trong bộ nhớ cache, giảm số lần yêu cầu từ máy chủ.
Browser Cache: Kích hoạt tính năng lưu bộ nhớ cache trên trình duyệt, giúp cải thiện tốc độ tải lại trang

2.2. Basic

Cài đặt này rủi ro thấp, tối ưu hoá cơ bản cho tốc độ tải và trải nghiệm người dùng. Thích hợp cho người mới bắt đầu

Everything in Essentials, Plus
Image Optimization: Tối ưu hóa hình ảnh bằng cách nén hoặc thay đổi định dạng để cải thiện hiệu suất.
Mobile Cache: Lưu bộ nhớ cache riêng cho người dùng di động, tối ưu trải nghiệm trên thiết bị di động.

2.3. Advanced (Khuyên dùng)

Cài đặt này phù hợp hầu hết các trang web và không có khả năng gây ra xung đột. Mọi xung đột về CSS, JS có thể được giải quyết bằng công cụ Page Optimization => Tuning tools.

Everything in Basic, Plus
Guest Mode and Guest Optimization: Tối ưu hóa hiệu suất cho người dùng chưa đăng nhập hoặc lần đầu truy cập.
CSS, JS and HTML Minification: Xóa khoảng trắng và các phần không cần thiết trong mã nguồn để giảm dung lượng tệp.
Font Display Optimization: Cải thiện cách hiển thị phông chữ, giảm thời gian chờ đợi khi tải trang.
JS Defer for both external and inline JS: Hoãn tải các tệp JavaScript (cả nội tuyến và ngoài) để trang hiển thị nhanh hơn.
DNS Prefetch for static files: Giảm độ trễ bằng cách dự đoán và chuẩn bị tải trước các tài nguyên tĩnh từ miền khác.
Gravatar Cache: Lưu trữ bộ nhớ cache của hình đại diện Gravatar để giảm yêu cầu từ máy chủ bên ngoài.
Remove Query Strings from Static Files: Loại bỏ chuỗi truy vấn khỏi URL của tệp tĩnh để cải thiện bộ nhớ cache.
Remove WordPress Emoji: Xóa chức năng liên quan đến emoji của WordPress để giảm tài nguyên tải.
Remove Noscript Tags: Loại bỏ các thẻ

2.4. Aggressive

Cài đặt này có thể hoạt động tốt đối với một số trang web, những hãy chắc chắn kiểm tra. Một số loại trừ CSS hoặc JS có thể điều chỉnh trong Page Optimization => Tuning tools.

Everything in Advanced, Plus
CSS & JS Combine: Gộp nhiều tệp CSS và JS thành một tệp duy nhất để giảm số lượng yêu cầu HTTP.
Asynchronous CSS Loading with Critical CSS: Tải CSS không đồng bộ và ưu tiên các phần CSS quan trọng để trang hiển thị nhanh hơn.
Removed Unused CSS for Users: Xóa các đoạn CSS không sử dụng để giảm kích thước tệp.
Lazy Load for Iframes: Chỉ tải iframe (như video YouTube) khi cần thiết để tiết kiệm băng thông.

2.5. Extreme

Cài đặt trước này gần như chắc chắn sẽ yêu cầu thử nghiệm và loại trừ đối với một số hình ảnh CSS, JS và Lazy Loaded. Đặc biệt chú ý đến logo hoặc hình ảnh thanh trượt dựa trên HTML.

Everything in Aggressive, Plus
Lazy Load for Images: Chỉ tải hình ảnh khi người dùng cuộn đến khu vực chứa hình ảnh.
Viewport Image Generation: Tạo và sử dụng hình ảnh được tối ưu hóa cho kích thước màn hình cụ thể.
JS Delayed: Hoãn thực thi JavaScript không quan trọng cho đến khi cần thiết, giúp tải trang nhanh hơn.
Inline JS added to Combine: Gộp cả mã JavaScript nội tuyến vào tệp JS tổng hợp.
Inline CSS added to Combine: Gộp cả mã CSS nội tuyến vào tệp CSS tổng hợp.

3. Thiết lập thủ công

Tuỳ chọn này dành cho chuyên gia, đã hiểu rõ cơ chế và sự hoạt động của LiteSpeed cache và website đang cấu hình.

3.1 Cấu hình Cache

Hãy bật các mục theo số thứ tự sau (1, 5, 6) để tối ưu cache. Các mục còn lại hãy giữ nguyên

Enable Cache: Bật tính năng lưu cache, tăng tốc tải trang.
Cache Logged-in Users: Cache cho người dùng đã đăng nhập.
Cache Commenters: Cache cho người dùng đã bình luận.
Cache REST API: Cache các yêu cầu REST API.
Cache Login Page: Cache trang đăng nhập.
Cache PHP Resources: Cache các tài nguyên PHP.
Cache Mobile: Cache tối ưu cho thiết bị di động.

3.2 Xoá cache tự động

Bạn hãy tắt xoá tất cả khi nâng cấp để tránh lỗi web xuất hiện khi web tự động cập nhật lên.

3.3 Tối ưu CSS

Bạn chỉ nên bật CSS Minify và CSS Combine và tắt đi các cấu hình khác. Và nếu web bị vỡ bố cục bạn hãy tắt đi Inline CSS Async Lib.

Chuyển Font Display Optimization sang Swap để khắc phục Render Blocking do font chữ

3.4 Tối ưu JS

Chỉ nên bật JS Minify và JS Combine. Các cấu hình khác bạn hãy tắt đi để không bị lỗi. Và nếu bạn bật JS Combine External and Inline sẽ nhanh hết dung lượng và mình có viết riêng một bài về vấn đề LiteSpeed đầy dung lượng

Tính năng Load JS Deferred bạn để chọn Deferred để có trải nghiệm tốt nhất.

Và lưu ý nếu web bị vỡ bố cục bạn hãy tắt JS Combine. Nếu vẫn còn bị bạn hãy tắt cả Load JS Deferred

3.5 Tối ưu HTML

Với tab tối ưu HTML bạn hãy bật như ảnh mà tôi hướng dẫn để có trải nghiệm tốt nhất.

3.6 Tối ưu hình ảnh, media

Nên bật: Lazy Load hình ảnh, Trình giữ chỗ đáp ứng, Lazy Load Iframes. Nên để mặc định các cấu hình khác, hoặc tắt đi nếu chúng đang bật.

3.7 Loại trừ LazyLoad ảnh LCP

Hình ảnh LCP nếu bật lazy load sẽ làm điểm LCP giảm rất thấp.

Nhập link hình không muốn lazy load
Nhập html class của hình không muốn lazy load
Nhập class của thẻ HTML chứa hình không muốn lazyload

3.8 Tối ưu cho BOT

Bật Chế độ khách và Tối ưu hóá Khách để áp dụng mức tối ưu maximum cho bot

Tạo cache riêng cho bot với mức tối ưu cao nhất. Bao gồm cả delay javascript => cẩn thận cloaking nếu không kiểm soát tốt

Đối với người dùng truy cập lần đầu, web sẽ kiểm tra có phải bot không và reload lại. Các lần sau không bị.

3.9 Kích hoạt Crawler

Tính năng này giúp tự động quét và tạo bản cache cho các trang web chưa được truy cập trước đó. Khi bật, Crawler sẽ quét định kỳ và tạo cache cho các trang mới, giúp cải thiện tốc độ tải trang và giảm tải cho máy chủ, đặc biệt khi người dùng hoặc robot tìm kiếm truy cập lần đầu.

3.10 Quản lý Cache

Không xoá tất cả cache nếu thay đổi không áp dụng cho toàn bộ website. Thay vào đó, bạn hãy xóa cache theo URL

Kết luận

LiteSpeed Cache là một plugin mạnh mẽ và hiệu quả để tối ưu hóa trang web WordPress của bạn. Việc sử dụng plugin này giúp tăng tốc độ trang web, cải thiện SEO, giảm tải máy chủ và cung cấp trải nghiệm người dùng tốt hơn. Với sự dễ dàng trong cài đặt và sử dụng, bạn có thể nhanh chóng thấy hiệu quả và đem lại lợi ích lâu dài cho trang web của mình. Hãy cùng thử nghiệm và tối ưu hóa trang web WordPress của bạn ngay hôm nay với LiteSpeed Cache!

4.3/5 - (18 bình chọn)