Categories Tải trước

Cải thiện tốc độ website bằng cách sử dụng preload, preconnect, prefetch

Ngày hôm nay tôi sẽ trình bày một vài kỹ thuật đơn giản để giúp website của bạn tải nhanh hơn.

Đầu tiên, chúng ta cần biết preload, preconnect và prefetch là gì đã.

Preload – Khi chúng ta sử dụng preload trong tag link, trình duyệt sẽ tiến hành tìm nạp sớm yêu cầu để có được tài nguyên mà website cần. Cái này được áp dụng chủ yếu vào các tài nguyên có mức độ ưu tiên cao trong phiên làm việc hiện tại, bất kể nó là tài nguyên thuộc hosting gốc hay của bên thứ ba (thirt-party).

Preconnect – Nó giải giúp quyết vấn đề tra cứu DNS và TCP handshaking/https. Chỉ dành cho tài nguyên của bên thứ ba, kể cả là CDN (kiểu cdn.ten-mien-cua-ban.com), nó không cần thiết cho các tài nguyên thuộc host gốc.

DNS-Preconnect – Nó chỉ giúp giải quyết tra cứu DNS và cũng chỉ dành cho tài nguyên của bên thứ ba. Cái này kém hơn so với preconnect là nó không thực hiện các vấn đề liên quan đến kết nối trước, hình thành liên kết bảo mật (https).

Prefetch – Nó giúp tìm nạp trước các nguồn tài nguyên và đưa nó vào trong cache trình duyệt để khi người dùng cần tài nguyên thì trình duyệt sẽ lấy từ đây thay vì phải thực hiện yêu cầu theo thời gian thực. Điểm khác biệt với preload là việc tìm nạp trước này được thực hiện khi rảnh rỗi trong phiên hiện tại, và các tài nguyên tìm nạp trước là dành cho lượt ghé thăm/click kế tiếp chứ không phải hiện tại. Hệ quả là nếu được áp dụng cẩn trọng, trang website sẽ tải nhanh hơn rất nhiều, vì nội dung mà người dùng truy cập trong tương lai đã được cache. Đây là cách mà plugin Flying Pages áp dụng.

Tôi nghĩ bạn có thể vẫn cảm thấy lẫn lộn giữa preload và prefetch. Một điểm khác biệt quan trọng là preload được áp dụng cho các tài nguyên có mức độ ưu tiên cao, còn prefetch được áp dụng cho các tài nguyên có mức độ ưu tiên thấp.

Giờ chúng ta sẽ xem ví dụ trong thực tế.

Mặc định thì website vuejs của tôi (tác giả gốc bài tiếng Anh) không sử dụng bất cứ phương thức nào bên trên.

Giờ chúng ta kiểm tra hiệu suất của trang bằng công cụ Chrome Audits (lighthouse).

hiệu suất của trang VueJS
Hiệu suất của trang VueJS

Bạn có thấy hiệu suất của trang đang ở mốc 43%.

Sau khi tôi sử dụng preconnect và preload

Giờ hiệu suất của trang là 78%.

hiệu suất của trang tăng lên
Hiệu suất của trang tăng lên

Chúng ta cùng xem một số trang web lớn sử dụng các biện pháp gợi ý tài nguyên ở trên như thế nào

1. Amazon

Trang thương mại điện tử hàng đầu thế giới.

Amazon sử dụng dns-prefetch
Amazon sử dụng dns-prefetch cho các tài nguyên bên thứ ba

2. Github

Trang web dành cho lập trình viên.

Github cũng chủ yếu sử dụng dns-prefetch

3. Netflix

Công ty cho xem phim trực tuyến thu phí hàng đầu thế giới.

Netflix sử dụng preload
Netflix sử dụng preload cho nhiều file js

4. WP Speed Matters

Trang web cung cấp nội dung về cải thiện tốc độ website chuyên cho WordPress.

các thuộc tính pre của trang WPspeedmatters
WP Speed Matters sử dụng dns-prefetch cho GA (google-analytics.com) và CDN, preconnect cho font của bên thứ ba (fonts.gstatic.com) và preload cho font local host (.woff)

Giải thích dễ hiểu hơn về các thuộc tính preload, preconnect và prefetch

Cái mà chúng ta cần nắm bắt trong cả bốn thuộc tính trên là ‘pre/tải trước/làm trước’.

Hãy tưởng tượng bạn muốn xây căn nhà mới, bạn sẽ mua + làm những thứ gì để chuẩn bị? Có 2 phương án:

  • A. Bạn mua xi măng, cát sỏi, sắt thép, gạch + bản thiết kế cơ bản về căn nhà;
  • B. Bạn mua bồn tắm, bồn vệ sinh, bồn rửa bát, bình nóng lạnh + lên danh sách khách dự tiệc nhà mới;

