search

dobarkod / cookie-banner

JavaScript based cookie-info banner for complying with EU cookie law
MIT License
425 stars 85 forks source link

Script block above the fold on Google PageSpeed Insights #28

Closed lomanq closed 7 years ago

lomanq commented 9 years ago

Hi,

thank you for the amazing cookie banner script. I added the js file just before /body tag in this way, and it works very well. I use Wordpress.

Google PageSpeed Insights says that the script is blocking the rendering of above-the-fold ( http://i.imgur.com/z7njWxo.png ). I tried to load in async mode, but in this way the banner doesn't appear.

How can i resolve this problem?

Thanks. :)

zytzagoo commented 9 years ago

Can you create a jsfiddle (or similar, the point is to create a reduced test case) showing your way of doing async mode loading (and the banner then not appearing)?

lomanq commented 9 years ago

Thank you for the answer. I tried in this way: http://jsfiddle.net/o7cr4o6d/1/

If i tried in jsfiddle, with this async mode the banner appeared, but in wordpress it doesn't. Are there other way to load it?

zytzagoo commented 9 years ago

Cool, that's progress (kind of).

It suggests there might be some other scripts queued in WP that are causing conflicts (or even errors). Most likely from your theme and/or plugins. Are there any errors in the console when you try it in WP?

Yes, there are other ways to run/invoke the banner. Load the JS in a <script> tag without id="cookiebanner" (that way it will not auto-start). Then you can create a new Cookiebanner() "instance" yourself and call run() on it (for example from jQuery's ready() function or similar).

You'll just have to configure it completely using a JS object yourself -- see how the tests are done.

lomanq commented 9 years ago

It seems that there are no errors. Very interesting the way you suggested. So, i want to try last chance. I load the JS in script tag with async and remove the "id=cookiebanner". In this way Google PageSpeed is ok! Then how can i proceed ?

Sorry but i'm not a developer, can you update my jsfiddle with code to load new jQuery instance? http://jsfiddle.net/o7cr4o6d/2/

Thank you :)

zytzagoo commented 9 years ago

Something along the lines of http://jsfiddle.net/o7cr4o6d/3/ should hopefully work (once the reference to ../cookie-banner.js is working, obviously, and jQuery is loaded)