这是我创建的非常基本的 html，用于测试 cookie 同意代码的影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="test page speed">
<title>Speed test 1</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="favicon.png" rel="shortcut icon" type="image/x-icon">
<!-- BEGIN Cookie Consent -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#eee",
"text": "#000"
},
"button": {
"background": "#0f0",
"text": "#ffffff"
}
}
})});
</script>
<!-- END Cookie Consent -->
</head>
<body class="body">
<h1>Hello!</h1>
<p>
This is a test.
</p>
</body>
</html>
如果没有 Cookie 同意部分，FCP 为 0.8s（根据 Google 的 PageSpeed Insights 测量）。
有了 Cookie 同意部分，FCP 为 1.9s。性能大幅下降！
如何才能在 1 秒左右回到 FCP？
为了最大限度地减少 Cookie 同意代码对性能的影响，您可以考虑使用 HTML
<script><script async src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
您可以尝试最小化/合并外部资源。不幸的是，如果无法访问您的 cookie 同意库的来源，您就无法直接最小化或组合这些资源。但您可以确保您正在使用缩小版本，就像您已经使用的那样。如果您需要进一步优化，请考虑自己托管这些文件。
DOMContentLoaded<script>
document.addEventListener('DOMContentLoaded', function () {
if(window.cookieconsent) {
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#eee",
"text": "#000"
},
"button": {
"background": "#0f0",
"text": "#ffffff"
}
}
});
}
});
</script>
这也说明了初始化 cookie 同意时的良好实践：通过检查
window.cookieconsent