Hỗ trợ trình duyệt bằng các gợi ý về tài nguyên

Trong mô-đun cuối cùng 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 khác nhau 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ác tài nguyên này và việc phân phối các tài nguyên này để tăng tốc độ hiển thị của một trang. Đây là thời điểm thích hợp để chuyển sang một khía cạnh nâng cao hơn của việc tải tài nguyên, đó là giúp trình duyệt tải tài nguyên nhanh hơn bằng cách sử dụng gợi ý về tài nguyên.

Các gợi ý về tài nguyên có thể giúp nhà phát triển tối ưu hoá thêm thời gian tải trang bằng cách thông báo cho trình duyệt cách tải và ưu tiên tài nguyên. Một nhóm các gợi ý ban đầu về tài nguyên, chẳng hạn 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à Fetch Priority API đã được ra mắt để cung cấp thêm các chức 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ố hành động nhất định có thể cải thiện hiệu suất tải. Gợi ý về tài nguyên có thể thực hiện các thao tác như thực hiện tra cứu DNS sớm, kết nối với máy chủ trước thời hạn và thậm chí 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 ý về tài nguyên trong HTML (thường là ở phần đầu của phần tử <head>) hoặc đặt làm tiêu đề HTTP. Trong phạm vi của mô-đun này, chúng ta sẽ tìm hiểu về preconnect, dns-prefetch và preload, cũng như các hành vi tìm nạp dự đoán mà prefetch cung cấp.

preconnect

Gợi ý preconnect được dùng để thiết lập mối 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ụ: bạn có thể lưu trữ hình ảnh hoặc thành phần của mình trên CDN hoặc nguồn gốc chéo khác:

<link rel="preconnect" href="https://example.com">

Bằng cách sử dụng preconnect, bạn dự đoán rằng trình duyệt dự định kết nối với một máy chủ cụ thể trên nhiều nguồn gốc trong tương lai rất gần và trình duyệt nên mở kết nối đó càng sớm càng tốt, lý tưởng nhất là trước khi chờ trình phân tích cú pháp HTML hoặc trình quét tải trước thực hiện việc này.

Nếu bạn có một lượng lớn tài nguyên trên nhiều nguồn gốc trên một trang, hãy sử dụng preconnect cho những tài nguyên quan trọng nhất đối với trang hiện tại.

Ảnh chụp màn hình về thời gian kết nối cho một tài nguyên trong bảng điều khiển mạng của Công cụ dành cho nhà phát triển của Chrome. Quy trình thiết lập kết nối bao gồm thời gian chờ, thương lượng proxy, tra cứu DNS, thiết lập kết nối và thương lượng TLS.
Hình ảnh trực quan về thời gian kết nối như trong bảng điều khiển mạng của Công cụ cho nhà phát triển của Chrome. Thời gian trong hộp màu đỏ là thời gian liên quan đến việc thiết lập kết nối với một máy chủ trên nhiều nguồn gốc. preconnect có thể giảm thời gian này bằng cách thiết lập kết nối sớm hơn, thay vì vào thời điểm phát hiện tài nguyên trê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 nghị bạn preconnect đến miền https://fonts.googleapis.com phân phát các khai báo @font-face và đến miền https://fonts.gstatic.com phân phát các 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 được dùng để cho biết liệu một tài nguyên có phải được tìm nạp bằng cách sử dụng Tính năng chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) hay không. Khi dùng gợi ý preconnect, nếu tài nguyên đang được tải xuống từ nguồn gốc dùng CORS (chẳng hạn như 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 các kết nối đến máy chủ trên nhiều nguồn có thể cải thiện đáng kể thời gian tải trang ban đầu, nhưng có thể không hợp lý hoặc không thể thiết lập kết nối đến nhiều máy chủ trên nhiều nguồn cùng một lúc. Nếu bạn lo ngại rằng mình có thể đang sử dụng quá nhiều preconnect, thì gợi ý dns-prefetch là một gợi ý tài nguyên ít tốn kém hơn nhiều.

Theo tên của nó, dns-prefetch không thiết lập kết nối với một máy chủ nhiều nguồn, mà chỉ thực hiện tra cứu DNS cho máy chủ đó trước thời hạn. Tra cứu DNS xảy ra khi một tên miền được phân giải thành địa chỉ IP cơ bản của nó. Mặc dù các lớp bộ nhớ đệm DNS ở cấp thiết bị và mạng giúp quá trình này diễn ra nhanh chóng, nhưng vẫn mất một khoảng thời gian.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

