Tải JavaScript của bên thứ ba một cách hiệu quả

Tránh các sai lầm phổ biến khi sử dụng tập lệnh của bên thứ ba để cải thiện thời gian tải và trải nghiệm người dùng.

Nếu tập lệnh của bên thứ ba đang làm chậm tốc độ tải trang, bạn có hai lựa chọn để cải thiện hiệu suất:

  • Hãy xoá nếu phần mở rộng đó không đem lại giá trị rõ ràng cho trang web của bạn.

  • Tối ưu hoá quá trình tải.

Bài đăng này giải thích cách tối ưu hoá quá trình tải tập lệnh của bên thứ ba bằng các kỹ thuật sau:

  1. Sử dụng thuộc tính async hoặc defer trên thẻ <script>

  2. Thiết lập kết nối sớm với các nguồn gốc bắt buộc

  3. Tải từng phần

  4. Tối ưu hoá cách bạn phân phát tập lệnh của bên thứ ba

Sử dụng async hoặc defer

Do tập lệnh đồng bộ trì hoãn việc xây dựng và hiển thị DOM, bạn phải luôn tải không đồng bộ các tập lệnh của bên thứ ba trừ khi tập lệnh phải chạy trước khi có thể hiển thị trang.

Các thuộc tính asyncdefer cho trình duyệt biết rằng nó có thể tiếp tục phân tích cú pháp HTML trong khi tải tập lệnh trong nền và sau đó thực thi tập lệnh sau khi tải. Bằng cách này, việc tải tập lệnh xuống không chặn quá trình xây dựng DOM và hiển thị trang. Kết quả là người dùng có thể xem trang trước khi tất cả tập lệnh tải xong.

<script async src="script.js">

<script defer src="script.js">

Sự khác biệt giữa asyncdefer là thời điểm bắt đầu thực thi các tập lệnh.

async

Các tập lệnh có thuộc tính async sẽ thực thi ngay cơ hội đầu tiên sau khi tải xuống xong và trước sự kiện tải của cửa sổ. Điều này có nghĩa là có thể (và có thể) tập lệnh async sẽ không được thực thi theo thứ tự xuất hiện trong HTML. Điều này cũng có nghĩa là chúng có thể làm gián đoạn quá trình tạo DOM nếu hoàn tất việc tải xuống trong khi trình phân tích cú pháp vẫn đang hoạt động.

Sơ đồ tập lệnh chặn trình phân tích cú pháp với thuộc tính không đồng bộ

defer

Các tập lệnh có thuộc tính defer sẽ thực thi sau khi phân tích cú pháp HTML hoàn tất, nhưng trước sự kiện DOMContentLoaded. defer đảm bảo các tập lệnh sẽ được thực thi theo thứ tự xuất hiện trong HTML và sẽ không chặn trình phân tích cú pháp.

Sơ đồ luồng trình phân tích cú pháp với một tập lệnh có thuộc tính trì hoãn

  • Hãy sử dụng async nếu bạn cần chạy tập lệnh sớm hơn trong quá trình tải.

  • Dùng defer cho các tài nguyên ít quan trọng hơn. Ví dụ: trình phát video ở dưới màn hình đầu tiên.

Việc sử dụng các thuộc tính này có thể làm tăng đáng kể tốc độ tải trang. Ví dụ: Gần đây, Telegraph đã trì hoãn tất cả tập lệnh (bao gồm cả quảng cáo và số liệu phân tích), đồng thời cải thiện thời gian tải quảng cáo thêm trung bình 4 giây.

Thiết lập kết nối sớm với các nguồn gốc bắt buộc

Bạn có thể tiết kiệm 100–500 mili giây bằng cách thiết lập kết nối sớm với những nguồn gốc quan trọng của bên thứ ba.

2 loại <link> có thể trợ giúp tại đây:

  • preconnect

  • dns-prefetch

preconnect

<link rel="preconnect"> thông báo cho trình duyệt rằng trang của bạn dự định thiết lập kết nối đến một nguồn khác và bạn muốn quá trình này bắt đầu càng sớm càng tốt. Khi có yêu cầu về tài nguyên từ nguồn gốc được kết nối trước, quá trình tải xuống sẽ bắt đầu ngay lập tức.

<link rel="preconnect" href="https://cdn.example.com">

dns-prefetch

<link rel="dns-prefetch> xử lý một phần nhỏ nội dung do <link rel="preconnect"> xử lý. Việc thiết lập kết nối liên quan đến việc tra cứu DNS và quá trình bắt tay TCP, cũng như đối với các nguồn gốc bảo mật, quá trình thương lượng TLS (Bảo mật tầng truyền tải). dns-prefetch hướng dẫn trình duyệt chỉ phân giải DNS của một miền cụ thể trước khi miền đó được gọi một cách rõ ràng.

Gợi ý preconnect chỉ phù hợp với các kết nối quan trọng nhất. Đối với các miền bên thứ ba ít quan trọng hơn, hãy sử dụng <link rel=dns-prefetch>.

<link rel="dns-prefetch" href="http://example.com">

Hỗ trợ trình duyệt cho dns-prefetch hơi khác so với hỗ trợ preconnect, vì vậy dns-prefetch có thể đóng vai trò dự phòng cho các trình duyệt không hỗ trợ preconnect. Sử dụng các thẻ liên kết riêng biệt để triển khai tính năng này một cách an toàn:

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

Tải từng phần tài nguyên của bên thứ ba

