Trong bài viết ngắn này tôi sẽ so sánh 3 công cụ ‘pre / tải trước’ cơ bản giúp tối ưu tốc độ, hiệu suất website:
| preconnect | preload | prefetch | |
| Mục đích | Kết nối sớm với các máy chủ bên ngoài | Tải trước các tài nguyên quan trọng cho phiên duyệt web hiện tại | Tải trước các tài nguyên cho phiên duyệt web kế tiếp trong tương lai gần |
| Cơ chế | Thực hiện tải song song tìm kiếm DNS, kết nối bảo mật qua đó giảm được độ trễ mạng do phải thực hiện lần lượt | Nhờ việc tải trước các tài nguyên quan trọng, website có khả năng được tương tác sớm hơn | Các phiên truy cập kế tiếp có khả năng đạt được tốc độ cao gần như ngay lập tức vì tài nguyên đã được cache sẵn trong trình duyệt |
| Mức độ khó triển khai | Dễ | Trung bình | Khó |
| Ưu điểm | Không tốn tài nguyên máy chủ, dễ triển khai | Không tốn tài nguyên máy chủ, không khó triển khai | Cho tốc độ duyệt web của trang kế tiếp rất cao |
| Nhược điểm | Chỉ cải thiện được tốc độ ở mức trung bình | Về bản chất là cải thiện tốc độ nhận thức, không phải tăng tốc độ thuần túy | Gây lãng phí tài nguyên ít nhiều, yêu cầu hosting có thông số tốt hơn so với không dùng |
| Công cụ thực hiện | Có thể thực hiện thủ công bằng cách chèn thẻ link trước thẻ đóng header | Có thể thực hiện thủ công bằng cách chèn thẻ link trước thẻ đóng header | Thường phải thông qua công cụ được thiết kế chuyên nghiệp để cho kết quả tối ưu, chẳng hạn như kết hợp với công cụ phân tích Google Analytics để dự đoán prefetch chính xác hơn |
| Tỷ lệ hỗ trợ của trình duyệt (*) | 91,5% | 86,3% | 80,6% |
| Khác biệt căn bản | Không liên quan đến bandwidth, chỉ thuần tùy tìm kiếm DNS và kết nối https (nếu có). Chỉ áp dụng cho các tài nguyên bên ngoài host gốc. Không phải là chỉ thị mà trình duyệt bắt buộc phải thực hiện | Liên quan nhiều đến bandwith, áp dụng cho cả tài nguyên trong lẫn ngoài host gốc. Chỉ dùng cho phiên làm việc hiện tại. Là chỉ thị mà trình duyệt bắt buộc phải thực hiện | Liên quan nhiều đến bandwidth, áp dụng cho cả tài nguyên trong lẫn ngoài host gốc. Chỉ dùng cho phiến duyệt web kế tiếp. Mức độ ưu tiên thấp hơn preload. Không phải là chỉ thị mà trình duyệt bắt buộc phải thực hiện |
(*) Dựa trên thống kê của trang CanIuse.com vào ngày 8/3/2020
Tiền tố ‘pre’ trong các thuật ngữ trên chỉ đến hành động ‘tải trước’ và là các kỹ thuật mới được phát triển trong vài năm trở lại đây.
– Preconnect: giúp thực hiện tìm kiếm DNS và kết nối bảo mật https trước cho các tài nguyên quan trọng của bên thứ ba, ví dụ như Google Analystics, Facebook, YouTube, CDN. Preconnect tăng tốc nhờ việc thực hiện song song các tìm kiếm DNS, kết nối bảo mật thay vì thực hiện lần lượt. Nếu website của bạn phải cậy nhờ đến nhiều tài nguyên của bên thứ ba, preconnect có thể giúp cải thiện thời gian đáng kể, chẳng hạn trong một thử nghiệm liên quan đến Google fonts, preconnect đã giúp giảm thời gian tải hơn 0,5 giây (cho dù mạng lưới CDN của Google có chất lượng rất cao). Không giống prefetch, triển khai preconnect không làm bạn phải nâng cấp hosting, dù nó có làm tăng sử dụng RAM một chút trong quá trình xử lý.
– Preload: giúp tải trước các tài nguyên quan trọng trong phiên hiện tại, chẳng hạn như font, JS và CSS quan trọng cần tải càng sớm càng tốt. Sự khác biệt căn bản giữa preload và prefetch là preload tải tài nguyên cho phiên hiện tại, trong khi prefetch là cho phiên tương lai (cái có thể không xảy ra), prefetch do vậy có nguy cơ khó tránh là gây lãng phí tài nguyên nếu người dùng không sử dụng tài nguyên tìm nạp trước, trong khi preload thì không. Khi sử dụng preload bạn cũng không cần nâng cấp hosting.
– Prefetch: giúp tải trước các liên kết mà người dùng có khả năng truy cập trong click kế tiếp, nó có khả năng giúp trang web có tốc độ truy cập cao gần như ngay lập tức. Prefetch sẽ đợi trình duyệt tải xong nội dung của phiên hiện tại (current navigation), đợi đến khi rảnh rỗi mới tải các liên kết khác mà người dùng có thể truy cập tiếp (future navagation). Do vậy prefetch không cạnh tranh băng thông với phiên hiện tại. Tuy nhiên prefetch không phù hợp trên các mạng có kết nối chậm thí dụ như wifi chập chờn, đứt cáp, ngoài ra triển khai prefetch làm máy chủ gốc hoạt động vất vả hơn, có thể gấp đôi hoặc gấp ba tùy thuộc vào số lượng liên kết bạn muốn tải trước- nói cách khác bạn thường sẽ phải nâng cấp hosting không ít thì nhiều. Đây là cái giá phải trả chấp nhận được nếu view của bạn có giá trị thương mại cao, ví dụ như trên trang thương mại điện tử (website bán hàng).
Trong các kỹ thuật trên, preconnect dễ triển khai nhất, còn prefetch khó làm nhất. Lý tưởng nhất thì prefetch nên được thực hiện trên các mạng có kết nối nhanh và kết hợp với công cụ thống kê phân tích cách người dùng sử dụng website như Google Analytics để việc dự đoán truy cập tiếp theo được chính xác hơn, nhờ đó hạn chế tối đa lãng phí tài nguyên.
Với những ai sử dụng WordPress, bạn có thể tích hợp prefetch thông qua plugin Flying Pages, nó sẽ tải trước liên kết nếu liên kết đó đi vào khung nhìn trình duyệt (viewport) hoặc/và khi người dùng hover qua liên kết. Ngoài ra nó cũng có khả năng nhận biết hosting quá tải để tránh prefetch gây tác dụng ngược.
Bạn có thể tham khảo các bài viết mà tôi dịch về những kỹ thuật này thông qua các bài dưới đây:
- speed.family/link-prefetch/
- speed.family/su-dung-preconnect/
- speed.family/giup-website-tai-nhanh-hon-voi-preconnect-tang-toc-video-font-van-van/
- speed.family/tim-hieu-preload-prefetch-va-preconnect/
- speed.family/preload-preconnect-prefetch/
Hiện các kỹ thuật pre được hều hết các trình duyệt lớn hỗ trợ, cả trên phiên bản desktop lẫn di động của họ. Trình duyệt Chrome hiện hỗ trợ tốt nhất (do vậy người anh em Cốc Cốc cũng vậy), còn Safari vốn kiêu kỳ, ít hỗ trợ hơn.
