Partytown loại bỏ tình trạng phình to trang web từ các tập lệnh của bên thứ ba như thế nào

[theanh]

Trải nghiệm người dùng tuyệt vời bắt đầu bằng một trang tải ngay lập tức. Người dùng trung bình không dành nhiều thời gian chờ trang web tải hoặc tương tác với trang: Theo Google, nếu thời gian tải trang tăng từ 1 giây lên 3 giây, thì xác suất người dùng thoát trang tăng 32%. Tuy nhiên, không phải lúc nào cũng dễ dàng duy trì hiệu suất cao trên các trang web. Và các trang web chậm, theo một cách nào đó, là sự phân biệt đối xử: phần lớn dân số thế giới không có quyền truy cập vào Internet tốc độ cao hoặc CPU nhanh. Ngay cả khi trang web của bạn được thiết kế chú trọng đến khả năng sử dụng, những yếu tố này vẫn cản trở người dùng tận dụng tối đa các tính năng của trang web.

Đây là lý do tại sao hiệu suất lại rất quan trọng khi xây dựng trang web. Hiệu suất cần được xây dựng ngay từ cấp độ mã và các số liệu lấy người dùng làm trung tâm như thời gian tương tác (TTI), tổng thời gian chặn (TBT) và độ trễ đầu vào đầu tiên (FID) giúp bạn đánh giá tốc độ của trang web. Nhưng các trang web hiện đại rất nặng và ngày càng tăng về kích thước (được gọi trìu mến là "trang web phình to"): trang web trung bình có kích thước hơn 2 megabyte với hơn 200 yêu cầu. Các trang web lớn, khó sử dụng, với một số tập lệnh của bên thứ ba được nhúng, thường gây ra trải nghiệm khó chịu cho người dùng. Khi bạn cần các tập lệnh của bên thứ ba này trên trang web của mình để điều hành doanh nghiệp, như hầu hết các trang web khác, bạn sẽ phải đối mặt với một thách thức lớn:

"Làm thế nào để bạn có thể cải thiện các số liệu hiệu suất chính và giữ cho người dùng hài lòng mà không ảnh hưởng đến các khả năng quan trọng?"

Thuế JavaScript​

Một sự thật đã biết là JavaScript là một trong những thủ phạm chính gây ra tình trạng phình to trang web. Việc cung cấp trải nghiệm trang web phong phú, tương tác cần thêm các tài sản tiêu tốn tài nguyên của người dùng, từ CPU và GPU đến bộ nhớ và mạng. Ngoài hình ảnh và video lớn, các tập lệnh của bên thứ ba như trình theo dõi pixel, thử nghiệm A/B, quảng cáo, tiện ích, CDN, v.v., thường là những phần lớn nhất của câu đố về hiệu suất. Các tập lệnh của bên thứ ba, là mã được nhúng trong trang web của bạn và không nằm trực tiếp trong quyền kiểm soát của nhà phát triển, cạnh tranh với mã của chính trang web cho luồng chính của trình duyệt, làm chậm quá trình hiển thị nội dung và khiến trang web có cảm giác chậm chạp.

Điều quan trọng nữa là phải nhớ rằng thiết bị di động của người dùng cuối kém tinh vi hơn nhiều so với thiết bị mà trang web của bạn được xây dựng trên đó: Tất cả JavaScript trên trang web của bạn là lý do khiến trang web trung bình mất hơn 14 giây để tải và tương tác trên thiết bị di động. Điều này dẫn đến tác động tiêu cực đến Điểm Lighthouse, Core Web Vitals và thứ hạng tìm kiếm và giảm mức độ tương tác của người dùng.

Theo Google Web Fundamentals, các tập lệnh của bên thứ ba có thể gây ra một số sự cố bao gồm:

