Các phương pháp hay nhất dành cho thẻ và trình quản lý thẻ

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Ngày xuất bản: 29 tháng 7 năm 2021

Thẻ là các đoạn mã của bên thứ ba được chèn vào một trang web, thường là bằng trình quản lý thẻ. Thẻ thường dùng nhiều nhất cho hoạt động tiếp thị và phân tích.

Mức độ ảnh hưởng của thẻ và trình quản lý thẻ đối với hiệu suất có sự khác biệt rất lớn giữa các trang web. Trình quản lý thẻ có thể được so sánh với một phong bì: trình quản lý thẻ cung cấp một vật chứa, nhưng bạn sẽ lấp đầy nó bằng gì và sử dụng nó như thế nào thì hầu hết là do bạn quyết định.

Trong bài viết này, chúng ta sẽ thảo luận về các kỹ thuật tối ưu hoá thẻ và Trình quản lý thẻ để cải thiện hiệu suất và Core Web Vitals. Mặc dù tài liệu này đề cập đến Trình quản lý thẻ của Google, nhưng nhiều ý tưởng được thảo luận cũng có thể áp dụng cho các trình quản lý thẻ khác.

Tác động đến Core Web Vitals

Trình quản lý thẻ thường có thể ảnh hưởng gián tiếp đến Core Web Vitals bằng cách sử dụng hết tài nguyên cần thiết để tải trang nhanh chóng và duy trì khả năng thích ứng của trang. Băng thông có thể được dùng để tải JavaScript của trình quản lý thẻ xuống cho trang web của bạn hoặc các lệnh gọi tiếp theo mà trình quản lý thẻ này thực hiện. Thời gian của CPU trên luồng chính có thể được dùng để đánh giá và thực thi JavaScript có trong trình quản lý thẻ và các thẻ.

Nội dung lớn nhất hiển thị (LCP) dễ bị ảnh hưởng bởi tình trạng tranh chấp băng thông trong thời gian tải trang quan trọng. Ngoài ra, việc chặn luồng chính có thể làm chậm thời gian kết xuất LCP.

Mức thay đổi bố cục tích luỹ (CLS) có thể bị ảnh hưởng do việc trì hoãn tải các tài nguyên quan trọng trước lần hiển thị đầu tiên hoặc do trình quản lý thẻ chèn nội dung vào trang.

Lượt tương tác đến nội dung hiển thị tiếp theo (INP) dễ bị tranh chấp CPU trên luồng chính và chúng tôi nhận thấy có mối tương quan giữa kích thước của trình quản lý thẻ và điểm INP kém hơn.

Chọn loại thẻ phù hợp

Mức độ ảnh hưởng của thẻ đối với hiệu suất sẽ khác nhau tuỳ theo loại thẻ. Nói chung, thẻ hình ảnh ("pixel") có hiệu suất cao nhất, tiếp theo là mẫu tuỳ chỉnh và cuối cùng là thẻ HTML tuỳ chỉnh. Thẻ của nhà cung cấp sẽ khác nhau tuỳ thuộc vào chức năng mà thẻ đó cho phép.

Xin lưu ý rằng cách bạn sử dụng thẻ sẽ ảnh hưởng rất lớn đến hiệu suất của thẻ. "Pixel" có hiệu suất cao chủ yếu là do bản chất của loại thẻ này áp đặt các quy định hạn chế nghiêm ngặt về cách sử dụng; thẻ HTML tuỳ chỉnh không nhất thiết luôn gây ảnh hưởng xấu đến hiệu suất, nhưng do mức độ tự do mà thẻ này mang lại cho người dùng, nên người dùng có thể dễ dàng sử dụng sai cách, gây ảnh hưởng xấu đến hiệu suất.

Khi nghĩ về thẻ, hãy lưu ý đến quy mô: tác động của một thẻ riêng lẻ đến hiệu suất có thể không đáng kể, nhưng có thể trở nên đáng kể khi bạn sử dụng hàng chục hoặc hàng trăm thẻ trên cùng một trang.

Không phải tập lệnh nào cũng nên được tải bằng trình quản lý thẻ

