WP Rocket 3.7: Delaying JS Execution, Preloading Link rất nhiều tính năng mới

WP Rocket chính là một trong những cache plugin được sử dụng nhiều nhất hiện nay

Vì sao ư? Đơn giản là nó hiệu quả, dễ dàng cài đặt.

Website bạn sẽ được tăng tốc, chỉ với vài nút bấm.

Hiện plugin này đã bước sang tuổi thứ 7 nhưng vẫn không ngừng được cải tiến.

Đặc biệt trong bản WP Rocket 3.7 có rất nhiều tính năng mới.

Hãy cùng Diều Hâu ngó qua xem plugin này có gì nhé.

wp-rocket-3-7

WP-Rocket đầy đủ chức năng, không giới hạn site

WP Rocket plugin tăng tốc website hiệu quả

WP Rocket được biết đến là caching plugin, nhưng nó còn có thể làm nhiều hơn thế nữa.

Nó giúp bạn tối ưu một số thứ đơn giản, nhưng lại mang lại đến hiệu quả đến bất ngờ.

Đặc biệt là bạn chỉ cần click và tích để thiết lập mọi thứ rất đơn giản.

Hãy cùng xem qua những tính năng của WP Rocket:

  • Lưu đệm toàn bộ trang và bài viết trên website
  • Kích hoạt tính năng caching trên trình duyệt
  • Giảm băng thông sử dụng với công cụ nén Gzip
  • Tối ưu hóa tải font chữ
  • Hỗ trợ plugin. theme, hosting

Ngoài ra bạn cũng có thể thiết lập thêm các tính năng như:

  • Cache Preloading – điều này giúp bạn xây dựng bộ nhớ cache luôn sẵn sàng
  • Minify/Combine – Thu gọn và kết hợp các tệp CSS / JS của bạn.
  • Remove query từ tài nguyên tĩnh 
  • Lazyload – Trì hoãn quá trình tải hình ảnh, video cuộn đến đâu tải đến đó
  • Trì hoãn tải JS
  • Disable biểu tượng cảm xúc / nhúng
  • Combine các file Google Fonts

WP Rocket 3.7 rất nhiều cải tiến

WP Rocket 3.7 chính thức được ra mắt vào ngày 09/09/2020, chỉ sau kỉ niệm 7 năm của họ vài hôm.

Phiên bản này cũng có số 7 trùng với số 7 năm kỉ niệm của họ ( Có vẻ đây là con số may mắn của họ :D)

Có 2 tính năng mới hứa hẹn giúp cải thiện điểm số trên Google PageSpeed:

  • Delay of JavaScript Execution
  • Preload Links

Vậy nó là gì sau đây mìn sẽ giải thích cho mọi người dễ hiểu hơn.

Delay of JavaScript Execution ( Trì hoãn thực thi JavaScript)

Chắc hẳn các bạn đã nghe đến tính năng lazy-loading ( Chỉ tải hình ảnh khi cuộn đến).

Trước đây WP Rocket 3.3 đã đưa tính năng này vào từ lâu.

Nhưng với sự ra mắt của WordPress 5.5 lazy-loading đã được tính hợp sẵn.

Họ cũng áp dụng nguyên tắc tương tự như vậy với JavaScript.

Không phải lúc nào các file script cũng cần phải chạy ngay khi load site.

Cho nên bạn có thể trì hoãn chúng để tăng tốc độ.

Vậy cách sử dụng nó như thế nào?

Khi cài đặt WP Rocket 3.7 thành công trong tab File Optimization ở dưới cùng bạn sẽ thấy Delay JavaScript execution

Ở đây sẽ có một bảng để nhập những script mà bạn muốn delay.

Bạn có thể nhập inline hoặc tên của file Javascrip.

Trong này đã có sẵn một danh sách các scripts bên thứ 3 hay được sử dụng

Delay-JavaScript-execution

Nếu các scripts trong danh trên bị lỗi trong quá trình hoạt động, bạn có thể xóa chúng đi nhé.

