"Kết nối trước" với preconnect, prefetch để làm gì?

3 năm trước · 3 phút đọc

Đọc bài viết này để làm cái chi

Tìm hiểu công dụng của rel trong thẻ link
Biết được cách làm cho website trông có vẻ "nhanh hơn"

Công năng của thẻ link khi có thêm rel

Ở đây chắc hẳn ai cũng từng dùng google fonts để nhúng fonts vào html rồi nhễ

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap" rel="stylesheet">

Có bạn nào thắc mắc thẻ rel="preconnect" trong trường hợp này dùng để làm gì không?

Thì câu trả lời là nó để "kết nối trước", từ này có vẻ hơi khó hiểu nhỉ. Ok, để mình giải thích thêm cho các bạn hiểu rõ hơn

Khi bạn biết mình sẽ sớm cần một tài nguyên từ 1 URL nào đó (trong trường hợp này là từ https://fonts.googleapis.com và https://fonts.gstatic.com để lấy các font), nhưng bạn chưa biết url đầy đủ của nó (url đầy đủ của nó là: https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap)
Thì lúc này HTML sẽ tới trang web lấy font về cho chúng ta trước khi dòng này được gọi <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap" rel="stylesheet">
Ưu điểm: Dùng cách này tốc độ lấy tài nguyên từ 1 trang web bên thứ 3 về sẽ nhanh hơn 1 tẹo
Nhược điểm: Song, có ưu thì cũng phải có nhược. Việc thiết lập và duy trì kết nối mở này rất tốn kém – cho cả máy khách và máy chủ. Vì vậy, lời khuyên của mình là các bạn chỉ nên sd cách tiếp cận này cho từ 4-6 trang web bên thứ 3 là hợp lí rồi.

Ngoài preconnect, chúng ta còn có các thuộc tính sau đây

<link rel="prefetch" href="/style.css" as="style" /> // khi bạn sắp cần một tài nguyên trong vài giây nữa (Thường dùng để tải font chữ trong source)

<link rel="preload" href="/style.css" as="style" /> // khi bạn cần một tài nguyên cho trang tiếp theo
(VD: Bạn có một trang web thương mại điện tử và 40% người dùng của bạn chuyển từ trang chủ sang trang sản phẩm. Sử dụng <link rel="prefetch">để tải xuống các tệp CSS và JS chịu trách nhiệm hiển thị các trang sản phẩm)

<link rel="preconnect" href="https://example.com" /> // khi bạn biết mình sẽ sớm cần một tài nguyên, nhưng bạn chưa biết url đầy đủ của nó (Thường dùng tải font ở bên thứ 3)
(Đừng lạm dụng nó. Việc thiết lập và duy trì kết nối mở rất tốn kém – cho cả máy khách và máy chủ. Nguyên tắc chung đơn giản là: sử dụng thẻ này cho tối đa 4-6 tên miền.)

<link rel="dns-prefetch" href="https://example.com" /> // khi bạn biết mình sẽ sớm cần một tài nguyên, nhưng bạn chưa biết url đầy đủ của nó (Y chang preconnect nhưng dành cho các trình duyệt cũ hơn)

<link rel="prerender" href="https://example.com/about.html" /> // khi bạn chắc chắn rằng hầu hết người dùng sẽ điều hướng đến một trang cụ thể và bạn muốn tăng tốc nó

<link rel="modulepreload" href="/script.js" /> // khi bạn sắp cần tập lệnh mô-đun ES

Mình chỉ liệt kê các case hay gặp, các bạn có thể tham khảo ở link này để tìm hiểu thêm nhé MDN

Bye~~