Trình quản lý thẻ thường không phải là cách tốt nhất để tải các tài nguyên triển khai các khía cạnh hình ảnh hoặc chức năng tức thì của trải nghiệm người dùng, chẳng hạn như thông báo về cookie, hình ảnh chính hoặc các tính năng của trang web. Việc sử dụng trình quản lý thẻ để tải các tài nguyên này thường làm chậm quá trình phân phối. Điều này không tốt cho trải nghiệm người dùng và cũng có thể làm tăng các chỉ số, chẳng hạn như LCP và CLS.

Ngoài ra, một số người dùng chặn trình quản lý thẻ. Việc sử dụng trình quản lý thẻ để triển khai các tính năng trải nghiệm người dùng có thể khiến trang web bị hỏng đối với một số người dùng.

Hãy cẩn thận với thẻ HTML tuỳ chỉnh

Thẻ HTML tuỳ chỉnh đã xuất hiện từ nhiều năm trước và được sử dụng rộng rãi trên hầu hết các trang web. Thẻ HTML tuỳ chỉnh cho phép bạn nhập mã của riêng mình với một số hạn chế vì mặc dù có tên như vậy, nhưng mục đích sử dụng chính của thẻ này là thêm các phần tử <script> tuỳ chỉnh vào một trang.

Thẻ HTML tuỳ chỉnh có thể được sử dụng theo nhiều cách và tác động của thẻ đối với hiệu suất khác nhau đáng kể. Khi đo lường hiệu suất của trang web, hãy lưu ý rằng hầu hết các công cụ đều cho rằng tác động về hiệu suất của thẻ HTML tuỳ chỉnh là do trình quản lý thẻ đã chèn thẻ đó, chứ không phải do chính thẻ đó.

Tạo thẻ tuỳ chỉnh trong Trình quản lý thẻ của Google

Thẻ HTML tuỳ chỉnh có thể chèn một phần tử vào trang xung quanh. Hành động chèn các phần tử vào trang có thể là nguyên nhân gây ra các vấn đề về hiệu suất và trong một số trường hợp, cũng gây ra sự thay đổi bố cục.

  • Trong hầu hết các trường hợp, nếu một phần tử được chèn vào trang, thì trình duyệt phải tính toán lại kích thước và vị trí của từng mục trên trang. Quá trình này được gọi là bố cục. Tác động của một bố cục duy nhất đến hiệu suất là không đáng kể, nhưng khi xảy ra quá nhiều, bố cục đó có thể trở thành nguồn gây ra các vấn đề về hiệu suất. Tác động của hiện tượng này lớn hơn trên các thiết bị cấp thấp và các trang có số lượng phần tử DOM cao.
  • Nếu một phần tử trang hiển thị được chèn vào DOM sau khi khu vực xung quanh đã được kết xuất, thì phần tử đó có thể gây ra sự thay đổi bố cục. Hiện tượng này không chỉ xảy ra với trình quản lý thẻ. Tuy nhiên, vì thẻ thường tải muộn hơn các phần khác của trang, nên thẻ thường được chèn vào DOM sau khi trang xung quanh đã được hiển thị.

Sử dụng mẫu tuỳ chỉnh

Mẫu tuỳ chỉnh hỗ trợ một số thao tác giống như thẻ HTML tuỳ chỉnh, nhưng được xây dựng dựa trên phiên bản JavaScript hộp cát cung cấp API cho các trường hợp sử dụng phổ biến như chèn tập lệnh và chèn pixel. Đúng như tên gọi, các thành phần này cho phép người dùng thành thạo tạo một mẫu có tính đến hiệu suất. Sau đó, những người dùng ít am hiểu về kỹ thuật có thể sử dụng mẫu này. Cách này thường an toàn hơn so với việc cấp toàn quyền truy cập vào HTML tuỳ chỉnh.

Do các quy định hạn chế nghiêm ngặt hơn đối với mẫu tuỳ chỉnh, nên các thẻ này ít có khả năng gặp phải vấn đề về hiệu suất hoặc bảo mật hơn. Cũng vì những lý do này, mẫu tuỳ chỉnh không phù hợp với mọi trường hợp sử dụng.

Mẫu tuỳ chỉnh trong Trình quản lý thẻ của Google

Chèn tập lệnh đúng cách

Việc sử dụng trình quản lý thẻ để chèn tập lệnh là một trường hợp sử dụng rất phổ biến. Bạn nên sử dụng một Mẫu tuỳ chỉnh và API injectScript để thực hiện việc này.

