- Dropdown ‘hamburger’ menus, showing or hiding certain information
- Carousel elements and horizontal scrolling
- Mouse-over and hover effects
- Playing videos and audio on a web page
- Creating animations, parallax elements and more
To understand how JS affects SEO, it’s important to understand what Googlebot does when it crawls a web page. The 3 steps it takes are; crawl, render and index.
Firstly, Googlebot has a list of URLs in a queue. It crawls these pages one by one and the crawler makes a GET request to the server, which sends the HTML document.
Next, Google determines what resources are needed to render the content of the page, usually, this only needs the static HTML to be crawled, not any linked CSS or JS. This helps reduce the number of resources Google needs, as there are hundreds of trillions of web pages!
Finally, after at least some of the JS has been rendered, the page can be indexed.
How to inspect JS load times on your site
But, to identify the specifics and which elements are having a direct impact on loading times, you need to use a waterfall graph, such as the network report on Google Dev Tools.
From here, you know what elements need to be looked into and depending on the purpose of the script, whether its first/third party or above the fold, you can take the right action to optimize the JS and speed up its performance.
That being said, every website needs to use at least some elements of JS, and there are multiple ways you can speed up its load times.
The defer value can be added to JS scripts so that it is executed after the document has been parsed, however, this only works with external scripts, when the src attribute is indicated in the <script> tag.
This declares to web browsers that the script will not create content, so it can parse the rest of the page. This means that when using the defer attribute, the JS file does not cause render-blocking to the rest of the page.
The defer attribute can only be used on external scripts, and it cannot be applied to inline code, this is because the defer attribute is similar to an asynchronous process, so web browsers can move to another task even when the first isn’t completed.
Minification of JS code is the process of removing unnecessary characters from the code, without impacting its function. This involves removing any comments, semicolons and whitespaces as well as using shorter names for functions and variables.
Certain third party elements, such as visual tracking software can have a significant increase in load times, and if that data is no longer needed, then remove the tracking code!
When you, or developers, are making a significant design change to the website (such as an interactive map) it will save you countless hours to consider load times beforehand, and make the element load as fast as possible before implementing it on the website.
This report is super helpful, especially if you have been optimizing JS to see the actual impact it is having on Googlebot.
- If you don’t need a certain JS file on your site – remove it!
- If you can, defer third party JS as much as possible.
- Minify & delay execution of first-party JS without breaking functionality.
- Test everything on a staging site first!
But get out there, use a staging site, and see what you can do to make those pesky JS files load quicker!