Tải JavaScript của bên thứ ba

Addy Osmani
Addy Osmani
Arthur Evans

Nếu bạn đã tối ưu hoá mã nhưng trang web của bạn vẫn tải quá chậm, thì có thể là do tập lệnh của bên thứ ba.

Tập lệnh của bên thứ ba cung cấp nhiều tính năng hữu ích giúp trang web linh động, tương tác và kết nối với nhau hơn. Một vài trong số đó thậm chí có thể rất quan trọng đối với chức năng hoặc luồng doanh thu của trang web. Tuy nhiên, việc sử dụng chúng cũng có rủi ro:

  • Chúng có thể làm chậm hiệu suất của trang web.
  • Chúng có thể gây ra các vấn đề về quyền riêng tư hoặc bảo mật.
  • Chúng có thể là không thể dự đoán được và hành vi của chúng có thể gây ra hậu quả không mong muốn.

Tốt nhất là bạn nên đảm bảo các tập lệnh của bên thứ ba không ảnh hưởng đến đường dẫn hiển thị quan trọng của trang web. Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn cách tìm và khắc phục các sự cố liên quan đến việc tải JavaScript của bên thứ ba, đồng thời giảm thiểu rủi ro cho người dùng.

Tập lệnh của bên thứ ba là gì?

JavaScript bên thứ ba thường là các tập lệnh có thể được nhúng trực tiếp vào bất kỳ trang web nào từ nhà cung cấp bên thứ ba. Ví dụ:

  • Các nút chia sẻ trên mạng xã hội (Facebook, X, LinkedIn, Mastodon)

  • Nhúng trình phát video (YouTube, Vimeo)

  • iframe quảng cáo

  • Tập lệnh phân tích và chỉ số

  • Tập lệnh thử nghiệm A/B cho thử nghiệm

  • Các thư viện trợ giúp, chẳng hạn như định dạng ngày, ảnh động hoặc thư viện chức năng

ví dụ về nhúng video trên YouTube
Ví dụ: Bạn có thể thêm video nhúng trên YouTube vào một trang bằng đoạn mã sau.
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/mo8thg5XGV0"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen
>
</iframe>

Thật không may, việc nhúng tập lệnh của bên thứ ba có nghĩa là chúng tôi thường dựa vào các tập lệnh này để chạy nhanh và không làm chậm trang của chúng tôi. Tập lệnh của bên thứ ba là nguyên nhân phổ biến gây chậm hiệu suất do các tài nguyên ngoài tầm kiểm soát của chủ sở hữu trang web, bao gồm các vấn đề sau:

  • Kích hoạt quá nhiều yêu cầu mạng đến nhiều máy chủ. Trang web càng phải thực hiện nhiều yêu cầu, thì càng mất nhiều thời gian để tải.

  • Gửi quá nhiều JavaScript khiến luồng chính bận. Quá nhiều JavaScript có thể chặn quá trình tạo DOM, từ đó làm chậm quá trình hiển thị trang. Việc phân tích cú pháp và thực thi tập lệnh tiêu tốn nhiều CPU có thể làm chậm trễ hoạt động tương tác của người dùng và gây tiêu hao pin.

  • Việc gửi video hoặc tệp hình ảnh lớn, chưa được tối ưu hoá có thể gây tốn dữ liệu và tốn tiền của người dùng.

  • Các vấn đề bảo mật có thể là một điểm lỗi (SPOF) nếu trang của bạn tải tập lệnh mà không thận trọng.

  • Không đủ bộ nhớ đệm HTTP, buộc trình duyệt phải gửi nhiều yêu cầu mạng hơn để tìm nạp tài nguyên.

  • Việc không đủ định dạng nén máy chủ sẽ khiến tài nguyên tải chậm.

  • Chặn hiển thị nội dung cho đến khi quá trình xử lý hoàn tất. Điều này cũng có thể đúng với các tập lệnh thử nghiệm A/B không đồng bộ.

  • Việc sử dụng các API cũ đã biết là gây hại cho trải nghiệm người dùng, chẳng hạn như document.write().

  • Phần tử DOM quá nhiều hoặc bộ chọn CSS đắt tiền.

  • Việc bao gồm nhiều nội dung nhúng của bên thứ ba có thể dẫn đến việc nhiều khung và thư viện bị kéo vào nhiều lần, lãng phí tài nguyên và làm trầm trọng thêm các vấn đề về hiệu suất hiện tại.

  • Các tập lệnh của bên thứ ba thường sử dụng các kỹ thuật nhúng có thể chặn window.onload nếu máy chủ phản hồi chậm, ngay cả khi quá trình nhúng đang sử dụng chế độ không đồng bộ hoặc trì hoãn.