Để biết thông tin về cách sử dụng API injectScript để chuyển đổi thẻ HTML tuỳ chỉnh hiện có, hãy xem bài viết Chuyển đổi thẻ hiện có.

Nếu bạn phải sử dụng thẻ HTML tuỳ chỉnh, hãy nhớ:

  • Bạn nên tải các thư viện và tập lệnh lớn của bên thứ ba bằng thẻ tập lệnh (ví dụ: <script src="external-scripts.js">) để tải tệp bên ngoài xuống, thay vì sao chép và dán trực tiếp nội dung của tập lệnh vào thẻ. Mặc dù việc không sử dụng thẻ <script> giúp loại bỏ một lượt tải xuống riêng biệt để tải nội dung của tập lệnh xuống, nhưng phương pháp này làm tăng kích thước vùng chứa và ngăn trình duyệt lưu tập lệnh vào bộ nhớ đệm riêng biệt.
  • Nhiều nhà cung cấp đề xuất đặt thẻ <script> của họ ở đầu <head>. Tuy nhiên, đối với các tập lệnh được tải bằng trình quản lý thẻ, việc này thường không cần thiết. Trong hầu hết các trường hợp, trình duyệt đã hoàn tất việc phân tích cú pháp <head> vào thời điểm trình quản lý thẻ thực thi.

Sử dụng pixel

Đôi khi, bạn có thể thay thế tập lệnh của bên thứ ba bằng pixel hình ảnh hoặc iframe. So với các pixel dựa trên tập lệnh, pixel có thể hỗ trợ ít chức năng hơn, vì vậy thường được coi là phương thức triển khai ít được ưu tiên hơn. Tuy nhiên, khi được sử dụng bên trong trình quản lý thẻ, pixel có thể linh hoạt hơn vì chúng có thể kích hoạt dựa trên các điều kiện kích hoạt và truyền các biến khác nhau.

Pixel là loại thẻ có hiệu suất cao nhất và an toàn nhất vì không có mã JavaScript nào được thực thi sau khi kích hoạt. Pixel có kích thước tài nguyên rất nhỏ (dưới 1 KB) và không gây ra sự thay đổi bố cục.

Hãy liên hệ với nhà cung cấp bên thứ ba để biết thêm thông tin về dịch vụ hỗ trợ của họ cho điểm ảnh. Ngoài ra, bạn có thể thử kiểm tra mã của họ để tìm thẻ <noscript>. Nếu nhà cung cấp hỗ trợ pixel, họ thường đưa pixel vào thẻ <noscript>.

Thẻ hình ảnh tuỳ chỉnh trong Trình quản lý thẻ của Google

Lựa chọn thay thế cho pixel

Pixel trở nên phổ biến phần lớn là do có thời điểm, chúng là một trong những cách rẻ nhất và đáng tin cậy nhất để tạo yêu cầu HTTP trong những trường hợp phản hồi của máy chủ không liên quan ( ví dụ: khi gửi dữ liệu đến nhà cung cấp dịch vụ phân tích). API navigator.sendBeacon() và fetch() keepalive được thiết kế để giải quyết cùng một trường hợp sử dụng này nhưng được cho là đáng tin cậy hơn pixel.

Việc tiếp tục sử dụng pixel là hoàn toàn bình thường, vì pixel được hỗ trợ đầy đủ và ít ảnh hưởng đến hiệu suất. Tuy nhiên, nếu bạn đang xây dựng đèn hiệu của riêng mình, bạn nên cân nhắc sử dụng một trong các API này.

sendBeacon()

API navigator.sendBeacon() được thiết kế để gửi một lượng nhỏ dữ liệu đến máy chủ web trong những trường hợp mà phản hồi của máy chủ không quan trọng.

const url = "https://example.com/analytics";
const data = JSON.stringify({
    event: "checkout",
    time: performance.now()
});

navigator.sendBeacon(url, data);

sendBeacon() có API hạn chế: API này chỉ hỗ trợ việc tạo yêu cầu POST và không hỗ trợ việc đặt tiêu đề tuỳ chỉnh. Tính năng này được tất cả các trình duyệt hiện đại hỗ trợ.

