Tips for Optimising JavaScript-powered Websites

Rachel Costello
Rachel Costello

On 22nd July 2019 • 16 min read

Chapter 5: How to Test JavaScript Rendering for Your Site

Now that we know the main areas in which JavaScript can negatively impact websites in search, let’s explore some of the ways you can optimise your website and make sure it performs for both users and search engines.

Here are 5 key pieces of advice for optimising your JavaScript-powered website:

  1. Prioritise your most important content and resources.
  2. Provide options for clients that can’t render fully.
  3. Use clean URLs, links and markup.
  4. Reduce file transfer size.
  5. Enhance JavaScript performance.

 

Prioritise your most important content and resources

Sending JavaScript to the browser or search engine all at once in the initial request to be rendered client-side is a bad idea. This is a big ask even for users with higher-end devices and Google which has relatively sophisticated rendering capabilities.

Instead, focusing on the core content of the page, such as the above-the-fold, hero content and making sure that it is available first as a priority, is a much better strategy.

Prioritising the most important content on a page to load first can dramatically improve the user’s perception of load time.

Here are some solutions to look into for helping to prioritise key resources:

A critical resource is a resource that could block initial rendering of the page. The fewer of these resources, the less work for the browser, the CPU, and other resources.

Ilya Grigorik, Web Performance Engineer at Google

Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use async when the scripts in the page run independently from each other and depend on no other script on the page.

MDN Web Docs

Rather than copying bad examples from the history of native apps, where everything is delivered in one big lump, we should be doing a little with a little, then getting a little more and doing a little more, repeating until complete. Think about the things users are going to do when they first arrive, and deliver that. Especially consider those most-likely to arrive with empty caches.

Jake Archibald, Developer Advocate at Google
 

Provide options for clients that can’t render fully

As we’ve discussed earlier in this guide, not every client will be able to render fully. This is why it’s important to make sure that your pages are still usable without needing to be able to run the latest JavaScript features.

This process is referred to as graceful degradation, meaning that the website or application will fall back to a less complex experience if the client is unable to handle some of the latest JavaScript features.

It’s always a good idea to have your site degrade gracefully. This will help users enjoy your content even if their browser doesn’t have compatible JavaScript implementations. It will also help visitors with JavaScript disabled or off, as well as search engines that can’t execute JavaScript yet.

Google Webmaster Central Blog

Make sure your website works, caches and renders for the most basic browser, device or crawler, and has a baseline level of performance that works for everyone.

With regards to the discussion surrounding “JavaScript vs. SEO”, it should first be clearly stated that JavaScript is not “bad” per se. However, the use of JavaScript certainly increases the complexity in terms of search engines, as well as web performance optimisation.

Essentially, SEOs should ensure that there is a version of their website available that works without JavaScript. This could be achieved, for example, by using Puppeteer which is a Node library that can be used to control a headless Chrome browser. This browser could then be used to crawl either a JavaScript-heavy website or even a single page JavaScript application and as a result, generate pre-rendered content. 

As it currently stands, choosing to rely heavily on JavaScript should be carefully considered – it’s not impossible to rank JavaScript-powered sites, nor is it impossible to make them fast, however, be aware that it adds a great deal of complexity on many different levels, all of which needs to be dealt with!

Bastian Grimm, Director of Organic Search at Peak Ace AG

Graceful degradation doesn’t just benefit Google, it also helps other search engines like Bing that struggle with rendering.

The technology used on your website can sometimes prevent Bingbot from being able to find your content. Rich media (Flash, JavaScript, etc.) can lead to Bing not being able to crawl through navigation, or not see content embedded in a webpage. To avoid any issue, you should consider implementing a down-level experience which includes the same content elements and links as your rich version does. This will allow anyone (Bingbot) without rich media enabled to see and interact with your website.

Bing Webmaster Guidelines
 

Use clean URLs, links and markup

Each page should have a unique, indexable URL which shows its own content. JavaScript can complicate this, however, as it can be used to dynamically alter or update the content and links on a page which can cause confusion for search engines.

