Bundle size - This is a fancy way of saying the file size of the JS files you’re loading on your webpage. The larger the file, the longer it takes to download it 🤯.
Now that we know what the potential issues are, let’s see what can be done to fix or prevent them. Basically, what we aim for is less render blocking and smaller bundle sizes; less files and smaller sizes.
When choosing a plugin (or even a theme) pay attention to what they are downloading and the file sizes. Check out below how to do that. If it loads multiple files and they are large in size, maybe that's not the best option.
Check all your plugins whether you use them or not. This may seem obvious, but I’ve seen a lot of people forget to remove an old plugin, they don’t use it, but it’s still active and loads some scripts and styles.
If you’re adding the file yourself and you’ve authored the script:
Make sure you minify it - this may save you a couple of kilobytes. (do a quick search to find a minifier)
Add the scripts to the page footer instead of header.
If you’re using WordPress
wp_enqueue_scriptfunction, make sure to add the 5th parameter as
true. For example:
wp_enqueue_script( 'my-plugin-script', plugins_url( 'js/bundle.js', __FILE__ ), array(), MY_PLUGIN_VERSION, true );
- Also you can add
deferattribute to the script tag - this means that script execution will be deferred until the document is parsed. For example:
<script src="/js/bundle.js" defer></script>
jQuery - if your theme doesn't use and therefore doesn't load jQuery from a CDN or from your own server and some plugins do - try finding an alternative to those plugins (maybe). Chances are these plugins depend only on a small part of jQuery but the library is fully loaded (at least some 30KB), so replacing them will save you those 30Kbs out of the box.
When it comes to CSS there isn't much that can be done easily, however I have a couple of points to pay attention to:
- If you're the author of a CSS file, make sure you don't have unused or duplicate rules. May sound obvious but believe me that happens - especially if you have a large CSS file with tons of rules.
- Minifying may help save some bytes here and there. (do a quick search to find a minifier).
- Load only necessary CSS on page load, This may be hard to do - but I think there are cases when this can be done easily and help quite a bit.
Let's say you're styling your website's footer, you had some fancy ideas and implemented it successfully. Let's say your CSS for the footer is 4Kb. You could append it to a stylesheet that's already being loaded and you have a cool-looking footer now and stylesheet that's 4Kb bigger.
What you could do instead of appending it to your
style.css is to create a new file
footer.css and load it right before the footer (or even after for that matter).
<footer id="my-fancy-footer" class="footers-are-cool"> <!-- A lot of tags and content --> <p>© 2042 All rights reserved.</p> </footer> <link href="/footer.css" rel="stylesheet">
Check loaded resources
You can do it by checking the developer tools.
- Open developer tools and go to Network tab, on Firefox -> Tools -> Web Developer -> Network or
- Click to reload the page
- Filter by resource type by clicking on the buttons: JS | CSS.
- You will see all the filtered resources, have a look and see what's being loaded and their sizes.
- Transferred: this is the actual bytes that were transferred compressed
- Size: this the size of the uncompressed file.
What we're mostly interested in is the Transferred bytes, because that's the actual size your user has to download.
Hope this was useful and you can use these tips on your website to speed it up. If you're interested check out the previous article on website performance optimization tips about images.