Khả năng khắc phục vấn đề với tập lệnh của bên thứ ba có thể phụ thuộc vào trang web của bạn và khả năng định cấu hình cách bạn tải mã của bên thứ ba. May mắn là hiện có một số giải pháp và công cụ giúp tìm và khắc phục vấn đề về tài nguyên của bên thứ ba.

Làm cách nào để xác định tập lệnh của bên thứ ba trên một trang?

Xác định các tập lệnh của bên thứ ba trên trang web của bạn và xác định tác động của các tập lệnh đó đến hiệu suất là bước đầu tiên để tối ưu hoá các tập lệnh đó. Bạn nên sử dụng các công cụ kiểm tra tốc độ web miễn phí, bao gồm Công cụ của Chrome cho nhà phát triển, PageSpeed InsightsWebPageTest để xác định các tập lệnh tốn kém. Các công cụ này hiển thị thông tin chẩn đoán phong phú, có thể cho bạn biết số lượng tập lệnh của bên thứ ba mà trang web của bạn sử dụng và những tập lệnh mất nhiều thời gian thực thi nhất.

Chế độ xem thác nước của WebPageTest có thể làm nổi bật tác động của việc sử dụng nhiều tập lệnh của bên thứ ba. Hình ảnh sau đây từ Tag Gone Wild cho thấy một sơ đồ mẫu về các yêu cầu mạng cần thiết để tải nội dung chính cho một trang web, khác với các tập lệnh theo dõi và tiếp thị.

chế độ xem thác nước từ trang webtest hiển thị trang web thực tế so với khoảng thời gian dành cho việc tải tập lệnh theo dõi
Tập lệnh trên trang này mất nhiều thời gian tải hơn so với chính trang đó.

Bảng chi tiết về miền của WebPageTest cũng có thể hữu ích cho việc trực quan hoá lượng nội dung đến từ các nguồn gốc của bên thứ ba. Bảng này chia nhỏ theo cả tổng số byte và số lượng yêu cầu:

phân tích nội dung theo miền (chế độ xem đầu tiên).
Cho biết tỷ lệ phần trăm yêu cầu và byte cho từng bên thứ ba
Biểu đồ phân tích miền cho biết lượng nội dung của một trang đến từ bên thứ ba.

Làm cách nào để đo lường tác động của tập lệnh của bên thứ ba đến trang của tôi?

Khi bạn thấy tập lệnh gây ra sự cố, hãy tìm hiểu xem tập lệnh sẽ làm gì và xác định xem trang web của bạn có cần tập lệnh đó hoạt động hay không. Nếu cần, hãy chạy thử nghiệm A/B để cân bằng giá trị cảm nhận được với mức tác động đối với các chỉ số chính về mức độ tương tác hoặc hiệu suất của người dùng.

Kiểm tra thời gian khởi động Lighthouse

Lighthouse Kiểm tra thời gian khởi động JavaScript của Lighthouse làm nổi bật các tập lệnh có thời gian biên dịch, đánh giá hoặc phân tích cú pháp tập lệnh tốn kém. Nhờ đó, bạn có thể xác định các tập lệnh của bên thứ ba dùng nhiều CPU.

Lighthouse cho thấy tính năng hỗ trợ đánh giá và phân tích cú pháp tập lệnh
Kiểm tra thời gian khởi động cho biết tập lệnh nào mất nhiều thời gian tải nhất.

Kiểm tra tải trọng mạng Lighthouse

Kiểm tra tải trọng mạng của Lighthouse xác định các yêu cầu mạng, bao gồm cả các yêu cầu mạng của bên thứ ba làm chậm thời gian tải trang và khiến người dùng chi tiêu nhiều hơn mong đợi cho dữ liệu di động.

