Các phương pháp hay nhất cho thông báo về cookie

Tối ưu hoá thông báo về cookie để tăng hiệu suất và khả năng hữu dụng.

Katie Hempenius
Katie Hempenius
X

Bài viết này thảo luận cách các thông báo về cookie có thể ảnh hưởng đến hiệu suất, kết quả đo lường hiệu suất và trải nghiệm người dùng.

Hiệu suất

Thông báo về cookie có thể có tác động đáng kể đến hiệu suất trang do các thông báo này thường được tải sớm trong quá trình tải trang, hiển thị cho tất cả người dùng và có khả năng ảnh hưởng đến việc tải quảng cáo cũng như các nội dung khác của trang.

Dưới đây là tác động của thông báo về cookie đối với các chỉ số Các chỉ số quan trọng về trang web:

  • Thời gian hiển thị nội dung lớn nhất (LCP): Hầu hết các thông báo yêu cầu đồng ý sử dụng cookie đều khá nhỏ và do đó thường không chứa phần tử LCP của trang. Tuy nhiên, điều này có thể xảy ra, đặc biệt là trên thiết bị di động. Trên thiết bị di động, thông báo về cookie thường chiếm phần lớn hơn trên màn hình. Điều này thường xảy ra khi một thông báo cookie chứa một khối văn bản lớn (khối văn bản cũng có thể là các phần tử LCP).

  • Thời gian phản hồi lần tương tác đầu tiên (FID): Nhìn chung, bản thân giải pháp đồng ý sử dụng cookie sẽ có tác động tối thiểu đến FID, tức là việc đồng ý sử dụng cookie yêu cầu ít thực thi JavaScript. Tuy nhiên, các công nghệ mà các cookie này hỗ trợ (cụ thể là tập lệnh quảng cáo và theo dõi) có thể có tác động đáng kể đến khả năng tương tác của trang. Việc trì hoãn các tập lệnh này cho đến khi chấp nhận cookie có thể là một kỹ thuật giúp giảm Thời gian phản hồi lần tương tác đầu tiên (FID).

  • Điểm số tổng hợp về mức thay đổi bố cục (CLS): Thông báo yêu cầu đồng ý sử dụng cookie là một nguồn thay đổi bố cục rất phổ biến.

Nói chung, thông báo về cookie từ nhà cung cấp bên thứ ba có thể có tác động lớn hơn đến hiệu suất so với thông báo về cookie mà bạn tự xây dựng. Đây không phải là vấn đề của riêng các thông báo về cookie, mà là bản chất của các tập lệnh bên thứ ba nói chung.

Các phương pháp hay nhất

Các phương pháp hay nhất trong phần này tập trung vào các thông báo về cookie của bên thứ ba. Một số (nhưng không phải tất cả) những phương pháp hay nhất này cũng sẽ áp dụng cho thông báo về cookie của bên thứ nhất.

Các tập lệnh thông báo về cookie phải được tải không đồng bộ. Để thực hiện việc này, hãy thêm thuộc tính async vào thẻ tập lệnh.

<script src="https://cookie-notice.com/script.js" async>

Các tập lệnh không đồng bộ sẽ chặn trình phân tích cú pháp trình duyệt. Điều này gây chậm trễ cho việc tải trang và LCP. Để biết thêm thông tin, hãy xem bài viết Tải hiệu quả JavaScript bên thứ ba.

Các tập lệnh thông báo về cookie phải được tải "trực tiếp" bằng cách đặt thẻ tập lệnh vào HTML của tài liệu chính, thay vì được tải bởi một trình quản lý thẻ hoặc tập lệnh khác. Việc sử dụng trình quản lý thẻ hoặc tập lệnh phụ để chèn tập lệnh thông báo về cookie sẽ trì hoãn quá trình tải tập lệnh thông báo về cookie: tập lệnh này che khuất tập lệnh khỏi trình phân tích cú pháp xem trước của trình duyệt và ngăn không cho tập lệnh tải trước khi thực thi JavaScript.