Hiệu quả thực sự mạng lại là gì?

Nó sẽ giúp bạn có thể đạt điểm số cao hơn trên Google PageSpeed và giảm thời gian tải trang.

Trên trang chủ wp-rocket.me, họ có công bố mình đã giảm 65% thời gian load ( từ 2.6s xuống 0.9s)

Và tăng từ 46 điểm lên 86 điểm trên PageSpeed Score Mobile.

psi-before-mobile-1024x509

Trước khi thực hiện delay Delay of JavaScript Execution

psi-after-mobile-1024x512

Sau khi thực hiện delay Delay of JavaScript Execution

Tất nhiên đây chỉ là điểm số anh em tham khảo, mỗi website đều khác nhau.

Nếu anh em nào đang dùng WP Rocket hãy thử ngay tính năng mới này nhé.

Điểm có tăng thì comment ở dưới cho mọi người biết nhé.

Preload Links

Ngoài việc tối ưu để đạt điểm số cao hơn, có một thứ còn quan trọng hơn.

Đó là trải nghiệm người dùng thực sự trên website bạn như thế nào.

Bất chấp website đó có điểm số cao đến mấy, mà nó ko load mượt mà cũng sẽ thất bại.

Yếu tố này thường được đo bằng cảm giác, hay cảm nhận của người dùng.

WP Rocket có phát triển thêm một tính năng gọi là Preload Links để cải thiện điều này.

Nó hoạt động như thế nào?

Preloading link về mặt kỹ thuật có thể gọi là link prefetching ( tìm nạp trước liên kết)

Vẫn hơi khó hiểu đúng không nào?

Dưới đây định nghĩa từ Mozilla

Link prefetching là một cơ chế của browser, sử dụng thời gian nhàn rỗi của trình duyệt để tải xuống hoặc tìm nạp trước các tài liệu mà người dùng có thể truy cập trong tương lai gần. Một trang web cung cấp một tập hợp các gợi ý tìm nạp trước cho trình duyệt và sau khi trình duyệt tải xong trang, nó sẽ bắt đầu tìm nạp trước các tài liệu được chỉ định một cách âm thầm và lưu trữ chúng trong bộ nhớ cache của nó. Khi người dùng truy cập một trong các tài liệu được tải trước, nó có thể được phân phát nhanh chóng ra khỏi bộ nhớ cache của trình duyệt.

prefetch-links-1024x529

Cách prefetching hoạt động – nguồn web.dev

Ồ nghe khá thú vị nhỉ, nó có vẻ giống với chức năng Preload cache?

WP Rocket 3.7 sẽ dự đoán và tìm nạp trước các link người dùng có thể điều hướng tiếp theo.

Kết quả là khi người dùng bấm vào liên kết đó nó sẽ được load ngay lập tức.

Trong Tab Preload bạn sẽ thấy có tùy chọn Preload Links

Preload-Links

Tích vào để kích hoạt tính năng này

Ngoài ra thì họ cũng đã tính đến các trường hơp không mong muốn, tự động loại trừ khỏi hành vi này:

  • Mọi URL wp-admin hoặc các trang đăng nhập / đăng xuất
  • Các URL đã bị loại trừ khỏi bộ đệm theo cấu hình WP Rocket của bạn
  • Liên kết đến tệp hình ảnh
  • Các liên kết bao gồm một chuỗi truy vấn hoặc một liên kết
  • URL bên ngoài

Lưu ý: Hiện tính năng này mới chỉ hoạt động trên Chrome. Safari, Opera, IE và Edge hiện không hỗ trợ tìm nạp trước liên kết. Firefox thì có một lỗi, khiến trang tìm nạp trước không được phân phát từ bộ nhớ đệm.

Optimize Google Fonts

Tính năng này sẽ được bật mặc định khi bạn cài WP Rocket

Theo thống kê thì có đến 94% người dùng đang dùng tính năng này tốt.

