JavaScript & CSS: A Complicated Issue
JavaScript and CSS are a fantastic way to make your site look beautiful and come alive. But, it can also really slow down your site loading time if you don’t manage it correctly.
There are a few different ways you can handle unused and render-blocking scripts: Unload, async, defer.
Unloading JavaScript & CSS
Sometimes, plugins or themes will load a bunch of JavaScript and CSS files that aren’t actually being used on the page your visiting. In this case, unloading those files will help speed up your page load time.
If you want to unload unused JavaScript or CSS, the Asset CleanUp plugin is a great way to go. It allows you to either unload files on specific pages, or do site wide unloads.
For example: Contact Form 7 loads CSS and JavaScript files on every single page, even if a form isn’t actually on that page. Using the Asset Cleanup plugin, you can tell your website to only load Contact Form 7 files on the pages where a contact form is actually used.
The image here shows what the Asset CleanUp plugin dashboard looks like in the CSS/JS Manager. Here you can pick which scripts you wish to unload.
If you have no idea which ones need to be unloaded, unload them one at a time and check the front end to make sure it didn’t break anything. If you use cashing on your website, make sure to clear your cash each time you check to see if unloading a script broke anything.
Some scripts will be a little more obvious than others. If you’re using WooCommerce elements on your homepage, you probably shouldn’t unload any of those. Over time, you’ll be able to identify unused scripts a lot faster and won’t have to test them one at a time.
Async & Defer (Not for beginners)
If you can’t fully unload a JavaScript or CSS file, but it’s render blocking, you can async or defer it by simply adding the async or defer tag in the script. This is commonly used in embedded chats. See the example below:
<!– Start of HubSpot Embed Code –>
<script type=”text/javascript” id=”hs-script-loader” async src=”/hubspot.embed.link”></script>
<!– End of HubSpot Embed Code –>
Async
Downloads your JavaScript while the HTML document is being parsed, but waits until the HTML document has finished to execute it.
Defer
Waits until the HTML document has been parsed before downloading and running external JavaScript. Older browsers might not support defer.