Tất cả các trang web tải tập lệnh thông báo cookie từ một vị trí của bên thứ ba đều phải sử dụng gợi ý tài nguyên dns-prefetch hoặc preconnect để giúp thiết lập kết nối sớm với nguồn lưu trữ tài nguyên thông báo cookie. Để biết thêm thông tin, hãy xem bài viết Thiết lập kết nối mạng sớm để cải thiện tốc độ trang nhận thấy được.

<link rel="preconnect" href="https://cdn.cookie-notice.com/">

Một số trang web sẽ được hưởng lợi từ việc sử dụng gợi ý về tài nguyên preload để tải tập lệnh thông báo về cookie. Gợi ý về tài nguyên preload sẽ thông báo cho trình duyệt để khởi tạo một yêu cầu sớm cho tài nguyên đã chỉ định.

<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">

preload hoạt động hiệu quả nhất khi mức sử dụng chỉ giới hạn ở việc tìm nạp một vài tài nguyên chính trên mỗi trang. Do đó, tính hữu ích của việc tải trước tập lệnh thông báo về cookie sẽ thay đổi tuỳ theo tình huống.

Việc tuỳ chỉnh giao diện của thông báo sử dụng cookie của bên thứ ba có thể làm phát sinh thêm chi phí hiệu suất. Ví dụ: các thông báo về cookie của bên thứ ba không phải lúc nào cũng có thể sử dụng lại cùng một tài nguyên (ví dụ: phông chữ trên web) được dùng ở những nơi khác trên trang. Ngoài ra, các thông báo cookie của bên thứ ba có xu hướng tải kiểu ở cuối các chuỗi yêu cầu dài. Để tránh mọi tình huống bất ngờ, hãy lưu ý đến cách thông báo về cookie tải và áp dụng kiểu cũng như các tài nguyên liên quan.

Tránh thay đổi bố cục

Dưới đây là một số vấn đề phổ biến nhất về việc thay đổi bố cục liên quan đến thông báo về cookie:

  • Thông báo cookie đầu màn hình: Thông báo về cookie đầu màn hình là một nguồn thay đổi bố cục rất phổ biến. Nếu một thông báo cookie được chèn vào DOM sau khi trang xung quanh đã hiển thị, thì thông báo này sẽ đẩy các phần tử trang bên dưới nó xuống phía dưới trang. Bạn có thể loại bỏ kiểu thay đổi bố cục này bằng cách dành riêng không gian trong DOM cho thông báo yêu cầu đồng ý. Nếu đây không phải là giải pháp khả thi – ví dụ: nếu kích thước của thông báo cookie thay đổi theo khu vực địa lý, hãy cân nhắc sử dụng chân trang hoặc phương thức cố định để hiển thị thông báo về cookie. Vì cả hai phương pháp thay thế này đều hiển thị thông báo cookie dưới dạng "lớp phủ" ở đầu phần còn lại của trang, nên thông báo về cookie không được làm thay đổi nội dung khi tải.
  • Ảnh động: Nhiều thông báo cookie sử dụng ảnh động – ví dụ: " trượt vào" thông báo về cookie là một mẫu thiết kế phổ biến. Tuỳ thuộc vào cách triển khai những hiệu ứng này, chúng có thể khiến bố cục thay đổi. Để biết thêm thông tin, hãy xem bài viết Khắc phục sự cố thay đổi bố cục.
  • Phông chữ: Phông chữ tải muộn có thể chặn hoạt động hiển thị và hoặc khiến bố cục thay đổi. Hiện tượng này rõ ràng hơn trên kết nối chậm.

Tối ưu hoá quá trình tải nâng cao

Các kỹ thuật này mất nhiều công sức hơn để triển khai nhưng có thể tối ưu hoá hơn nữa việc tải tập lệnh thông báo về cookie:

Đo lường hiệu suất

Thông báo về cookie có thể ảnh hưởng đến hoạt động đo lường hiệu suất. Phần này thảo luận một số ảnh hưởng và kỹ thuật giảm thiểu tác động.

Giám sát người dùng thực (rum)

Một số công cụ Số liệu phân tích và Công cụ ôn tập (rum) sử dụng cookie để thu thập dữ liệu về hiệu suất. Trong trường hợp người dùng từ chối sử dụng cookie, các công cụ này không thể thu thập dữ liệu về hiệu suất.