Lighthouse cho thấy khả năng hỗ trợ các tải trọng mạng lớn
Hoạt động kiểm tra tải trọng mạng cho biết yêu cầu mạng nào mất nhiều thời gian và tìm nạp nhiều dữ liệu nhất.

Chặn yêu cầu mạng của Công cụ của Chrome cho nhà phát triển

Công cụ của Chrome cho nhà phát triển cho phép bạn xem cách hoạt động của trang khi không có tập lệnh được chỉ định, trang tính kiểu hoặc tài nguyên khác. Bạn có thể thực hiện việc này bằng cách chặn yêu cầu mạng, một tính năng có thể giúp đo lường tác động của việc xoá từng tài nguyên bên thứ ba khỏi trang của bạn.

Để bật tính năng chặn yêu cầu, hãy nhấp chuột phải vào yêu cầu bất kỳ trong bảng điều khiển Network (Mạng) rồi chọn Block Request URL (Chặn URL yêu cầu). Sau đó, thẻ chặn yêu cầu sẽ hiển thị trong ngăn DevTools, cho phép bạn quản lý yêu cầu nào đã bị chặn.

Chặn URL yêu cầu từ bảng điều khiển mạng Công cụ cho nhà phát triển
Chặn các yêu cầu mạng riêng lẻ để xem trang của bạn hoạt động như thế nào khi không có các yêu cầu đó.

Bảng điều khiển hiệu suất Công cụ của Chrome cho nhà phát triển

Bảng điều khiển hiệu suất trong Công cụ của Chrome cho nhà phát triển giúp xác định các vấn đề về hiệu suất web của trang.

  1. Nhấp vào Ghi lại.
  2. Tải trang của bạn. Công cụ cho nhà phát triển cho thấy biểu đồ thác nước thể hiện cách trang web của bạn sử dụng thời gian tải.
  3. Chuyển đến Từ dưới lên ở cuối bảng điều khiển Hiệu suất.
  4. Nhấp vào Nhóm theo sản phẩm rồi sắp xếp các tập lệnh bên thứ ba trong trang theo thời gian tải.
Bảng điều khiển Hiệu suất của Công cụ cho nhà phát triển hiển thị
Chế độ xem từ dưới lên được nhóm theo sản phẩm (bên thứ ba)
Các tập lệnh của bên thứ ba được sắp xếp theo sản phẩm, bắt đầu với thời gian tải dài nhất.

Để tìm hiểu thêm về cách sử dụng Công cụ của Chrome cho nhà phát triển nhằm phân tích hiệu suất tải trang, hãy xem bài viết Bắt đầu phân tích hiệu suất trong thời gian chạy.

Sau đây là quy trình làm việc mà chúng tôi đề xuất để đo lường tác động của các tập lệnh của bên thứ ba:

  1. Sử dụng bảng điều khiển Mạng để đo lường thời gian tải trang.
    • Để mô phỏng các điều kiện thực tế, bạn nên bật tính năng điều tiết mạngđiều tiết CPU. Người dùng ít có khả năng có kết nối mạng nhanh và phần cứng máy tính để bàn giúp giảm tác động của các tập lệnh tốn kém trong điều kiện phòng thí nghiệm.
  2. Chặn các URL hoặc miền chịu trách nhiệm về tập lệnh của bên thứ ba mà bạn cho là có vấn đề (xem Bảng điều khiển hiệu suất Công cụ của Chrome cho nhà phát triển để được hướng dẫn về cách xác định các tập lệnh tốn kém).
  3. Tải lại trang và đo lường lại thời gian tải.
    • Để có dữ liệu chính xác hơn, bạn nên đo lường thời gian tải ít nhất 3 lần. Tính năng này có tính đến một số tập lệnh của bên thứ ba tìm nạp các tài nguyên khác nhau trên mỗi lần tải trang. Để giúp giải quyết vấn đề này, Bảng điều khiển hiệu suất công cụ cho nhà phát triển hỗ trợ nhiều bản ghi.

Đo lường mức tác động của tập lệnh bên thứ ba bằng WebPageTest

