Tôi từng có các bài viết chi tiết giải thích ý nghĩa & cách dùng dns-fetch, preconnect, preload. Tuy chúng cũng hay khi muốn tìm hiểu sâu, nhưng đối với trường hợp áp dụng vào thực tế mà khi bạn đã hiểu ý nghĩa cơ bản rồi thì các mã mẫu chuẩn sẽ tiện cho các bạn sử dụng hơn.
Mỳ ăn liền không tốt cho sức khỏe nếu ăn thường xuyên, cơ mà thi thoảng chúng ta dùng một bữa thì cũng không sao.
Mẫu cho dns-prefetch
<link rel="dns-prefetch" href="//example.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//cdn.domain.com">Bạn không cần thêm kiểu kết nối http hay https. DNS-prefetch chỉ có nhiệm vụ tìm nạp trước DNS của các tài nguyên bên ngoài. Phổ biến nhất là các mã tracking như GA, fonts @font-face, CDN.
Hai thuộc tính quan trọng là rel và href.
Mẫu cho preconnect
<link rel="preconnect" href="https://example.com">preconnect hay hơn dns-fetch ở chỗ ngoài việc tìm nạp trước DNS, nó còn thực hiện trước kết nối bảo mật khi cần (nếu là https, và đa số các tài nguyên bên ngoài hiện nay là https).
Một số kiểu tài nguyên, chẳng hạn như font, tải trong chế độ vô danh cần thêm thuộc tính crossorigin.
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>Cả dns-prefetch và preconnect chỉ áp dụng cho các tài nguyên của bên thứ ba, còn nếu là tài nguyên từ máy chủ gốc của bạn thì không cần áp dụng.
Mẫu cho preload
<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>Áp dụng được cả với tài nguyên bên trong lẫn bên ngoài website, phục vụ cho mục đích tải trước cái tài nguyên quan trọng cần dùng ngay trong lần tải đầu tiên, ví dụ như font, logo ảnh.
Cấu trúc của preload là phức tạp nhất vì bạn còn cần khai báo kiểu tài nguyên trong thuộc tính as=”” và cụ thể hơn nữa với thuộc tính type=””. Ví dụ như này:
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
<link rel="preload" href="sintel-short.webm" as="video" type="video/webm">
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="important.png">
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">Một số câu hỏi
Tôi đưa các đoạn mã trên vào phần nào của trang?
Bạn đưa nó vào trang thẻ head của trang.
Plugin nào hỗ trợ việc này?
Bạn có thể dùng plugin như Insert Headers an Footers, trong các plugin tối ưu hóa hiệu suất như Autoptimize, Swift Performance, WP Rocket cũng có tính năng này nhưng có thể không đầy đủ cả ba.