Các trang web nên nhận biết được hiện tượng này. Bạn cũng nên tìm hiểu các cơ chế mà công cụ rum của bạn sử dụng để thu thập dữ liệu. Tuy nhiên, đối với trang web thông thường, sự khác biệt này có thể không phải là nguyên nhân gây ra cảnh báo do hướng và cường độ của dữ liệu lệch. Việc sử dụng cookie không phải là một yêu cầu kỹ thuật để đo lường hiệu suất. Thư viện JavaScript web-vitals là một ví dụ về thư viện không sử dụng cookie.

Tuỳ thuộc vào cách trang web của bạn sử dụng cookie để thu thập dữ liệu hiệu suất (tức là liệu cookie có chứa thông tin cá nhân hay không), cũng như luật có liên quan, việc sử dụng cookie để đo lường hiệu suất có thể không phải tuân theo các yêu cầu pháp lý như một số cookie dùng trên trang web của bạn cho các mục đích khác (ví dụ: cookie quảng cáo). Một số trang web chọn chia nhỏ cookie hiệu suất dưới dạng một danh mục cookie riêng biệt khi yêu cầu sự đồng ý của người dùng.

Giám sát tổng hợp

Nếu không có cấu hình tuỳ chỉnh, hầu hết các công cụ tổng hợp (chẳng hạn như Lighthouse và WebPageTest) sẽ chỉ đo lường trải nghiệm của người dùng lần đầu chưa phản hồi thông báo đồng ý sử dụng cookie. Tuy nhiên, bạn không chỉ cần xem xét các biến thể về trạng thái bộ nhớ đệm (ví dụ: lượt truy cập đầu tiên so với lượt truy cập lặp lại) khi thu thập dữ liệu hiệu suất, mà còn phải xem xét các biến thể về trạng thái chấp nhận cookie (được chấp nhận, bị từ chối hoặc không được phản hồi).

Các phần sau đây thảo luận về các chế độ cài đặt WebPageTest và Lighthouse có thể hữu ích khi kết hợp thông báo cookie vào quy trình đo lường hiệu suất. Tuy nhiên, cookie và thông báo về cookie chỉ là một trong nhiều yếu tố có thể khó mô phỏng một cách hoàn hảo trong môi trường phòng thí nghiệm. Vì lý do này, bạn cần phải lấy dữ liệu rum làm nền tảng của quá trình đo điểm chuẩn hiệu suất, thay vì sử dụng công cụ tổng hợp.

Lên nội dung

Bạn có thể sử dụng tập lệnh để WebPageTest "nhấp" vào biểu ngữ yêu cầu đồng ý sử dụng cookie trong khi thu thập dấu vết.

Thêm tập lệnh bằng cách chuyển đến thẻ Tập lệnh. Tập lệnh bên dưới sẽ điều hướng đến URL cần kiểm tra, sau đó nhấp vào phần tử DOM có mã nhận dạng cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Khi sử dụng tập lệnh này, hãy lưu ý rằng:

  • combineSteps yêu cầu WebPageTest "kết hợp" các kết quả của các bước viết tập lệnh sau đó thành một tập hợp dấu vết và thông tin đo lường. Việc chạy tập lệnh này mà không có combineSteps cũng có thể hữu ích – các dấu vết riêng biệt giúp bạn dễ dàng biết được các tài nguyên được tải trước hay sau khi chấp nhận cookie.
  • %URL% là một quy ước WebPageTest đề cập đến URL đang được kiểm thử.
  • clickAndWait yêu cầu WebPageTest nhấp vào phần tử do attribute=value chỉ định và đợi hoạt động trình duyệt tiếp theo hoàn tất. Tệp này có định dạng clickAndWait attribute=Value.

Nếu bạn đã định cấu hình tập lệnh này đúng cách, ảnh chụp màn hình do WebPageTest chụp sẽ không hiển thị thông báo về cookie (thông báo về cookie đã được chấp nhận).

Để biết thêm thông tin về tập lệnh WebPageTest, hãy xem tài liệu về WebPageTest.

Đặt cookie

Để chạy WebPageTest bằng một tập hợp cookie, hãy chuyển đến thẻ Nâng cao và thêm tiêu đề cookie vào trường Tiêu đề tuỳ chỉnh:

