CLS

Hi,

The notification bar is coded in a way that allows it to be collapsable (aka hidden) which requires checking localStorage to see if the element is closed or not which has to be done with javascript. I could code it to use cookies so you can check cookies with PHP but because all WordPress sites should be cached it’s impossible to make it work correctly.

So the way it works is the notification bar is hidden on page load, the javascript checks the localStorage to see if the element should be visible and if so it displays it by adding a class that removes the hidden CSS.

Because your notification is so large with an image, heading, etc – it’s really obvious when the element loads causing a significant CLS issue (usually it’s not a problem). That said, I checked the plugin code and the script does wait for DOMContentLoaded to remove the hidden class on the notifcation bar. I’m going to update my script so that it checks the localStorage and adds a classname to the HTML tag instead, this way the classname should be added before the notice even renders to ensure it’s visible right away.

That said, I see that on your site you are adding the defer tag to the script which will cause the script to wait for the DOM to load anyway, so you will need to remove that as well:

<script src="https://calnewport.com/wp-content/plugins/easy-notification-bar/assets/js/front.js?ver=1.5" id="easy-notification-bar-js" defer></script>

This is what I see on your site – notice the “defer” attribute.

I will work on the 1.5.1 update with the modified JS.

But you should also preload the image of the book that’s added in the notification bar using code added in the wp_head hook like such:

add_action( 'wp_head', function() {
	?>
	<link rel="preload" as="image"  fetchpriority="high">
	<?php
} );

Thank you for bringing this to my attention!

AJ

Ok, I just finished updating the code! Version 1.6 will be available in your WP dashboard at any moment.

I’ve updated the javascript so it’s added inline and runs before the element is rendered which will add a classname to the HTML element “easy-notification-bar-is-disabled” this way it doesn’t wait for the DOM to be loaded and thus prevent CLS issues.

With these changes you can now delay the JS execution of the plugin’s front.js file if you want. I’ve also updated the code so the script has the defer tag by default since it’s not needed right away anymore.

Also if the notice is hidden the plugin will remove all the elements from the DOM to further slim things down.

If you still have issues after updating to v1.6 please let me know! Make sure though that you’ve preloaded the image that’s in the notice though, as that will still make a difference – unless you add some inline CSS that loads before the notice that gives the image exact dimensions or an aspect ratio, this way even if it’s not loaded there will be an empty space with the same dimensions as the image.

• AJ

Thanks so much for getting right on this! And for you openness to look at and fix it.

I just updated the plugin and added the code into the functions.php file and it appears to be helping. “0” CLS now.

Thank you!

Awesome!

Thank you for the followup and also for reporting the issue ??