Rõ ràng là bạn nên chọn phương án A. Không phải những đồ vật, công việc ở phương án B không quan trọng- ngược lại, về sau bạn hầu như chỉ để ý đến các đồ vật B mà quên mất sự tồn tại của xi măng, cát sỏi, sắt thép, vân vân. Thế nhưng để xây dựng căn nhà nhanh chóng, thuận lợi bạn phải mua các đồ vật xây dựng làm nền cho căn nhà đó trước.

Xi măng, cát sỏi, sắt thép, gạch, bản thiết kế chính là những cái cần phải ‘pre/làm trước’.

Làm sao biết được tài nguyên nào thì nên ‘pre’ và dùng thuộc tính cụ thể nào với tài nguyên đó

Tài nguyên bạn nên ‘pre’ là tài nguyên quan trọng của website, làm nền tảng cho trang.

Preconnect hay được dùng để tạo ra các kết nối trước với các tài nguyên của bên thứ ba mà chưa cần phải tải tài nguyên đó ngay tức khắc, nhưng nó sẽ được tải trong khoảng thời gian gần (khoảng 10s sau khi người dùng điều hướng đến trang). Kết nối trước bao gồm tìm kiếm DNS và tạo https. Ví dụ preconnect với YouTube, các mã phân tích website, Facebook, vân vân. Preconnect giống như bạn gọi điện đặt hàng trước cho các cửa hàng xây dựng để họ chuẩn bị. Số lượng hàng, loại hàng đã được biết trước, lúc cần chỉ việc chở đến công trình đồng loạt thay vì bạn sẽ phải chờ từng cửa hàng mang vật liệu đến rồi mới đặt hàng ở cửa hàng kế tiếp- tức bạn mua ở cửa hàng A, đợi A mang vật liệu đến rồi mới đặt hàng ở cửa hàng B, đợi B mang vật liệu đến, rồi mới đặt ở cửa hàng C, quá trình cứ tiếp diễn như vậy… Vì quá trình như thế không diễn ra song song nên sẽ mất thời gian hơn. Preconnect không làm gia tăng gánh nặng đáng kể lên máy chủ của bạn, tuy nhiên preconnect đến tất cả tài nguyên của bên thứ ba có thể làm website chậm hiển thị hơn so với việc chỉ preconnect có chọn lọc.

Preload hay được dùng để tải sẵn các tài nguyên quan trọng của chính website, ví dụ như font, critical CSS, file JS thiết yếu hoặc các tài nguyên mà bạn chắc chắn phải tải về nhanh chóng trên trang (tài nguyên đó sẽ được dùng ngay trong lượt tải đầu tiên / initial page load). Preload = Preconnect + tải tài nguyên về càng sớm càng tốt. Preload giống như nguyên vật liệu làm móng cho căn nhà và xây tầng một. Preload không làm gia tăng gánh nặng lên máy chủ của bạn hoặc chính xác hơn thì chỉ rất nhỏ, hầu như không đáng kể, và khoảng thời gian tác động cũng rất ngắn. Sự gia tăng nhỏ được bù đắp bằng các lợi ích lớn hơn mà nó đem lại.

Prefetch được dùng để tải sẵn các tài nguyên mà người dùng có thể sử dụng trong các trang, lượt truy cập tiếp theo, do vậy so với các tài nguyên ở phiên làm việc hiện tại mức độ ưu tiên của nó thấp hơn, kể cả so với các tài nguyên không quan trọng ở phiên hiện tại. Prefetch giống như nguyên vật liệu được dùng để xây tầng hai, tầng ba, tầng bốn, hay thậm chí là căn nhà nghỉ dưỡng khác ở vùng đất nào đó mà người dùng vẫn chưa quyết định, dĩ nhiên nó cũng quan trọng nhưng không cấp thiết bằng nguyên liệu dùng để xây tầng một của căn nhà hiện tại. Điều quan trọng cần để ý ở đây là có những nhà không xây tầng hai hoặc tầng ba- có những khách ghé thăm chỉ xem duy nhất một trang, và nếu họ xem trang kế tiếp, thật khó để dự đoán chính xác họ muốn xem trang nào, thế nên prefetch gây lãng phí tài nguyên dù ít dù nhiều, nó chắc chắn sẽ khiến bạn phải sử dụng hosting tốt hơn gói mà bạn đang dùng, có thể yêu cầu thông số cao hơn gấp đôi, gấp ba, tùy thuộc vào mức độ, số lượng các liên kết cần tìm nạp trước. Nhưng đó là cái giá có thể chấp nhận được trên những trang mà lượt truy cập có giá trị cao– ví dụ như các trang thương mại điện tử. Plugin giúp bạn triển khai prefetch dễ dàng trên WordPress là Flying Pages. Lưu ý, khi bạn triển khai prefetch hãy kiểm tra tốc độ website theo cách thủ công thật cẩn thận, vì trên một số website ngay cả khi được nâng cấp hosting, prefetch thậm chí còn làm tốc độ chậm đi, hoặc/và lúc thì rất nhanh, lúc thì chậm đáng kể.

(Một phần bài viết này được tham khảo từ bài How to improve web performance By using Preload, Preconnect, Prefetch của tác giả Sai Gowtham)

Back to Top