Web performance increases conversions

Introduction

What if you increased conversions by 1% in 1/10th of a second? This article demonstrates how developing faster web pages increases conversions, and how server rendering contributes to this.

Modern frameworks use Javascript to render HTML. Server Rendering is when the server runs the Javascript that generates the HTML, and then sends that HTML to the client. Studies have shown that faster page loads increase conversions.

💿 Facts by Tammy Everts

According to a 2014 article by Tammy Everts, a senior researcher in Radware:

• Walmart found that 1 second faster page loads increased conversions by 2%.
• COOK increased conversions by 7% by reducing page load time by 0.85 seconds.
• Mobify found that each 100ms resulted in a 1.11% increase in conversion.

Server Rendering reduces loading times

Let's look at how server rendering reduces loading times.

Reducing Javascript in the browser

Javascript takes a long time to load compared to other resources. The simplified reason for this is that code is less predictable than other resources like images, so browsers aren't as prepared for it. This is true for servers, too, but servers can preload your code before the user requests the page.

Instead of running Javascript on the client side, you could run it on the server return the generated HTML to the user. This is called Server Rendering.

Reducing network requests

In a common React app:

• The server sends the HTML to the browser (the HTML includes a script URL)
• The client requests the script from the server
• The server sends the script
• The script mounts React components that request more resources from the server (e.g. images)
• The server sends these resources

With server rendering, the server sends more resources to the client in the first request, reducing the number of requests. That's a lot of time saved, but sometimes we want frontend code to request resources because it provides interactivity.

Interactive frontends

Server rendering doesn't mean static websites. The Deno Fresh framework is a great example. Pages are server rendered by default, but if a component needs interactivity, that component alone is mounted with Preact.

What else can we do?

Server rendering is a great way to reduce loading times, but there are other ways to improve performance:

• Code splitting: Only send the Javascript needed for the current page.
• Image optimization: Use the right image format and size.
• Caching: Store resources in the browser so they don't need to be requested again.
• Lazy loading: Only load resources when they're needed.
• Minification: Remove unnecessary characters from code.
• Compression: Reduce the size of resources.
• Preloading: Load resources before they're needed.
• Service workers: Cache resources for offline use.
• Critical CSS: Only send the CSS needed for the current page.
• CDNs: Use a Content Delivery Network to reduce latency.

That's a lot of options. But none of them require upfront planning - so build your website, measure and then optimise.

In conclusion

To sum up, using server rendering can greatly boost your website's load speed, leading to more people staying on your site. Tools like Deno Fresh take away the limitations of traditional web design, letting you enjoy the best of both worlds: speed and interactivity. With technology evolving, a shift towards more server-rendered pages looks like a win for both businesses and their users.