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 web trở nên linh động, tương tác và kết nối hơn. Một số trong số đó thậm chí có thể rất quan trọng đối với chức năng hoặc nguồn doanh thu của trang web. Nhưng việc sử dụng chúng rất rủi ro:
- Các tệp này có thể làm giảm hiệu suất của trang web.
- Các tiện ích này có thể gây ra vấn đề về quyền riêng tư hoặc bảo mật.
- Các mô hình này có thể khó đoán và hành vi của chúng có thể gây ra hậu quả ngoài ý 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 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ừ nhà cung cấp bên thứ ba. Ví dụ:
Nút chia sẻ qua 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 phân tích và chỉ số
Tập lệnh thử nghiệm A/B cho các 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
<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à nguyên nhân phổ biến khiến hiệu suất bị chậm 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ả những 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ì thời gian tải càng lâu.
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, làm chậm quá trình kết xuất 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 tệp hình ảnh hoặc video lớn, chưa được tối ưu hoá có thể tiêu tốn dữ liệu và khiến người dùng mất phí.
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.
Lưu vào bộ nhớ đệm HTTP không đủ, 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 tính năng nén máy chủ khiến tài nguyên tải chậm.
Chặn hiển thị nội dung cho đến khi xử lý xong. Đ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ộ.
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 thêm nhiều nội dung nhúng của bên thứ ba có thể khiến nhiều khung và thư viện được lấy nhiều lần, gây lãng phí tài nguyên và khiến các vấn đề về hiệu suất hiện tại trở nên tồi tệ hơn.
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 nội dung nhúng đang sử dụng async hoặc defer.
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à 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 tập lệnh của bên thứ ba trên trang web và xác định hiệu suất của tập lệnh đó tác động là bước đầu tiên để tối ưu hoá chúng. 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 Insights và WebPageTest, để 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à tập lệnh nào mất nhiều thời gian nhất để thực thi.
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 tập lệnh nặng của bên thứ ba. Hình ảnh sau đây trong bài viết Tags Gone Wild (Thẻ không được kiểm soát) cho thấy một sơ đồ ví dụ 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, trái ngược với tập lệnh theo dõi và tiếp thị.
Bảng phân tích miền của WebPageTest cũng có thể hữu ích trong việc hình dung lượng nội dung đến từ các nguồn gốc của bên thứ ba. Báo cáo này phân tích chi tiết theo cả tổng số byte và số lượng yêu cầu:
Làm cách nào để đo lường tác động của tập lệnh bên thứ ba trên 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 đó 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 so với tác động của giá trị đó đối với mức độ tương tác chính của người dùng hoặc các chỉ số hiệu suất.
Kiểm tra thời gian khởi động bằng Lighthouse
Quá trình kiểm tra thời gian khởi động JavaScript của Lighthouse nêu 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.
Kiểm tra tải trọng mạng bằng 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 phải chi tiêu nhiều hơn dự kiến cho dữ liệu di động.
Chặn yêu cầu mạng trong Chrome DevTools
Chrome DevTools giúp bạn xem cách trang hoạt động khi một tập lệnh, biểu định kiểu hoặc tài nguyên khác không có sẵn. Bạn có thể thực hiện việc này bằng tính năng chặn yêu cầu mạng. Tính năng này 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 bất kỳ yêu cầu nào trong bảng điều khiển 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ẽ xuất hiện trong ngăn Công cụ cho nhà phát triển, cho phép bạn quản lý những yêu cầu đã bị chặn.
Bảng điều khiển Hiệu suất của Chrome DevTools
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.
- Nhấp vào Ghi.
- Tải trang của bạn. Công cụ cho nhà phát triển hiển thị 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.
- Chuyển đến phần Bottom-up (Từ dưới lên) ở cuối bảng điều khiển Hiệu suất.
- Nhấp vào Nhóm theo sản phẩm và sắp xếp các tập lệnh của bên thứ ba trên trang theo thời gian tải.
Để tìm hiểu thêm về cách sử dụng Chrome DevTools để 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 làm việc mà chúng tôi đề xuất để đo lường tác động của tập lệnh bên thứ ba:
- 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ạng và hạn chế CPU. Người dùng của bạn không 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.
- 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 Chrome DevTools Performance Panel để biết hướng dẫn về cách xác định tập lệnh tốn kém).
- 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 giải thích cho việc 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 trong mỗi lần tải trang. Để hỗ trợ việc này, bảng điều khiển Hiệu suất của Công cụ cho nhà phát triển hỗ trợ nhiều bản ghi.
Đo lường tác động của tập lệnh bên thứ ba bằng WebPageTest
WebPageTest hỗ trợ chặn tải từng yêu cầu để đo lường tác động của các yêu cầu đó trong phần Advanced Settings (Cài đặt nâng cao) > Block (Chặn). Hãy sử dụng tính năng này để chỉ định danh sách miền cần chặn, chẳng hạn như miền quảng cáo.
Bạn nên sử dụng quy trình sau để dùng tính năng này:
- Kiểm tra một trang mà không chặn bên thứ ba.
- Lặp lại quy trình kiểm thử khi chặn một số bên thứ ba.
- Chọn hai kết quả trong Nhật ký kiểm tra.
- Nhấp vào So sánh.
Hình ảnh sau đây cho thấy tính năng dải phim của WebPageTest so sánh trình tự tải cho các trang có và không có tài nguyên đang hoạt động của bên thứ ba. Bạn nên kiểm tra điều này để thử nghiệm các nguồn gốc riêng lẻ 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.
WebPageTest cũng hỗ trợ hai lệnh hoạt động ở cấp DNS để chặn miền:
blockDomainslấ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ó một thẻ hư hỏng tại một điểm (SPOF) cho phép bạn mô phỏng thời gian chờ hoặc không tải được tài nguyên. Không giống như tính năng chặn miền, SPOF sẽ hết thời gian chờ một cách chậm rãi. Điều này có thể giúp bạn kiểm tra cách các trang của bạn hoạt động khi 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.
Phát hiện iframe tốn kém bằng cách sử dụng tác vụ cần nhiều thời gian
Khi các tập lệnh trong iframe của bên thứ ba mất nhiều thời gian để chạy, chúng có thể chặn luồng chính và trì hoãn các tác vụ khác. Những tác vụ cần nhiều thời gian này có thể khiến trình xử lý sự kiện hoạt động chậm hoặc làm rớt khung hình, khiến trải nghiệm người dùng trở nên tồi tệ hơn.
Để phát hiện các tác vụ cần nhiều thời gian 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 bối cảnh khung hình nào đã gây ra tác vụ cần nhiều thời gian.
Đoạn mã sau đây ghi lại longtask mục nhập vào bảng điều khiển, bao gồm cả một mục nhập cho một iframe "tốn kém":
<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 giám sát tác vụ cần nhiều thời gian, hãy xem bài viết Chỉ số hiệu suất lấy người dùng làm trung tâm.
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 đang làm chậm quá trình tải trang, bạn có một số lựa chọn để cải thiện hiệu suất:
- Tải tập lệnh bằng thuộc tính
asynchoặcdeferđể tránh chặn quá trình phân tích cú pháp tài liệu. - Nếu máy chủ bên thứ ba chậm, hãy cân nhắc việ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 đang chặn trình phân tích cú pháp. Khi trình duyệt gặp một tập lệnh, trình duyệt phải tạm dừng việc 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 async và defer thay đổi hành vi này như sau:
asynckhiế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.deferkhiế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 đó đợi chạy tập lệnh cho đến khi quá trình 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 đó cần thiết cho đường dẫn hiển thị quan trọng. 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 vị trí 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, thì 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ó async hoặc defer, đặc biệt là những tập lệnh
đóng vai trò quan trọng trên trang web của bạn. Các tài nguyê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 thiếu.
Các tập lệnh khác sẽ không hoạt động nếu được tải không đồng bộ. Hãy 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 không đồng bộ. Xin lưu ý rằng một số bên thứ ba khuyên bạn nên chạy tập lệnh của họ một cách đồng bộ, ngay cả khi tập lệnh đó hoạt động tốt như nhau một cách không đồng bộ.
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 các 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ả việc tra cứu DNS và chuyển hướng. 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 ngay từ đầu trong 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 về sau:
<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, thì bạn cũng có thể sử dụng . Thao tác này vừa thực hiện tra cứu DNS vừa phân giải các lượt khứ hồi TCP và xử lý các hoạt động thương lượng TLS. Các bước khác này có thể 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ể giảm đáng kể thời gian tải.
<link rel="preconnect" href="https://cdn.example.com" />
"Hộp cát" tập lệnh bằng 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
quá trình thực thi của 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 về quyền (trước đây là Chính sách về 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 của trình duyệt một cách có chọn lọc. Bạn có thể sử dụng thuộc tính này để ngăn nội dung của bên thứ ba đưa các hành vi không mong muốn vào 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 tải một tập lệnh quan trọng, 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 tự động cập nhật khi 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 vấn đề 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 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 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 chiến lược tải nhằm đ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 thời điểm quan trọng đối với người dùng.
Thử nghiệm A/B trên các 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 nhằm phân tích trải nghiệm và hành vi của người dùng. Công cụ này cung cấp các phiên bản trang cho nhiều mẫu lưu lượng truy cập khác nhau trên trang web của bạn, đồng thời xác định phiên bản nào mang lại tỷ lệ chuyển đổi cao hơn dựa trên số liệu phân tích.
Tuy nhiên, theo thiết kế, thử nghiệm A/B sẽ trì hoãn việc kết xuất để quyết định thử nghiệm nào cần được kích hoạt. JavaScript thường được dùng để kiểm tra xem có người dùng nào tham gia thử nghiệm A/B hay không, sau đó bật biến thể chính xác. Quá trình này có thể làm giảm trải nghiệm 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 chậm các tài nguyên của bên thứ ba
Tài nguyên của bên thứ ba được nhúng (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 được xây dựng kém. Bạn có thể sử dụng tính năng tải từng phần để chỉ tải tài nguyên được nhúng khi cần thiết, ví dụ: đợi 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 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ãy cẩn thận khi tải chậm 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 kết nối mạng không ổn định.
DoubleClick có hướng dẫn về cách tải chậm quảng cáo trong tài liệu chính thức của họ.
Tải chậm 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 chậm hay không thường dễ xảy ra lỗi và thường làm chậm trình duyệt. 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ủa các phần tử so với khung nhìn.
IntersectionObserver là một API trình duyệt cho phép chủ nhân của trang phát hiện một cách 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ó hỗ trợ không bắt buộc cho IntersectionObserver.
Số liệu phân tích về việc tải chậm
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 thay, có những chiến lược để khởi chạy số liệu 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 sớm.
Bài đăng trên blog của Phil Walton The Google Analytics Setup I Use on Every Site I Build (Cách 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ậ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 hướng dẫn cách 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à một vấn đề vì document.write() hoạt động không nhất quán và khó gỡ lỗi khi gặp lỗi.
Cách khắc phục các vấn đề về document.write() là không sử dụng phương thức này. Trong Chrome 53 trở lên,
Chrome DevTools sẽ ghi nhật ký cảnh báo vào bảng điều khiển về việc sử dụng document.write() có vấn đề:
document.write().Nếu nhận được 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 của bạn.
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 đang sử dụng document.write().
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 (chẳng hạn như tiện ích truyền thông xã hội) vào một trang web. Các thẻ này thêm 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, điều 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 đó cho người dùng sẽ trở nên khó khăn hơn khi có nhiều thẻ được thêm vào.
Để 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ẻ một cách bất cẩn có thể làm chậm quá trình tải trang theo những cách sau:
- Số lượng thẻ và trình nghe sự kiện tự động quá nhiều trong trình quản lý thẻ khiến trình duyệt phải thực hiện nhiều yêu cầu mạng hơn mức cần thiết và làm giảm khả năng phản hồi nhanh các sự kiện của mã.
- Bất kỳ 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ỉ 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 đề 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 giới hạn quyền truy cập vào trình quản lý thẻ.
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ị lỗi ngoài dự kiến:
- 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 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 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 thử nghiệm và triển khai trang của bạn.
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 tính năng tự kiểm tra, tính toàn vẹn của tài nguyên phụ, và truyền mã của 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 nhẹ
Sau đâ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 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 hỗn hợp.
Hộp cát: Cân nhắc chạy tập lệnh của bên thứ ba trong iframe có thuộc tính
sandboxđể hạn chế các thao tác mà tập lệnh có thể thực hiện.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 các 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 ảnh hưở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:
- Hiệu suất và khả năng thích ứng: Kiểm thử áp lực cho bên thứ ba
- Thêm tính tương tác bằng JavaScript
- Mối nguy hiểm tiềm ẩn khi dùng tập lệnh của bên thứ ba
- Cách tập lệnh của bên thứ ba có thể hoạt động hiệu quả trên web
- Why Fast Matters – CSS Wizardry
- The JavaScript Supply Chain Paradox: SRI, CSP and Trust in Third Party Libraries (Nghịch lý về chuỗi cung ứng JavaScript: SRI, CSP và niềm tin vào thư viện của bên thứ ba)
- CSS của bên thứ ba không an toàn
Cảm ơn Kenji Baheux, Jeremy Wagner, Pat Meenan, Philip Walton, Jeff Posnick và Cheney Tsai đã đánh giá.