WebPageTest hỗ trợ việc chặn từng yêu cầu tải để đo lường mức tác động của các yêu cầu đó trong phần Cài đặt nâng cao > Chặn. Sử dụng tính năng này để chỉ định danh sách các miền cần chặn, chẳng hạn như miền quảng cáo.

WebPageTest cài đặt nâng cao < Chặn.
Hiện vùng văn bản để chỉ định các miền cần chặn.
Liệt kê những miền bạn muốn chặn trong bảng điều khiển này.

Bạn nên sử dụng tính năng này theo quy trình sau đây:

  1. Kiểm tra một trang mà không chặn bên thứ ba.
  2. Lặp lại thử nghiệm với một số bên thứ ba bị chặn.
  3. Chọn hai kết quả trong Nhật ký kiểm tra.
  4. Nhấp vào So sánh.
WebPageTest hiển thị tuỳ chọn so sánh
cho phép bạn so sánh hai báo cáo
Chọn kết quả tải thử nghiệm để so sánh.

Hình ảnh sau đây cho thấy tính năng cuộn phim của WebPageTest so sánh trình tự tải cho những trang có và không có tài nguyên bên thứ ba đang hoạt động. Bạn nên kiểm tra vấn đề này cho các hoạt động kiểm thử từng nguồn gốc của bên thứ ba nhằm xác định miền nào ảnh hưởng nhiều nhất đến hiệu suất của trang.

Cuộn phim WebPageTest hiển thị tác động
của việc tải một trang web khi tắt và chưa tắt bên thứ ba
Tác động của việc chặn tài nguyên bên thứ ba, từ bài viết Sử dụng WebPageTest để đo lường tác động của thẻ bên thứ ba của Andy Davies.

WebPageTest cũng hỗ trợ hai lệnh hoạt động ở cấp DNS để chặn miền:

  • blockDomains sẽ lấy danh sách các miền cần chặn.
  • blockDomainsExcept lấy danh sách các miền và chặn mọi miền không có trong danh sách.

WebPageTest cũng có một thẻ điểm lỗi duy nhất (SPOF) cho phép bạn mô phỏng thời gian chờ hoặc hoàn toàn không tải được tài nguyên. Không giống như phương thức chặn miền, SPOF dần hết thời gian chờ. Điều này có thể giúp bạn kiểm thử cách các trang hoạt động khi các dịch vụ bên thứ ba đang tải quá nhiều hoặc tạm thời không hoạt động.

WebPageTest cài đặt nâng cao > SPOF > máy chủ không thành công
Sử dụng tính năng kiểm thử SPOF để mô phỏng lỗi của các miền đã chỉ định.

Phát hiện các iframe tốn kém bằng cách sử dụng Tác vụ dài

Khi các tập lệnh trong iframe của bên thứ ba mất nhiều thời gian để chạy, các tập lệnh đó có thể chặn luồng chính và trì hoãn các tác vụ khác. Các tác vụ dài này có thể khiến trình xử lý sự kiện hoạt động chậm hoặc giảm khung hình, từ đó khiến trải nghiệm người dùng kém đi.

Để phát hiện các tác vụ dài cho Giám sát người dùng thực (rum), hãy sử dụng API PerformanceObserver của JavaScript để quan sát các mục nhập longtask. Các mục nhập này chứa một thuộc tính phân bổ mà bạn có thể sử dụng để xác định ngữ cảnh khung nào đã gây ra tác vụ dài.

Các mã sau đây ghi nhật ký các mục nhập longtask vào bảng điều khiển, bao gồm cả một mục cho iframe "đắt":

<script>
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Attribution entry including "containerSrc":"https://example.com"
      console.log(JSON.stringify(entry.attribution));
    }
  });

  observer.observe({entryTypes: ['longtask']});
</script>

<!-- Imagine this is an iframe with expensive long tasks -->
<iframe src="https://example.com"></iframe>

Để tìm hiểu thêm về cách theo dõi tác vụ dài, hãy xem bài viết Các chỉ số hiệu suất tập trung vào người dùng.

