Html Question posted in
Some basic documentation can be found here.

Html – How to minimize performance hit from cookie consent code?

Here is very basic html that I created to test the impact of cookie consent code.

<!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>

Without the Cookie Consent section, the FCP is 0.8s (as measured by Google’s PageSpeed Insights).

With the Cookie Consent section, the FCP is 1.9s. A huge drop in performance!

What can be done to get back to FCP around 1s?

Tags:

2

Answers


  1. 0

    To minimize the performance impact of your cookie consent code, you might consider loading your Cookie Consent script asynchronously, using the HTML <script> async Attribute.

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

    You could try and minimize/combine external resources. Unfortunately, without access to the source of your cookie consent library, you cannot directly minimize or combine these resources. But you can make sure you are using the minified versions, as you already are. Consider hosting these files yourself if you need further optimization.

    You can also defer the initialization of the cookie consent until after the DOMContentLoaded event. That makes sure the initialization code does not block the rendering of the page.

    <script>
document.addEventListener('DOMContentLoaded', function () {
    if(window.cookieconsent) {
    window.cookieconsent.initialise({
        "palette": {
        "popup": {
            "background": "#eee",
            "text": "#000"
        },
        "button": {
            "background": "#0f0",
            "text": "#ffffff"
        }
        }
    });
    }
});
</script>

    That would also illustrate a good practice when initializing the cookie consent: by checking if window.cookieconsent is available (as in this example), you avoid potential errors and make sure the script only runs when necessary.

    Login or Signup to reply.
  2. 0

    I would rather run PageSpeed Insights on a finished product and start fixing problems severity-wise.

    That being said, I see only one fixable issue:

    Eliminate render-blocking resources

    To fix this:

    1. Inline the contents of the CSS file
    2. Load the JavaScript file asynchronously

    Unfortunately, it looks like the library you’ve chosen will not work asynchronously since the customizations require the script to be loaded (I couldn’t find any alternate method in the documentation). You can use this old trick as a workaround:

    <!--
  before you proceed, inline the contents of cookieconsent.min.css
  into a <style> tag (copy necessary styles only)
  then place the following script tag anywhere you like
-->
<script>
    (function () {
        let s = document.createElement("script");
        s.src = "//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js";
        s.onload = function () {
            window.cookieconsent.initialise({
                "palette": {
                    "popup": { "background": "#eee", "text": "#000" },
                    "button": { "background": "#0f0", "text": "#fff" }
                }
            });
        };
        document.head.appendChild(s);
    })();
</script>

    This should get rid of the "Eliminate render-blocking resources" warning:

    No more warnings

    Scripts designed for asynchronous loading are usually included and configured like so:

    <div class="someplugin-target" data-someplugin-clientid="1234" data-someplugin-color="blue">
<script>window.somePlugin_ExtraConfig = { backgroundColor: "white" }</script>
<script src="//cdn.com/someplugin.js" async></script>

    I would suggest you ask the author of the plugin to add this feature.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search