• Quá nhiều yêu cầu mạng đến nhiều máy chủ;
• Gửi quá nhiều JavaScript;
• Phân tích cú pháp và thực thi tập lệnh tốn nhiều tài nguyên;
• bộ nhớ đệm HTTP không đủ;
• Thiếu nén máy chủ đủ các tài nguyên;
• Chặn hiển thị nội dung cho đến khi chúng hoàn tất quá trình xử lý;
• Sử dụng API cũ (ví dụ: document.write()) được biết là có hại cho người dùng kinh nghiệm;
• Các phần tử DOM quá mức hoặc các bộ chọn CSS đắt tiền.

Khi bạn có nhiều tập lệnh của bên thứ ba trên trang web của mình, chúng sẽ chặn JavaScript của riêng bạn. Điều này trở nên đặc biệt quan trọng đối với các trang web thương mại điện tử và thị trường trực tuyến cần các tập lệnh của bên thứ ba này để điều hành doanh nghiệp của họ và nơi thời gian thực sự là tiền bạc.

Việc tải xuống các tập lệnh của bên thứ ba cho web workers chạy trong các luồng nền là một giải pháp tiềm năng cho phép người dùng giữ lại các tập lệnh của họ trong khi cải thiện hiệu suất. Các web worker thực thi đồng bộ nhưng chỉ có thể giao tiếp với luồng chính theo cách không đồng bộ. Các web worker cũng không có quyền truy cập trực tiếp vào DOM — chỉ có luồng chính mới có. Vì vậy, những thách thức chính là cung cấp mã JavaScript chạy bên trong web worker với một số loại quyền truy cập vào DOM và làm cho quyền truy cập đó đồng bộ (mặc dù giao tiếp với luồng chính phải duy trì ở chế độ không đồng bộ).

Giới thiệu về Partytown​

Partytown là một giải pháp nguồn mở nhẹ giúp giảm độ trễ thực thi do JavaScript của bên thứ ba bằng cách tải xuống các tập lệnh của bên thứ ba cho các web worker, chạy trong các luồng nền. Điều này giải phóng luồng chính của trình duyệt để chạy mã của riêng bạn. Nó được bảo trì bởi Builder.io và hiện đang trong giai đoạn beta.

Builder.io cũng là nơi lưu trữ Qwik, một khuôn khổ ứng dụng web có thể tiếp tục, ưu tiên HTML nguồn mở, giúp các trang web tương tác tải nhanh chỉ với HTML và CSS, chỉ kéo JavaScript khi cần.

Mặc dù Partytown không giải quyết được tất cả các nút thắt cổ chai do các tập lệnh của bên thứ ba gây ra (được liệt kê trong phần trên), nhưng nó giải quyết được những thách thức lớn nhất đối với việc xây dựng các trang web hiệu suất cao bằng cách:

• Giải phóng tài nguyên luồng chính để chỉ được sử dụng cho việc thực thi ứng dụng web chính;
• Đưa các tập lệnh của bên thứ ba vào hộp cát và cho phép hoặc từ chối quyền truy cập của chúng vào API luồng chính;
• Cô lập các tác vụ chạy lâu trong luồng công nhân web;
• Giảm tình trạng lộn xộn bố cục đến từ các tập lệnh của bên thứ ba bằng cách nhóm các bộ thiết lập/lấy DOM vào nhóm cập nhật;
• Hạn chế quyền truy cập của các tập lệnh của bên thứ ba vào luồng chính;
• Cho phép các tập lệnh của bên thứ ba chạy chính xác theo cách chúng được mã hóa và không có bất kỳ thay đổi nào;
• Đọc và ghi các hoạt động DOM của luồng chính đồng bộ từ bên trong một web worker, cho phép các tập lệnh chạy từ web worker thực thi như mong đợi.

Kiến trúc đằng sau Partytown​

Mặc dù có những cải tiến giúp tăng tốc cách chúng tôi cung cấp JavaScript cho trình duyệt (thu nhỏ, nén, phân phối, chia nhỏ mã, không đồng bộ, trì hoãn), việc thực thi mã sau khi mã đã ở trong trình duyệt bị hạn chế bởi thực tế là JavaScript là ngôn ngữ luồng đơn — chỉ có thể chạy một tập lệnh tại một thời điểm.