Fetch API keepalive

keepalive là một cờ cho phép sử dụng Fetch API để đưa ra các yêu cầu không chặn như báo cáo sự kiện và phân tích. Bạn có thể sử dụng bằng cách đưa keepalive: true vào các tham số được truyền đến fetch().

const url = "https://example.com/analytics";
const data = JSON.stringify({
  event: "checkout",
  time: performance.now()
});

fetch(url, {
    method: 'POST',
    body: data,
    keepalive: true
});

Nếu fetch() keepalive và sendBeacon() có vẻ rất giống nhau, thì đó là vì chúng thực sự giống nhau. Trên thực tế, trong các trình duyệt Chromium, sendBeacon() hiện được xây dựng dựa trên fetch() keepalive.

Khi chọn giữa fetch() keepalive và sendBeacon(), bạn cần cân nhắc các tính năng và khả năng hỗ trợ của trình duyệt mà bạn cần. API fetch() linh hoạt hơn đáng kể; tuy nhiên, keepalive có ít hỗ trợ trình duyệt hơn sendBeacon().

Tìm hiểu chức năng của thẻ

Thẻ thường được tạo bằng cách làm theo hướng dẫn của nhà cung cấp bên thứ ba. Nếu bạn không rõ chức năng của mã của nhà cung cấp, hãy cân nhắc hỏi người biết rõ. Việc tham khảo ý kiến của người khác có thể giúp xác định xem một thẻ có khả năng gây ra vấn đề về hiệu suất hoặc bảo mật hay không.

Bạn nên gắn nhãn cho các thẻ bằng một chủ sở hữu trong trình quản lý thẻ. Bạn rất dễ quên người sở hữu thẻ, dẫn đến việc sợ xoá thẻ vì lo ngại có thể làm hỏng thứ gì đó!

Điều kiện kích hoạt

Nhìn chung, việc tối ưu hoá trình kích hoạt thẻ thường bao gồm việc đảm bảo không kích hoạt thẻ nhiều hơn mức cần thiết và chọn một trình kích hoạt giúp cân bằng giữa nhu cầu kinh doanh và chi phí hiệu suất.

Trình kích hoạt là mã JavaScript làm tăng kích thước và chi phí thực thi của trình quản lý thẻ. Mặc dù hầu hết các yếu tố kích hoạt đều nhỏ, nhưng hiệu ứng tích luỹ có thể tăng lên. Ví dụ: việc có nhiều sự kiện nhấp chuột hoặc trình kích hoạt hẹn giờ có thể làm tăng đáng kể khối lượng công việc của trình quản lý thẻ.

Chọn một sự kiện kích hoạt phù hợp

Mức độ ảnh hưởng của thẻ đối với hiệu suất có thể khác nhau. Nhìn chung, thẻ kích hoạt càng sớm thì tác động đến hiệu suất càng lớn. Tài nguyên thường bị hạn chế trong quá trình tải trang ban đầu, do đó, việc tải hoặc thực thi một tài nguyên (hoặc thẻ) cụ thể sẽ lấy đi tài nguyên của một tài nguyên khác.

Mặc dù việc chọn trình kích hoạt phù hợp cho tất cả các thẻ là rất quan trọng, nhưng điều này đặc biệt quan trọng đối với những thẻ tải tài nguyên lớn hoặc thực thi tập lệnh dài.

Thẻ có thể được kích hoạt trên Lượt xem trang (thường là Page load, trên DOM Ready, trên Window Loaded) hoặc dựa trên một sự kiện tuỳ chỉnh. Để tránh ảnh hưởng đến việc tải trang, hãy kích hoạt các thẻ không cần thiết sau Window Loaded.

Sử dụng sự kiện tuỳ chỉnh

Sử dụng sự kiện tuỳ chỉnh để kích hoạt trình kích hoạt nhằm phản hồi các sự kiện trên trang không được trình kích hoạt tích hợp sẵn của Trình quản lý thẻ của Google hỗ trợ. Ví dụ: nhiều thẻ sử dụng trình kích hoạt lượt xem trang. Tuy nhiên, khoảng thời gian giữa DOM Ready và Window Loaded có thể kéo dài, khiến bạn khó điều chỉnh thời điểm kích hoạt thẻ. Sự kiện tuỳ chỉnh có thể là giải pháp cho vấn đề này.

