Chắc chắn bạn đã có đôi lần vất vả tìm hiểu cách để tăng Tốc độ tải trang cho website của mình, và có lẽ bạn đã đọc đến cách sử dụng các attribute sử dụng trên thẻ link để cải thiện hiệu năng của website.
Ví dụ
<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com" />Sau đây mình sẽ giới thiệu về từng attribute cũng như các sử dụng chúng trong việc thiết kế trang web của bạn.
preload và cách dùng
<link rel="preload" /> sẽ báo với trình duyệt download và cache một resource (như script hoặc stylesheet) nhanh nhất có thể. Nếu chúng ta cần resource đó ngay sau khi trang đang load.
Một khi trình duyệt đã download xong resource này, trình duyệt sẽ không làm gì hết, file script đó sẽ ko được thực thi, file stylesheet sẽ ko được áp dụng. Nó cache lại ở đó, khi có một thằng nào khác cần tới nó, nó sẽ được cung cấp ngay lập tức.
Cú pháp:
Ví dụ
<link rel="preload" href="/style.css" as="style" />Các giá trị có thể cung cấp cho as
- style
- script
- font
- fetch
Chúng ta cần phải cung cấp giá trị as để trình duyệt biết thứ tự ưu tiên download về cho đúng.
Ví dụ, sử dụng custom font, nếu sử dụng font face chúng ta đặt việc load file này trong css
Ví dụ
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
src: url('comic-sans.woff2') format('woff2');
}Theo mặc định file comic-sans.woff2 chỉ được download khi file index.css đã được load và áp dụng. Chúng ta có thể cưỡng ép load file font này về trước
Ví dụ
<link rel="preload" href="comic-sans.woff2" as="font" />prefetch và cách dùng
<link rel="prefetch" /> yêu cầu trình duyệt download và cache lại resource ngầm bên dưới, nó sẽ có độ ưu tiên thấp, không tranh giành thứ tự ưu tiên với các resource quan trọng hơn. Thí dụ như bạn cần resource đó ở các trang sau nữa, bạn có thể load trước để sẵn ở trang hiện tại.
Cú pháp
Ví dụ
<link rel="prefetch" href="/style.css" as="style" />Ví dụ, user di chuyển từ home page sang trang product page, đa phần luồng đi của user sẽ là như thế, trừ trường hợp học bookmark lại trang đó, hoặc nhấp vào một link được share. Chúng ta có thể sử dụng <link rel="prefetch" /> để tải trước các file css, js sẽ dùng trên trang product.
preconnect và cách dùng
<link rel="preconnect" /> được dùng để tăng tốc độ load ban đầu bằng việc báo với trình duyệt, chúng ta sẽ load một resource từ domain nào đó không sớm thì muộn. Thí dụ chúng ta load font từ Google, CDN, JSON từ API server.
Thực hư tăng tốc được bao nhiêu thì cũng chưa rõ, nhưng đây là cách chúng ta báo với trình duyệt
Ví dụ
<link rel="preconnect" href="https://api.my-app.com" />dns-prefetch
<link rel="dns-prefetch" /> công dụng cũng tương tự như preconnect, nó sẽ setup sẵn các config cần thiết trên trình duyệt khi cần thực hiện một DNS resolution
Ví dụ
<link rel="dns-prefetch" href="https://api.my-app.com" />prerender
<link rel="prerender" /> yêu cầu trình duyệt load 1 url và render nó trong một tab ẩn, khi user click vào đường link đến url đó, trang web sẽ được hiển thị ngay và luôn.
Tuy nhiên là thuộc tính này tính đến thời điểm hiện tại rất ít trình duyệt hỗ trợ
Ví dụ
<link rel="prerender" href="https://my-app.com/pricing" />Trên đây là cách sử dụng các attribute trên link để tối ưu website.