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

$PHP_SELF will be executed immediately upon the page loading

I recently designed an HTML page for inputting data into a MySQL database. In this setup, I've integrated PHP scripting directly within the HTML code. Take a look at the snippet below, <html> <head> </head> <body> <?php / ...

phpmysqlhtml

php Use cURL and the DOM to extract content with specified CSS styling

Unclear in the title, I want to copy all content from a specific div on an existing webpage (not owned by me). The code successfully extracts the content. Extractor code: // Get Data $curl_handle=curl_init(); curl_setopt($c ...

phpjqueryhtmlcsscurl

Translate a portion of a painting by utilizing context.putImageData()

I am attempting to gradually fill a canvas with pieces of the original image. To achieve this, I need each square of the image to be filled in iteratively on the canvas. To optimize performance, my approach involves rendering the original image onto an of ...

javascripthtmlcanvas

The el-dialog is functioning properly, however, I am looking to add CSS that will animate it to open

I've set up a dialog to open on button click, and it's functioning correctly. My goal is to have the dialog open from the bottom with a height of 300px, show the contents inside it, and then hide when I click outside or inside any element. Here ...

htmlcsselement-ui

The background-size is set to cover, but it does not completely cover the

New to HTML here, I'm attempting to utilize background-size: cover; to ensure an image covers the entire screen, but I am still noticing a gap. The issue may be related to this section: body { background-image: url("hexagon.gif"); ...

htmlcss

Error: The property 'length' cannot be read from an undefined parent causing Uncaught TypeError

Hey there, take a look at this cool stuff http://jsfiddle.net/J9Tza/ <form class="validation"> <div> <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" r ...

javascriptjqueryhtmlforms

setting the child div's margin in relation to its parent div

Here is my HTML: <div class='mainDiv'> <div class='subDiv'></div> </div> This is the corresponding CSS code: .mainDiv { margin-top: 200px; width: 700px; height: 800px; background-color: red ...

htmlcssmargin

Ensuring Quick Response Times When Incorporating Personalized Text Styles into Twitter Bootstrap

Currently, I am experimenting with incorporating my custom class titled "article-title" which is significantly larger than the default H1 font size in Twitter Bootstrap. Can someone provide guidance on the necessary steps to ensure responsiveness? My goal ...

csstwitter-bootstrapresponsive-design

Tips on linking a condition-reaction to document.querySelector

I am struggling to connect the condition-reactions to the input id of passid. I am unsure where to place the document.querySelector() method in order to link the indexed conditions correctly. Below is the code snippet: <!doctype html> <html> ...

javascripthtmlmethodsconditional-statements

Implementing a two-column infinite scrolling feature using ISCroll

I am looking to incorporate multi-column infinite scrolling using IScroll infinite scrolling. I want the content of my HTML to appear as follows: <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> ...

javascripthtmlcssinfinite-scrolliscroll

What is the most effective method for developing and hosting a Python web application that can securely collect user input and store it in SQL databases?

Currently, I am embarking on a project to streamline data entry for myself. I have SQL tables set up in an Azure database, and I can effortlessly write Python code to add data to them. However, my next endeavor is to develop a web application that allows ...

pythonhtmlsqlflaskweb-applications

Optimal approaches for managing form processing duties

What is the most effective approach to handle form processing? In my situation, I typically follow these steps: If the user has not submitted the form, Display the form Otherwise, If there are any form errors, Show error messages Display the form ...

phphtmlforms

The vertical dimension of an element does not increase

Currently, I am working on a webpage with a header, page content, and footer sections. The issue I'm facing is that I set the page's height to height :auto;, but it's not functioning as expected. I actually need the page to automatically ex ...

htmlcssheight

Applying identical values to multiple properties (CSS)

Can we assign a single value to multiple CSS properties at once? border-left, border-right: 1px solid #E2E2E2; Similar to how we can with selectors? .wrapper, .maindiv { ... } ...

css

Every time I employ window.location, the Iframe becomes nested

I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...

phpjavascriptjqueryhtmliframe

Ensuring Form Validation in Symfony 2.0 View

I am currently using Symfony 2.0 and I have a view file called test.html.php which includes a form: <form action="" method="post" rel=""> <input type="hidden" name="action" value="test" /> <input name="myinput" type="text" value="" ...

phpjqueryhtmlajaxsymfony

Is it possible to verify .0 with regular expressions?

In my project, I have a field that requires whole numbers only. To validate this, I used a regex validation /^\d{1,3}$/ which successfully validates whole number entry and rejects decimal points starting from .1. However, I encountered an issue where ...

htmlangularjsregextypescript

Tips for creating square corner images within a bootstrap card group

How can I create a square image gallery using Bootstrap 4 cards? <div class="card-group flex-wrap"> <div class="card border-dark"> <img class="card-img-top" src="h ...

htmlcssbootstrap-4

I am currently dedicated to enhancing my background transitions and experimenting with creating smooth fade-ins

I'm almost done with my Weather Forecast page for the FCC challenge. However, I'm not satisfied with how the code for swapping the background works. It just doesn't feel right to me. Unfortunately, I can't figure out how to fix it. Addi ...

javascriptjqueryhtmlcss

How to display umlauts (åäö) using Verdana font in Internet Explorer versions 8 and 9

Encountering a strange issue on certain pages where the rendering of umlauts (åäö) appears incorrect in IE8 and IE9 at times. The encoding is utf-8 (and most of the site functions correctly, so I know it's correct). I have attempted to isolate the ...

htmlinternet-explorer-8fontsinternet-explorer-9