Cảm ơn bạn đã theo dõi Google I/O! Xem nội dung theo yêu cầu.

Trang này được dịch bởi Cloud Translation API.

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

Trong mô-đun trước về cách tối ưu hoá quá trình tải tài nguyên, bạn đã tìm hiểu về cách các tài nguyên trang như CSS và JavaScript có thể ảnh hưởng như thế nào đến tốc độ tải trang và bạn có thể tối ưu hoá quảng cáo và phân phối quảng cáo để tăng tốc độ hiển thị của một 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 tài nguyên và liên quan đến việc giúp trình duyệt tải quảng cáo 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á hơn nữa thời gian tải trang bằng cách thông báo cách tải và ưu tiên tài nguyên cho trình duyệt. Bộ tài nguyên ban đầu các gợi ý 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 mức độ ưu tiên tìm nạp đã tuân theo cung cấp các chức năng bổ sung.

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ể 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ủ sớm hơn và thậm chí tìm nạp tài nguyên trước khi trình duyệt phát hiện ra chúng.

Gợi ý về tài nguyên có thể được chỉ định trong HTML – thường xuất hiện ở đầu <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 với 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 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 rằng trình duyệt dự định kết nối với một máy chủ nhiều nguồn gốc cụ thể 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, tốt nhất là trước khi Trình phân tích cú pháp HTML hoặc tải trước trình quét để làm những việc này.

Nếu bạn có nhiều 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.

Ảnh chụp màn hình 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ụ cho nhà phát triển của Chrome. Quá 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ư trên bảng điều khiển mạng của Chrome Công cụ cho nhà phát triển. Dấu thời gian trong hộp màu đỏ là những dấu thời gian liên quan đến việc thiết lập kết nối với một máy chủ nhiều nguồn gốc mà `preconnect` có thể giảm bớt bằng cách thiết lập các kết nối sớm hơn, thay vì vào thời điểm khả năng khám phá 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 đề xuất bạn preconnect sang miền https://fonts.googleapis.com phân phát khai báo @font-face và vào miền https://fonts.gstatic.com sẽ 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 dùng để cho biết liệu một tài nguyên có phải được tìm nạp 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ừ máy chủ gốc sử 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 thuộc tính 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ể đáng kể cải thiện thời gian tải trang ban đầu, thì có thể không hợp lý hoặc không thể 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. Nếu bạn lo ngại bạn có thể đang lạm dụng preconnect, một gợi ý về tài nguyên ít tốn kém 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 nguồn gốc khác máy chủ mà chỉ thực hiện tra cứu DNS trước. DNS tra cứu xảy ra khi tên miền được phân giải thành địa chỉ IP cơ bản. Mặc dù các lớp bộ nhớ đệm DNS ở cấp thiết bị và cấp mạng giúp biến điều này nhìn chung là quá trình nhanh, 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á không tốn kém và do chi phí tương đối nhỏ, nhưng trong một số trường hợp, chúng có thể là công cụ phù hợp hơn so với preconnect. Trong Đó có thể là một gợi ý hữu ích về tài nguyên để sử dụng trong trường hợp các đường liên kết chuyển đến các trang web khác mà bạn nghĩ người dùng có khả năng sẽ theo dõi. dnstradamus là một trong những công cụ thực hiện việc này tự động 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ười dùng cuộn liên kết đến các trang web khác khung nhìn.

`preload`

Lệnh preload dùng để khởi tạo 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ỉ nên giới hạn lệnh preload đối với các tài nguyên quan trọng được phát hiện sau. 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 @import hoặc các tài nguyên CSS background-image có khả năng là Lâu nhất Ứng viên Nội dung hiển thị (LCP). Trong những trường hợp như vậy, những tệp này sẽ không được trình quét tải trước phát hiện vì tài nguyên được tham chiếu trong của chúng tôi.

Thận trọng: Nếu bạn đang sử dụng preload để tải hình ảnh được chỉ định bởi phần tử <img> xuống. Hình ảnh này thay đổi dựa trên khung nhìn của người dùng, hãy nhớ thêm imagesrcset cho gợi ý preload để tải xuống hình ảnh chính xác cho khung nhìn hiện tại. Bạn cũng nên loại trừ src Vì vậy, các trình duyệt không hỗ trợ tải trước thích ứng sẽ không tải xuống hình ảnh dự phòng.

Tương tự như preconnect, lệnh preload yêu cầu crossorigin nếu bạn đang tải trước 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), rồi đến tài nguyên được trình duyệt tải xuống hai lần, làm lãng phí băng thông có thể dành nhiều hơn cho các tài nguyên khác.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