Làm cách nào để tải tập lệnh của bên thứ ba một cách hiệu quả?

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

  • Tải tập lệnh bằng thuộc tính async hoặc defer để tránh việc chặn phân tích cú pháp tài liệu.
  • Nếu máy chủ của bên thứ ba bị chậm, hãy xem xét việc tự lưu trữ tập lệnh.
  • Nếu tập lệnh không thêm giá trị rõ ràng cho trang web của bạn, hãy xoá tập lệnh đó.
  • Sử dụng Gợi ý về tài nguyên như <link rel=preconnect> hoặc <link rel=dns-prefetch> để thực hiện quá trình tra cứu DNS cho các miền lưu trữ tập lệnh của bên thứ ba.

Sử dụng async hoặc defer

Thực thi JavaScript là chặn trình phân tích cú pháp. Khi gặp một tập lệnh, trình duyệt phải tạm dừng quá trình tạo DOM, chuyển tập lệnh đó đến công cụ JavaScript và cho phép tập lệnh thực thi trước khi tiếp tục xây dựng DOM.

Các thuộc tính asyncdefer thay đổi hành vi này như sau:

  • async khiến trình duyệt tải tập lệnh xuống không đồng bộ trong khi tiếp tục phân tích cú pháp tài liệu HTML. Khi tập lệnh tải xuống xong, tính năng phân tích cú pháp sẽ bị chặn trong khi tập lệnh thực thi.

  • defer khiến trình duyệt tải tập lệnh xuống không đồng bộ trong khi tiếp tục phân tích cú pháp tài liệu HTML, sau đó chờ chạy tập lệnh cho đến khi phân tích cú pháp tài liệu hoàn tất.

Luôn sử dụng async hoặc defer cho các tập lệnh của bên thứ ba, trừ phi tập lệnh đó là cần thiết cho đường dẫn hiển thị quan trọng. Hãy sử dụng async nếu tập lệnh cần chạy sớm hơn trong quá trình tải, chẳng hạn như đối với một số tập lệnh phân tích. Sử dụng defer cho các tài nguyên ít quan trọng hơn, chẳng hạn như video hiển thị ở vị trí thấp hơn trên trang so với hình ảnh ban đầu người dùng nhìn thấy.

Nếu hiệu suất là mối quan tâm chính của bạn, bạn nên đợi thêm các tập lệnh không đồng bộ cho đến khi nội dung quan trọng của trang tải xong. Bạn không nên sử dụng async cho các thư viện thiết yếu như jQuery.

Một số tập lệnh phải được tải mà không có async hoặc defer, đặc biệt là những tập lệnh là những phần quan trọng của trang web. Trong đó có thư viện giao diện người dùng hoặc khung mạng phân phối nội dung (CDN) mà trang web của bạn không thể hoạt động nếu không có.

Các tập lệnh khác không hoạt động nếu chúng được tải không đồng bộ. Kiểm tra tài liệu của mọi tập lệnh bạn đang sử dụng và thay thế mọi tập lệnh không thể tải không đồng bộ bằng các tập lệnh thay thế có thể. Xin lưu ý rằng một số bên thứ ba khuyên bạn nên chạy các tập lệnh của họ một cách đồng bộ, ngay cả khi các tập lệnh đó hoạt động cũng không đồng bộ.

Xin lưu ý rằng async không thể khắc phục mọi vấn đề. Nếu trang của bạn bao gồm một số lượng lớn tập lệnh, chẳng hạn như các tập lệnh theo dõi cho mục đích quảng cáo, thì việc tải các tập lệnh đó không đồng bộ sẽ không ngăn các tập lệnh đó làm chậm tốc độ tải trang.

Sử dụng tính năng Gợi ý về tài nguyên để giảm thời gian thiết lập kết nối

Việc thiết lập kết nối với nguồn gốc của bên thứ ba có thể mất nhiều thời gian, đặc biệt là trên các mạng chậm, vì yêu cầu mạng có nhiều thành phần phức tạp, trong đó có hoạt động tra cứu và chuyển hướng DNS. Bạn có thể sử dụng Gợi ý về tài nguyên như để tra cứu DNS cho các miền lưu trữ tập lệnh của bên thứ ba ngay trong quá trình tải trang, nhờ đó, sau này các yêu cầu mạng còn lại có thể xử lý nhanh hơn:

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