Trước tiên, hãy tạo một trình kích hoạt sự kiện tuỳ chỉnh và cập nhật các thẻ của bạn để sử dụng trình kích hoạt này.

Trình kích hoạt Sự kiện tuỳ chỉnh trong Trình quản lý thẻ của Google

Để kích hoạt trình kích hoạt, hãy đẩy sự kiện tương ứng vào lớp dữ liệu.

// Custom event trigger that fires after 2 seconds
setTimeout(() => {
  dataLayer.push({
    'event' : 'my-custom-event'
  });
}, 2000);

Sử dụng các điều kiện kích hoạt cụ thể

Xác định các điều kiện kích hoạt cụ thể để tránh kích hoạt thẻ khi không cần thiết. Một trong những cách đơn giản và hiệu quả nhất để làm việc này là đảm bảo rằng thẻ chỉ kích hoạt trên những trang mà thẻ thực sự được sử dụng.

Điều kiện kích hoạt trong Trình quản lý thẻ của Google

Bạn có thể kết hợp biến được tạo sẵn vào các điều kiện kích hoạt để giới hạn việc kích hoạt thẻ.

Tải trình quản lý thẻ vào thời điểm thích hợp

Bạn có thể cải thiện hiệu suất bằng cách điều chỉnh thời điểm tải trình quản lý thẻ. Trình kích hoạt, bất kể được định cấu hình như thế nào, đều không thể kích hoạt cho đến khi trình quản lý thẻ tải xong. Thử nghiệm thời điểm tải trình quản lý thẻ, vì điều này có thể có tác động tương đương hoặc lớn hơn. Quyết định này ảnh hưởng đến tất cả các thẻ trên một trang.

Bằng cách tải trình quản lý thẻ sau, bạn có thể tránh được các vấn đề về hiệu suất trong tương lai, vì việc này giúp ngăn chặn việc vô tình tải thẻ quá sớm.

Biến

Sử dụng các biến để đọc dữ liệu từ trang. Các biến này rất hữu ích trong trình kích hoạt và trong chính các thẻ.

Giống như trình kích hoạt, các biến thêm mã JavaScript vào trình quản lý thẻ, do đó có thể gây ra các vấn đề về hiệu suất. Biến có thể tương đối nhỏ, chẳng hạn như mã để đọc các phần của URL, cookie, lớp dữ liệu hoặc DOM. Các tệp này cũng có thể bao gồm JavaScript tuỳ chỉnh có chức năng (và kích thước) không giới hạn.

Hạn chế tối đa việc sử dụng biến vì trình quản lý thẻ liên tục đánh giá các biến này. Xoá các biến cũ không còn được sử dụng để giảm cả kích thước của tập lệnh trình quản lý thẻ và thời gian xử lý mà tập lệnh này sử dụng.

Quản lý thẻ

Việc sử dụng thẻ một cách hiệu quả sẽ giúp giảm nguy cơ xảy ra vấn đề về hiệu suất.

Sử dụng lớp dữ liệu

Lớp dữ liệu là một mảng JavaScript gồm các đối tượng chứa thông tin về trang. Các đối tượng này chứa tất cả thông tin mà bạn muốn truyền đến Trình quản lý thẻ của Google.

Bạn cũng có thể sử dụng lớp dữ liệu để kích hoạt thẻ.

// Contents of the data layer
window.dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];

// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});

// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});

Mặc dù bạn có thể sử dụng Trình quản lý thẻ của Google mà không cần lớp dữ liệu, nhưng bạn nên sử dụng lớp dữ liệu. Lớp dữ liệu hợp nhất dữ liệu mà các tập lệnh của bên thứ ba có thể truy cập vào một nơi duy nhất, nhờ đó giúp bạn nắm rõ hơn về cách sử dụng dữ liệu. Ngoài ra, việc này có thể giúp giảm bớt các phép tính biến dư thừa và việc thực thi tập lệnh.

Bằng cách sử dụng lớp dữ liệu, bạn có thể kiểm soát dữ liệu mà các thẻ truy cập, thay vì cấp quyền truy cập đầy đủ vào biến JavaScript hoặc DOM.