Ảnh chụp màn hình cho thấy trường &quot;Tiêu đề tuỳ chỉnh&quot; trong WebPageTest

Thay đổi vị trí thử nghiệm

Để thay đổi vị trí thử nghiệm mà WebPageTest sử dụng, hãy nhấp vào trình đơn thả xuống Test Location (Vị trí thử nghiệm) trong thẻ Advanced Testing (Kiểm thử nâng cao).

Ảnh chụp màn hình trình đơn thả xuống &quot;Test Location&quot; (Vị trí kiểm tra) trong WebPageTest

Việc đặt cookie khi chạy Lighthouse có thể đóng vai trò là cơ chế chuyển trang sang một trạng thái cụ thể để kiểm thử bằng Lighthouse. Hành vi cookie của Lighthouse thay đổi đôi chút tùy theo ngữ cảnh (DevTools, CLI hoặc PageSpeed Insights).

DevTools

Cookie sẽ không bị xoá khi Lighthouse chạy từ Công cụ cho nhà phát triển. Tuy nhiên, theo mặc định, các loại bộ nhớ khác sẽ bị xoá. Bạn có thể thay đổi hành vi này bằng cách sử dụng tuỳ chọn Clear Storage (Xoá bộ nhớ) trong bảng cài đặt của Lighthouse.

Ảnh chụp màn hình đang bật tuỳ chọn &quot;Xoá bộ nhớ&quot; của Lighthouse

CLI

Thao tác chạy Lighthouse từ CLI sẽ sử dụng một phiên bản Chrome mới, vì vậy, không có cookie nào được đặt theo mặc định. Để chạy Lighthouse từ CLI với một tập hợp cookie cụ thể, hãy sử dụng lệnh sau:

lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"

Để biết thêm thông tin về cách đặt tiêu đề của yêu cầu tuỳ chỉnh trong Lighthouse CLI, hãy xem phần Chạy Lighthouse trên các trang được xác thực.

PageSpeed Insights

Quá trình chạy Lighthouse từ PageSpeed Insights sử dụng một phiên bản Chrome mới và không đặt bất kỳ cookie nào. Bạn không thể định cấu hình PageSeed Insights để đặt các cookie cụ thể.

Trải nghiệm người dùng

Trải nghiệm người dùng (UX) của các thông báo yêu cầu đồng ý sử dụng cookie chủ yếu là kết quả của 2 quyết định: vị trí của thông báo về cookie trong trang và mức độ mà người dùng có thể tuỳ chỉnh việc sử dụng cookie của trang web. Phần này thảo luận các phương pháp tiềm năng cho 2 quyết định này.

Khi cân nhắc các thiết kế tiềm năng cho thông báo cookie, dưới đây là một số điều cần cân nhắc:

  • UX: Đây có phải là một trải nghiệm người dùng tốt không? Thiết kế cụ thể này sẽ ảnh hưởng như thế nào đến các phần tử trang và luồng người dùng hiện có?
  • Doanh nghiệp: Chiến lược cookie của trang web của bạn là gì? Mục tiêu của bạn khi thông báo về cookie là gì?
  • Pháp lý: Điều này có tuân thủ các yêu cầu pháp lý không?
  • Kỹ thuật: Công việc này sẽ mất bao nhiêu thời gian để triển khai và duy trì? Việc thay đổi đó khó đến mức nào?

Vị trí đặt quảng cáo

Thông báo về cookie có thể hiển thị dưới dạng tiêu đề, phần tử cùng dòng hoặc chân trang. Quảng cáo này cũng có thể hiển thị ở đầu nội dung trang bằng cửa sổ phụ hoặc được phân phát dưới dạng quảng cáo xen kẽ.

Sơ đồ cho thấy ví dụ về các lựa chọn vị trí khác nhau cho thông báo về cookie

Thông báo về cookie thường được đặt trong phần đầu trang hoặc chân trang. Trong 2 lựa chọn này, thường thì vị trí chân trang được ưu tiên hơn vì không phô trương, không cạnh tranh để thu hút sự chú ý với quảng cáo biểu ngữ hoặc thông báo, cũng như thường không gây ra CLS. Ngoài ra, đây còn là nơi phổ biến để đặt các chính sách quyền riêng tư và điều khoản sử dụng.