Nếu miền của bên thứ ba mà bạn đang kết nối sử dụng HTTPS, bạn cũng có thể sử dụng . Tính năng này vừa thực hiện hoạt động tra cứu DNS lại giải quyết khứ hồi TCP cũng như xử lý quy trình thương lượng TLS. Các bước khác này có thể rất chậm vì chúng liên quan đến việc xác minh chứng chỉ SSL, vì vậy, việc kết nối trước có thể làm giảm đáng kể thời gian tải.

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

Tập lệnh "Sandbox" có iframe

Nếu bạn tải trực tiếp tập lệnh của bên thứ ba vào iframe, thì tập lệnh đó sẽ không chặn việc thực thi trang chính. AMP sử dụng phương pháp này để ngăn JavaScript ra khỏi đường dẫn quan trọng. Xin lưu ý rằng phương pháp này vẫn chặn sự kiện onload, vì vậy, hãy cố gắng không đính kèm các tính năng quan trọng vào onload.

Chrome cũng hỗ trợ Chính sách về quyền (trước đây là Chính sách tính năng), một bộ chính sách cho phép nhà phát triển tắt quyền truy cập vào một số tính năng nhất định của trình duyệt một cách có chọn lọc. Bạn có thể sử dụng tính năng này để ngăn nội dung của bên thứ ba tạo ra các hành vi không mong muốn cho trang web.

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

Nếu muốn có thêm quyền kiểm soát đối với cách tải một tập lệnh quan trọng, chẳng hạn như để giảm thời gian sử dụng DNS hoặc cải thiện các tiêu đề bộ nhớ đệm HTTP, thì bạn có thể tự lưu trữ tập lệnh đó.

Tuy nhiên, việc tự lưu trữ cũng đi kèm với các vấn đề, đặc biệt là khi cập nhật tập lệnh. Các tập lệnh tự lưu trữ sẽ không nhận được bản cập nhật tự động cho các thay đổi về API hoặc bản sửa lỗi bảo mật. Điều này có thể dẫn đến tổn thất doanh thu hoặc các vấn đề về bảo mật cho đến khi bạn có thể cập nhật tập lệnh của mình theo cách thủ công.

Ngoài ra, bạn có thể lưu các tập lệnh của bên thứ ba vào bộ nhớ đệm bằng cách sử dụng trình chạy dịch vụ để kiểm soát chặt chẽ hơn tần suất tìm nạp tập lệnh từ mạng. Bạn cũng có thể sử dụng trình chạy dịch vụ để tạo các chiến lược tải giúp hạn chế các yêu cầu không thiết yếu của bên thứ ba cho đến khi trang của bạn tiếp cận một thời điểm quan trọng của người dùng.

Thử nghiệm A/B cho các mẫu người dùng nhỏ hơn

Thử nghiệm A/B (hay thử nghiệm phân tách) là một kỹ thuật thử nghiệm với hai phiên bản của một trang để phân tích trải nghiệm và hành vi người dùng. Google Analytics 4 cung cấp các phiên bản trang cho các mẫu lưu lượng truy cập trang web khác nhau và xác định dựa trên số liệu phân tích, phiên bản nào cung cấp tỷ lệ chuyển đổi tốt hơn.

Tuy nhiên, theo thiết kế, thử nghiệm A/B trì hoãn việc kết xuất để quyết định thử nghiệm nào cần hoạt động. JavaScript thường được dùng để kiểm tra xem có người dùng nào của bạn tham gia thử nghiệm A/B hay không, sau đó bật đúng biến thể. Quá trình này có thể khiến trải nghiệm kém hơn ngay cả đối với những người dùng không tham gia thử nghiệm.

Để tăng tốc độ hiển thị trang, bạn nên gửi tập lệnh thử nghiệm A/B đến một mẫu nhỏ hơn cơ sở người dùng và chạy mã sẽ quyết định phiên bản nào của trang sẽ hiển thị phía máy chủ.

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 (chẳng hạn như quảng cáo và video) có thể là nguyên nhân chính khiến tốc độ trang chậm khi trang web được thiết kế kém. Bạn có thể sử dụng phương thức tải từng phần để chỉ tải tài nguyên được nhúng khi cần thiết, chẳng hạn như chờ phân phát quảng cáo ở chân trang cho đến khi người dùng cuộn đủ lâu để nhìn thấy tài nguyên đó. Bạn cũng có thể 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, nhưng trước khi người dùng có thể tương tác với trang.

