Fast websites not only enhance user experience, but are also likely to rank higher on search engines since speed is a ranking factor for Google.
Server side rendering (SSR) is a process you can use to render your website faster.
While JavaScript has long been used in web development, rendering JS content on a website has been known to negatively impact load times as well as page render speed. This issue affects SEO.
Developers and SEO experts prefer server-side rendering for two main reasons. Firstly, SSR delivers consistent SEO performance, and secondly, it offers a better user experience.
Server-Side Rendering (SSR) Explained
Rendering a web page can happen through a number of ways. One way is client-side rendering, where the user’s own browser completes the rendering. The other is dynamic rendering where the process is completed using a third-party server.
On single page websites (websites that fit on a single page) there is often a ton of JavaScript loaded into the webpage. JavaScript also controls what is displayed on a page. So instead of doing an entire page refresh, there are extra browser-to-server round trips that slow down page rendering.
Server-side rendering is when your own servers do the rendering instead of the user’s browser. Here, your server processes the JavaScript framework of the website and renders it to static HTML and CSS, so that the end-user’s browser doesn’t have to.
In SSR, two versions of a web page occur:
- First, you have the initial HTML
- Second, you have the rendered HTML or the direct object model (DOM).
The rendered HTML is what the end-user will be receiving. Google will only be able to read the rendered HTML, so all critical content and elements of your website can already be seen on the user’s end. This way, search engines can crawl, evaluate, and index it properly.
Let’s compare it to the more common way of rendering, which is client-side rendering. In CSR, the server sends a response to the client’s browser. Then the browser downloads the JavaScript and executes React. After a while, the page will become viewable and interactive.
In SSR, your initial request loads the page, layout, CSS, JavaScript and HTML content. The server will send ready-to-be-rendered HTML responses. The user’s browser immediately renders the page so it’s viewable, while also downloading the JavaScript. It then executes React for interactivity.
It takes more time for the user to view the page with client-side rendering. But the page will be viewable and interactive at the same time. In server-side rendering, the user can immediately view the page, but the interactivity will come later.
SSR is faster because your server has already converted the HTML for rendering whereas CSR needs more JS to be downloaded, which means there’s more JS to parse. Then there’s the content, which requires a second HTTP request to load. Finally there’s more JS to generate the template. The second request will happen only when the document is loaded.
The Pros of Server-Side Rendering
For internet marketing, server-side rendering is a good option for rendering JavaScript due to its speed. The quicker search engines like Google can crawl your pages, the better for your crawl budget. This will ultimately boost your website’s user experience.
Here are some benefits of using SSR.
- The initial page load is quicker.
- The end-user won’t experience any delay in loading time. Loading page flickers happen in client-side rendering (can be covered with a loading image) but don’t happen with SSR.
- SSR is great for digital marketing and search engine optimization (SEO) as your content is already present even before it loads on the user’s browser. It eliminates the burden of rendering JS off of Google bots. This saves time, and increases speed-related issues.
- Great for static sites or sites that are more text-based.
- You’re assured that all your page elements are rendering. Compare this to CSR, where you’re reliant on the client’s browser and its capacity or technology. There you risk large resources not getting processed, which can hinder rendering. Information might be missing, and some elements might fail to load resulting in a bad user experience.
The Cons of Server-Side Rendering
Like all things, there are drawbacks to SSR. For one thing, it is more costly since you’re using your own company’s server. Other drawbacks include:
- Frequent server-requests can cause bottlenecks with pages that are highly interactive.
- Overall there is slow page rendering in terms of interactivity. Although the user can immediately view the page, they may not be able to interact with it right away; not until React is done executing.
- Non-rich site interactions.
Which Sites Would Benefit from Server-Side Rendering?
The most obvious types of sites that would benefit are content publishing websites like Medium or the New York Times, as well as other sites that rely on referral traffic for their pages like Instagram, YouTube and Twitter. It’s because these websites or applications changes content often, and they require user interaction. What server-side rendering does is it allows the users to see updates right away.
Core Web Vitals and SSR
The Core Web Vitals are a set of metrics Google included in its Page Experience.
Core Web Vitals metrics measure performance aspects like users’ experience of interacting with a web page. The three important metrics are the LCP or Largest Contentful Paint, CLS or Cumulative Layout Shift, and FID or First Input Delay.
Let’s dive into these three and what makes SSR important to these metrics.
1. Largest Contentful Paint or LCP Metric
The LCP metric indicates the render time of the content. These include the largest image, file or text block within the page at its initial load time.
If you have an element in your website that takes a long time to load, you must optimize, change or remove it. This is usually a problem with big files; audit your site and identify those files. Then you can use SSR so that the user’s browser won’t have to render it anymore.
Aside from being a site performance indicator, LCP will also impact how Google scans your site. If elements are slow to render, Google bots won’t be able to crawl and index all your pages. Ultimately, this will affect your search rankings.
Next is the user experience. Users immediately want to read and view the content they opened. They’ll leave a page that takes more than 3 seconds to load, and likely head to a competitor’s site to find the answers they seek.
For a great user experience, aim for a Largest Contentful Paint score of 2.5 seconds or less.
What are the elements that need to be rendered quickly and optimized for the Largest Contentful Paint?
- Images
- Videos
- Background images and graphics loaded via the url () function (instead of a CSS gradient)
To test your website performance, you can use GTmetrix, a tool created by lighthouse that reports on how fast your website loads, along with other performance metrics including LCP.
2. Cumulative Layout Shift or CLS Metric
The CLS metric measures a page’s visual stability. Here, you should be conscious about any element in your website that influences the stability of your page. Any time an element changes position within the page, it can lead to a layout shift.
Say a user were to click a link but the entire area suddenly moved so they ended up tapping an ad. Or more disastrously, if a user was about to cancel an order, but because of the layout shift, they ended up placing an order. The result could be the user having to call in customer service, leading to frustration, cart abandonment and a promise not to return to your website.
Content instability mostly happens when elements are progressively added on top of existing content. It can be caused by images or videos with different dimensions or a third party widget that adjusts itself.
Server side rendering is useful in this case since the page will already be rendered on your server instead of the client’s end.
A good CLS score shouldn’t exceed 0.1 as Google recommends.
Aside from server-side rendering, here are some tips to help you optimize your site for CLS:
- Set a size for all your elements or ads so they’re allocated a static space before they’re displayed.
- Don’t add content above existing elements since they will shift the content down.
- When doing animations, always double check and test that they don’t cause any change of layout.
An experienced web development team will catch those small details that will eventually cause layout shifts.
You can measure CLS using Google’s own Google Lighthouse Report and Chrome Developer Tools.
3. First Input Delay or FID Metric
The First Input Delay metric measures the interactivity of your website. The ideal score for an FID is less than 100 milliseconds.
Interactivity measures the time between when a visitor first interacts with a page (like by clicking or a tapping), up until the time the browser begins processing the command.
FID exists because Google wants to know if users are actually engaging with a site. It’s a metric that measures how engaging your site is.
Before, a user could just click a page and stay there. But even bots can do this. Google would then think that the ‘users’ weren’t leaving because the page was interesting.
To avoid this loophole and curate the page more effectively, Google now requires ‘engagement’ as a metric. Google wants to see clicks, searches, or taps.
With this, your website doesn’t only look good but it engages your users as well.
Make your calls-to-action catchier. Put up elements that are inviting. You can also use chatbots or simply make your search bars more visible to visitors. Optimizing these elements could boost this CWV signal.
Why is SSR Relevant to the CWV Updates?
Server-side rendering is important to the Core Web Updates because it enhances speed, usability and user experience. It’s one of the best solutions if you’re looking to improve Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) metrics.
Google bots will be able to crawl your pages quicker and more completely. Since it loads faster, there will be no delay or unnecessary shifting of elements on the page.
When to Use Server-Side Rendering?
Use SSR if:
- You need SEO on major search engines like Google, Bing and Yahoo
- Your React app is already working, and you’re willing to pay for the extra server resources
- You have critical or complex HTML
- You want your pages to load quicker
You may not need SSR if:
- Your React app isn’t functional yet
- Google can already crawl your content effectively
- You don’t have the ability to scale yet
The Bottom Line
A lot is riding on web design and development to deliver business results. So it makes sense for marketers to learn how every aspect of this process works, and figure out what tools or platforms contribute to better web performance. In understanding how server-side rendering affects your JavaScript site, you can work with developers well and make decisions that will have a positive impact on your SEO efforts.
From making sure your website meets current ranking guidelines to fixing issues that affect user experience, working knowledge of SSR will help you improve your marketing strategy.
Disclaimer: This is a guest post by Paul Staten is a serial entrepreneur and the CEO/Managing Director of SEO Werkz. The first business he created is a computer repair company that still serves clients today, 15 years after its creation. SEO Werkz was featured in the Inc 500 list of 2016, and Inc 5000 in 2017 and 2018.
Jamil Ali Ahmed
Jamil is an Organic Search Manager at Cloudways - A SEO friendly hosting Platform. He has 14 years experience in SEO, and is passionate about Digital Marketing and Growth Optimization. Jamil is a Minimalist, Observer, Loves Nature, Animals, Food, Cricket & Mimicking :)
