AuthorNicole Bingham
LinkedIn
Best Ways to Optimise the JavaScript on Your Site to Improve Page Load
A big factor when it comes to site speed is Javascript. Most of the websites that we work on will have unused Javascript or large Javascript files that are served on all pages templates. This is commonly seen on Shopify stores, for example, Javascript that may only be needed on the blog is also getting served on the homepage and the browser is having to load these files before the page is fully loaded, therefore impacting the whole load time of a site.
There are many ways to fix or improve the Javascript that is on your site. The following points will highlight the best way to optimise the JavaScript on your site, which will improve your overall page load.
1) Code Splitting
Many sites will combine all their JavaScript into one large file, this file will contain the script for every page template on the site even if it’s not needed or only used on a small percentage of the site and will increase page load. A way to fix this is code splitting.
Code splitting is the process of splitting code into different bundles or components, which can then be loaded when needed. By splitting the JavaScript on your site into different files, a browser will only have to load the Javascript that is critical to the page and not have to load extra bytes that are not needed.
2) Bloated JavaScript
Bloated JavaScript is JavaScript that is seen as too long, slow or unnecessary. JavaScript on your site should be audited to see what is not needed and removed. A lot of the time Javascript that is not needed on the site is still left there. By deleting unwanted Javascript, it will reduce the file size and load time. Deleted dead code is known as Tree Shaking.
There are many useful tools out there that can help you do this, such as Webpack and Rollup. These tools will help remove dead code.
3) Minify JavaScript
Minifying JavaScript will essentially compress the file size so that it is smaller and quicker to load. This will remove any unnecessary characters from the JavaScript file, for example, whitespace, comments and semicolons. It will also have shorter functions.
The process of minifying JavaScript files will often be called “Uglify JS”. Uglify JS is a JavaScript library for minifying JavaScript files, as mentioned above, it will compress the file above whitespaces and unnecessary characters and comments, this makes the code hard to read for humans – hence ugly
P.S. My colleague, Louise, has written this super helpful blog to share her top 10 JavaScript minification tools.
4) Google Tag Manager
External JavaScript can be added to Google Tag Manager, this will mean that the browser will only have to make one request to GTM rather than requisition the individual JavaScript files.
The fewer requests a browser has to make, the quicker the page will load. This is particularly useful on sites that use a lot of external apps and plugins, such as Shopify sites.
Looking for more advice on how to increase your site speed? Read my other blog about how to optimise images for site speed.