Make sure your website is using only clean links with the <a href> attribute so that they are discoverable and clear for search engines to follow and pass on signals to. Using <a> tags for links also helps people browsing with assistive technologies, not just search engine crawlers.

Martin Splitt at SEOkomm

Image source: sblum

This also applies to markup, so make sure key markup is structured clearly and displayed in the HTML where possible for search engines. This includes:

Check that these are in place using ‘Inspect’ in the browser.

Make sure URLs, links and markup aren’t served via JavaScript and that they’re clearly accessible in the HTML, so search engines can find and process them.

Here’s what Google’s Martin Splitt recommends for optimising web apps for search engines and users:

1. Use good URLs: URLs should be reliable, user-friendly and clean.

2. Use meaningful markup: Use clean links and clear page title, meta description and canonical tags.

3. Use the right HTTP status codes: Avoid soft 404s so Google can serve the right pages.

4. Use structured data: This will help search engines better understand your content.

5. Know the tools: Test your content with the Mobile-friendly Test, Structured Data Testing Tool and Google Search Console.

Martin Splitt, Developer Advocate at Google
 

Reduce file transfer size

Reducing the file size of a page and its resources where possible will improve the speed with which it can be rendered. You can do this by making sure that only the necessary JavaScript code is being shipped.

Some ways of reducing file size are:

To stay fast, only load JavaScript needed for the current page. Prioritize what a user will need and lazy-load the rest with code-splitting. This gives you the best chance at loading and getting interactive fast.

Learn how to audit and trim your JavaScript bundles. There’s a high chance you’re shipping full-libraries when you only need a fraction, polyfills for browsers that don’t need them, or duplicate code.

Addy Osmani, Engineering Manager at Google

Ship less code with a smaller file size so there is less for browsers and search engines to have to download and process.
 

Enhance JavaScript performance

JavaScript doesn’t have to dramatically decrease site speed; there are things you can do to optimise the performance of the JavaScript on your website. Enhancing JavaScript performance should be a focus topic for developers and SEOs alike going forwards. Here are some methods to potentially implement on your site:

PRPL pattern

Source: Google Web Fundamentals

Use methods such as caching, prefetching and preloading to make any necessary JavaScript code more performant and load faster.
 

In conclusion

SEOs and developers need to learn to work better together to get their websites discovered, crawled and indexed by search engines, and, therefore, seen by more users. Both departments have a lot of influence over the different aspects of this process and we share common goals of serving optimised websites that perform well for both search engine bots and humans.

The steps between publishing and ranking diagram

Source: Martin Splitt, FrontEnd Connect

JavaScript rendering and page loading can be an expensive, time-consuming process, but it can be tailored to either the user or search engine to help them achieve their main goals. For users, you can prioritise what they need immediately as they’re browsing to load first and increase perceived site speed. For search engines, you can provide alternative rendering methods such as server-side rendering to make sure they can access your core content despite their limited rendering capabilities.

The landscape of JavaScript is constantly evolving and we all need to do our part to keep up and learn more about it, for the sake of our websites’ health and performance.

SEOs need to stay ahead of the curve when it comes to JavaScript. This means a lot of research, experimentation, crunching data, etc. It also means being ready for the next big thing that probably dropped yesterday and you now need to adapt to, whether it’s Google finally updating its rendering browser or one of the countless JavaScript frameworks suddenly becoming popular among developers.

Bartosz Goralewicz, CEO of Onely

The best way to make sure your JavaScript-powered website or application performs as it should, is to conduct regular JavaScript audits looking at the key issues laid out in this guide. Keep crawling, monitoring and testing your website for rendering speed, blocked scripts and content differences between the unrendered and rendered content. This way you can keep on top of any issues that are putting a roadblock between users and search engines, and your website’s content.

Author

Rachel Costello
Rachel Costello

Rachel Costello is a Technical SEO & Content Manager at DeepCrawl. You'll most often find her writing and speaking about all things SEO.

Get the knowledge and inspiration you need to build a profitable business - straight to your inbox.