Don’t make user wait: Secret to supercharge Server Rendered Pages

We live in a fast-paced, digital age where users want to gain immediate access to content and, therefore, our website performance is crucial. A slow loading page equal frustration and missed potential customers. Server-Side Rendering (SSR) has appeared as a boon to user experience through generating the HTML on the server side, but it should be optimized to the core.

The Need for Speed

Studies have always found that slower pages make a severely hostage and wicked to a user engagement and conversion rate.

Online consumers are quick to judge, and studies have shown that 88% of them are even less likely to come back to a website after a bad experience .

As per another study , for improvement in 0.1 second in Mobile page load conversion of retail site went up by 8.4% and this number was 10.1% for travel site.

This is huge. Which means we cannot ignore the web performance

Angelone SSR Architecture

We have selected Sveltekit with tailwind css as our primary UI tech stack

User can access our Web Apps via three mediums.

1. Angelone Android Native apps
2. Angelone iOS Native apps
3. Web browsers

In case of Native apps we are opening the web apps inside a webview.

Hence performance is even more critical for us since we don’t want our users to feel a disconnect when navigating between different parts of our app (navigation between )

Identifying and Addressing Bottlenecks

The first stage of supercharging SSR is identifying the bottlenecks that limit its performance.These bottlenecks can occur on both the server-side and the browser-side.

Server-Side Bottlenecks:

• Inefficient code and data processing: Poorly optimized code and inefficient algorithms can slow down the server’s ability to generate HTML. Profiling and refactoring code can help identify and resolve these issues.
• Inefficient caching strategies: Caching plays a crucial role in SSR. Improperly configured caches can lead to unnecessary re-renders and delays. Implementing efficient caching mechanisms can drastically improve performance.
• Network latency: The time it takes for data to travel between the server and the user’s browser can significantly impact page load times. Consider using content delivery networks (CDNs) and edge server to distribute content closer to users and reduce latency.

Browser-Side Bottlenecks:

• Large JavaScript bundles: JavaScript is essential for interactivity, but large bundles can delay page rendering. Code splitting and minification can reduce the size of JavaScript files and improve load times.
• Unoptimized DOM manipulations: Excessive or inefficient manipulation of the Document Object Model (DOM) can lead to performance issues. Carefully optimizing DOM updates can enhance rendering speed.
• Unoptimized assets: Large images, CSS files, and fonts can also slow down page load times. Compressing and optimizing these assets can make a significant difference.

Monitoring Performance with Web Vitals

Google’s Web Vitals provide a set of standardised metrics to measure and track user experience on web pages.

Out of these the page load metrics include:

• Largest Contentful Paint (LCP): Measures the time it takes for the largest content element on the page to become visible.
• First Contentful Paint (FCP): Measures the time from when the user first navigated to the page to when any part of the page’s content is rendered on the screen
• Time To First Byte (TTFB): Metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.

Monitoring these metrics can help you identify areas where optimization is needed and track the impact of your efforts.

Tools of the Trade

Several tools are available to aid in your SSR optimization journey:

• Lighthouse: An open-source tool from Google that provides comprehensive insights into website performance, accessibility, and more.
• PageSpeed Insights: Another Google tool that offers page speed analysis and optimization suggestions.
• WebPageTest: A robust tool for measuring website performance under various conditions.
• Real User Monitoring (RUM) Data: Collects data on how real users experience your website, providing valuable real-world insights.

Optimization Strategies

Here are some key optimization strategies to supercharge your SSR pages:

Server Side API Cache

When it come to caching, it can be implemented in three ways

1. Short term -> Few minutes
2. Medium term -> Few Hours
3. Long term -> Few Days

We identified list of API which are required for initial Page rendering and. data of which don’t change too often.The we implemented short term in memory API caching.

One we deployed this changes the hits on our Backend API got reduced drastically.

Which means now Backend server has more time to work on other critical items and with less load it will be faster and latency will be lower

Internal API endpoint

Our front end server and backend server is inside same Virtual private cloud (VPC). We leverage this setup and start calling internal endpoints of our backend API

Benefit:

1. Performance: Internal API are faster than going over the wire
2. Reliability: Internal API are less prone to failure hence are more reliable

Generate HTML only for above-the-fold content

Prioritize rendering content that is immediately visible to the user.

Benefit:

1. Shipping less data over the wire, including the html,javascript and images
2. Which means now browser need to do less work hence it will be faster in rendering the content

Preload critical fonts and images

Ensure essential resources are fetched early in the loading process.

This help with Flash of unstyled text (FOUT)

Pre-connect to required origin

Pre-connect is helpful in scenario when Above the fold content requires any assets or images from a third party or maybe the cdn network.

Without pre-connect the browser will first download your content then once it will find a particular content depends on assets from other origin it will first try to make a connection to the third party and once connection is established then browser will download the content, wasting critical time.

With Preconnect the browser will establish the connecting to the third party during the time it is downloading your content and download will start immediately once required

Fonts Optimization

Fonts can be used in two ways

1. Using of 3rd Party services like Google fonts, font awesome etc
2. Self hosting of fonts

As per data only 20% of all web page use self hosted fonts, rest rely either on combination of self host + 3rd party or exclusive use of 3rd party fonts

Previously there was performance benefit of using 3rd party fonts mainly due to shared cache in browser

But with chrome version 85, chrome team introduced cache partition which means any cached resource from one website another website won’t be able to use. Hence the performance benefit is not there

On top of this there is overhead of pre-connect to third party origin which is expensive

But self hosted font brings a challenge. The p75 of all self hosted font size is 75kb which is huge.This is due to the fact since fonts include lots of character and languages which you site moistly don’t need.

We downloaded the fonts online (size of 63kb) and remove all the unwanted character hence bringing down the font size to 7.2kb, which is a reduction of 88% with the help of Yellow Lab tool

The Impact of Optimization

Fortunately, the investment on making SSR as optimized as possible can pay very good dividends.

Using Angel One as an example, a better FCP number of 1230ms instead of 1500ms showed a higher conversion of up to 30%.

That is a great example that even small improvements will translate into a business result.

Conclusion

To summarize, optimizing Server-Side Rendering is imperative to providing an ideal experience for everyone in the modern web.

Optimizing those performance bottlenecks, monitoring web vitals and leveraging the right optimization strategies can make your SSR pages lightning fast resulting in better user engagement and higher conversions.

Check out the video this post is based on

https://www.youtube.com/watch?v=xUMgwaKkDg4&ab_channel=DeveloperSummit