Categories Tối ưu JavaScript

Vấn đề tốc độ của JavaScript từ bên thứ ba

Trong bài viết này chúng ta cùng tìm hiểu ảnh hưởng của JavaScript bên thứ ba lên tốc độ, hiệu suất của website và bạn có thể làm gì để tránh các mã này làm chậm website của bạn.

JavaScript của bên thứ ba thường liên quan đến các đoạn mã được nhúng vào trong website của bạn, chúng là:

  • Các mã mà bạn không phải là tác giả (not authored);
  • Được phục vụ từ các máy chủ của bên thứ ba (third-party servers);

Các website sử dụng các đoạn mã này cho nhiều mục đích khác nhau, bao gồm:

  • Các nút chia sẻ mạng xã hội;
  • Các video được nhúng vào;
  • Dịch vụ chat;
  • Các iframe quảng cáo;
  • Các mã phân tích và đo lường;
  • Các mã kiểm tra A/B phân tích trải nghiệm thực tế của người dùng;
  • Các thư viện hỗ trợ (chẳng hạn như định dạng ngày tháng, ảnh động, và các thư viện chức năng);
  • Vân vân & mây mây.

Các mã của bên thứ ba có thể cung cấp các chức năng đầy sức mạnh, nhưng điều đó không phải toàn bộ câu chuyện. Chúng cũng có thể ảnh hưởng đến vấn đề quyền riêng tư, bảo mật và hành vi của trang- và chúng có thể gặp các vấn đề nghiêm trọng về hiệu suất.


Hiệu suất, tốc độ

Bất kỳ một lượng JavaScript đáng kể nào cũng có thể làm ảnh hưởng đến tốc độ của website. Nhưng JavaScript của bên thứ ba thường nằm ngoài tầm kiểm soát của bạn, nó có thể đem đến một số vấn đề khác nữa.


Mạng

Thiết lập kết nối bảo mật tốn thời gian, và gửi quá nhiều yêu cầu tới nhiều máy chủ có thể là nguyên nhân làm chậm trang. Thời gian này thậm chí dài hơn khi phải thiết lập kết nối bảo mật, cái có thể liên quan đến việc tìm kiếm DNS, chuyển hướng, và một số vòng khứ hồi (round trips) tới máy chủ cuối cùng để xử lý yêu cầu của người dùng.

Các mã JavaScript của bên thứ ba thường bổ sung thêm các vấn đề mạng ngầm ẩn như:

  • Tăng mạnh các yêu cầu mạng bổ sung;
  • Kéo về các ảnh và video chưa được tối ưu hóa;
  • HTTP caching không đủ, cái có thể bắt buộc bạn phải tìm nạp thường xuyên các tài nguyên mạng;
  • Nén máy chủ không đủ cho các tài nguyên;
  • Nhiều trường hợp các frameworks và thư viện được kéo về bởi nhiều mã nhúng của bên thứ ba khác;

Kết xuất

Cách JavaScript của bên thứ ba tải về gặp rất nhiều vấn đề. Nếu nó được tải đồng bộ trong tuyến hiển thị quan trọng, nó sẽ làm trì hoãn phân tích cú pháp phần còn lại của tài liệu (html / css).

Thuật ngữ quan trọng: Tuyến hiển thị quan trọng bao gồm tất cả các tài nguyên mà trình duyệt cần để hiển thị nội dung thuộc màn hình đầu tiên (above the fold).

Nếu tài nguyên của bên thứ ba gặp vấn đề máy chủ và gặp lỗi khi phân phối một tài nguyên nào đó, quá trình render (kết xuất) sẽ bị chặn cho đến khi yêu cầu bị ‘time out’, cái có thể kéo dài trong khoảng từ 10 tới 80 giây. Bạn có thể kiểm tra và mô phỏng vấn đề này bằng công cụ kiểm tra của WebPageTest chuyên cho vấn đề điểm lỗi duy nhất (single-point-of-failure).

Lưu ý: Các mã kiểm tra A/B cũng thường có thể làm trì hoãn kết xuất trang. Hầu hết chúng chặn nội dung hiển thị cho đến khi chúng xử lý xong hoàn toàn- điều này vẫn đúng thậm chí với các mã kiểm tra A/B tải theo kiểu không đồng bộ.


Bạn phải làm gì?

Sử dụng JavaScript của bên thứ ba thường là điều không tránh khỏi, nhưng có một số thứ bạn có thể làm để tối thiểu hóa các hiệu ứng bất lợi:

  • Khi chọn các tài nguyên của bên thứ ba, hãy thiên về các nhà cung cấp gửi lượng mã ít nhất trong khi vẫn cung cấp cho bạn các chức năng mà bạn cần;
  • Không sử dụng cùng một chức năng từ hai nhà cung cấp khác nhau. Bạn có lẽ chẳng cần hai trình quản lý thẻ hoặc hai nền tảng phân tích lưu lượng truy cập;
  • Kiểm tra định kỳ và loại bỏ các đoạn mã dư thừa của bên thứ ba;

Để kiểm tra các nội dung của bên thứ ba và cách tải nó hiệu quả hơn cho vấn đề hiệu suất và trải nghiệm người dùng, bạn hãy tìm đọc các bài viết trong chủ đề tối ưu hóa tài nguyên của bên thứ ba.

(Dịch từ bài viết: Third-party JavaScript performance, tác giả: Milica Mihajlija, web: web[.]dev)

Back to Top