Hình minh hoạ cho thấy những thành phần quan trọng đối với trải nghiệm trong màn hình đầu tiên cũng như những thành phần ít quan trọng và có thể tải từng phần.
Bạn có thể tải từng phần những thành phần mà người dùng sẽ không nhìn thấy ngay khi tải trang.

Hãy cẩn thận khi tải từng phần tài nguyên, vì tài nguyên này thường liên quan đến mã JavaScript có thể bị ảnh hưởng bởi kết nối mạng không ổn định.

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ọ.

Tải từng phần hiệu quả bằng Intersection Observer

Trước đây, các phương thức phát hiện xem một phần tử có hiển thị trong khung nhìn vì mục đích tải từng phần thường gặp lỗi và thường làm chậm trình duyệt hay không. Các phương thức không hiệu quả này thường theo dõi các sự kiện scroll hoặc resize, sau đó sử dụng các API DOM như getBoundingClientRect() để tính toán vị trí các phần tử tương ứng với khung nhìn.

IntersectionObserver là một API trình duyệt cho phép chủ sở hữu trang phát hiện hiệu quả thời điểm một phần tử được ghi nhận đi vào hoặc rời khỏi khung nhìn của trình duyệt. LazySizes cũng có chế độ hỗ trợ không bắt buộc cho IntersectionObserver.

Phân tích tải từng phần

Nếu trì hoãn việc tải tập lệnh phân tích quá lâu, bạn có thể bỏ lỡ dữ liệu phân tích có giá trị. May mắn là hiện có một số chiến lược giúp bạn khởi động số liệu phân tích từng phần mà vẫn giữ lại được dữ liệu tải trang sớm.

Bài đăng Thiết lập Google Analytics mà tôi sử dụng trên mọi trang web tôi xây dựng của Phil Walton đề cập đến một chiến lược như vậy cho Google Analytics.

Tải tập lệnh của bên thứ ba một cách an toàn

Phần này cung cấp hướng dẫn cách tải tập lệnh của bên thứ ba sao cho an toàn nhất có thể.

Tránh document.write()

Các tập lệnh của bên thứ ba, đặc biệt là đối với các dịch vụ cũ, đôi khi sử dụng document.write() để chèn và tải tập lệnh. Đây là vấn đề vì document.write() hoạt động không nhất quán và lỗi này rất khó gỡ lỗi.

Cách khắc phục cho vấn đề document.write() là không sử dụng thuộc tính này. Trong Chrome 53 trở lên, Công cụ của Chrome cho nhà phát triển ghi lại các cảnh báo vào bảng điều khiển khi sử dụng document.write() có vấn đề:

Cảnh báo trên bảng điều khiển Công cụ cho nhà phát triển, trong đó nêu bật các lỗi vi phạm đối với hoạt động nhúng của bên thứ ba bằng document.write()
Công cụ của Chrome cho nhà phát triển gắn cờ mức sử dụng document.write().

Nếu gặp lỗi này, bạn có thể kiểm tra việc sử dụng document.write() trên trang web của mình bằng cách tìm tiêu đề HTTP được gửi đến trình duyệt. Lighthouse cũng có thể làm nổi bật mọi tập lệnh của bên thứ ba vẫn sử dụng document.write().

Việc gắn cờ kiểm tra các phương pháp hay nhất của Lighthouse sử dụng document.write()
Một báo cáo Lighthouse cho biết những tập lệnh sử dụng document.write().

Cẩn trọng khi sử dụng Trình quản lý thẻ

Thẻ là một đoạn mã cho phép nhóm tiếp thị kỹ thuật số thu thập dữ liệu, đặt cookie hoặc tích hợp nội dung của bên thứ ba như tiện ích mạng xã hội vào một trang web. Các thẻ này thêm các yêu cầu mạng, phần phụ thuộc JavaScript và các tài nguyên khác vào trang của bạn. Những thẻ này có thể ảnh hưởng đến hiệu suất của trang. Đồng thời, việc giảm thiểu tác động đó đối với người dùng sẽ trở nên khó khăn hơn khi bạn thêm nhiều thẻ hơn.

