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 shared 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 (xem thêm phần giới thiệu về instant.page ở đây).
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
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
| Quicklink | Instant.page | Flying Pages | |
|---|---|---|---|
| Phương thức tải trước | Viewport | Mouse hover / hover chuột | Viewport + Mouse hover |
| Làm gia tăng hoạt động của Server | Cao | Thấp | Trung bình |
| Trì hoãn | 0 ms | 65 ms | 0 ms |
| Kích cỡ file (gzipped) | 0.8 KB | 0.8 KB | 1 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)
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:
Để 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.
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 speed.family
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.
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.
(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)
Comments are closed.