Tài nguyên được nhúng của bên thứ ba có thể là một yếu tố góp phần lớn vào tốc độ trang chậm khi được xây dựng kém. Nếu các quảng cáo đó không quan trọng hoặc nằm dưới màn hình đầu tiên (tức là nếu người dùng phải cuộn để xem), thì tải từng phần là một cách hiệu quả để cải thiện tốc độ trang và hiển thị chỉ số. Bằng cách này, người dùng sẽ nhận được nội dung trang chính nhanh hơn và có trải nghiệm tốt hơn.

Sơ đồ một trang web hiển thị trên thiết bị di động với nội dung có thể cuộn mở rộng ra ngoài màn hình. Nội dung dưới màn hình đầu tiên bị giảm độ bão hoà vì chưa được tải.

Một phương pháp hiệu quả là tải từng phần nội dung của bên thứ ba sau khi nội dung trang chính tải xong. Quảng cáo là một lựa chọn phù hợp cho phương pháp này.

Quảng cáo là nguồn thu nhập quan trọng của nhiều trang web, nhưng người dùng đến để tìm nội dung. Bạn có thể tăng tỷ lệ phần trăm khả năng xem tổng thể của quảng cáo bằng cách tải từng phần quảng cáo và phân phối nội dung chính nhanh hơn. Ví dụ: MediaVine chuyển sang quảng cáo tải từng phần và nhận thấy tốc độ tải trang cải thiện 200%. DoubleClick có hướng dẫn về cách tải từng phần quảng cáo trong tài liệu chính thức của họ.

Một phương pháp thay thế là chỉ tải nội dung của bên thứ ba khi người dùng cuộn xuống phần đó trên trang.

Intersection Observer là API trình duyệt có chức năng phát hiện hiệu quả thời điểm một phần tử vào hoặc thoát khỏi khung nhìn của trình duyệt. Bạn có thể dùng API này để triển khai kỹ thuật này. lazysize là một thư viện JavaScript phổ biến dành cho việc tải từng phần hình ảnh và iframes. Hộp cát về quyền riêng tư hỗ trợ hoạt động nhúng và tiện ích trên YouTube. Tính năng này cũng hỗ trợ không bắt buộc cho IntersectionObserver.

Việc sử dụng thuộc tính loading cho hình ảnh và iframe tải từng phần là một giải pháp thay thế tuyệt vời cho các kỹ thuật JavaScript và gần đây đã có trong Chrome 76!

Tối ưu hoá cách bạn phân phát tập lệnh của bên thứ ba

Dịch vụ lưu trữ CDN của bên thứ ba

Các nhà cung cấp bên thứ ba thường cung cấp URL của các tệp JavaScript mà họ lưu trữ, thường là trên mạng phân phối nội dung (CDN). Lợi ích của phương pháp này là bạn có thể bắt đầu nhanh chóng (chỉ cần sao chép và dán URL) mà không phải tốn chi phí bảo trì. Nhà cung cấp bên thứ ba xử lý việc cập nhật tập lệnh và cấu hình máy chủ.

Tuy nhiên, do chúng không có cùng nguồn gốc với các tài nguyên còn lại của bạn, nên việc tải tệp từ CDN công khai sẽ phát sinh chi phí mạng. Trình duyệt cần phải tra cứu DNS, thiết lập kết nối HTTP mới, và đối với các nguồn gốc bảo mật, hãy bắt tay SSL với máy chủ của nhà cung cấp.

Khi sử dụng tệp từ máy chủ của bên thứ ba, bạn hiếm khi có quyền kiểm soát việc lưu vào bộ nhớ đệm. Việc phụ thuộc vào chiến lược lưu vào bộ nhớ đệm của người khác có thể khiến các tập lệnh được tìm nạp lại từ mạng quá thường xuyên một cách không cần thiết.

Tập lệnh bên thứ ba tự lưu trữ

Các tập lệnh của bên thứ ba tự lưu trữ là một lựa chọn cung cấp cho bạn nhiều quyền kiểm soát hơn đối với quá trình tải của tập lệnh. Khi tự tổ chức, bạn có thể:

Ví dụ: Casper đã quản lý để giảm 1, 7 giây thời gian tải bằng cách tự lưu trữ một tập lệnh thử nghiệm A/B.

Tuy nhiên, việc tự lưu trữ có một nhược điểm lớn: tập lệnh có thể bị lỗi thời và sẽ không nhận được bản cập nhật tự động khi có thay đổi về API hoặc bản sửa lỗi bảo mật.

Sử dụng trình chạy dịch vụ để lưu tập lệnh vào bộ nhớ đệm từ máy chủ của bên thứ ba

Một giải pháp thay thế cho phương thức tự lưu trữ giúp bạn kiểm soát tốt hơn việc lưu vào bộ nhớ đệm mà vẫn nhận được các lợi ích của CDN của bên thứ ba là sử dụng trình chạy dịch vụ để lưu tập lệnh vào bộ nhớ đệm từ máy chủ của bên thứ ba. Điều này giúp bạn kiểm soát tần suất tìm nạp lại tập lệnh từ mạng, đồng thời tạo chiến lược tải để hạn chế các yêu cầu về tài nguyên không thiết yếu của bên thứ ba cho đến khi trang tiếp cận được thời điểm quan trọng của người dùng. Việc sử dụng preconnect để thiết lập kết nối sớm trong trường hợp này cũng có thể giảm thiểu một phần chi phí mạng.