Mặc dù thông báo cookie cùng dòng là một tuỳ chọn, nhưng có thể khó tích hợp vào giao diện người dùng hiện có, do đó không phổ biến.

Vải mod

Phương thức là các thông báo yêu cầu đồng ý sử dụng cookie xuất hiện ở đầu nội dung trang. Các mô-đun có thể có giao diện và hoạt động khá khác nhau tuỳ thuộc vào kích thước.

Các phương thức nhỏ hơn, chiếm một phần màn hình có thể là giải pháp thay thế phù hợp cho những trang web đang gặp khó khăn trong việc triển khai thông báo cookie theo cách không gây ra sự thay đổi bố cục.

Mặt khác, bạn nên cẩn thận khi sử dụng các cửa sổ lớn che khuất phần lớn nội dung trên trang. Cụ thể, có một số trang web nhỏ hơn có thể thấy rằng người dùng thoát thay vì chấp nhận thông báo về cookie của một trang web lạ có nội dung bị che khuất. Mặc dù các khái niệm này không hẳn là các khái niệm tương tự, nhưng nếu đang cân nhắc sử dụng phương thức đồng ý sử dụng cookie toàn màn hình, bạn nên tìm hiểu luật pháp về tường cookie.

Khả năng định cấu hình

Giao diện thông báo cookie cung cấp cho người dùng nhiều mức độ kiểm soát đối với những cookie mà họ chấp nhận.

Không có khả năng định cấu hình

Các biểu ngữ cookie kiểu thông báo này không hiển thị cho người dùng các chế độ kiểm soát trải nghiệm người dùng trực tiếp để chọn không sử dụng cookie. Thay vào đó, các trang này thường bao gồm một đường liên kết đến chính sách cookie của trang web, chính sách này có thể cung cấp cho người dùng thông tin về cách quản lý cookie bằng trình duyệt web của họ. Những thông báo này thường có nút "đóng" và/hoặc "Chấp nhận".

Sơ đồ cho thấy ví dụ về thông báo cookie không có cấu hình cookie

Một số khả năng định cấu hình

Những thông báo về cookie này cung cấp cho người dùng lựa chọn từ chối cookie nhưng không hỗ trợ các chế độ kiểm soát chi tiết hơn. Phương pháp thông báo về cookie này ít phổ biến hơn.

Sơ đồ cho thấy ví dụ về thông báo cookie liên quan đến khả năng định cấu hình cookie

Khả năng định cấu hình đầy đủ

Các thông báo về cookie này cung cấp cho người dùng quyền kiểm soát chi tiết hơn để định cấu hình mức sử dụng cookie mà họ chấp nhận.

Sơ đồ cho thấy ví dụ về thông báo chookie có khả năng định cấu hình cookie đầy đủ

  • Trải nghiệm người dùng: Các chế độ kiểm soát để định cấu hình mức sử dụng cookie thường hiển thị nhất bằng cách sử dụng một phương thức riêng biệt chạy khi người dùng phản hồi thông báo đồng ý ban đầu sử dụng cookie. Tuy nhiên, nếu đủ chỗ, một số trang web sẽ hiển thị các chế độ kiểm soát này cùng dòng trong thông báo đồng ý ban đầu sử dụng cookie.

  • Độ chi tiết: Phương pháp phổ biến nhất để định cấu hình cookie là cho phép người dùng chọn sử dụng cookie theo "danh mục" cookie. Ví dụ về các danh mục cookie phổ biến bao gồm cookie chức năng, tiêu chí nhắm mục tiêu và cookie mạng xã hội.

    Tuy nhiên, một số trang web sẽ tiến thêm một bước và cho phép người dùng chọn tham gia dựa trên từng cookie. Ngoài ra, một cách khác để cung cấp cho người dùng quyền kiểm soát cụ thể hơn là chia nhỏ các danh mục cookie như "quảng cáo" thành các trường hợp sử dụng cụ thể, ví dụ: cho phép người dùng chọn sử dụng riêng "quảng cáo cơ bản" và "quảng cáo được cá nhân hoá".

Sơ đồ cho thấy ví dụ về thông báo về cookie có khả năng định cấu hình cookie đầy đủ