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 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 trở nên linh động, tương tác và liên kết hơn. Một số trong số đó thậm chí có thể đóng vai trò quan trọng đối với chức năng hoặc dòng doanh thu của trang web. Tuy nhiên, việc sử dụng các công cụ này là rủi ro:

  • Các tệp này có thể làm chậm hiệu suất của trang web.
  • Những ứng dụng này có thể gây ra vấn đề về quyền riêng tư hoặc bảo mật.
  • Các lỗi này có thể không thể dự đoán và hành vi của chúng có thể gây ra hậu quả ngoài 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 kết xuất 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 vấn đề 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 của bên thứ ba thường đề cập đến 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ừ một nhà cung cấp bên thứ ba. Ví dụ:

  • Nút chia sẻ lên mạng xã hội (Facebook, X, LinkedIn, Mastodon)

  • Trình phát video được nhúng (YouTube, Vimeo)

  • Iframe quảng cáo

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

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

  • 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ề video được nhúng trên YouTube
Ví dụ về cách nhúng video YouTube vào một trang bằng mã sau.
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/mo8thg5XGV0"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen
>
</iframe>

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

  • Gửi 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ị bận. Quá nhiều JavaScript có thể chặn việc tạo DOM, 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 tốn nhiều CPU có thể làm chậm hoạt động tương tác của người dùng và gây hao pin.

  • Việc gửi video hoặc tệp hình ảnh chưa được tối ưu hoá có kích thước lớn có thể làm tiêu hao dữ liệu và khiến người dùng tốn tiền.

  • Các vấn đề bảo mật có thể đóng vai trò là điểm lỗi duy nhất (SPOF) nếu trang của bạn tải một 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 thêm yêu cầu mạng để tìm nạp tài nguyên.

  • Việc thiếu nén máy chủ đầy đủ sẽ khiến tài nguyên tải chậm.

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

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

  • Quá nhiều phần tử DOM hoặc bộ chọn CSS tốn kém.

  • Việc đưa nhiều phần nhúng của bên thứ ba vào có thể dẫn đến việc nhiều khung và thư viện được lấy 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 có.

  • 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ủ của họ phản hồi chậm, ngay cả khi tính năng 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 thay, có một số giải pháp và công cụ để tìm và khắc phục vấn đề với 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 đó đối với 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 Chrome DevTools, 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 bên thứ ba mà trang web của bạn sử dụng và tập lệnh nào mất nhiều thời gian nhất để thực thi.

Chế độ xem dạng 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 tập lệnh bên thứ ba quá mức. Hình ảnh sau đây từ Tags Gone Wild cho thấy sơ đồ mẫu về các yêu cầu mạng cần thiết để tải nội dung chính của một trang web, trái ngược với các tập lệnh theo dõi và tiếp thị.

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

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

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

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

Khi bạn thấy một tập lệnh gây ra vấn đề, hãy tìm hiểu xem tập lệnh đó có chức năng 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 nhận thấy so với tác động của giá trị đó đối với các chỉ số chính về mức độ tương tác của người dùng hoặc hiệu suất.

Bài kiểm tra thời gian khởi động của Lighthouse

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

Lighthouse cho thấy khả năng hỗ trợ việc đá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 nhất để tải.

Quy trình kiểm tra trọng tải mạng của Lighthouse

Tính năng 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 tiêu tốn nhiều dữ liệu di động hơn dự kiến.

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

Tính năng chặn yêu cầu mạng trong 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, trang kiểu hoặc tài nguyên khác được chỉ định. Việc này được thực hiện bằng tính năng chặn yêu cầu mạng. Đây là 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 của 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 Mạng rồi chọn Block Request URL (Chặn URL yêu cầu). Sau đó, một thẻ chặn yêu cầu sẽ hiển thị trong ngăn DevTools, cho phép bạn quản lý những yêu cầu đã bị chặn.

Chặn URL yêu cầu từ bảng điều khiển mạng DevTools
Chặn từng yêu cầu mạng để 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 trong 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.
  2. Tải trang. DevTools hiển thị một sơ đồ dạng thác nước thể hiện thời gian tải trang web của bạn.
  3. Chuyển đến mục 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 của trang theo thời gian tải.
