Tối ưu hoá mức độ ưu tiên của tập lệnh

Tính năng web: Mức độ ưu tiên tìm nạp

Trình duyệt chỉ định mức độ ưu tiên mặc định cho các tập lệnh dựa trên vị trí xuất hiện của tập lệnh trong tài liệu và liệu tập lệnh có các thuộc tính như async hoặc defer hay không. Việc sử dụng fetchpriority giúp nhà phát triển có quyền kiểm soát rõ ràng để đảm bảo các tập lệnh quan trọng được tải trước, trong khi các tập lệnh không cần thiết sẽ không ảnh hưởng đến quá trình này.

Cách triển khai

  1. Xác định tập lệnh quan trọng: Xác định tập lệnh nào là cần thiết cho chức năng cốt lõi của trang hoặc lượt tương tác ban đầu của người dùng.
  2. Nâng cao tập lệnh không đồng bộ quan trọng: Đối với các tập lệnh quan trọng được tải bằng async hoặc defer, hãy thêm thuộc tính fetchpriority="high" để đảm bảo các tập lệnh đó được ưu tiên trong giai đoạn khám phá.
  3. Giảm mức độ ưu tiên cho các tập lệnh không cần thiết: Đối với các tập lệnh không cần thiết ngay lập tức (ví dụ: số liệu phân tích, quảng cáo hoặc tiện ích ở phần dưới màn hình đầu tiên), hãy thêm fetchpriority="low" và đảm bảo các tập lệnh đó có thuộc tính async, defer hoặc module để tránh bị chặn.
  4. Sắp xếp trình tự các tập lệnh chặn trình phân tích cú pháp: Sử dụng fetchpriority="low" trên các tập lệnh chặn trình phân tích cú pháp ở cuối nội dung để ngăn các tập lệnh này tranh giành băng thông với các tài nguyên quan trọng hơn.

Mã mẫu

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

Các phương pháp hay nhất

  • BẮT BUỘC: Chỉ sử dụng fetchpriority="high" trên tối đa 1-2 tập lệnh quan trọng để tránh tranh chấp mạng và làm giảm mức độ ưu tiên.
  • NÊN sử dụng fetchpriority="high" dành riêng cho các tập lệnh async được xác định là quan trọng đối với Lượt tương tác đến nội dung hiển thị tiếp theo (INP).
  • NÊN giảm mức độ ưu tiên cho các tập lệnh không cần thiết cho trải nghiệm người dùng ban đầu bằng cách sử dụng fetchpriority="low".
  • KHÔNG sử dụng fetchpriority trên mọi thẻ tập lệnh; bạn chỉ nên sử dụng thuộc tính này để thay đổi phương pháp phỏng đoán mặc định của trình duyệt khi biết phương pháp đó chưa tối ưu.
  • KHÔNG sử dụng thuộc tính importance không dùng nữa. Tính năng này đã được thay thế bằng fetchpriority.

Chiến lược dự phòng

Thuộc tính fetchpriority là một cải tiến tăng dần. Những trình duyệt không hỗ trợ thuộc tính này sẽ bỏ qua thuộc tính và sử dụng logic lập lịch biểu nội bộ mà không gặp lỗi. Bạn không cần phát hiện tính năng rõ ràng hoặc logic dự phòng cho việc sử dụng cơ bản.