Giúp website tải nhanh hơn với preconnect (tăng tốc video, font, vân vân)

Với gợi ý tài nguyên của preconnect, bạn có thể giảm độ trễ yêu cầu và làm website tải nhanh hơn.

Jeremy Frank

Yêu cầu một tài nguyên bên ngoài website hoặc ứng dụng làm phát sinh một số vòng lặp khứ hồi (round-trips) trước khi trình duyệt có thể thực sự tải tài nguyên đó về. Các vòng lặp khứ hồi này bao gồm tìm kiếm DNS, TCP handshake, và đàm phán TLS (nếu SSL- tức liên kết bảo mật được dùng).

tìm kiếm DNS, TCP handshake và đàm phán TLS

Phụ thuộc vào tình huống cụ thể của trang và điều kiện mạng, các vòng lặp khứ hồi này có thể bổ sung hàng trăm mili giây độ trễ, thậm chí còn hơn nữa. Nếu bạn yêu cầu các tài nguyên từ vài host khác nhau, con số này có thể tăng lên nhanh chóng, và bạn có thể thấy trang tải chậm hơn, đặc biệt trên kết nối di động, mạng wifi không ổn định, hoặc khi nghẽn mạng.

Một trong các cách dễ dàng nhất để tăng tốc website hoặc ứng dụng đó là thêm gợi ý preconnect cho bất cứ host nào mà bạn sẽ yêu cầu tải tài nguyên từ nó (*). Các gợi ý này về bản chất nói cho trình duyệt biết host gốc nơi chứa các tài nguyên, vì thế nó có thể chuẩn bị mọi thứ bằng cách thiết lập mọi kết nối cần thiết cho các tài nguyên đó.

Bên dưới là một vài tình huống khi mà việc bổ sung gợi ý preconnect có thể làm mọi thứ tải nhanh hơn.

(*)- Chú thích của người dịch: preconnect đến mọi tài nguyên của bên thứ ba đã được chứng minh là có thể làm website hiển thị chậm đi so với việc preconnect cẩn thận, có chọn lọc.

Hiển thị Google font nhanh hơn

Google font có chất lượng tốt. Đây là dịch vụ đáng tin cậy và có tốc độ cao do sử dụng mạng CDN toàn cầu của ông lớn Google. Tuy nhiên, vì các chỉ dẫn @font-face trước hết phải được tìm thấy trong file CSS trước khi trình duyệt thực hiện các yêu cầu về font cho web, điều này thường có thể gây độ trễ hiển thị (hiện tượng FOIT) đáng chú ý trong khi trang render. Chúng ta có thể giảm đáng kể độ trễ này bằng cách thêm gợi ý preconnect như bên dưới đây!

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Sau khi làm điều đó, bạn sẽ dễ dàng nhận ra sự khác biệt trong bảng waterfall bên dưới. Việc thêm preconnect loại bỏ ba vòng lặp khứ hồi từ tuyến hiển thị quan trọng và cắt bỏ hơn 0,5 giây độ trễ.

cắt giảm 0,5 giây độ trễ với preconnect
Cắt giảm hơn 0,5 giây độ trễ với preconnect

Preconnect áp dụng cho trường hợp cụ thể này cho lợi ích rõ ràng nhất, nó giúp giảm chặn hiển thị và cải thiện thời gian hiển thị website.

Lưu ý rằng đặc tả font-face yêu cầu font được tải trong “chế độ ẩn danh/anonymous mode”, điều đó giải thích tại sao thuộc tính crossorigrin là cần thiết trong gợi ý preconnect.

Hiển thị video nhanh hơn

Nếu bạn có video trong khung nhìn thiết bị khi tải trang, hoặc nếu bạn sử dụng tính năng lazy load các video nằm bên dưới, thế thì bạn có thể sử dụng preconnect để giúp các tài nguyên cần cho trình phát (player) và ảnh đại diện (thumbnail) hiển thị nhanh hơn một chút. Với video YouTube, bạn sử dụng các gợi ý preconnect sau:

<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://i.ytimg.com">
<link rel="preconnect" href="https://i9.ytimg.com">
<link rel="preconnect" href="https://s.ytimg.com">

Roboto hiện là font được dùng trong trình phát của YouTube, vì thế bạn cũng có thể muốn preconnect tới host của Google font nếu bạn vẫn chưa thực hiện.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Cấu trúc tương tự có thể được áp dụng cho các dịch vụ video khác, chẳng hạn như Vimeo- nơi mà chỉ có hai host được sử dụng là: vimeo.com và vimeocdn.com

P/S:

  • Bạn nên để preconnect vào trước thẻ đóng </head> và trước bất kỳ đoạn mã nào mà nó chứa tên miền cần kết nối trước, vì nếu để sau sẽ không có tác dụng.
  • Nếu bạn muốn phát hiện website đang sử dụng tài nguyên của bên thứ ba nào, cũng như số lượng kết nối, dung lượng tải về, bạn có thể sử dụng công cụ tools.pingdom.com
  • Trong đoạn mã dành cho YouTube ở phía trên, chỉ duy nhất www.youtube.com là chắc chắn được sử dụng. Còn các cái khác bạn nên kiểm tra lại trên trang của bạn xem nó có sử dụng không, trong một số trường hợp nó sẽ sử dụng url khác. Đây cũng là nguyên nhân mà sau một khoảng thời gian bạn nên kiểm tra lại website hiện đang sử dụng URL cụ thể của tài nguyên bên thứ ba nào, vì mặc dù dịch vụ chính không thay đổi, các tên miền hỗ trợ cho nó có thể thay đổi.

Preconect cải thiện tốc độ trang

Ở trên chỉ là vài ví dụ về cách preconnect được dùng. Như bạn có thể thấy, nó là cải thiện rất đơn giản bạn có thể thực hiện để cắt giảm các vòng lặp khứ hồi ra khỏi đường dẫn yêu cầu. Bạn cũng có thể triển khai chúng thông qua HTTP Link header hoặc gọi chúng thông qua JavaScript. Hầu hết các trình duyệt lớn đều đã hỗ trợ tính năng này:

trình duyệt hỗ trợ preconnect
Rất nhiều trình duyệt lớn đã hỗ trợ preconnect, và theo báo cáo của CanIUse, tính năng này có thể sử dụng được trên 91,49% trình duyệt của người dùng

Hãy sử dụng nó một cách khôn ngoan. Chỉ preconnect tới các host mà bạn chắc chắn rằng tài nguyên sẽ được yêu cầu từ đó (nếu dùng WordPress bạn hãy dùng plugin SOGO để tùy biến preconnect trên trang cụ thể thay vì thực hiện kết nối trước trên tất cả các trang). Cũng vậy, hãy ghi nhớ trong đầu rằng, đây chỉ là tối ưu hóa “các gợi ý/hints” cho trình duyệt, và vì vậy có thể không được thực hiện vào mọi lần vào tất cả thời điểm. Nếu bạn sử dụng preconnect cho các trường hợp khác và thấy hiệu suất, tốc độ được cải thiện, hãy cho tôi biết trong bình luận bên dưới nhé!

Nếu bạn muốn tham khảo các biện pháp khác sử dụng biện pháp tải trước, hãy tham khảo bài viết tìm hiểu preload, preconnect và prefetch.

Cuối cùng, dù không bắt buộc, bạn nên kiểm tra tốc độ thực tế thay đổi thế nào sau khi triển khai preconnect.

(Dịch từ bài viết: Make Your Site Faster with Preconnect Hints, tác giả: Jeremy Frank)

Leave a Comment