Dynamic rendering is a technique used to improve the search engine optimization (SEO) of a website that relies heavily on JavaScript.
It involves serving different versions of a web page to different types of users (e.g. search engines and human users) in order to provide a better user experience and improve the chances of the page being indexed and ranked by search engines.
Ever since Google announced dynamic serving many JavaScript-heavy websites have all been considering it. But what exactly is it?
Before we can explain what it is, we first need to fully understand JavaScript websites. Below is an example of a JavaScript-heavy website, where all the content becomes invisible as soon as you disable JavaScript.
The simplest way to understand JavaScript is by thinking of food, yes food! JavaScript off is like purchasing a ready-made meal which only requires 10 minutes in the oven to cook, but your oven is broken, meaning you are unable to cook your meal. Whereas JavaScript on, your oven is fully working and you are able to cook your food.
JavaScript websites are rendered on your computer, they are not sent by the server-rendered. Your computer does all the hard work of building the page. Therefore, if you disable the primary tool ‘JavaScript’ it cannot build your page hence you are left with a blank website.
Why is dynamic rendering important for SEO?
- Search engines have traditionally had difficulty crawling and indexing JavaScript-heavy websites.
- Dynamic rendering allows a website to provide a pre-rendered version of a page to search engines, making it easier for them to crawl and index the content.
Search engines such as Google can and do render JavaScript websites, but they usually choose not to do this. Why? rendering a website requires x 1,000 if not more resources than crawling a plain HTML website. To put that into perspective, if the internet only had 100,000,000,000 pages and Google had to render every single one of them, it would be equivalent of crawling 10,000,000,000,000 pages. This isn’t very practical for search engines, so they don’t do it!, therefore in SEO it is always advised to avoid using JavaScript.
Although as mentioned before Google can render JavaScript websites, they won’t do it often or frequent enough. This means new content can take a while to be indexed and large websites will often find not all of their pages are ever indexed. This is because Google will only render JavaScript websites whenever they have spare resources which means today’s news might not be seen until next week for Googlebot, significantly impacting time to market.
So how can you have a JavaScript-heavy websites that’s 100% Google friendly? dynamic rendering.
So how does dynamic rendering work?
- Dynamic rendering typically involves using a headless browser to pre-render a web page on the server, and then serving the pre-rendered version to search engines.
- The pre-rendered version of the page will have all the necessary HTML and CSS, but will not include any of the JavaScript, thus making it more crawlable.
- Human users will continue to see the fully dynamic version of the page, which includes all the JavaScript and interactivity.
In other words, dynamic rendering is serving users and Google different pages in order to satisfy both requirements. For example, a user needs the JavaScript website in order to interact with the website. Whereas Google doesn’t interact with websites therefore serving a static HTML page with all the content visible without executing JavaScript is all that Google requires.
This process been broken down into a diagram
The static website is exactly the same website as the dynamic JavaScript website. The only difference, you do not need JavaScript enabled in order to see all the content. Going back to our previous example, this is like ordering food to be delivered to your house. It doesn’t matter if your oven/cooker is broken, you are still able to eat, which is the main objective.
Technical implementation of dynamic rendering
In order to implement dynamic rendering on your website, there are some key elements you must take into consideration.
Dynamically pre-rendering a JavaScript website and serving it to Google as a static page takes a long time. This can take anything from 5-10 seconds (time to first byte) which will make your website almost uncrawlable for bots. Therefore this option is NOT recommended.
To solve this, we must introduce a caching layer within our dynamic rendering infrastructure.
Pre-rendered (static HTML pages) pages should be cached. This means that the page has already been built in the background, therefore does not need to be re-rendered on the fly when Google requests it.
Cached pages can be served to Google in under 200ms, whereas doing it on the fly will take anything from 5 seconds at best to 10+ seconds.
Note: we have seen large websites lose over 50% of their organic traffic due to pre-rendering on the fly, resulting in Google not being able to access/crawl the website properly. We can’t stress enough how important it is to not do this! Remember, high time to first byte signals to Google that your servers are unable to handle the traffic, which causes Google to slow down. Imagine time to first byte that’s 1,000%+ over Google’s recommended 200ms limit!
I will not go into the details of caching and how it all works in the background, however if it is something you are interested in. Please do contact us and if we gain enough interest we can go into comprehensive detail.
Conclusion:
- Dynamic rendering can be an effective technique for improving the SEO of JavaScript-heavy websites.
- By serving a pre-rendered version of a web page to search engines and a fully dynamic version to human users, it can improve the chances of the page being indexed and ranked by search engines, while also providing a better user experience.
