So What’s All The Fuss About?

Back between June to August last year Google released various incremental algorithm updates in the way it measures website performance and user experience. Many factors are at play here but today we’re just looking at a particular part of the puzzle.

What Is Javascript And How Does Is Affect My Site?

Javascript is a fundamental part of all websites, providing key functionality for interactions to many elements of your website. This involves things like changing how content is displayed, to how Google and other platforms track user visits across your website using Cookies.

If you are interested in learning more about Javascript and what it can do, check out this link to MDN’s knowledge based resources for more details.

What Does Google Actually Want?

Right now Google is thinking specifically about your users and the experience your website provides. If it loads slowly, well… that’s not good 🥱. Ideally, we want all web pages to be loading under the 3 second mark. Anything that slows the page from loading also isn’t good and should be on the list of ‘undesirable’.

Otherwise, you can expect a fun conversation with your marketing team when they notice your users bouncing right off the page like a ball off of a ping pong bat.

In order to achieve the desired results we need to go through the motions. This isn’t always attributed to how the website has been built, it could be for numerous reasons. One example could be the site being populated with media over time by multiple users and those users not compressing or correctly sizing the content they are uploading. Another could be the project changing hands between various developers etc.

Here Are Some Tips To Help.

This is more like a guideline checklists as every site is unique, but you should go through and check the boxes where appropriate ✔️.

First Things First, Let's Talk Tags.

It’s crazy how so many third-party tools still ask you to add their scripts to the top of your header.
This isn’t actually a requirement in most cases and it can cause an absolute nightmare when it comes to page load speed.

Without even looking at your website I’ll wager that most readers websites will be scratching their heads looking at the render blocking javascript dropown in their core web vitals results.

There are a lot of areas to go over and this is just the tip of the ice berg. But starting with efficient Javascript tag loading is always a good shout.

One way of preventing Javascript from blocking the rendering of the web page is to either defer it’s loading or to load the resource asynchronously. Let’s learn more in the next section.

Next Let's Look At How You're Loading Your Javascript.

Remember, some scripts don’t always need to be fired right off the bat. You can actually delay some scripts from firing right away to avoid impact to your core web vitals.

I’m only explaining the theory here not supplying the code. But essentially, you want to load your Javascript & jQuery efficiently. This means asynchronously loading or defering Javascript where possible and then delaying script load so that your page fully loads without being held up by JS.

In the image associated with this section, if you review the tag references you will see the slight difference. Both methods actually load asynchronously, the main difference is that script that is deferred gets loaded when the document parsing is completed. Asynchronous Javascript is loaded immediately, it just doesn’t impact other scripts from loading at the same time, hence it’s not render blocking.

Are They Actually Needed?

As a developer I spend a lot of time cleaning, investigating, repairing and updating other people’s websites.

The main thing to remember here is that good housekeeping and maintenance goes a long way. It is critical to the longevity, security and performance of your online website.

If you have any plugins, scripts or code that aren’t being used then it needs to be carefully removed. Each plugin loads several files and each snippet of Javascript is another impact to your load speed. Less is more guys!

Minification and combination is key with Javascript. Minified files take less time for the browser to read and parse and combined JS files means less resource requests. Be kind to your browser.

What Does All That Mean?

Loading script files in the footer and delaying inline scripts from loading for the first 3 seconds allows for the rest of the page to load before the scripts execute.

By minifying and combining script files we are reducing the amount of calls for files to be returned to the browser.

CDN’s (content delivery networks) cache copies of static resources so that they can be loaded more efficiently to your users Geographic location. Again improving speed.

Finally, any tracking scripts, old scripts or plugins you don’t need should be removed. You should always try and code in whatever you can. It all helps.

Nick Rowe – Lead Developer