Website Loading Strategies
On most modern websites users have to wait for two things:
- dynamic content to see the most important information of the website (measured as LCP)
- javascript to interact with the dynamic parts of the website (measured as TTI)
Let's explore different strategies which try to improve these metrics:
↓ Scroll down to start ↓
Client Side Rendering
Client side rendering is a common way to build web applications. It is easy to develop and deploy. The server sends an HTML Document without the content to trigger the client side javascript download. Once the javascript has been executed on the client, the javascript code loads the data for the dynamic content from the server and renders an interactive page.
Server Side Rendering
With frameworks like Next.js, SSR became easier to implement. It allows moving the data download to the server and renders the html with the content. That way the server is able to send the fully rendered HTML to the client and provide the LCP without javascript. Once the javascript is downloaded and executed, the page becomes interactive (TTI).
Server Side Streaming
With streaming the HTML generation and HTML download can start even before the dynamic content is fully loaded. Therefore the javascript download can start earlier to further improve the TTI.
React Server Components
Server Side Streaming can be combined with React Server Components. React Server Components reduce the amount of components which have to be hydrated on the client. With less javascript to download and to execute (hydration) the page becomes interactive faster (TTI).