Partytown là một thư viện JavaScript tải chậm để giúp chuyển hướng các tập lệnh tốn nhiều tài nguyên sang một web worker. Để đảm bảo các ứng dụng ở mọi quy mô có thể tiếp tục sử dụng các tập lệnh của bên thứ ba mà không gặp phải sự cố về hiệu suất, Partytown chuyển các tập lệnh của bên thứ ba này sang một web worker và cho phép bạn cho phép hoặc từ chối quyền truy cập của chúng vào API luồng chính. Nói cách khác, các tập lệnh của bên thứ ba không bắt buộc phải nằm trong đường dẫn hiển thị quan trọng sẽ được thực thi trong một luồng nền. Điều này giải phóng luồng chính của trình duyệt để thực thi JavaScript của bên thứ nhất, thường chịu trách nhiệm xử lý dữ liệu đầu vào của người dùng hoặc vẽ màn hình.

Hãy xem xét Google Analytics, công cụ thu thập và gửi dữ liệu theo dõi bằng navigator.sendBeacon(). Một mặt, đây là một tác vụ nền có thể chạy không đồng bộ. Mặt khác, Google Analytics vẫn yêu cầu quyền truy cập API DOM đồng bộ khi đọc các giá trị từ document và window. Partytown cho phép thực thi các tập lệnh như Google Analytics từ chế độ nền trong khi truy cập DOM như thể nó đang ở trong luồng chính.

Cách Partytown hoạt động​

Thách thức chính với web worker là nó không có quyền truy cập trực tiếp vào các API DOM có thể truy cập từ luồng chính, chẳng hạn như window, document hoặc localStorage. Trong khi có thể tạo hệ thống nhắn tin giữa hai luồng để ủy quyền cho các hoạt động DOM, thì API postMessage được sử dụng cho giao tiếp giữa web worker/luồng chính là không đồng bộ. Điều này có nghĩa là các tập lệnh của bên thứ ba dựa vào các hoạt động DOM đồng bộ sẽ đơn giản là không thành công.

Partytown cung cấp quyền truy cập đồng bộ vào DOM API từ bên trong web worker bằng cách sử dụng proxy JavaScript, service worker và các yêu cầu XHR đồng bộ. Quyền truy cập vào DOM API bên trong web worker được proxy, tạo các yêu cầu XHR đồng bộ với các phương thức và giá trị được truy cập (ví dụ: document.title hoặc window.screen.width).

Các yêu cầu này được chặn bởi service worker, sử dụng postMessage để chuyển tiếp yêu cầu API đến luồng chính một cách không đồng bộ. Tuy nhiên, bằng cách ánh xạ từng yêu cầu DOM API đến một XHR đồng bộ, web worker sẽ tạm dừng thực thi cho đến khi service worker phản hồi. Kết quả cuối cùng là, theo quan điểm của tập lệnh của bên thứ ba trong web worker, tất cả đều đồng bộ.

Lợi ích của cách tiếp cận này là bạn không cần phải viết lại hoặc cấu trúc lại các tập lệnh của bên thứ ba để chúng hoạt động trong web worker. Chúng được thực thi chính xác như đã mã hóa; chúng chỉ hoạt động từ luồng nền.

Hơn nữa, bằng cách ủy quyền tất cả quyền truy cập API DOM, Partytown có thể ghi lại mọi lần đọc và ghi và thậm chí hạn chế quyền truy cập vào một số API DOM nhất định.

Thiết lập Partytown​

Partytown không tự động di chuyển tất cả các tập lệnh của bên thứ ba sang một web worker. Để bắt đầu, các nhà phát triển cần "chọn tham gia" — nghĩa là họ phải chọn tập lệnh nào được tải và thực thi thông qua Partytown. Sử dụng npmtại dòng lệnh để cài đặt Partytown.

npm install @builder.io/partytown

Tiếp theo, thêm thuộc tính type="text/partytown" vào mỗi tập lệnh của bên thứ ba mà bạn muốn chạy từ một web worker.

- ...+ ...

Partytown chỉ được bật cho các tập lệnh cụ thể khi chúng có thuộc tính type="text/partytown". Thuộc tính này thực hiện hai việc:

