如何优化Cookie同意代码，将FCP恢复至约1秒？

我创建了一个基础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同意代码时，通过Google PageSpeed Insights测量的**首次内容绘制(FCP)**为0.8秒；添加后FCP升至1.9秒，性能大幅下降。请问如何优化才能将FCP恢复至约1秒？

以下是几种能有效降低Cookie同意代码对FCP影响的方法：

1. 异步加载脚本+内联CSS #

• 给Cookie同意的JS脚本添加async属性，避免阻塞HTML解析：

  <script async src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
  

• 将cookieconsent.min.css的内容直接内联到<head>的<style>标签中，消除额外的CSS请求阻塞：

  <style>
  /* 粘贴cookieconsent.min.css的完整内容 */
  </style>
  

2. 延迟初始化逻辑 #

把Cookie同意弹窗的初始化放到浏览器空闲时段执行，不抢占页面渲染资源：

window.addEventListener('load', function() {
  requestIdleCallback(function() {
    window.cookieconsent.initialise({
      "palette": {
        "popup": {
          "background": "#eee",
          "text": "#000"
        },
        "button": {
          "background": "#0f0",
          "text": "#ffffff"
        }
      }
    });
  });
});

3. 本地托管资源 #

将Cookie同意的CSS和JS文件下载到自己的服务器，替换CDN链接，减少第三方网络延迟：

<link rel="stylesheet" type="text/css" href="/static/cookieconsent.min.css"/>
<script async src="/static/cookieconsent.min.js"></script>

4. 精简弹窗样式 #

只保留Cookie弹窗的必要样式，删除冗余的CSS代码，减少浏览器的CSS解析与渲染时间。

组合使用以上方法，能够显著降低Cookie同意代码对FCP的影响，将其恢复至接近1秒的水平。

内容的提问来源于stack exchange，提问作者user1566515