Lợi ích về hiệu suất của lớp dữ liệu có thể không trực quan, vì việc cập nhật lớp dữ liệu khiến Trình quản lý thẻ của Google đánh giá lại tất cả các biến vùng chứa và có khả năng kích hoạt thẻ, điều này đòi hỏi phải thực thi JavaScript. Mặc dù có thể sử dụng sai lớp dữ liệu, nhưng nhìn chung, nếu lớp dữ liệu có vẻ là nguồn gây ra vấn đề về hiệu suất, thì có thể chính vùng chứa đó đang gặp vấn đề về hiệu suất. Lớp dữ liệu giúp các vấn đề này trở nên rõ ràng hơn.

Xoá thẻ trùng lặp và thẻ không dùng đến

Thẻ trùng lặp có thể xảy ra khi một thẻ được đưa vào mã đánh dấu HTML của trang, ngoài việc được chèn thông qua trình quản lý thẻ.

Bạn nên tạm dừng hoặc xoá các thẻ không sử dụng thay vì chặn bằng cách sử dụng ngoại lệ của bộ khởi động. Khi bạn tạm dừng hoặc xoá một thẻ, mã sẽ bị xoá khỏi vùng chứa; còn khi bạn chặn thẻ thì mã sẽ không bị xoá.

Khi xoá các thẻ không sử dụng, hãy xem xét các trình kích hoạt và biến để xác định xem có thể xoá chúng hay không.

Thẻ bị tạm dừng ảnh hưởng đến kích thước vùng chứa, tuy nhiên, tổng tải trọng sẽ nhỏ hơn so với khi thẻ đang hoạt động.

Sử dụng danh sách cho phép và danh sách từ chối

Sử dụng danh sách cho phép và danh sách từ chối để định cấu hình các quy định hạn chế rất chi tiết đối với các thẻ, điều kiện kích hoạt và biến được phép trên một trang. Bạn có thể sử dụng tính năng này để thực thi các phương pháp hay nhất về hiệu suất và các chính sách khác.

Danh sách cho phép và danh sách từ chối được định cấu hình thông qua lớp dữ liệu.

window.dataLayer = [{
  'gtm.allowlist': ['<id>', '<id>', ...],
  'gtm.blocklist': ['customScripts']
}];

Ví dụ: bạn có thể ngăn việc sử dụng thẻ HTML tuỳ chỉnh, biến JavaScript hoặc quyền truy cập trực tiếp vào DOM. Điều này có nghĩa là bạn chỉ có thể sử dụng pixel và thẻ được xác định trước, cùng với dữ liệu từ lớp dữ liệu. Mặc dù có tính hạn chế, nhưng điều này có thể giúp triển khai trình quản lý thẻ hiệu quả và an toàn hơn.

Cân nhắc sử dụng tính năng gắn thẻ phía máy chủ

Bạn nên cân nhắc chuyển sang tính năng gắn thẻ phía máy chủ, đặc biệt là đối với các trang web lớn muốn có nhiều quyền kiểm soát hơn đối với dữ liệu của họ. Tính năng gắn thẻ phía máy chủ sẽ xoá mã của nhà cung cấp khỏi máy khách, đồng thời giảm tải quá trình xử lý từ máy khách sang máy chủ.

Ví dụ: khi sử dụng tính năng gắn thẻ phía máy khách, việc gửi dữ liệu đến nhiều tài khoản Analytics đòi hỏi máy khách phải bắt đầu các yêu cầu riêng biệt cho từng điểm cuối. Khi gắn thẻ phía máy chủ, máy khách sẽ gửi một yêu cầu duy nhất đến vùng chứa phía máy chủ, và từ đó, dữ liệu này sẽ được chuyển tiếp đến các tài khoản Analytics khác nhau.

Xin lưu ý rằng tính năng gắn thẻ phía máy chủ chỉ hoạt động với một số thẻ. Khả năng tương thích của thẻ thay đổi tuỳ theo nhà cung cấp.

Để biết thêm thông tin, hãy xem bài viết Giới thiệu về tính năng gắn thẻ phía máy chủ.

Vùng chứa

Trình quản lý thẻ thường cho phép nhiều thực thể (thường được gọi là vùng chứa) trong quá trình thiết lập. Bạn có thể kiểm soát nhiều vùng chứa trong một tài khoản trình quản lý thẻ.

