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.
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.
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>
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.
prefetch
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.
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>
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ì?
API Mức độ ưu tiên tìm nạp cho phép bạn làm gì?
<link>,
Phần tử <img> và <script>.
Khi nào bạn nên sử dụng gợi ý prefetch?
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.