Client-side Rendering: Impact On Performance And SEO
Some websites entirely rely on JavaScript code running in the browser to display page content. This article explains what client-side rendering is, why it's used, and what it means for website performance and SEO.
What is client-side rendering (CSR)?
Client-side rendering means that JavaScript running in the browser is essential to display content on a page. It stands in contrast to server-side rendering (SSR), where the website server generates the full page HTML and then sends it to the client.
When a website uses client-side rendering, JavaScript code is responsible for generating the page HTML in the browser, based on instructions in the JavaScript code and data fetched from the server.
Client-side rendering and single-page applications
Client-side rendering is typically used for interactive web applications running in the browser. Server-side rendering is the default way the web has worked traditionally. In a traditional multi-page application, each link click on the page loads a new HTML document.
Single-page applications can implement server-side rendering and then transition to client-side rendering for further page interactions. The process of turning the static server HTML into an interactive application is called JavaScript hydration.
What are the advantages of client-side rendering?
In principle, client side rendering enables quick responses to user interactions. If no new data needs to be loaded to load the next page, client-side JavaScript can achieve the transition in milliseconds.
Features like UI updates on hover require updating HTML code with client-side JavaScript, has loading it from the backend would introduce a significant delay. While JavaScript can be added on top of server-rendered HTML, full client-side rendering simplifies the architecture as the code there's no need to have a handover point or interface to make the HTML changes.
What are the disadvantages of client-side rendering?
Pure client-side rendering has a number of disadvantages:
- It slows down the initial load of the web page
- Fully loading the page can require many resource requests to the backend
- Crawlers and users that don't run JavaScript aren't able to view the page
How to check if a website is rendered client-side
To check if your website depends on client-side rendering you can use our free NoScript testing tool. It will load your website twice, once with JavaScript and once without. If your website requires client-side JavaScript to render the version without JS will be incomplete or empty.
The example below shows a website that fully depends on client-side rendering. Without JavaScript the page is completely empty.
How does CSR impact page speed?
Client-side rendering typically has a negative impact on the initial loading speed of a website. Later soft navigations can often be faster than with server-side rendering.
Why does rendering a page on the client typically make performance worse? With server-side rendering the browser only needs to follow these two steps to display most of the page content:
- Load the website HTML from the server
- Load all necessary render-blocking stylesheets
However, with client-side rendering the following additional steps are required:
- Download JavaScript application files
- Run the JavaScript code that renders the page
- Often: load additional data from the server that was not part of the initial HTML
Loading the website HTML is often faster, as without full generated content the initial server response time will be better. However, this is typically outweighed by the additional client-side work and data loading that's required.
Example of poor performance caused by client-side rendering
Let's look at a concrete example of the client-side rendering process. The diagram below is a network request waterfall which shows when different resources load on the page.
Loading the HTML and the initial JavaScript code doesn't take all that long. And once that's done some content appears on the page. However, at first it's just a loading indicator.
The page then continues to load a data file (which contains the page title), and then a number of additional JavaScript files. Finally, the full page is rendered and the browser finds out it needs to load an image to display the main page content.
Client-side rendering doesn't always mean such a long sequential chain of requests. However, it is also not unusual.
Use our free website speed test to see what resources need to load to display content on your website.
What does client-side rendering mean for Core Web Vitals?
Google's three Core Web Vitals metrics are a search result ranking factor. All three of them are likely to be negatively impacted by client-side rendering:
- Largest Contentful Paint: the main page content will often show up later
- Cumulative Layout Shift: as the page is gradually rendered on the client, layout shifts are more likely
- Interaction to Next Paint: JavaScript is CPU heavy, which makes it more likely to delay user interactions
If your website is a JavaScript application, make sure to pre-render content on the server for SEO-relevant pages.
Web Vitals data attribution in single page applications
When Google measures page load time for SEO, only the initial full page navigation matters. Later soft navigations that happen entirely client-side are not counted.
Layout shifts and interaction delays on subsequent pages do contribute to your overall Core Web Vitals score. However, even if these happen on a different URL, they will still be attributed to the original page from the initial full page load.
For example, if you have a JavaScript ecommerce app and see a lot of layout shift on your product page, you might see high CLS scores on your product listing page even if no layout shifts happen there directly.
Client-side rendering and website crawler support
Client-side rendering means loading your website requires JavaScript. While Google does run JavaScript, not all crawlers support it. That means they can't index your content if no server-side rendered HTML is available.
Social media previews also depend on being able to access Open Graph data in the HTML. If this is also generated on the client then social media sites can't show a title or image for your content when people share it.
If rendering your website takes a long time that can also cause it to be crawled less frequently by Google. Serving content quickly to search engines optimizes your crawl budget.
Interaction to Next Paint and CSR
There are two main ways that client-side rendering and JavaScript apps cause worse INP scores:
- Since processing happens client-side, those CPU tasks cause the page to freeze as content is updating.
- When a user interacts with a page while it's rendering or while hydration is in progress this will delay how quickly the interaction can be handled
Here's an example interaction during the initial load of a JavaScript application, as captured with DebugBear real user monitoring.
If we look at the data more we see that the page uses Next.js as its framework, and that is the code that's running when the interaction takes place. As a result, there's a large input delay component, as the event handler is queued up until rendering is complete.
When to use client side rendering
JavaScript is great for highly-interactive content. Applications that users interact with over a long time period can often provide a great user experience with client-side rendering.
However, if the initial page load speed and search indexability matters, then you should make sure to also provide a version of your page that comes pre-rendered from the server.
Measure Core Web Vitals on your website
DebugBear offers synthetic website monitoring to measure how quickly your website loads and how that's changing over time.
Each test result also includes data from the Chrome User Experience Report (CrUX), which is what Google uses for rankings. Track it for individual pages, or benchmark the performance of your website within your industry.
With real user monitoring you can track all Core Web Vitals metrics across your whole website. Identify slow pages, specific visitor segments with poor experiences, and review specific page speed issues people faced on your website.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data