Tích hợp Speculative Loading giúp site ghost tải nhanh hơn

Speculative Loading giống như việc trình duyệt “đọc trước suy nghĩ” của người dùng, chuẩn bị sẵn sàng trang tiếp theo để khi người dùng nhấp chuột, trang đó sẽ xuất hiện gần như ngay lập tức, mang lại trải nghiệm tải trang “tức thì”.

Tương tự như lazyload được hỗ trợ bởi trình duyệt thì Speculative Loading cũng được hỗ trợ bởi trình duyệt. Bạn không cần phải cài thêm script thứ ba để chạy nên tối ưu được hiệu suất website.

Speculative Loading dựa trên Speculation Rules API của trình duyệt cho phép trình duyệt suy đoán những trang nào có khả năng cao người dùng sẽ truy cập tiếp theo và tự động tải trước các tài nguyên của trang đó, trước khi người dùng thực sự nhấp vào liên kết.

Có 2 loại suy đoán tải trước:

• Prefetch (Tải trước): Trình duyệt chỉ tải về các tài nguyên chính của trang (HTML, CSS, JS, hình ảnh) và lưu vào bộ nhớ cache. Khi người dùng truy cập trang, trình duyệt sẽ sử dụng các tài nguyên đã tải về, giúp trang tải nhanh hơn.
• Prerender (Render trước): Mạnh mẽ hơn prefetch. Trình duyệt không chỉ tải tài nguyên mà còn thực sự render toàn bộ trang trong một tab ẩn hoặc một quy trình nền. Khi người dùng nhấp vào liên kết, trang sẽ xuất hiện tức thì như thể nó đã được tải sẵn.

TanaFlows theme áp dụng cả 2 phương pháp của Speculative loading để tối ưu hiệu suất website một cách có chiến thuật.

• Website bạn sẽ được tải trước (Prefetch) các tài nguyên chính của trang trong tầm nhìn cửa sổ của bạn để tránh tải các trang chưa cuộn xuống. Giúp bạn tải trước trang trên cả desktop và mobile. Bạn sẽ hài lòng về trải nghiệm.
• Khi bạn nhấp vào một liên kết, trang sẽ xuất hiện tức thì như thể nó đã được tải sẵn nhờ vào render trước (Prerender) các tài nguyên của trang đó. Nghĩa là trên máy tính, khi bạn rê chuột vào liên kết trong 200ms thì liên kết đó sẽ tải trang trước.
• Các menu ở đầu trang và cuối trang sẽ bị loại trừ tải trước để giúp tập trung vào các liên kết trong phần nội dung chính của trang.

Hiện tại, Speculative Loading vẫn chưa được hỗ trợ trên các trình duyệt như Safari, Firefox và Opera. Tuy nhiên, như lịch sử của lazyload và webp, chúng sẽ được hỗ trợ trong tương lai.