Web - 为什么很多网站都会弹窗要你接受或拒绝Cookie?

您可能已经注意到您现在访问的每个网站似乎都包含一些关于使用 cookie 的通知。

今天我才知道，如果您的网站接收来自欧盟的访问者，那么您可能需要一个 cookie 同意横幅，以保持欧盟法规的良好一面。

欧盟关于 cookie 的规则最初于 2011 年通过并于 2018 年随着 GDPR 的扩展而扩展，本质上要求您获得访问者的“明确、知情同意”，才能使用跟踪用户数据的 cookie。从技术上讲，这并不是每个网站，但随着谷歌分析、Facebook Pixel、社交媒体分享按钮等工具的普及，您的网站很有可能至少使用其中一种方式跟踪 cookie。

所以在实践中，大多数接收来自欧盟的访问者的网站都需要一个 cookie 同意横幅。 在这个全球化的世界里，大多数网站都是如此，这样做会减少不必要的麻烦。

有很多种办法给网站添加这种Cookie的弹框，你可以自己实现，也可以使用第三方服务，比如Getsitecontrol, 一般都是收费的，可以去搜一下他们的文档，添加一段script，然后就可以配置样式和内容了，挺简单。这里想提顺便提一下的就是，添加这种东西，往往会影响网站的性能, 比如以下三个方面：

• 最大内容绘制 (LCP)：大多数 cookie 弹框通知都相当小，因此通常不包含页面的 LCP 元素。 但是，这可能会发生——尤其是在移动设备上。 在移动设备上，cookie 通知通常占据屏幕的较大部分。 这通常发生在 cookie 通知包含大量文本时（文本块也可以是 LCP 元素）。
• 首次输入延迟 (FID)：一般而言，您的 cookie 同意解决方案本身对 FID 的影响应该很小——cookie 同意需要很少的 JavaScript 执行。 但是，这些 cookie 启用的技术（即广告和跟踪脚本）可能会对页面交互性产生重大影响。 延迟这些脚本直到接受 cookie 可以作为一种减少首次输入延迟 (FID) 的技术。
• 累积布局移位 (CLS)：Cookie 同意通知是布局转换的常见来源。

最佳实践就是，

你需要async load脚本:

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

你要preconnect脚本所在域名:

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

一些网站会受益于使用预加载资源提示来加载他们的 cookie 通知脚本。 预加载资源提示通知浏览器对指定资源发起早期请求。

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

自定义第三方 cookie 通知的外观和感觉可能会产生额外的性能成本。 例如，第三方 cookie 通知并不总是能够重复使用页面上其他地方使用的相同资源（例如，网络字体）。 此外，第三方 cookie 通知倾向于在长请求链的末尾加载样式。 为避免任何意外，请注意您的 cookie 通知如何加载和应用样式和相关资源。