1. Ngăn luồng chính thực thi tập lệnh;
2. Cung cấp bộ chọn để Partytown truy vấn, chẳng hạn như document.querySelectorAll('script[type="text/partytown"]').

Bước tiếp theo là nhúng đoạn mã Partytown vào . Nếu bạn đang sử dụng React, chúng tôi khuyên bạn nên sử dụng Thành phần React.

Sau đây là ví dụ về việc đưa thành phần vào trang Next.js.

import Head from "next/head";import { Partytown } from "@builder.io/partytown/react";const Home = () => { return (   My App  
  ...  );};export default Home;

Đối với những trường hợp đặc biệt, có thể cần một lượng cấu hình nhỏ. Partytown hoạt động với bất kỳ trang HTML nào và không yêu cầu một khuôn khổ cụ thể, nhưng có một số tích hợp (plugin/wrapper) khả dụng, bao gồm Next.js, Nuxt.js, React và Shopify Hydrogen. Partytown cũng cung cấp tài liệu và hướng dẫn cho một số dịch vụ của bên thứ ba như Facebook Pixel, Adobe Launch và Google Tag Manager.

Khi thiết lập Partytown, điều quan trọng là phải thử nghiệm trước trên một vài trang và đo lường sự cải thiện bằng Google PageSpeed Insights. Sau khi xác nhận rằng tất cả các tập lệnh của bạn đang hoạt động, bạn có thể bật nó cho tất cả các trang trên trang web.

Partytown In Action​

Trang web Builder.io đã quản lý để cắt giảm 99% JavaScript bằng cách kết hợp Partytown và Qwik. Điều này cải thiện hiệu suất đáng kể, với điểm số 100⁄100 của Google Lighthouse trên PageSpeed Insights ngay cả trên thiết bị di động. Cũng có sự giảm đáng kể về tổng thời gian chặn (TBT) và thời gian tương tác (TTI), các số liệu đo lường thời gian các tập lệnh của bên thứ ba trì hoãn việc thực thi JavaScript của bên thứ nhất.

Atoms, cửa hàng giày dép trực tuyến, hiện đang sử dụng Partytown trên các trang tiếp thị của họ (cụ thể là trên Why Atoms, About, Press và Thẻ quà tặng). Hiện tại, họ đang nỗ lực để kích hoạt Partytown trên toàn bộ trang web.

Come Party With Builder​

Partytown vẫn đang trong giai đoạn thử nghiệm, vì vậy không phải mọi tập lệnh đều hoạt động. Builder.io tích cực mời mọi người dùng thử Partytown và chia sẻ suy nghĩ của họ với nhóm. Người dùng có thể báo cáo sự cố, yêu cầu tích hợp và hướng dẫn hoặc đóng góp mã tại GitHub của Partytown.

Builder.io hướng đến mục tiêu biến hiệu suất cao thành mặc định cho các trang web. Một trang web nhanh với hiệu suất tốt nhất có thể khả thi mà không cần bất kỳ cấu hình nào. Builder đã thực hiện bước đầu tiên hướng tới lý tưởng này với các giải pháp nguồn mở của họ, Partytown và Qwik, cả hai đều đóng vai trò then chốt trong việc biến các trang web gần như không có JavaScript trở nên khả thi đối với bất kỳ ai.

Các nguồn khác​

• Partytown của Builder.io
• Kho lưu trữ GitHub của Partytown
• Kho lưu trữ GitHub của Qwik
• “Giới thiệu Partytown : Chạy tập lệnh của bên thứ ba từ Web Worker”, loạt bài gồm hai phần của Adam Bradley về Partytown

Đọc thêm​

• Thời gian đến byte đầu tiên: Ngoài thời gian phản hồi của máy chủ
• Xây dựng trình đọc RSS tĩnh để chống lại FOMO bên trong bạn
• Tích hợp: Từ truyền dữ liệu đơn giản đến kiến trúc có thể cấu hình hiện đại
• Cách an toàn nhất để ẩn khóa API của bạn khi sử dụng React