Tra cứu DNS khá rẻ và do chi phí tương đối thấp, nên trong một số trường hợp, đây có thể là công cụ phù hợp hơn so với preconnect. Cụ thể, đây có thể là một gợi ý tài nguyên hữu ích để sử dụng trong trường hợp các đường liên kết chuyển đến những trang web khác mà bạn cho rằng người dùng có khả năng truy cập. dnstradamus là một công cụ như vậy, tự động thực hiện việc này bằng JavaScript và sử dụng Intersection Observer API để chèn các gợi ý dns-prefetch vào HTML của trang hiện tại khi người dùng cuộn các đường liên kết đến những trang web khác vào khung hiển thị.

preload

Lệnh preload được dùng để bắt đầu một yêu cầu sớm cho một tài nguyên cần thiết để kết xuất trang:

<link rel="preload" href="/lcp-image.jpg" as="image">

Bạn chỉ nên dùng các chỉ thị preload cho những tài nguyên quan trọng đượ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 các khai báo @import hoặc tài nguyên background-image CSS có khả năng là Ứng viên LCP (Nội dung hiển thị lớn nhất). 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, chỉ thị 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 CORS, thì trình duyệt sẽ tải tài nguyên xuống hai lần, lãng phí băng thông lẽ ra có thể được sử dụng hiệu quả hơn 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 yêu cầu CORS, ngay cả khi /font.woff2 nằm trên cùng một miền.

prefetch

Chỉ thị prefetch được dùng để bắt đầu một yêu cầu có mức độ ưu tiên thấp đối với một tài nguyên có khả năng được dùng cho các thao tác điều hướng trong tương lai:

<link rel="prefetch" href="/next-page.css" as="style">

Lệnh này phần lớn tuân theo cùng một định dạ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ư chỉ thị preload, prefetch chủ yếu mang tính suy đoán vì bạn đang bắt đầu tìm nạp một tài nguyên cho một thao tác điều hướng trong tương lai có thể xảy ra hoặc không.

Đôi khi, prefetch có thể mang lại lợi ích, chẳng hạn như 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 đều hoàn thành, thì prefetch cho một tài nguyên quan trọng khi hiển thị cho những trang trong tương lai có thể giúp giảm thời gian tải cho những trang đó.

Fetch Priority API

Bạn có thể sử dụng Fetch Priority API thông qua thuộc tính fetchpriority để tăng mức độ ưu tiên của một tài nguyên. Bạn có thể 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 hình ảnh nằm trong khung hiển thị 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 ngay lập tức yêu cầu trình duyệt tải hình ảnh LCP lớn hơn xuống với mức độ ưu tiên Cao, trong khi các hình thu nhỏ ít quan trọng hơn đượ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 hai giai đoạn. Giai đoạn đầu tiên dành cho các tài nguyên quan trọng và kết thúc 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ị chậm trễ khi 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 tiên.

Bản minh hoạ về gợi ý tài nguyên

Kiểm tra kiến thức của bạn

Gợi ý về tài nguyên preconnect có chức năng gì?

Chỉ thực hiện một lệnh tìm kiếm DNS cho máy chủ trên nhiều nguồn.
Mở một kết nối đến máy chủ trên nhiều nguồn, bao gồm cả tra cứu DNS, cũng như kết nối và thương lượng TLS trước khi trình duyệt phát hiện ra.

Fetch Priority API cho phép bạn làm gì?

Chỉ định mức độ ưu tiên tương đối cho các phần tử <link>, <img> và <script>.
Chỉ định mức độ ưu tiên khi tải HTML của trang hiện tại xuống.

Khi nào bạn nên sử dụng gợi ý prefetch?

Nếu người dùng chưa nêu rõ lựa chọn ưu tiên về việc giảm mức sử dụng dữ liệu.
Khi bạn rất tự tin rằng người dùng cần các tài nguyên hoặc trang mà bạn dự định tìm nạp trước.
Đối với mọi tài nguyên hoặc trang mà người dùng có thể cần, cho dù họ có thực sự cần chúng trong tương lai hay không.

Tiếp theo: Hiệu suất của hình ảnh

Đến đây, có lẽ bạn đã bắt đầu cảm thấy khá tự tin về kiến thức của mình liên quan đến các yếu tố chung cần cân nhắc về hiệu suất khi nói đến HTML trang, phần tử <head> và gợi ý về tài nguyên. Tuy nhiên, có những điểm tối ưu hoá bổ sung dành riêng cho các loại tài nguyên mà 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.