Trong mô-đun trước về tối ưu hoá việc tải tài nguyên, bạn đã tìm hiểu cách các tài nguyên trang như CSS và JavaScript có thể ảnh hưởng đến tốc độ tải trang, cũng như cách bạn có thể tối ưu hoá cũng như việc phân phối các tài nguyên đó để tăng tốc độ hiển thị trang. Đây là thời điểm hoàn hảo để chuyển sang khía cạnh nâng cao hơn của hoạt động tải tài nguyên, và liên quan đến việc giúp trình duyệt tải nhanh hơn bằng cách sử dụng gợi ý về tài nguyên.
Gợi ý về tài nguyên có thể giúp nhà phát triển tối ưu hoá thời gian tải trang hơn nữa bằng cách thông báo cho trình duyệt cách tải và ưu tiên các tài nguyên. Tập hợp các gợi ý về tài nguyên ban đầu như preconnect và dns-prefetch là những gợi ý đầu tiên được giới thiệu.
Tuy nhiên, theo thời gian, preload và API ưu tiên tìm nạp đã tuân theo để cung cấp thêm các tính năng.
Gợi ý về tài nguyên hướng dẫn trình duyệt thực hiện trước một số thao tác có thể giúp cải thiện hiệu suất tải. Gợi ý tài nguyên có thể thực hiện các hành động như tra cứu DNS sớm, kết nối với máy chủ trước và thậm chí là tìm nạp tài nguyên trước khi trình duyệt thường phát hiện ra chúng.
Bạn có thể chỉ định gợi ý tài nguyên trong HTML (thường là ở đầu phần tử <head>) hoặc đặt làm tiêu đề HTTP. Trong phạm vi của mô-đun này, preconnect, dns-prefetch và preload được đề cập, cũng như các hành vi tìm nạp suy đoán mà prefetch cung cấp.
preconnect
Gợi ý preconnect dùng để thiết lập kết nối đến một nguồn gốc khác từ nơi bạn đang tìm nạp các tài nguyên quan trọng. Ví dụ: có thể bạn đang lưu trữ hình ảnh hoặc tài sản trên CDN hoặc nhiều nguồn gốc khác:
<link rel="preconnect" href="https://example.com">
Bằng cách sử dụng preconnect, bạn dự đoán trình duyệt có kế hoạch kết nối với một máy chủ nhiều nguồn gốc cụ thể trong tương lai gần và trình duyệt nên mở kết nối đó càng sớm càng tốt, tốt nhất là trước khi chờ trình phân tích cú pháp HTML hoặc tải trước trình quét làm việc đó.
Nếu bạn có số lượng lớn tài nguyên nhiều nguồn gốc trên một trang, hãy sử dụng preconnect cho các tài nguyên quan trọng nhất đối với trang hiện tại.
preconnect có thể cải thiện điều này bằng cách thiết lập kết nối sớm hơn, thay vì tại thời điểm phát hiện tài nguyên nhiều nguồn gốc.
Một trường hợp sử dụng phổ biến cho preconnect là Google Fonts. Google Fonts khuyên bạn nên preconnect cho miền https://fonts.googleapis.com phân phát nội dung khai báo @font-face và tới miền https://fonts.gstatic.com phân phát tệp phông chữ.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Thuộc tính crossorigin dùng để cho biết liệu có phải tìm nạp tài nguyên hay không bằng tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS). Khi sử dụng gợi ý preconnect, nếu tài nguyên đang được tải xuống từ nguồn gốc sử dụng coroutine (chẳng hạn như các tệp phông chữ), thì bạn cần thêm thuộc tính crossorigin vào gợi ý preconnect.
dns-prefetch
Mặc dù việc mở sớm kết nối tới máy chủ nhiều nguồn gốc có thể cải thiện đáng kể thời gian tải trang ban đầu, nhưng việc thiết lập kết nối với nhiều máy chủ nhiều nguồn gốc cùng một lúc có thể không hợp lý hoặc không thể. Nếu lo ngại rằng bạn có thể đang lạm dụng preconnect, thì một gợi ý về tài nguyên tốn ít chi phí hơn là gợi ý dns-prefetch.
Theo tên gọi, dns-prefetch không thiết lập kết nối với một máy chủ nhiều nguồn gốc, mà chỉ thực hiện việc tra cứu DNS trước khi kết nối. Quá trình tra cứu DNS diễn ra khi một tên miền được phân giải thành địa chỉ IP cơ sở.
Mặc dù các lớp bộ nhớ đệm DNS ở cấp thiết bị và cấp mạng giúp quá trình này
thường nhanh chóng, nhưng vẫn mất một chút thời gian.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
Hoạt động tra cứu DNS khá ít tốn kém và do chi phí tương đối nhỏ nên trong một số trường hợp, chúng có thể là một công cụ phù hợp hơn so với preconnect. Cụ thể, đây có thể là một gợi ý về tài nguyên mà bạn nên dùng trong trường hợp đường liên kết đến các trang web khác mà bạn nghĩ người dùng có khả năng sẽ truy cập. dnstradamus là một trong những công cụ tự động thực hiện việc này bằng cách sử dụng JavaScript và sử dụng Intersection Observer API để chèn gợi ý dns-prefetch vào HTML của trang hiện tại khi đường liên kết đến các trang web khác được cuộn vào khung nhìn của người dùng.
preload
Lệnh preload dùng để khởi tạo một yêu cầu sớm cho một tài nguyên cần thiết để hiển thị trang:
<link rel="preload" href="/lcp-image.jpg" as="image">
Chỉ những lệnh preload mới được giới hạn ở những tài nguyên quan trọng mới được phát hiện muộn.
Các trường hợp sử dụng phổ biến nhất là tệp phông chữ, tệp CSS được tìm nạp thông qua nội dung khai báo @import hoặc tài nguyên CSS background-image có khả năng là ứng cử viên Nội dung lớn nhất hiển thị (LCP). Trong những trường hợp như vậy, trình quét tải trước sẽ không phát hiện được các tệp này vì tài nguyên được tham chiếu trong các tài nguyên bên ngoài.
Tương tự như preconnect, lệnh preload yêu cầu thuộc tính crossorigin nếu bạn đang tải trước một tài nguyên CORS (chẳng hạn như phông chữ). Nếu bạn không thêm thuộc tính crossorigin hoặc thêm thuộc tính này cho các yêu cầu không phải ChromeOS, thì tài nguyên sẽ được trình duyệt tải xuống 2 lần, gây lãng phí băng thông đáng lẽ nên dành cho các tài nguyên khác.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Trong đoạn mã HTML trước đó, trình duyệt được hướng dẫn tải trước
/font.woff2 bằng cách sử dụng một yêu cầu CORS – ngay cả khi /font.woff2 ở trên cùng một miền.
prefetch
Lệnh prefetch dùng để khởi tạo một yêu cầu có mức độ ưu tiên thấp cho một tài nguyên có thể sẽ được dùng cho các thao tác điều hướng sau này:
<link rel="prefetch" href="/next-page.css" as="style">
Lệnh này phần lớn có định dạng giống như lệnh preload, chỉ có thuộc tính rel của phần tử <link> sử dụng giá trị "prefetch".
Tuy nhiên, không giống như lệnh preload, prefetch phần lớn mang tính suy đoán khi bạn bắt đầu tìm nạp cho một tài nguyên cho một hoạt động điều hướng trong tương lai có thể xảy ra hoặc không thể xảy ra.
Đôi khi prefetch có thể mang lại lợi ích. Ví dụ: nếu bạn xác định được một luồng người dùng trên trang web mà hầu hết người dùng tuân theo để hoàn thành, thì prefetch cho tài nguyên quan trọng về việc hiển thị cho các trang tương lai đó có thể giúp giảm thời gian tải cho chúng.
Tìm nạp API ưu tiên
Bạn có thể dùng Fetch Priority API thông qua thuộc tính fetchpriority để tăng mức độ ưu tiên của tài nguyên. Bạn có thể sử dụng thuộc tính này với các phần tử <link>, <img> và <script>.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
Theo mặc định, hình ảnh được tìm nạp với mức độ ưu tiên thấp hơn. Sau khi bố cục, nếu chúng tôi phát hiện thấy hình ảnh nằm trong khung nhìn ban đầu, thì mức độ ưu tiên sẽ tăng lên mức độ ưu tiên Cao. Trong đoạn mã HTML trước đó, fetchpriority sẽ ngay lập tức thông báo cho trình duyệt tải hình ảnh LCP lớn hơn có mức độ ưu tiên Cao xuống, trong khi các hình ảnh thu nhỏ ít quan trọng hơn sẽ được tải xuống với mức độ ưu tiên thấp hơn.
Các trình duyệt hiện đại tải tài nguyên theo 2 giai đoạn. Giai đoạn đầu tiên dành riêng cho các tài nguyên quan trọng và kết thúc sau khi tất cả các tập lệnh chặn được tải xuống và thực thi. Trong giai đoạn này, các tài nguyên có mức độ ưu tiên Thấp có thể bị trì hoãn việc tải xuống. Bằng cách sử dụng fetchpriority="high", bạn có thể tăng mức độ ưu tiên của một tài nguyên để cho phép trình duyệt tải tài nguyên đó xuống trong giai đoạn đầu.
Bản minh hoạ gợi ý tài nguyên
Kiểm tra kiến thức
Gợi ý về tài nguyên preconnect có chức năng gì?
API ưu tiên Tìm nạp cho phép bạn làm gì?
<link>, <img> và <script>.
Khi nào bạn nên sử dụng gợi ý về prefetch?
Tiếp theo: Hiệu suất của hình ảnh
Đến nay, có thể bạn đã bắt đầu cảm thấy khá tự tin về kiến thức của mình về những yếu tố cần cân nhắc chung về hiệu suất liên quan đến HTML trang, phần tử <head> và gợi ý về tài nguyên. Tuy nhiên, có thêm một số biện pháp tối ưu hoá dành riêng cho các loại tài nguyên khác nhau mà các trang thường tải. Tiếp theo, hiệu suất hình ảnh sẽ được đề cập trong mô-đun tiếp theo. Mô-đun này có thể giúp bạn tải hình ảnh trên trang web nhanh nhất có thể, bất kể thiết bị của người dùng là gì.