Chỉ sử dụng một vùng chứa cho mỗi trang

Việc có nhiều vùng chứa trên một trang có thể gây ra các vấn đề về hiệu suất nghiêm trọng, vì điều này làm tăng thêm mức hao tổn và việc thực thi tập lệnh. Ít nhất, việc này sẽ sao chép chính mã thẻ cốt lõi. Vì được phân phối dưới dạng một phần của JavaScript trong vùng chứa, nên mã này không thể được sử dụng lại giữa các vùng chứa.

Rất hiếm khi nhiều vùng chứa được sử dụng một cách hiệu quả. Tuy nhiên, có những trường hợp cách này có thể hiệu quả nếu được kiểm soát tốt. Ví dụ:

  • Bao gồm một vùng chứa "tải sớm" nhẹ hơn và một vùng chứa "tải sau" nặng hơn, thay vì một vùng chứa lớn.
  • Sử dụng vùng chứa bị hạn chế cho người dùng ít am hiểu về kỹ thuật và vùng chứa ít bị hạn chế hơn nhưng được kiểm soát chặt chẽ hơn cho các thẻ phức tạp hơn.

Nếu bạn phải sử dụng nhiều vùng chứa trên mỗi trang, hãy làm theo hướng dẫn của Trình quản lý thẻ của Google để thiết lập nhiều vùng chứa.

Sử dụng các vùng chứa riêng biệt nếu cần

Nếu bạn sử dụng trình quản lý thẻ cho nhiều tài sản, chẳng hạn như ứng dụng web và ứng dụng di động, thì số lượng vùng chứa bạn sử dụng có thể giúp ích hoặc gây ảnh hưởng đến năng suất của quy trình làm việc. Việc này cũng có thể ảnh hưởng đến hiệu suất.

Bạn có thể sử dụng một vùng chứa duy nhất cho nhiều trang web nếu các trang web đó có cách sử dụng và cấu trúc tương tự nhau. Ví dụ: mặc dù ứng dụng web và ứng dụng di động của một thương hiệu có thể có chức năng tương tự nhau, nhưng có thể các ứng dụng này có cấu trúc khác nhau, do đó, việc quản lý thông qua các vùng chứa riêng biệt sẽ hiệu quả hơn.

Việc sử dụng lại một vùng chứa duy nhất quá rộng có thể làm tăng độ phức tạp và kích thước của vùng chứa bằng cách buộc logic phức tạp quản lý các thẻ và điều kiện kích hoạt.

Chú ý đến kích thước vùng chứa

Kích thước của vùng chứa được xác định bằng các thẻ, điều kiện kích hoạt và biến của vùng chứa đó. Mặc dù vùng chứa nhỏ vẫn có thể ảnh hưởng tiêu cực đến hiệu suất trang, nhưng vùng chứa lớn gần như chắc chắn sẽ ảnh hưởng.

Kích thước vùng chứa không phải là chỉ số quan trọng nhất khi tối ưu hoá việc sử dụng thẻ. Tuy nhiên, kích thước vùng chứa lớn thường là dấu hiệu cảnh báo rằng vùng chứa không được duy trì tốt và có thể bị sử dụng sai mục đích.

Trình quản lý thẻ của Google giới hạn kích thước vùng chứa ở mức 300 KB và cảnh báo về kích thước vùng chứa sau khi đạt đến 70% giới hạn kích thước.

Hầu hết các trang web nên giữ cho vùng chứa của mình nhỏ hơn giới hạn. Để so sánh, vùng chứa trang web trung bình là khoảng 50 KB. Thư viện Trình quản lý thẻ của Google có kích thước nén khoảng 33 KB.

Đặt tên cho phiên bản vùng chứa

Phiên bản vùng chứa là ảnh chụp nhanh nội dung của vùng chứa tại một thời điểm cụ thể. Việc sử dụng tên có ý nghĩa và thêm nội dung mô tả ngắn về những thay đổi có ý nghĩa trong đó có thể giúp bạn dễ dàng gỡ lỗi các vấn đề về hiệu suất trong tương lai.

Quy trình gắn thẻ

Bạn cần quản lý các thay đổi đối với thẻ để chúng không ảnh hưởng tiêu cực đến hiệu suất trang.

