Vào năm 2021, nhóm Chrome Aurora đã giới thiệu tập lệnh Script để cải thiện hiệu suất tải của các tập lệnh bên thứ ba trong Next.js. Kể từ khi triển khai, chúng tôi đã đã mở rộng khả năng để giúp việc tải các tài nguyên của bên thứ ba trở nên dễ dàng hơn và nhanh hơn cho nhà phát triển.
Bài đăng trên blog này cung cấp thông tin tổng quan về các tính năng mới hơn mà chúng tôi đã phát hành, hầu hết đáng chú ý là @next/third-parties thư viện của bạn, cũng như một phác thảo cho các sáng kiến trong tương lai trên lộ trình của chúng tôi.
Tác động về hiệu suất của tập lệnh bên thứ ba
41% trong số tất cả yêu cầu của bên thứ ba trong các trang web Next.js là tập lệnh. Ngừng thích nội dung khác loại tập lệnh mất nhiều thời gian để tải xuống và thực thi, có thể chặn hiển thị và trì hoãn tương tác của người dùng. Dữ liệu trên Chrome Báo cáo trải nghiệm người dùng (CrUX) cho thấy các trang web Next.js tải nhiều trang web bên thứ ba hơn tập lệnh có Tương tác đến nội dung hiển thị tiếp theo thấp hơn (INP) và Nội dung lớn nhất hiển thị (LCP).
Mối tương quan được quan sát trong biểu đồ này không ngụ ý quan hệ nhân quả. Tuy nhiên, địa phương thử nghiệm cung cấp thêm bằng chứng cho thấy các tập lệnh của bên thứ ba rất đáng kể ảnh hưởng đến hiệu suất trang. Ví dụ: biểu đồ bên dưới so sánh nhiều phòng thí nghiệm các chỉ số khi vùng chứa Trình quản lý thẻ của Google (bao gồm 18 vùng chứa được chọn ngẫu nhiên) thẻ—được thêm vào Phân loại, một ví dụ phổ biến trong Next.js .
Tài liệu về WebPageTest cung cấp thông tin chi tiết về cách đo lường các dấu thời gian này. Chỉ cần nhìn thoáng qua là có rõ ràng rằng tất cả các chỉ số trong phòng thí nghiệm này đều bị ảnh hưởng bởi vùng chứa GTM. Cho ví dụ: Tổng thời gian chặn (TBT)—một phòng thí nghiệm hữu ích gần đúng INP—tăng gần 20 lần.
Thành phần tập lệnh
Khi chuyển thành phần <Script> trong Next.js, chúng tôi đảm bảo giới thiệu
thông qua một API thân thiện với người dùng gần giống với <script> truyền thống
. Bằng cách sử dụng tập lệnh này, các nhà phát triển có thể cùng xác định vị trí một tập lệnh của bên thứ ba trong bất kỳ
trong ứng dụng của họ và Next.js sẽ xử lý việc sắp xếp trình tự
tập lệnh sau khi tải các tài nguyên quan trọng.
<!-- By default, script will load after page becomes interactive -->
<Script src="https://example.com/sample.js" />
<!-- Script is injected server-side and fetched before any page hydration occurs -->
<Script strategy=”beforeInteractive” src="https://example.com/sample.js" />
<!-- Script is fetched later during browser idle time -->
<Script strategy=”lazyOnload” src="https://example.com/sample.js" />
Hàng chục nghìn ứng dụng Next.js—bao gồm các trang web phổ biến như
Patreon, Target và
Khái niệm – sử dụng thành phần <Script>. Mặc dù
hiệu quả, một số nhà phát triển đã nêu ra mối lo ngại về:
những điều sau:
- Vị trí đặt thành phần
<Script>trong ứng dụng Next.js trong khi vẫn tuân thủ theo các hướng dẫn cài đặt khác nhau của các nhà cung cấp bên thứ ba khác nhau (trải nghiệm của nhà phát triển). - Chiến lược tải nào là tối ưu nhất để sử dụng cho các báo cáo khác nhau tập lệnh của bên thứ ba (trải nghiệm người dùng).
Để giải quyết cả hai mối lo ngại này, chúng tôi đã ra mắt @next/third-parties—một
thư viện chuyên biệt cung cấp một tập hợp các thành phần và tiện ích được tối ưu hoá
được điều chỉnh cho các bên thứ ba phổ biến.
Trải nghiệm của nhà phát triển: giúp quản lý thư viện của bên thứ ba dễ dàng hơn
Nhiều tập lệnh của bên thứ ba được sử dụng trên một tỷ lệ đáng kể các trang web Next.js, với
Trình quản lý thẻ của Google là trình quản lý thẻ phổ biến nhất, được nhiều người sử dụng
66% số trang web tương ứng.
@next/third-parties được xây dựng dựa trên <Script>
bằng cách giới thiệu trình bao bọc cấp cao hơn được thiết kế để đơn giản hoá việc sử dụng cho
các trường hợp sử dụng phổ biến này.
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<GoogleTagManager gtmId="GTM-XYZ" />
</html>
);
}
Google Analytics – một tập lệnh khác của bên thứ ba được sử dụng rộng rãi (52% trang web Next.js) – cũng có một thành phần riêng.
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId="G-XYZ" />
</html>
);
}
@next/third-parties giúp đơn giản hoá quá trình tải các tập lệnh thường dùng.
mà còn mở rộng khả năng phát triển các tiện ích cho các bên thứ ba khác
danh mục, chẳng hạn như video nhúng. Ví dụ: nội dung nhúng trên Google Maps và YouTube
được dùng trong
8%
và
4%
trang web Next.js tương ứng và chúng tôi cũng đã chuyển các thành phần để các trang web đó
dễ tải hơn.
import { GoogleMapsEmbed } from "@next/third-parties/google";
import { YouTubeEmbed } from "@next/third-parties/google";
export default function Page() {
return (
<>
<GoogleMapsEmbed
apiKey="XYZ"
height={200}
width="100%"
mode="place"
q="Brooklyn+Bridge,New+York,NY"
/>
<YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
</>
);
}
Trải nghiệm người dùng: giúp thư viện của bên thứ ba tải nhanh hơn
Trong một thế giới hoàn hảo, mọi thư viện bên thứ ba được sử dụng rộng rãi sẽ có đầy đủ tối ưu hoá, khiến mọi thành phần trừu tượng cải thiện hiệu suất trở nên không cần thiết. Tuy nhiên, cho đến khi điều đó trở thành hiện thực, chúng ta có thể cố gắng cải thiện trải nghiệm người dùng khi được tích hợp thông qua các khung phổ biến như Next.js. Chúng ta có thể thử nghiệm nhiều kỹ thuật tải khác nhau, hãy đảm bảo rằng các tập lệnh được trình tự theo trình tự theo cách phù hợp và cuối cùng là chia sẻ ý kiến phản hồi của chúng tôi với bên thứ ba để khuyến khích các thay đổi ở thượng nguồn.
Hãy lấy video nhúng trên YouTube làm ví dụ. Trong trường hợp một số phương pháp triển khai thay thế có
hiệu suất tốt hơn nhiều so với nhúng gốc. Hiện tại, <YouTubeEmbed>
thành phần do @next/third-parties xuất, sử dụng
lite-youtube-embed,
khi được hiển thị trong thông báo "Hello, World" ("Xin chào thế giới") So sánh Next.js, tải đáng kể
nhanh hơn.
Tương tự, đối với Google Maps, chúng tôi đưa loading="lazy" làm thuộc tính mặc định cho
nhúng để đảm bảo rằng bản đồ chỉ tải khi nó ở một khoảng cách nhất định từ
khung nhìn. Đây có vẻ là một thuộc tính rõ ràng cần thêm vào, đặc biệt
vì Google Maps
tài liệu
bao gồm mã đó trong đoạn mã ví dụ—nhưng chỉ
45% trang web Next.js nhúng Google Maps đang sử dụng loading="lazy".
Chạy tập lệnh của bên thứ ba trong một trình chạy web
Một kỹ thuật nâng cao mà chúng tôi đang khám phá trong @next/third-parties là giúp bạn làm điều đó
dễ dàng giảm tải các tập lệnh của bên thứ ba cho nhân viên web. Người phổ biến
các thư viện như Partytown, tính năng này có thể giảm bớt
tác động đáng kể của các tập lệnh bên thứ ba đến hiệu suất trang theo
di chuyển chúng hoàn toàn ra khỏi luồng chính.
Ảnh GIF động sau đây cho thấy sự khác biệt giữa các nhiệm vụ dài và chuỗi chính
thời gian chặn khi áp dụng các chiến lược <Script> khác nhau cho vùng chứa Trình quản lý thẻ của Google (GTM)
trong trang web Next.js. Lưu ý rằng, khi chỉ chuyển đổi giữa các chiến lược
trì hoãn thời gian thực thi các tập lệnh này, di chuyển chúng đến một trình chạy web
giúp loại bỏ hoàn toàn thời gian của họ trên luồng chính.
Trong ví dụ cụ thể này, việc di chuyển thực thi vùng chứa GTM và các tập lệnh thẻ được liên kết với một trình chạy web giảm 92%TBT.
Lưu ý là nếu không được quản lý cẩn thận, kỹ thuật này có thể âm thầm
phá vỡ nhiều tập lệnh của bên thứ ba, khiến việc gỡ lỗi trở nên khó khăn. Sắp tới
tháng, chúng tôi sẽ xác thực xem có bất kỳ thành phần bên thứ ba nào được cung cấp bởi
@next/third-parties hoạt động đúng cách khi chạy trong trình thực thi web. Nếu có, chúng tôi sẽ
nỗ lực nhằm cung cấp một cách thức dễ dàng và tuỳ chọn để nhà phát triển sử dụng
kỹ thuật.
Các bước tiếp theo
Trong quá trình phát triển gói này, rõ ràng là có
cần tập trung các đề xuất về cách tải của bên thứ ba để các khung khác
cũng có thể hưởng lợi từ các kỹ thuật cơ bản được sử dụng. Việc này giúp chúng tôi
tạo Bên thứ ba
Thư viện Capital
sử dụng JSON để mô tả các kỹ thuật tải của bên thứ ba, vốn hiện đang
đóng vai trò là nền tảng cho @next/third-parties.
Trong các bước tiếp theo, chúng tôi sẽ tiếp tục tập trung vào việc cải thiện các thành phần được cung cấp cho Next.js cũng như mở rộng nỗ lực để đưa các tiện ích tương tự vào các dịch vụ các khung và nền tảng CMS phổ biến. Chúng tôi hiện đang cộng tác với Nuxt nhà bảo trì và đang lên kế hoạch phát hành các tiện ích tương tự của bên thứ ba được điều chỉnh cho phù hợp đối với hệ sinh thái của họ trong tương lai gần.
Nếu một trong các bên thứ ba mà bạn sử dụng trong ứng dụng Next.js được hỗ trợ bởi
@next/third-parties,
cài đặt gói này
và thử xem! Chúng tôi rất mong nhận được ý kiến phản hồi của bạn về
GitHub.