Bảng điều khiển Hiệu suất của DevTools hiển thị chế độ xem Từ dưới lên được nhóm theo sản phẩm (của 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 bằng 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 để 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 thời gian chạy.

Sau đây là quy trình công việc mà chúng tôi đề xuất để đo lường tác động của các tập lệnh 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 hạn chế băng thông mạnghạn chế CPU. Người dùng của bạn khó có thể có kết nối mạng nhanh và phần cứng máy tính 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ề các 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ủa Công cụ của Chrome cho nhà phát triển để biết 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 ba lần. Điều này là do một số tập lệnh của bên thứ ba tìm nạp nhiều tài nguyên trong mỗi lần tải trang. Để giúp bạn làm việc này, Bảng điều khiển hiệu suất của DevTools 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ợ chặn các yêu cầu riêng lẻ tải để đo lường 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.

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

Bạn nên sử dụng quy trình làm việc sau để sử dụng tính năng này:

  1. Kiểm thử 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 phần Nhật ký kiểm thử.
  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ả kiểm thử tải để so sánh.

Hình ảnh sau đây cho thấy tính năng băng chuyền của WebPageTest so sánh trình tự tải cho các trang có và không có tài nguyên của bên thứ ba đang hoạt động. Bạn nên kiểm tra chế độ này để thử nghiệm 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.

Băng hình WebPageTest cho thấy tác động của việc tải một trang web có và không có bên thứ ba bị tắt
Tác động của việc chặn tài nguyên của bên thứ ba, trong bài viết Using WebPageTest To Measure The Impact Of Third-Party Tags (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 lấy danh sách các miền cần chặn.
  • blockDomainsExcept lấy danh sách miền và chặn mọi miền không có trong danh sách.

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

Cài đặt nâng cao của WebPageTest > 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 được chỉ định.

Phát hiện các iframe tốn kém bằ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. Những 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 làm giảm số khung hình, khiến trải nghiệm người dùng trở nên tệ hơn.

Để phát hiện các tác vụ dài cho tính năng 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 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.

Mã sau đây ghi nhật ký các mục longtask vào bảng điều khiển, bao gồm cả một mục cho một 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 phần 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 một tập lệnh bên thứ ba đang làm chậm tốc độ tải trang, bạn có một số tuỳ chọn để 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 chặn việc phân tích cú pháp tài liệu.
  • Nếu máy chủ bên thứ ba bị chậm, hãy cân nhắc tự lưu trữ tập lệnh.
  • Nếu tập lệnh không mang lại giá trị rõ ràng cho trang web của bạn, hãy xoá tập lệnh đó.
  • Sử dụng Gợi ý tài nguyên như <link rel=preconnect> hoặc <link rel=dns-prefetch> để thực hiện 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

Quá trình thực thi JavaScript bị trình phân tích cú pháp chặn. 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 tạo 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, quá trình 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 kết xuất quan trọng. Sử dụng async nếu bạn muốn tập lệnh 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ị thấp hơn trên trang so với nội dung mà người dùng sẽ thấy ban đầu.

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 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ần async hoặc defer, đặc biệt là những tập lệnh là phần quan trọng của trang web. Các thư viện này bao gồm 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 sẽ không hoạt động nếu được tải không đồng bộ. Kiểm tra tài liệu về 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ể tải. Xin lưu ý rằng một số bên thứ ba đề xuất chạy tập lệnh đồng bộ, ngay cả khi các tập lệnh đó hoạt động không đồng bộ cũng tốt như vậy.

Hãy nhớ rằng async không khắc phục được mọi vấn đề. Nếu trang của bạn có nhiều tập lệnh, chẳng hạn như 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 quá trình tải trang.

Sử dụng Gợi ý 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ì các yêu cầu mạng có nhiều thành phần phức tạp, bao gồm cả lệnh chuyển hướng và tra cứu DNS. Bạn có thể sử dụng Gợi ý tài nguyên như để thực hiện tra cứu DNS cho các miền lưu trữ tập lệnh của bên thứ ba ở giai đoạn đầu của quá trình tải trang, nhờ đó, phần còn lại của yêu cầu mạng có thể tiến hành nhanh hơn sau này:

<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 . Miền này vừa thực hiện tra cứu DNS phân giải các vòng lặp TCP cũng như xử lý các cuộc đàm phán TLS. Các bước khác này có thể diễn ra rất chậm vì 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 "Hộp cát" có iframe

Nếu bạn tải trực tiếp tập lệnh của bên thứ ba vào một 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 để loại bỏ JavaScript 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 quyền (trước đây là Chính sách tính năng). Đây là 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 theo lựa chọn. Bạn có thể sử dụng tính năng này để ngăn nội dung của bên thứ ba đưa ra hành vi không mong muốn cho trang web.

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

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

Tuy nhiên, việc tự lưu trữ cũng có những vấn đề riêng, đặ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 việc mấ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 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 tốt hơn tần suất các tập lệnh được tìm nạp 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 điều tiết các yêu cầu không cần thiết của bên thứ ba cho đến khi trang của bạn đạt đến một thời điểm quan trọng của người dùng.

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

Thử nghiệm A/B (hoặc thử nghiệm phân tách) là một kỹ thuật thử nghiệm hai phiên bản của một trang để phân tích trải nghiệm và hành vi của người dùng. Tính năng này cung cấp các phiên bản trang cho nhiều mẫu lưu lượng truy cập trang web và xác định từ số liệu phân tích phiên bản nào mang lại tỷ lệ chuyển đổi tốt hơn.

Tuy nhiên, theo thiết kế, thử nghiệm A/B sẽ trì hoãn quá trình 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 thuộc thử nghiệm kiểm thử A/B hay không, sau đó bật biến thể chính xác. Quá trình này có thể làm trải nghiệm trở nên tệ 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 trong cơ sở người dùng và chạy mã quyết định phiên bản trang nào 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

Các 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à yếu tố chính làm chậm tốc độ trang khi được xây dựng không tốt. Bạn chỉ có thể sử dụng tính năng tải từng phần để tải các 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 đủ xa để xem quảng cáo. Bạn cũng có thể tải lười nội dung của bên thứ ba sau khi nội dung trang chính tải xong 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 các thành phần quan trọng đối với trải nghiệm trên đầu trang và các thành phần ít quan trọng hơn và có thể được tải từng phần.
Bạn có thể tải từng phần các thành phần mà người dùng sẽ không thấy ngay khi trang tải.

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

DoubleClick có hướng dẫn về cách tải quảng cáo theo kiểu tải lười trong tài liệu chính thức.

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 cho mục đích tải lười hay không thường dễ gặp lỗi và làm chậm trình duyệt. Những phương thức không hiệu quả này thường theo dõi các sự kiện cuộn hoặc đổi kích thước, sau đó sử dụng các API DOM như getBoundingClientRect() để tính toán vị trí các phần tử so 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 quan sát đi vào hoặc rời khỏi khung nhìn của trình duyệt. LazySizes cũng có tính năng hỗ trợ không bắt buộc cho IntersectionObserver.

Số liệu phân tích về tính năng tải từng phần

Nếu trì hoãn quá lâu việc tải tập lệnh phân tích, bạn có thể bỏ lỡ dữ liệu phân tích có giá trị. May mắn thay, có các chiến lược để khởi chạy phân tích một cách lười biếng trong khi vẫn giữ lại dữ liệu tải trang ban đầu.

Bài đăng trên blog của Phil Walton có tên Cách thiết lập Google Analytics mà tôi sử dụng trên mọi trang web mà tôi xây dựng đề cập đến một trong những 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 để tải tập lệnh của bên thứ ba một cách 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à khó gỡ lỗi.

Cách khắc phục các vấn đề về document.write() là không sử dụng hàm này. Trong Chrome 53 trở lên, Chrome DevTools sẽ ghi lại cảnh báo vào bảng điều khiển khi sử dụng document.write() gặp vấn đề:

Cảnh báo trên bảng điều khiển DevTools nêu bật các lỗi vi phạm đối với nội dung nhúng của bên thứ ba bằng cách sử dụng document.write()
Công cụ của Chrome cho nhà phát triển gắn cờ việ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().

Quy trình kiểm tra theo các phương pháp hay nhất của Lighthouse gắn cờ việc sử dụng document.write()
Báo cáo Lighthouse cho biết những tập lệnh nào sử dụng document.write().

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

Thẻ là một đoạn mã cho phép các 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 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 yếu tố này có thể ảnh hưởng đến hiệu suất của trang và 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.

Để đảm bảo trang tải nhanh, bạn nên sử dụng trình quản lý thẻ, chẳng hạn như Trình quản lý thẻ của Google (GTM). GTM cho phép bạn triển khai các thẻ không đồng bộ để các thẻ không chặn lẫ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á quá trình tải trang, nhưng việc sử dụng trình quản lý thẻ một cách không cẩn thận có thể làm chậm quá trình tải 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 gửi nhiều yêu cầu mạng hơn mức cần thiết và làm giảm khả năng của mã phản hồi nhanh các sự kiện.
  • Bất kỳ ai có thông tin xác thực 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ỉ làm tăng số lượng yêu cầu mạng tốn kém cần thiết để tải trang mà còn có thể gây ra rủi ro bảo mật và các vấn đề 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ẻ.

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

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ị lỗi một cách không mong muốn:

  • Các tập lệnh tải phần phụ thuộc JavaScript có thể làm ô nhiễm phạm vi toàn cục bằng mã tương tác không tốt với mã của bạn.
  • Các bản cập nhật không mong muốn có thể gây ra các thay đổi có thể gây lỗi.
  • Bạn có thể sửa đổi mã của bên thứ ba trong quá trình truyền để mã hoạt động theo cách 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 để phát hiện đối tượng xấu. Bạn cũng có thể triển khai tính năng tự kiểm thử, tính toàn vẹn của tài nguyên phụ và truyền mã bên thứ ba một cách an toàn để đảm bảo an toàn cho trang của mình.

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

Sau đây là một số chiến lược trên quy mô lớn để giảm thiểu tác động của tập lệnh 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 các bên thứ ba sử dụng HTTP. Để biết thêm thông tin, hãy tham khảo bài viết về Nội dung hỗn hợp.

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

  • Chính sách bảo mật nội dung (CSP): Bạn có thể sử dụng tiêu đề HTTP trong phản hồi của máy chủ để xác định hành vi tập lệnh đáng tin cậy cho trang web của mình, đồ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ấn công 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 nội dung sau:

Xin cảm ơn Kenji Baheux, Jeremy Wagner, Pat Meenan, Philip Walton, Jeff Posnick và Cheney Tsai đã xem xét bài viết này.