Kiểm thử trước khi triển khai

Kiểm tra thẻ trước khi triển khai để phát hiện các vấn đề, hiệu suất và các vấn đề khác trước khi thẻ được phát hành.

Sau đây là những điều cần cân nhắc khi thử nghiệm thẻ:

  • Thẻ có hoạt động đúng cách không?
  • Thẻ có gây ra sự thay đổi bố cục không?
  • Thẻ có tải tài nguyên nào không? Những tài nguyên này có kích thước bao nhiêu?
  • Thẻ có kích hoạt một tập lệnh chạy trong thời gian dài không?

Chế độ xem trước

Chế độ xem trước cho phép bạn thử nghiệm các thay đổi về thẻ trên trang web thực tế mà không cần phải triển khai các thay đổi đó cho mọi người trước. Chế độ xem trước bao gồm một bảng điều khiển gỡ lỗi cung cấp thông tin về các thẻ.

Thời gian thực thi của Trình quản lý thẻ của Google sẽ khác (chậm hơn một chút) khi chạy ở Chế độ xem trước do cần thêm tài nguyên để hiển thị thông tin trong bảng điều khiển gỡ lỗi. Do đó, bạn không nên so sánh các chỉ số đo lường Web Vitals được thu thập ở chế độ xem trước với các chỉ số được thu thập trong phiên bản chính thức. Tuy nhiên, sự khác biệt này không ảnh hưởng đến hành vi thực thi của chính các thẻ.

Kiểm thử độc lập

Một cách khác để thử nghiệm thẻ là thiết lập một trang trống chứa một vùng chứa có một thẻ duy nhất – thẻ mà bạn đang thử nghiệm. Cách thiết lập thử nghiệm này ít thực tế hơn và sẽ không phát hiện được một số vấn đề (ví dụ: liệu thẻ có gây ra sự thay đổi bố cục hay không). Tuy nhiên, cách này có thể giúp bạn dễ dàng tách biệt và đo lường tác động của thẻ đối với những việc như thực thi tập lệnh. Hãy xem cách Telegraph sử dụng phương pháp tách biệt này để cải thiện hiệu suất của mã bên thứ ba.

Theo dõi hiệu suất của thẻ

Bạn có thể sử dụng API Giám sát của Trình quản lý thẻ của Google để thu thập thông tin về thời gian thực thi của một thẻ cụ thể. Thông tin này được báo cáo đến một điểm cuối mà bạn chọn.

Để biết thêm thông tin, hãy xem bài viết Cách xây dựng Trình giám sát Trình quản lý thẻ của Google.

Yêu cầu phê duyệt đối với các thay đổi về vùng chứa

Mã của bên thứ nhất thường trải qua quá trình xem xét và kiểm thử trước khi triển khai. Hãy xử lý các thẻ của bạn theo cách tương tự.

Một cách để thực hiện việc này là thêm tính năng xác minh hai bước, yêu cầu quản trị viên phê duyệt các thay đổi đối với vùng chứa. Ngoài ra, nếu không muốn yêu cầu xác minh hai bước nhưng vẫn muốn theo dõi các thay đổi, bạn có thể thiết lập thông báo về vùng chứa để nhận cảnh báo qua email về các sự kiện trong vùng chứa mà bạn chọn.

Định kỳ kiểm tra việc sử dụng thẻ

Một trong những thách thức khi làm việc với thẻ là chúng có xu hướng tích luỹ theo thời gian: thẻ được thêm vào nhưng hiếm khi bị xoá. Kiểm tra thẻ định kỳ là một cách để đảo ngược xu hướng này. Tần suất lý tưởng để thực hiện việc này phụ thuộc vào tần suất cập nhật thẻ của trang web.

Việc gắn nhãn cho từng thẻ để xác định rõ chủ sở hữu giúp bạn dễ dàng xác định người chịu trách nhiệm về thẻ đó và có thể cho biết liệu thẻ đó có còn cần thiết hay không.

Khi kiểm tra thẻ, hãy nhớ dọn dẹp các điều kiện kích hoạt và biến. Chúng cũng thường là nguyên nhân gây ra các vấn đề về hiệu suất.

Để biết thêm thông tin, hãy xem bài viết Kiểm soát tập lệnh của bên thứ ba.