Web Rendering Techniques
Website performance is largely about loading web pages as fast as possible thereby improving user experience.
“Speed increases conversion”: says Google
“Web page must load fully within two or three seconds”: says Google
“80–90% of the end-user response time is spent on the frontend.Start there.”: Says Steve Souders , Google Engineer
Although we may improve server side performance measures using CDN, caching, Image optimization etc it is more important to focus on frontend side improvements. Choosing appropriate rendering techniques is vital for frontend and hence user experience.
What is rendering?
Rendering means using Javascript to inject data to HTML templates, attaching event handlers there by turning it into an interactive Web Page. Choosing appropriate rendering techniques not only improves performance, but also faster builds at low processing overheads. Core Web Vitals measures parameters critical to user experience. Some important parameters are:
Time between the request and when the first byte of a response begins to arrive. should be 0.8 seconds or less.
Time from when the page starts loading to when any part of the page’s content is rendered on the screen. should be 1.8 seconds or less
Time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction. Mainly caused due non-orderly download of scripts. Should be 100 milliseconds or less. Since FID requires user to interact, it can be subjective at times
Largest Contentful Paint (LCP)
Loading time of the largest visual element of a site Should be 2.5 seconds or less.
Layout shift is an element changing its position from one rendered frame to the other. CLS is the largest burst of any such layout shift. CLS should be minimum for the sake of UX and SEO. CLS score should be 0.1 or less.
Client Side rendering
It’s about using JS to generate HTML at client side and render pages directly in the client. As the complexity grows, the size of JS grows as well, thus causing performance issues. Moreover CSR is not very SEO friendly and hence not suitable for public pages.
Server-side Rendering
When a client makes a request, the server creates a web page at the server and sends it to the client.Client now loads JS libraries and hydrates (injects) interactivity to the web page. Web crawlers may index pages created using SSR , thus improving SEO performance.
Static Site Generation
In this approach HTML pages are rendered at build time containing HTML,CSS and JS. Thus it can be cached at the maximum speed with minimum computational overhead . The only concern is if content changes too fast, it is difficult to rebuild the page. We may use Incremental Static Regeneration, that allows us to regenerate a few pages rather than the entire website.
Conclusion :
Use CSR if you want more and more SPA behaviour.
Use SSR or SSG if you are creating public facing pages with SEO support.
Use SSR in particular If pages require personalization.
Use SSG if TTFB is a concern.
