Quicklink và Instant.page và tại sao tôi xây dựng plugin Flying Pages

bởi Nguyễn Đức Anh
Hải âu tung cánh

Khi mọi người tò mò hỏi tôi có bí mật gì không về chuyện blog của tôi tải nhanh như vậy, tôi trả lời họ đó là nhờ “Quicklink”. Nếu bạn ở trong nhóm WP Speed Matters trên Facebook, bạn có thế để ý là tôi đề xuất sử dụng Quicklink cho tất cả mọi người.

Quicklink là gì?

Tải trang tiếp theo nhanh hơn nhờ prefetching liên kết trong viewport (khung nhìn) khi rảnh rỗi

Quiclink là một file JavaScript nhỏ bé có khả năng phát hiện các liên kết trong viewport (nội dung nhìn thấy trên trên trình duyệt khi bạn lướt web) và tải trước chúng thậm chí là trước khi người dùng click vào nó.

Rắc rối với Quicklink là gì?

#Vấn đề 1 – Quá tải máy chủ

Nếu bạn có quá nhiều liên kết trong viewport, Quicklink sẽ báo với trình duyệt prefetch tất cả các liên kết này cùng một lúc. Điều này sẽ làm máy chủ gia tăng hoạt động.

Tôi chưa từng gặp vấn đề như vậy bởi vì hosting của tôi có thể xử lý nó dễ dàng. Nhưng với những ai sử dụng share hosting hoặc hosting không đủ mạnh, nó sẽ gây quá tải server trong thời gian cao điểm.

Giải pháp: Không thực hiện preloading nếu server bận rộn và preload chỉ một vài liên kết mỗi giây.

Vấn đề #2 – Không prefetch các liên kết động inject

Quicklink tìm tất cả các liên kết trên trang web trong suốt quá trình tải lúc ban đầu. Nó không không nhận ra được bất cứ liên kết nào được inject sau đó. Một ví dụ điển hình là nội dung “cuộn chuột không giới hạn / infinite scroll” như với bài đăng blog hoặc sản phẩm tải mỗi khi click vào nút “Xem thêm / Load more”.

Giải pháp: Tải trước trang khi chuột được hover qua liên kết, tương tự như cách Instant.page thực hiện.

Instant.page là gì?

Instant.page thực hiện tải trước theo kiểu just-in-time (cần thì mới tải) – nghĩa là nó chỉ tải trước trang ngay trước khi người dùng click vào liên kết. Làm sao nó biết được điều này? Bởi vì ngay trước khi click vào liên kết, người dùng sẽ hover chuột qua liên kết đó.

Điều này có nét tương tự với Quicklink, nhưng thay vì tìm nạp trước (prefetch) tất cả các liên kết trong khung nhìn (viewport), thì Instant.page chỉ prefetch liên kết mà chuột hover qua mà thôi.

Vấn đề với Instant.page là gì?

Thông thường, người dùng mất khoảng 300ms từ khi hover chuột đến khi click. Vì thế nếu máy chủ không phản hồi trong vòng 300ms, thì bạn gần như không nhận ra được bất kỳ sự khác biệt nào về tốc độ tải. Đạt được mức độ phản hồi TTFB dưới 300ms không phải là chuyện dễ dàng. Hầu hết các công ty hosting có con số này quanh mốc 400ms và thậm chí là 1000ms nếu hosting cách xa người dùng web (chẳng hạn như người dùng ở Việt Nam, còn hosting đặt tại Hoa Kỳ, nguyên văn được dùng là “halfway around the globe”).

Giải pháp: Tải trước liên kết trong viewport thay vì hover, tương tự cách làm của Quicklink.

Giới thiệu Flying Pages

plugin Flying Pages

Flying Pages được xây dựng để sửa chữa những vấn đề mà Quicklink và Instant.page gặp phải.

  • Tải trước trang trong viewport (tương tự Quicklink)
  • Tải trước trang khi hover chuột (tương tự Instant.page)
  • Giới hạn số lượng liên kết tải trước mỗi giây
  • Dừng tải trước nếu máy chủ quá bận rộn
  • Hiểu được kết nối và sở thích của người dùng (?)
  • Có dung lượng chỉ 1KB khi được nén gzip

Flying Pages nhận biết tất cả các liên kết trong viewport và thêm nó vào hàng đợi (queue). Các liên kết trong hàng đợi được xử lý với giới hạn 3 yêu cầu mỗi giây (thiết lập mặc định). Điều này sẽ ngăn việc gửi số lượng lớn yêu cầu trong thời gian ngắn. Nó cũng tải trước các liên kết khi chuột được hover, nếu liên kết đó hiện vẫn chưa được tải trước trong hàng đợi.

Flying Pages cũng đủ thông minh để nhận biết phản hồi chậm và dấu hiệu máy chủ quá tải. Bất cứ khi nào nó nhận ra tình huống như vậy, tất cả các tải trước sẽ bị dừng lại.

So sánh Quicklink và Instant.page và Flying Pages

QuicklinkInstant.pageFlying Pages
Phương thức tải trướcViewportMouse hover / hover chuộtViewport + Mouse hover
Làm gia tăng hoạt động của ServerCaoThấpTrung bình
Trì hoãn0 ms65 ms0 ms
Kích cỡ file (gzipped)0.8 KB0.8 KB1 KB
Tôn trọng kết nối của người dùng✅✅✅
Hỗ trợ trình duyệt Safari✅❌✅
Giới hạn số liên kết tải trước mỗi giây❌❌✅
Tải trước các liên kết động inject❌✅✅
Ngừng tải trước khi thấy phản hồi chậm❌❌✅
Ngừng tải trước khi thấy máy chủ quá tải❌❌✅
Thiết lập cấu hình thông qua plugin WordPress❌❌✅

Nhận xét của người dịch

Tôi rất thú vị về cách tăng tốc của plugin này, nó khác với tất cả các plugin tăng tốc mà tôi biết trước đó, và hiệu quả của nó thì thực sự tốt.

Tuy nhiên với những ai sử dụng phương thức RAM cache, áp dụng plugin này có thể yêu cầu bạn nâng cấp hosting thì mới nhận được các lợi ích đầy đủ của nó. Với những ai dùng Disk cache (như các plugin cache vẫn thường áp dụng), nó sẽ ít ảnh hưởng hơn nhiều, và có khả năng bạn không phải nâng cấp mà vẫn nhận được công dụng từ Flying Pages.

P/S: theo thông báo của chính tác giả của plugin thì Elementor.com đã sử dụng Flying Pages, nhưng không dùng viewport mà chỉ tải thông qua hover, có lẽ Elementor rất cẩn trọng để tránh vấn đề quá tải.

Elemontor sử dụng Flying Pages

Ảnh chụp màn hình từ nhóm WP Speed Matters của tác giả plugin

(Dịch từ bài viết Quicklink vs Instant.page vs Flying Pages – Why I built Flying Pages, tác giả: Gijo Varghese, website: WPSpeedMatters)

0 bình luận

Khu vực bình luận

avatar