By Tanya Nam
Almost every site you see on the modern web uses Javascript. Javascript makes sites interactive, personalizable, and provides a much richer user experience than just plain HTML. However, Javascript tends to make pages slower, because of extra code and resources it requires to load. As your website grows in size, the amount of Javascript code, its complexity and dependencies grow as well. This can result in poor performance, a sluggish website, and a poor user experience.
By default, web pages load and execute Javascript in your browser. This is called client-side rendering. An alternative to that is server-side rendering (SSR), which executes Javascript on the server and then sends a flat HTML response to the browser.
SSR removes the need to load and process Javascript in the browser, and improves certain performance metrics, such as First Paint and First Contentful Paint. However, it does not magically make pages lighting fast: generating pages on the server takes time, which can often result in a slower Time to First Byte (TTFB).
How Do I Know If My Site Should Use SSR or Client-Side Rendering?
Most Javascript frameworks (Angular, Vue, React, etc.) support SSR. However, just because SSR is available doesn’t mean that it is best for your website.
For small to medium sites or sites that focus primarily on content, adopting and using an SSR solution is fairly easy. On the other hand, large enterprise applications struggle with figuring out how to execute SSR in a cost-effective way.
The biggest hurdles developers face with SSR revolve around complexity. Some common issues include:
For a lot of companies and engineering teams SSR is still a massive undertaking, and it’s hard to decide whether it is worth doing.
We at Botify built a solution that addresses SEO performance issues, using dynamic rendering, quality control and caching. It’s called Speedworkers.
Dynamic Rendering: Taking care of bots
Similar to server-side rendering, dynamic rendering will pre-render and serve flat HTML content only to search bots.
This is an enormous benefit for SEO for many reasons:
At the same time, nothing changes for your end users: they are getting the same content with Javascript enabled in the browser. Of course, it’s best to optimize load time for users as well, but it’s a much easier task than balancing SSR and CSR.
Using dynamic rendering and SpeedWorkers, we remove all the complexity and need for SSR. This is because our solution involves:
SpeedWorkers also saves you on infrastructure costs, because a huge chunk of bot traffic is now taken on by SpeedWorkers, instead of your servers.
Results you can expect
SpeedWorkers’ target delivery time for bots is under 300ms. On top of that, our cache efficiency usually results in even higher speed gains.
Right after launching SpeedWorkers, you can expect an increase in page delivery speed. As pages get faster, bots start crawling your site more efficiently, getting to more content.
Crawl rate of strategic pages will also increase, because search bots will get deeper and wider into your site structure. If you’re an E-Commerce site, and improve crawl ratio of product detail pages, there’s a great chance these pages will get indexed and ranked. As a result, more of your product inventory will be visible to users.
Another benefit of improved speed will be an increase in active pages that drive organic traffic.
Finally, the more pages get indexed, ranked and receive clicks, the more incremental revenue they can produce.
These are pure SEO benefits. We also know that SpeedWorkers eliminates the need to invest in engineering resources, and saves in infrastructure costs, because all of the traffic from bots is going to SpeedWorkers, instead of your servers. We host and maintain it, so you don’t have to worry.
SSR has definite benefits over CSR. However, SSR can be complex, confusing and costly. Dynamic rendering is a great alternative for SEO – get in touch for a free custom demo of SpeedWorkers, and visualize the benefits for your website.
——-
Resources:
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
https://github.com/airbnb/hypernova
https://www.moovweb.com/post/server-side-rendering-ecommerce-react-website