Tips for reducing the impact on performance caused by cookie consent code

Experimenting with basic HTML to analyze the impact of cookie consent code.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="determine page load speed">   
  <title>Page 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>Greetings!</h1>

<p>
Just a test.
</p>

</body>
</html>

FCP without Cookie Consent: 0.8s (according to Google's PageSpeed Insights).

FCP with Cookie Consent: 1.9s. Significant performance decrease!

What can be done to improve FCP to around 1 second?

htmlcsspagespeedgoogle-pagespeedcookieconsent

Answer №1

When it comes to improving website performance, I prefer running PageSpeed Insights on the final product and then addressing issues based on their severity.

Currently, there is only one issue that can be fixed:

https://i.stack.imgur.com/eQbcT.png

To resolve this problem, you can:

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

Unfortunately, the selected library does not support asynchronous loading as suggested by the documentation. To work around this limitation, you can use the following method:

<!--
  First, inline the necessary styles from cookieconsent.css into a <style> tag,
  then add the script below in your code
-->
<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 approach will help resolve the issue of render-blocking resources:

https://i.stack.imgur.com/727U1.png

[1] Usually, scripts meant for asynchronous loading are included and configured like this:

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

If possible, consider requesting the plugin author to incorporate this feature into the plugin.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself. Any assistance would be highly a ...

javascriptjquerycss

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

It is truly satisfying to be here working on developing a private message inbox for my website, especially after successfully implementing a complete user signup/login and activation system. A few months ago, I never believed I had enough patience to grasp ...

phpjavascriptjquerymysqlhtml

Ways to customize background color for a particular date?

I have been using the fullcalendar npm package to display a calendar on my website. I am trying to figure out how to set a background color for a specific selected date. I tried looking into this issue on GitHub at this link. However, it seems that dayRe ...

javascripthtmlcssangularfullcalendar

Conceal div elements containing identical information by utilizing jQuery

I'm dealing with a webpage that pulls in a long section of divs from another application. Unfortunately, I can't filter the divs before they appear, but I urgently need to hide any duplicate data within certain values using jQuery. The duplicate ...

javascriptjqueryhtmlcssduplicates

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

javascriptjqueryhtmlshopify

Overflow and contain a flex item within another flex item

I am facing a challenge where I need to prevent a flex-child of another flex-child from overflowing the parent, ensuring it does not exceed the screen height or the height of the parent (which is also a flex-child). Here's the CodePen link for refere ...

htmlcssvue.jsflexboxvuetify.js

Unusual display of fonts on Chrome

Recently, I encountered a strange issue with font rendering on Chrome/Opera compared to Firefox. The problem can be seen in the preview below - pay attention to the pink text. It appears blurry initially but sharpens once text input is focused. This same i ...

cssgoogle-chromefontsfont-faceopera

Declare a jQuery variable containing HTML elements

Greetings! I am facing an issue while attempting to create a jQuery variable that stores a table meant for displaying in different sections of a website. Unfortunately, I am encountering an error and struggling to comprehend the reason behind it. Below is ...

jqueryhtmlvar

Is it possible to adjust the width of Material-UI TextField to match the width of the input text?

Is there a way for Material-UI to adjust the width of the TextField element automatically based on the input text? When creating a form view/edit page and rendering data into fields, I also have parameters set by the server. It would be convenient to have ...

cssmaterial-ui

I'm having trouble getting the second controller to function properly in my AngularJS application

I've been looking everywhere for a solution on how to implement two controllers, but I can't seem to get it working. Could there be something wrong with my HTML or could the issue lie in my script? Here is the JavaScript code: <script> v ...

javascriptphphtmlcssangularjs

Swapping out DIVs with jQuery

Currently, I am working on a project for a client where I need to create a sortable biography section using jQuery. Initially, I had a setup with just two bios (first person and third person) which was functioning perfectly: $("a#first").click(function() ...

jquerycssfadeinfadeout

The lines intersecting with the ethereal image in the background

I'm trying to achieve button links with an image overlay, but so far I've only been able to do it using CSS: section a:link, section a:visited { width: 150px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...

cssimagehtmlmargin

I'm not sure why, but for some strange reason, Markdown images refuse to display when surrounded by

Recently, I've encountered a strange issue where my markdown image tag doesn't display the image when wrapped in a <div> or a <section>. Instead, it just outputs markdown code. Take a look at this screenshot for reference. <sectio ...

htmlmarkdownjekyll

Positioning a div relative to another div using the pos:fixed attribute

Is there a way to make a fixed position div relative to its parent div instead of the window using only CSS? I want a sticky block that follows the content while scrolling with the page, and stays in place even when the window is resized. I know this can ...

jquerycss

Attempting to adjust table size in MPDF to fill the available height

I'm currently utilizing MPDF in order to create a PDF document from an HTML page that includes a table. My goal is to have the table expand to fill up the remaining space on the page. Here is the specific table I am working with: I want the final el ...

phphtmlcsspdfmpdf

CSS overflowing issue causing inability to reach bottom of div with scroll bars not functioning as anticipated

My objective is to create a layout featuring a sticky header and left sidebar, with a non-sticky DashboardBody (the green-bordered box) that can be scrolled through. When scrolling, I want the content at the top to disappear "under" the sticky header. The ...

cssreactjsflexboxmaterial-uistyled-components

Is it possible to scroll only a portion of a div element without relying on absolute positioning and when the

HTML: <div class="block"> <div class="header">Some text</div> <div class="content"> <p> Unique content goes here. </p> <p> More unique content for demonstration ...

htmlcss

Information extracted from the database without considering any line breaks

When data is stored in my MySQL database, the line breaks of the text input are preserved. However, when retrieving the data, the line breaks disappear and everything is displayed as one continuous string without any <br> tags. Any insights into why ...

phpmysqlhtml

Is it feasible to send a GET form to two separate views using two buttons?

On one view, I have a form that functions perfectly. http://myurl.com/myapp/filter_objects/?risk__worktask=1&craft=3 In another view, I need to export the filtered list to a PDF. Currently, I store the results in session and access the list from ther ...

htmldjangoformsget

What is the best way to create a dynamic textbox or label within a specific div class?

I need assistance with my dynamic asp.net page where I am generating labels and text boxes in a form. Is there a way to ensure that these elements are generated within a specific div class? Below are the relevant code snippets: for (int i = 0; i < cou ...

c#htmlcssasp.net