Đặt mua plugin FlyingPress đã lâu, giờ tôi mới có điều kiện test thử plugin này.
FlyingPress là dòng plugin cache giúp tăng tốc WordPress được tạo bởi tác giả trẻ người Ấn, nó có tiềm năng cạnh tranh được với các plugin cache hàng đầu hiện nay như WP-Rocket, LiteSpeed cache và Swift Performance.
Nền tảng của tác giả
Tác giả viết plugin là Gijo Varghese, anh ấy sinh năm 9x và là chủ trang blog chuyên viết về tối ưu tốc độ WordPress có tên WP Speed Matters (tiếng Anh).
Trước khi viết FlyingPress, Gijo có hàng loạt plugin miễn phí chất lượng cao phục vụ cho cộng đồng như:
Xem thêm: giới thiệu plugin FlyingPress.
Video hướng dẫn sử dụng:
Ưu điểm của FlyingPress
- Giao diện sáng sủa: so với các plugin cache khác FlyingPress có giao diện dễ dùng hơn nhiều. Tính dễ dùng rất quan trọng, vì nhiều người dùng WordPress phổ thông có thể sẽ không đủ khả năng, hoặc thời gian và công sức tìm hiểu quá sâu. Chẳng hạn LiteSpeed cache vẫn là plugin cache tốt nhất hiện nay xét trên tổng thể, lại miễn phí nhưng để sử dụng nó một cách trơn tru bạn sẽ phải bỏ công sức tìm hiểu nhiều.
- Các thiết lập mặc định đủ tốt: ngay cả với các thiết lập mặc định, tốc độ trang cũng được cải thiện rất tốt.
- Tạo trước cache nhanh: tốc độ tạo trước (preload) cache rất ấn tượng. Bạn sẽ thấy vấn đề tạo trước cache quan trọng như thế nào nếu dùng Swift Performance- plugin này mọi thứ đều tốt, ngoại trừ vấn đề tạo trước cache khá là ác mộng của nó.
- Nhiều cải tiến đáng giá, thú vị: chẳng hạn như loại bỏ CSS không dùng, trì hoãn các file phụ thuộc jQuery để tránh lỗi, loại bỏ lazy load ảnh dựa trên số lượng ảnh tính từ đầu trang thay vì dựa vào px.
- CDN chất lượng tốt: với giá cả phải chăng chỉ 3$/100GB. Đây là tuỳ chọn thêm, bạn không bắt buộc phải dùng CDN. FlyingPress sử dụng CDN của BunnyCDN.
Các chức năng chính
- Tối ưu hoá CSS: tạo critical CSS và CSS cần thiết. Tải CSS không sử dụng theo phương thức không đồng bộ hoặc dựa vào tương tác người dùng. Tôi đánh giá rất cao khả năng loại bỏ CSS không sử dụng của FlyingPress, nó là plugin cache thực hiện tốt nhất nhiệm vụ này.
- Tối ưu hoá font: tự host, nội tuyến & kết hợp các font Google. Bổ sung các font dự phòng trong khi tải (sử dụng display swap).
- Page caching: tạo các trang HTML tĩnh. Tải trước cache. Cấu hình Nginx/Apache/LiteSpeed để phục vụ cache. Tải trước các trang trong trình duyệt khi có hover chuột qua liên kết (tương tự plugin Flying Pages).
- Tối ưu hình ảnh: bổ sung các thuộc tính chiều rộng và chiều cao cho các ảnh bị thiếu. Tải trước các ảnh quan trọng (logo, ảnh thuộc màn hình đầu tiên, đây là những ảnh cần tải ngay thay vì lazy load).
- Defer JavaScript: loại bỏ JavaScript chặn hiển thị. Trì hoãn các script cho đến khi có tương tác của người dùng. Sửa lỗi jQuery chặn hiển thị. Loại bỏ jQuery migrate.
- Lazy loading: lazy load ảnh và iFrame. Sử dụng phương thức lazy load native hoặc JavaScript. Loại trừ lazy load các ảnh trên màn hình đầu tiên. Lazy load bất cứ ảnh background nào.
- Tối thiểu hoá CSS và JS: minify CSS & JS thông qua server của bạn hoặc thông qua CDN.
- Dọn dẹp cơ sở dữ liệu: loại bỏ các mục nhập không cần thiết và tối ưu các bảng.
Giá
Hồi tôi mua là tác giả mới ra mắt nên có giá ưu đãi chỉ tầm 30$, giờ giá đã tăng lên gấp đôi (cuối tháng 12/2020) với 60$/website/năm. Giá cho 5 website là 150$:
Như vậy về giá hiện nay FlyingPress cao hơn WP-Rocket (49$) và Swift Performance (39,9$).
Sau khi mua thành công bạn sẽ được cung cấp tài khoản trên trang FlyingPress với mã Licenses và link tải plugin xuống.
Ở phần Manage site/license bạn cần nhập website mà bạn muốn dùng plugin (bao gồm cả https nếu có). Nếu muốn đổi sang trang khác, bạn chỉ cần Deactivate Site đó đi và nhập lại.
OK, giờ chúng ta sẽ vào việc luôn nhé.
Dashboard
- Cache: cung cấp thông tin số lượng trang đã được tạo cache. Bình thường sau khi kích hoạt plugin trang sẽ chỉ được tạo cache khi ai đó truy cập vào bài viết, để trang tạo trước cache (preload cache), bạn nhấn vào Purge & Preload cache. Tốc độ tạo trước cache của nó rất nhanh (thông thường vài chục trang/phút, tuy nhiên không phải lúc nào nó cũng duy trì tốc độ tạo trước cache cao như vậy). Bạn nên dùng tính năng tạo trước cache này.
- FlyingCDN: là dịch vụ CDN bổ sung của FlyingPress, nếu muốn dùng CDN thì bạn bật tính năng này. Đây là tính năng có phí, có chất lượng khá tốt. Chúng ta sẽ bàn kỹ sau ở mục tương ứng.
- Support: thông tin hỗ trợ thêm về cách dùng plugin (tiếng Anh).
- Account: thông tin tài khoản gồm trạng thái (Valid nghĩa là hợp lệ), tên chủ tài khoản, và ngày hết hạn của plugin (plugin tính giá theo năm và số lượng website).
Cache Settings
- Additional Auto Purge: tự động tạo mới cache sau khi bài viết được xuất bản hoặc cập nhật. Có ba tuỳ chọn là (1) tạo mới tất cả post và page / All posts and pages, (2) chỉ tạo mới cache cho page / Pages only, (3) không tạo mới cache / None.
- Cache Lifespan: thời gian sống của cache, sau khoảng thời gian này cache cũ sẽ được xoá và tạo mới. Có ba tuỳ chọn là (1) sau 12 tiếng sẽ xoá và tạo mới cache, (2) sau 24 tiếng sẽ xoá và tạo mới cache, (3) không bao giờ xoá và tạo mới cache (nghĩa là cache sẽ chỉ xoá thông qua thủ công- bạn tự vào xoá cache).
- Exclude Pages from Caching: nếu trang nào đó bạn không muốn tạo cache cho nó (chẳng hạn trang yêu cầu cập nhật liên tục) thì bạn nhập URL của trang vào đây. Một trong các trang không nên tạo cache là trang giỏ hàng, thanh toán, vì các trang đó cần thông tin cập nhật theo thời gian thực.
- Ignore Query Strings: các chuỗi query sẽ được bỏ qua và trang được chuyển hướng đến trang đã được cache. Rất hữu ích nếu trang của bạn hay được truy cập từ Facebook hoặc nguồn bên thứ ba khác. Nếu bạn hỏi query nó là gì thì nó chính là dòng in nghiêng kiểu như thế này: https://kiencang.net/?fbclid=IwAR1qZk3xcq0r7gAmneOw_jZPVyeNscZVdBkToGYNo8hCIqlJ78nYsPz602M… Một số từ khoá mà bạn có thể bổ sung vào phần này là: fbclid, gclid, utm*, _ga
- Optimize for Logged in Users: tối ưu hoá cả cho người dùng đã đăng nhập.
CSS
- Minify CSS Files: loại bỏ các khoảng trống, bình luận và tối ưu các thuộc tính để giảm thiểu kích cỡ file CSS.
- Generate Critical and Used CSS: tạo critical CSS và loại bỏ CSS không sử dụng. Đối với CSS không sử dụng (unused CSS) có ba tuỳ chọn là (1) tải không đồng bộ / Asynchronously, (2) chỉ khi người dùng tương tác mới tải / On user interaction, (3) loại bỏ hoàn toàn / Remove
Như vậy FlyingPress không có tính năng gộp (combine) CSS, điều này là do tác giả chủ động thực hiện, nguyên nhân là vì nhờ có http2, gộp CSS hầu như không có tác dụng & thậm chí còn có thể gây lỗi cùng như gia tăng thời gian tạo trước cache.
Lưu ý: Vì CSS ảnh hưởng mạnh đến giao diện của trang, bạn cần kiểm tra kỹ lại website sau khi lưu cài đặt (Save Settings). Nếu tuỳ chọn nào có lỗi, bạn nên thử các tuỳ chọn khác.
PS: Với khả năng loại bỏ CSS không sử dụng rất tốt, nếu bạn dùng plugin FlyingPress có thể không cần dùng thêm các plugin kiểu như Perfmatters hoặc Gonzales nữa.
JavaScript
- Minify JavaScript: loại bỏ các khoảng trống, bình luận và tối ưu các thuộc tính để giảm kích cỡ file JS.
- Preload Links: tải trước các liên kết khi hover chuột.
- Defer JavaScript: chỉ thực thi các đoạn mã JavaScript sau khi HTML phân tích cú pháp xong. Trong phần này có thêm các tuỳ chọn sau (1) Exclude jQuery from Defer: loại trừ jQuery khỏi việc defer, đây là tuỳ chọn mặc định và phù hợp với các trang phụ thuộc nhiều vào jQuery; (2) Fix Render-Bloking jQuery Scripts: đây là tuỳ chọn bạn chỉ chọn được nếu bỏ tick tuỳ chọn đầu tiên, nó có nhiệm vụ sửa lỗi liên quan đến việc defer jQuery, cụ thể là nó sẽ chỉ thực thi các đoạn mã phụ thuộc jQuery sau khi jQuery được tải xong; (3) Exclude Scripts from Defer: phần này để bạn nhập các đoạn mã JavaScript mà bạn không muốn nó defer (vì nếu defer sẽ gây lỗi chức năng cho trang).
- Load Scripts on User Interaction: nếu bạn chỉ muốn tải JavaScript khi có tương tác người dùng (chẳng hạn như di chuyển chuột, gõ phím, cuộn chuột) thì gõ tên file của nó vào đây. Đây là tính năng rất thú vị, vừa đảm bảo tăng tốc website, vừa hạn chế tối đa các lỗi có thể có.
Tương tự như với CSS, FlyingPress không dùng tính năng gộp JavaScript.
Lưu ý: Vì JS phức tạp và ảnh hưởng mạnh đến chức năng, giao diện của trang, bạn cần kiểm tra kỹ trang sau khi lưu cài đặt. Nếu tuỳ chọn nào có lỗi, bạn nên thử các tuỳ chọn khác.
PS: tương tự khả năng loại bỏ CSS dư, FlyingPress cũng loại bỏ JS không sử dụng rất tốt.
Font
- Optimize Google Fonts: tối ưu hoá Google Fonts bằng cách gộp và tự host các font này.
- Display Fallback Fonts: giúp hiển thị văn bản trong khi đợi webfont tải xong.
- Preload Fonts: tải trước font, dành cho các font mà bạn muốn ưu tiên tải trước để hiển thị sớm nhất có thể. Bạn nhập URL của font đó vào.
Image
- Lazy Load Images: lazy load ảnh- tức là trì hoãn tải các ảnh nằm sâu bên dưới, chỉ tải khi người dùng cần.
- Lazy Loading Method: phương thức tải lười ảnh. Có hai tuỳ chọn là sử dụng JS hoặc phương thức lazy loading native của trình duyệt (hiện đã được khá nhiều trình duyệt hỗ trợ- và trong tương lai gần sẽ được tất cả các trình duyệt hỗ trợ).
- Exclude Above Fold Images from Lazy Load: loại trừ các ảnh mà bạn không muốn lazy load. FlyingPress có phương thức rất hay là dựa vào số lượng ảnh tính từ đầu trang (bình thường các plugin cache khác sử dụng px để làm điều này).
- Add Width and Height Attributes: thêm các thuộc tính chiều rộng và chiều cao cho ảnh để loại bỏ hiện tượng xô đẩy bố cục.
- Preload Critical Images: tải trước các ảnh quan trọng. Nó sẽ tải trước các tài nguyên ảnh quan trọng thuộc màn hình đầu tiên (những ảnh không cần lazy load), chẳng hạn như logo, ảnh minh hoạ ngay đầu bài (featured image).
- Disable Emoji: loại bỏ tải các biểu tượng mặt cười, mặt khóc tải từ tài nguyên bên ngoài để sử dụng các thuộc tính tương ứng có sẵn của trình duyệt.
PS: nếu bạn không dùng CDN của FlyingPress (có phí) thì sẽ không có tính năng tối ưu ảnh, do vậy để tối ưu hơn bạn nên dùng kèm plugin tối ưu hoá ảnh. Còn nếu bạn dùng CDN của FlyingPress thì không cần dùng thêm plugin tối ưu ảnh nữa.
Video & Iframe
Tuỳ chọn ở phần này rất đơn giản, chỉ là bật hoặc tắt tính năng defer video và iframe. Rất hữu ích nếu trang của bạn có video từ YouTube hoặc/và iframe nhúng fanpage, nhạc, file pdf,…
CDN
Đây là phần cài đặt CDN nếu bạn sử dụng dịch vụ này. Bạn có thể dùng CDN của FlyingPress với giá 3$/100GB hoặc dịch vụ CDN khác.
Tính năng CDN của FlyingPress:
- Có hơn 40 PoP trên toàn thế giới với độ trễ dưới 30ms;
- Nén ảnh và phân phối ảnh định dạng WebP;
- Thay đổi kích cỡ ảnh phù hợp với desktop và di động;
- Minify CSS và JS nhanh chóng;
- Tên miền tuỳ chỉnh cho CDN.
Để bật CDN ngoài bạn cần tick chọn phần Enable CDN sau đó nhập URL tuỳ chỉnh cho CDN của bạn vào.
Ở phần lựa chọn file CDN, bạn có ba tuỳ chọn:
- CDN toàn bộ file;
- Chỉ CDN cho CSS, JS và Font;
- Chỉ CDN cho ảnh;
Lựa chọn khuyên dùng: để All files để CDN toàn bộ tài nguyên.
Tham khảo thêm: các dịch vụ CDN cho WordPress.
PS: như đã nói ở phần trước, CDN của FlyingPress có sẵn tính năng tối ưu hoá ảnh nên nếu bạn dùng CDN của họ thì không cần cài thêm plugin tối ưu ảnh. Việc sử dụng CDN làm cho khả năng tích hợp ảnh WebP vào website trở nên dễ dàng hơn bao giờ hết.
Database
- Post Revisions: xoá các phiên bản cũ của bài viết;
- Post Auto Drafts: xoá lưu nháp tự động;
- Trashed Posts: xoá các bài viết trong thùng rác;
- Spam Comments: xoá các bình luận spam;
- Trashed Comments: xoá các bình luận trong thùng rác;
- Expired Transients: xoá các transients hết hạn;
- All Transients: xoá tất cả transients;
- Optimize Table: tối ưu hoá các bảng trong cơ sở dữ liệu;
- Automatic Cleaning: thiết lập lịch tối ưu cơ sở dữ liệu, có các tuỳ chọn gồm (1) Never / tối ưu thủ công, (2) Daily / tối ưu hàng ngày, (3) Weekly / hàng tuần, (4) Monthly / hàng tháng.
Vì tác vụ tối ưu cơ sở dữ liệu không phải thực hiện quá thường xuyên trên phần lớn website, bạn nên cân nhắc giữa việc tối ưu thủ công và hàng tháng.
Bạn có thể tìm hiểu thêm về cách tối ưu cơ sở dữ liệu WordPress ở bài này.
Mời bạn tham khảo hệ thống các bài viết về plugin cache, gồm: [1] LiteSpeed cache, [2] Swift Performance, [3] FlyingPress, [4] Cache Enabler.
Comments are closed.