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

bởi Duc Anh Nguyen
Hải âu tung cánh

Khi mọi người tò mò hỏi rằng tôi có bí mật gì không mà blog của tôi lại tải nhanh như vậy (blog của tác giả gốc: wpspeedmatters.com), 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ờ prefetch liên kết trong viewport (khung nhìn) khi trình duyệt 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 (tác giả Gijo Varghese sử dụng host ở closte.com -- một trong những hosting rất mạnh với Google cloud + Google CDN + LiteSpeed Webserver). 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.

lựa chọn số lượng yêu cầu tối đa

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 / nửa vòng trái đất”).

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 để tránh quá tải- với mặc định là 3, nhỏ nhất là 1, và nhiều nhất thì không giới hạn
  • 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

(*): chú thích của người dịch: có thể họ làm điều này, dựa vào thống kê các liên kết trước đây được click hoặc dựa vào công thức có sẵn, cho thấy khuynh hướng link nào thường được click hơn, chẳng hạn link dài hơn hoặc ở trên cao hơn.

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❌❌✅

Làm thế nào để biết được bạn triển khai thành công Flying Pages

Để kiểm tra Flying Pages đã tích hợp thành công vào website bạn làm như sau:

  • Sử dụng trình duyệt Chrome truy cập vào website của bạn
  • Chuột phải chọn Kiểm tra (hoặc nhấn tổ hợp phím tắt Ctrl + Shift + I)
  • Chọn tab Network
  • Vô hiệu hóa cache (Disable cache)
vô hiệu hóa cache

Tiếp theo bạn tải trang, đợi nó tải xong rồi kéo chuột đến phần có liên kết nội bộ trên trang, bạn sẽ thấy plugin tải trước nội dung của liên kết nằm trong viewport (khung nhìn trình duyệt). Những liên kết được prefetch có type là text/html, và nó cũng chỉ tải trước tài nguyên html thôi, các ảnh, video, JS, CSS…trong trang HTML đó thì không được tải trước, điều này tôi cho là tốt để đỡ ảnh hưởng đến hiệu suất vì file HTML thường nhẹ, chỉ khoảng 20 -- 30 KB, trong khi các tài nguyên khác thì nặng.

Xem video dưới đây để biết cách kiểm tra Flying Pages đang hoạt động:

Kiểm tra tính năng Prefetch có hoạt động trên website hay không?

Để kỹ hơn, bạn nên vào một trang đã được prefetch, cũng ở tab Network và kéo lên phần đầu bạn sẽ thấy tài liệu HTML ở cột Size ghi là Prefetch Cache, với thời gian tải rất ít, thường chỉ vào cỡ 1/10s.

kiểm tra tài nguyên có được prefetch hay không.

Lưu ý: trang Kiến càng tôi không sử dụng plugin Flying Pages (lý do là vì trang này có nhiều người truy cập và liên kết nội bộ dày đặc), nếu bạn muốn kiểm tra tính năng prefetch, hãy ghé thăm trang chimcat.net

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 1: 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

P/S 2: Vì tôi nhận thấy plugin Flying Pages có khả năng gây quá tải cho hosting nên đã thử tìm xem có cách nào giúp nó tải trước thông minh hơn không. Hóa ra là CÓ. Thư viện Guess.js sử dụng Google Analytics (hoặc công cụ tương tự) để phân tích thói quen của người dùng và tìm nạp trước các liên kết có xác suất được click cao nhất. Tôi có hỏi tác giả plugin Flying Pages rằng anh ấy có dự định tích hợp Guess.js vào không, đáng tiếc anh trả lời là không vì cần dữ liệu lớn và tích hợp vào WordPress không phải là chuyện dễ dàng.

không tích hợp Guess.js

(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

Để lại bình luận