What is JavaScript SEO?

JavaScript SEO is how you optimize a website’s Javascript for search engines to prevent the programming language scripts from hampering the organic performance of the site. 

JavaScript is a program that is popular among developers as it allows them to be exceptionally creative when building interactive web pages. 

However, if you speak to an SEO about JavaScript, they often have the polar opposite opinion, as JavaScript is renowned for negatively impacting a site’s organic performance. 

Despite the conflicting opinions from SEO and developers, it is possible for JavaScript to be used on a page without having a drastic impact on performance. 

In this article, we will be providing you with various waysSEOs and developers can work together to optimise the scripts and achieve a highly successful website that uses JavaScript.

How to troubleshoot your JavaScript?

There are many ways and tools you can debug and diagnose your website’s JavaScript performance from Chrome DevTools to a site search. 

How to know if Google can render your JavaScript

A great way to see if Google is struggling to render a website’s page is using Google’s Mobile-Friendly Testing Tool and Google Search Console’s URL inspection tool. Both tools will allow you to see what elements and content Googlebot is choosing to crawl and render in comparison to what the user sees.  

You can also use DevTools by right-clicking on the page and then going to inspect. This will allow you to see the page’s rendered DOM after all scripts have been parsed by the browser. This can then be used to cross-reference with Google Search Consoles rendered HTML to see if there are any discrepancies. 

How to check if your website is caching? 

There are multiple ways to see if your website is utilising browser caching. However, the most reliable method is using DevTools. If you open your website with DevTools and navigate to dev tools settings in the network section, you can disable caching. This will enable you to see what the page looks like with and without cache to determine if there are any differences. 

Another way to check your website’s browser caching is by running a lighthouse report in DevTools, which will list all resources not leveraging browser caching. 

How to identify render blocking JavaScript? 

The best way to discover what JavaScript resources are causing render blocking is to run a lighthouse report for your website. This report will highlight what resources are render blocked, such as CSS and JavaScript and how much time is being wasted on each of the scripts. 

Typically speaking, if your website has JavaScript in the headers without defer attributes, it’s likely these scripts will be blocking the page’s render.

How to know what JavaScript isn’t being used on your website? 

The most common way to identify which JavaScript files on your website are not being used is by running a dev tools lighthouse report. This will tell you on a page-level what JavaScript resources are not being used. 

Another way to check this on a page level is in the dev tools coverage tab. When looking at the line by line breakdown view, you’ll be able to see how much of a resource has been used by the browser on the page with a visual representation. 

How to troubleshoot for web workers? 

Web workers can help improve site speed for websites that use a lot of JavaScript for rendering the page. They help reduce the strain on the device by performing tasks with other threads, rather than using a single main thread for all JavaScript. 

The best way to see if your website is already using a dedicated web worker is by navigating to the dev tools sources tab when on your website, and it should be stated in the code tree or through the Application tab under ‘Service Workers’.

How to know if your website should move to server side rendering? 

There are multiple reasons to consider moving your website from client side rendering to server side. However, it’s even more important to do this when search engines are struggling to crawl and render your website. This usually occurs when your website is JavaScript-heavy or when JavaScript is disabled in dev tools and no content on the page is loaded. It’s also highly likely that, for pages with no content loaded when JavaScript is disabled, these won’t be within Google’s index. It’s then likely you won’t see them when completing a site search. 

Moving your website to server side rendering should help with search engines crawling. It can also help render the JavaScript resources, with the goal of the page being indexed. 

It’s likely the website’s pages peed improves, as fewer resources have to be loaded and the browser does not have to parse JavaScript to render content.

How to optimise your site’s JavaScript?

1. Efficient browser caching

If your JavaScript is currently being rendered on the client-side, it can take a while for this to happen in comparison to server-side rendering. This is why having an efficient browser cache is key to optimising your JavaScript for page speed.

Once a user has visited the site and loaded all the pages on their device, the resources that have been cached locally will load quicker when they revisit the site as they no longer require requests from the server.

2. Eliminate render blocking 

When you run a page speed or core web vital test in lighthouse, a common recommendation is to remove render blocking JavaScript files with the offending scripts identified. When a script is blocking a page from being rendered, it is slowing a page’s load speed and hampering the page’s FID scores. 

One way to combat render blocking is minifying the highlight JavaScript files, this is essentially removing any white space or code comments. Another way to reduce this would be to inline the JavaScript resources that are critical or defer/asynchronously load any non-critical scripts located below the fold. 

3. Remove unnecessary/unused Javascript

Sitebulb is a great way to diagnose which JavaScript resources are not being used sitewide and are contributing to code bloat. This can then be used to inform your developers so they can conduct further analysis to determine if the offending scripts can be removed.

This helps to eliminate any unnecessary JavaScript files located on the site using resources from search engines bots as there will no longer be additional HTTP requests to crawl and index the particular scripts. 

4. Implement web workers

Web workers are a great way to process a website’s main thread of JavaScript files by using the web workers to run a named specific web content script in the background which helps to reduce the number of requests in the DOM. 

5. Server side rendering 

A common reason why a search engine struggles or is slow to render JavaScript resources on a web page is sometimes due to using client side rendering. This is when the page’s scripts are rendered locally in the browser. In contrast, server side rendering is when all the scripts are processed and rendered at the server, allowing for the fully rendered version of the page to be sent to the client, significantly reducing the load time. 

It’s worth highlighting that server side rendering is more expensive in comparison to client side rendering, which could be a contributing factor to why businesses may not choose this mention of rendering for their site. 

Key Takeaways

Overall JavaScript shouldn’t be seen as an enemy of SEO. Instead, SEO should work alongside developers in a staging environment so plenty of testing and analysis can be conducted on the site’s JavaScript. This will determine if any further optimisations are required prior to the launch to help mitigate any risk.