This is the second article in the series of website performance optimization tips, this one is about JavaScript and CSS.

JavaScript

Nowadays JavaScript is everywhere and we use it on our websites more and more. It’s not bad, however we need to be able to do it properly. There are 2 main instances when JavaScript can affect your website speed:

  1. Render blocking - When a webpage is being rendered, it has to stop rendering the rest of the page to load the JavaScript, by default. So, if you have "many" render blocking JS files, you’re blocking the rendering "many" times.

  2. 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.

Most of the time JavaScript is added to your page by plugins or the theme you’re using - meaning you’re not authoring the scripts and not adding them to your page. In such cases:

  1. 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.

  2. Some plugins load their scripts on all your pages while they are necessary for specific types of pages. An example can be a contact form plugin, they need to load a JavaScript file, but only in pages where you have a form - no need to download the script for contact form validation on page where there's no contact form, right? Most of the time plugin developers can't control that as they have no idea where and how you're going to use them, so they'll give you an option to "deregister" the scripts and stop loading them. Check out the plugin documentation or contact the developer if you find such a case.

  3. 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:

  1. Make sure you minify it - this may save you a couple of kilobytes. (do a quick search to find a minifier)

  2. Add the scripts to the page footer instead of header.
    If you’re using WordPress wp_enqueue_script function, 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 );
  1. Also you can add defer attribute 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.

  • Using the same logic, if you're writing a "small" script, do it in plain JavaScript and do not load a whole library if you can.

CSS

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:

  1. As for JavaScript, here as well 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.
  2. 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.
  3. Minifying may help save some bytes here and there. (do a quick search to find a minifier).
  4. 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>&copy; 2042 All rights reserved.</p>
</footer>
<link href="/footer.css" rel="stylesheet">

Check loaded resources

You can do it by checking the developer tools.

  1. Open developer tools and go to Network tab, on Firefox -> Tools -> Web Developer -> Network or cmd+option+e
  2. Click to reload the page
  3. Filter by resource type by clicking on the buttons: JS | CSS.
  4. You will see all the filtered resources, have a look and see what's being loaded and their sizes.

devtools

In the example image from dinomatic.com there's a single JavaScript file and 2 CSS files one of the is the fonts being downloaded from Google. Pay attention to sizes, there are 2 columns for that:

  • 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.