Lưu ý quan trọng: Tài nguyên được chỉ định trong Lệnh preload được tải xuống hai lần nếu as bị thiếu trên phần tử <link> của lệnh. Để xem danh sách các giá trị thuộc tính as, hãy tham khảo Tài liệu MDN về giá trị thuộc tính as.

Trong đoạn mã HTML trước đó, trình duyệt được hướng dẫn tải trước /font.woff2 sử dụng yêu cầu CORS – ngay cả khi /font.woff2 ở trên cùng một miền.

Thận trọng: Lệnh preload là một lệnh tối ưu hoá hiệu suất mạnh mẽ—một cách có thể bị lạm dụng, trên thực tế. Tài liệu tham khảo được tải xuống bằng lệnh preload đều có hiệu quả được tải xuống ở mức độ ưu tiên cao và—nếu bị sử dụng quá mức—preload có thể tạo tranh chấp băng thông theo cách ảnh hưởng tiêu cực đến tốc độ tải trang.

`prefetch`

Lưu ý quan trọng: Đây là phần giải thích rất chung chung về Gợi ý về tài nguyên prefetch. Do đó, phần này không tập trung vào chi tiết về một số yếu tố cần cân nhắc và đánh đổi mà bạn nên cân nhắc khi sử dụng. Học phần sau trong khoá học này sẽ đi sâu hơn về prefetching tài nguyên cần thiết trong tương lai gần với mức độ ưu tiên thấp, cũng như prefetching trang để tăng tốc độ điều hướng trong tương lai.

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

Đôi khi, prefetch có thể mang lại lợi ích, chẳng hạn như khi bạn xác định luồng người dùng trên trang web của bạn mà hầu hết người dùng làm theo để hoàn tất, prefetch cho một tài nguyên quan trọng cần hiển thị cho các trang trong tương lai đó có thể giúp giảm thời gian tải cho chúng.

Thận trọng: Do tính chất suy đoán của prefetch, việc sử dụng phương thức này đi kèm với nhược điểm tiềm ẩn là dữ liệu được sử dụng để tìm nạp tài nguyên có thể không được sử dụng nếu người dùng không điều hướng đến sẽ cần tài nguyên được tìm nạp trước. Dựa vào số liệu phân tích hoặc các nguồn dữ liệu khác cho kiểu sử dụng trang web của bạn để tự quyết định xem nên sử dụng prefetch. Ngoài ra, bạn có thể sử dụng Gợi ý Save-Data để chọn không tìm nạp trước đối với những người dùng đã chỉ định lựa chọn ưu tiên để giảm mức sử dụng dữ liệu.

Tìm nạp API mức độ ưu tiên

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 tài nguyên. Bạn có thể sử dụng thuộc tính này với <link>, Phần tử <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>

Lưu ý quan trọng: Thuộc tính fetchpriority là cụ thể là có hiệu lực khi dùng cho hình ảnh LCP của một trang. Bằng cách tăng mức độ ưu tiên của một Hình ảnh LCP với thuộc tính này, bạn có thể cải thiện LCP của trang bằng cách chỉ tốn chút công sức.

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 được phát hiện trong khung nhìn ban đầu, mức độ ưu tiên sẽ được 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, còn những hình thu nhỏ ít quan trọng đượ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 riêng cho các tài nguyên quan trọng và kết thúc sau khi tất 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 từ đang 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 tài nguyên, cho phép trình duyệt tải xuống trong giai đoạn đầu.

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

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

Gợi ý về tài nguyên preconnect có tác dụng gì?

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

Chính xác!

Chỉ thực hiện tra cứu DNS cho máy chủ nhiều nguồn gốc.

Hãy thử lại.

API Mức độ ưu tiên tìm nạp cho phép bạn làm gì?

Chỉ định mức độ ưu tiên mà HTML của trang hiện tại được tải xuống.

Hãy thử lại.

Chỉ định mức độ ưu tiên tương đối cho <link>, Phần tử <img> và <script>.

Chính xác!

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

Đối với mọi tài nguyên hoặc trang mà người dùng có thể cần, cho dù họ thực sự cần chúng trong tương lai.

Hãy thử lại.

Khi bạn có độ tin cậy cao rằng các tài nguyên hoặc trang đó mà bạn dự định người dùng cần tìm nạp trước.

Chính xác!

Nếu người dùng chưa chỉ rõ rằng bạn muốn giảm bớt dữ liệu mức sử dụng.

Chính xác!

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

Đến đây, có thể bạn đã bắt đầu cảm thấy khá tự tin về kiến thức của mình những yếu tố cần cân nhắc chung về hiệu suất khi đối với HTML của trang, <head> và gợi ý về tài nguyên. Tuy nhiên, bạn cũng cần có thêm một số cách 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, có thể giúp bạn biết được hình ảnh trên trang web của bạn sẽ tải nhanh nhất có thể, bất kể thiết bị của người dùng.