Để giữ cho trang tải nhanh, bạn nên sử dụng một trình quản lý thẻ như Trình quản lý thẻ của Google (GTM). GTM cho phép bạn triển khai thẻ không đồng bộ để các thẻ không chặn nhau tải, giảm số lượng lệnh gọi mạng mà trình duyệt cần để thực thi thẻ và thu thập dữ liệu thẻ trong giao diện người dùng Lớp dữ liệu.

Rủi ro khi sử dụng trình quản lý thẻ

Mặc dù trình quản lý thẻ được thiết kế để đơn giản hoá việc tải trang, nhưng việc sử dụng trình quản lý thẻ không cẩn thận có thể làm chậm tốc độ tải trang theo những cách sau:

  • Việc có quá nhiều thẻ và trình nghe sự kiện tự động trong trình quản lý thẻ khiến trình duyệt thực hiện nhiều yêu cầu mạng hơn mức cần thiết, từ đó làm giảm khả năng mã của bạn phản hồi nhanh các sự kiện.
  • Bất cứ ai có thông tin đăng nhập và quyền truy cập đều có thể thêm JavaScript vào trình quản lý thẻ của bạn. Điều này không chỉ có thể làm tăng số lượng yêu cầu mạng tốn kém cần thiết để tải trang của bạn, mà còn có thể gây ra rủi ro bảo mật và các vấn đề về hiệu suất khác từ các tập lệnh không cần thiết. Để giảm thiểu những rủi ro này, bạn nên hạn chế quyền truy cập vào trình quản lý thẻ của mình.

Tránh các tập lệnh gây ô nhiễm phạm vi toàn cục

Tập lệnh của bên thứ ba có thể hoạt động theo nhiều cách khiến trang của bạn bị hỏng một cách không mong muốn:

  • Những tập lệnh tải các phần phụ thuộc JavaScript có thể làm ô nhiễm phạm vi toàn cục có mã tương tác không hợp lý với mã của bạn.
  • Nội dung cập nhật ngoài dự kiến có thể gây ra những thay đổi có thể gây lỗi.
  • Mã của bên thứ ba có thể được sửa đổi trong quá trình truyền để hoạt động khác nhau giữa quá trình kiểm thử và triển khai trang.

Bạn nên thường xuyên kiểm tra các tập lệnh của bên thứ ba mà bạn tải để kiểm tra xem có đối tượng xấu hay không. Bạn cũng có thể triển khai quy trình tự kiểm thử, tính toàn vẹn của tài nguyên phụ và quá trình truyền mã bên thứ ba một cách an toàn để giữ an toàn cho trang của bạn.

Chiến lược giảm thiểu

Dưới đây là một số chiến lược quy mô lớn để giảm thiểu tác động của tập lệnh của bên thứ ba đối với hiệu suất và tính bảo mật của trang web:

  • HTTPS: Các trang web sử dụng HTTPS không được phụ thuộc vào bên thứ ba sử dụng HTTP. Để biết thêm thông tin, hãy tham khảo bài viết Nội dung kết hợp.

  • Hộp cát: Cân nhắc chạy các tập lệnh của bên thứ ba trong iframe với thuộc tính sandbox để hạn chế các hành động có sẵn đối với tập lệnh.

  • Chính sách bảo mật nội dung (CSP): Bạn có thể dùng tiêu đề HTTP trong phản hồi của máy chủ để xác định các hành vi đáng tin cậy của tập lệnh cho trang web, đồng thời phát hiện và giảm thiểu tác động của một số cuộc tấn công, chẳng hạn như Tập lệnh trên nhiều trang web (XSS).

Sau đây là ví dụ về cách sử dụng lệnh script-src của CSP để chỉ định các nguồn JavaScript được phép của trang:

// Given this CSP header Content-Security-Policy: script-src
https://example.com/ // The following third-party script will not be loaded or
executed

<script src="https://not-example.com/js/library.js"></script>

Tài liệu đọc thêm

Để tìm hiểu thêm về cách tối ưu hoá JavaScript của bên thứ ba, bạn nên đọc những nội dung sau:

Cảm ơn những bài đánh giá của Kenji Baheux, Jeremy Wagner, Pat Meenan, Philip Walton, Jeff Posnick và Cheney Tsai.