Nếu trước đây bạn không bật tùy chọn này, bạn sẽ không thể kích hoạt nó khi cập nhật lên verion 3.7.

Để kích hoạt nó, bạn có thể truy cập tab Tool và sử dụng nút “Optimize Google Fonts“:

google-fonts-optimization-1024x364

Minify HTML

WP Rocket đã xóa hoàn toàn tính năng này khỏi trong Basic Settings

GTMetrix cuối cùng đã không còn khuyến khích Minify HTML ( những lợi ích nó mang lại quá nhỏ)

Các công cụ hiệu suất như PageSpeed Insight và Pingdom Tools đã bỏ qua khuyến nghị này trong một thời gian.

Vì vậy hiện tại Minify HTML sẽ không còn cần thiết nữa.

optimize-google-fonts-1024x524

tạm biệt Minify HTML

Tổng Kết

Có thể nói ai đang dùng WP Rocket sẽ được có được bản cập nhật cực kỳ đáng mong đợi.

Không những nó giúp bạn cải thiện điểm số trên Google PageSpeed với Delay JavaScript Execution.

Preload Links còn mang lại vào trải nghiệm thực tế tốt hơn cho người dùng.

Còn anh em thấy sao về bản cập nhật lần này?

Nếu có bất kỳ câu hỏi hay góp ý gì hãy comment ở dưới nhé.

5
1
vote
Article Rating

5 BÌNH LUẬN

Đăng ký
Thông báo về
guest
5 Bình Luận
Inline Feedbacks
View all comments

haodv
haodv
09/12/2019 9:54 chiều

Chào bạn. Mình dùng VPS chạy Webserver Nginx, và sử dụng Wp-Rocket để cache web. Máy chủ tự động cache web bình thường. Mình sử dụng trình duyệt Chrome dưới dạng ẩn danh, hoặc trình duyệt khác thì khi vào web thấy cache. Nhưng nếu sử dụng Chrome, thì web không có cache. Có cách nào khắc phục không bạn

Diều Hâu
Quản trị viên
Trả lời  haodv
09/12/2019 11:19 chiều

WP Rocket có tính năng không cache đối với logged-in user, vậy nên bạn xem tính năng này có bật không nhé 🙂

hoa
hoa
09/06/2020 1:47 chiều

Mình định mua cho website https://truongdaynauan.com/

Hải
Hải
02/10/2020 1:51 chiều

Mình không thấy bài viết mới của mình sau khi đăng nó trên trang web. Sau đó, mình xóa bộ nhớ cache, nó mới xuất hiện trên trang web. Điều đó có nghĩa là mỗi khi mình đăng một bài mới, mình phải xóa bộ nhớ cache của nó? Mong bạn giúp mình giải đáp thắc mắc này!

Diều Hâu
Quản trị viên
Trả lời  Hải
02/10/2020 8:43 chiều

Yeah đúng rồi bạn, thường cập nhật nội dung mới sẽ cần xóa cache hoặc xóa cache ở một số trang nhất định

BẠN CẦN HỖ TRỢ VỀ

Viết Blog

Bảo Mật

Sửa Lỗi

Tăng Tốc

SEO

Bán Hàng

CÓ THỂ BẠN CHƯA BIẾT

Thuật Ngữ: Update

Update là gì? WordPress tự động kiểm tra các bản cập nhật trên lõi WordPress cũng như các plugin và theme được cài đặt. WordPress...

Thuật ngữ: Atom

Thuật ngữ: Atom Atom là một định dạng để xuất bản nội dung kiểu XML sang kiểu được sử dụng bởi các độc giả và...

Thuật Ngữ: Text Editor

Text Editor là gì? Có hai loại trình biên tập văn bản ( text editor) chúng tôi đề cập đến trên WParrow. Loại thứ nhất...

VPS NÊN DÙNG

BÀI VIẾT LIÊN QUAN

0 0 vote
Article Rating