Complete Server Side Rendering — Page speed Nirvana?

Early 2000’s was a time when new browsers came into play and all of them were trying to venture into their own eco system. Every major player launched their own browser and they were trying to manipulate website builders and users to adopt their own eco system.

Now with the above words in the back of our mind, let us dive into how design has changed. Designs with bright background colours and fancy animations were a fad in the early 2000’s. As the 2010 decade progressed there we saw that Flat design was the “in” thing with minimal animations.

Keeping the above in mind, the vertical that struggled to catch up was the frontend technology world (Javascript, HTML, CSS). With the advent of technologies like React, Vue.js which encourages major interactivity and also supports decent rendering of the first fold, there was “go to” technology for all the developers to achieve both sides of 2010. But not enough.

Chrome has been ruling the browser empire lately and they are making sure that they raking the moolah. Chrome making mobile a primary device, creating page speed standards and Google search using the same page speed to rank results on their search engine means things need to change in design and tech. Design teams have been moving to mobile first designs but it does not suffice because design teams use a retina display and massive monitors to design which makes it really difficult to see the heavy weight components that need to be rendered on a mobile. Chrome has made the “Mobile first” a norm because they know that most of the internet users are on their phones for browsing preferred content.

Mobile designs need to be light weight and need to execute minimal javascript according to the new web framework standards. The reason for this is even though most mobiles today have a lot of resources, the resources allocated to mobile browsers are pretty low. This means it will take a longer time for browsers to render the page as their browser thread is busy executing javascript. You can run this experiment by opening multiple slow tabs of a javascript heavy site. You would see the browser crashing.

Mobile First Approach

A mobile first approach means design and tech needs to keep in mind the real estate a mobile phone provides and the user has. For example, Creating a carousel on mobile has no credibility because the users swiping inside a page is not a great experience. Facebook and Twitter has proved to us that scrolling is the way to go. This means that actually websites will be rendering textual content with low interactivity and minimal styling. Loading external stylesheets is out of question and as things are shaping out loading external javascript’s also is going out of fashion. The webpage now consists of only HTML and mostly inline CSS and minimal inline javascript. This means all of the pages can be rendered server side fully. A few steps you can take to make yourself abide Lighthouse and Page Speed tools out there:

1. Inline most of the CSS.
2. Minimise Javascript execution. Get rid of carousels, date pickers and external javascript widgets from the design.
3. Create a uniform light weight layout for mobile. Remember users like to scroll on mobile and read content more than anything else. It is proven.
4. Create images with placeholders and lazy load the images on mobile. Intersection Observer is your saviour.
5. Advice business about having too many integrations. See if you can avoid those integrations on mobile. Please do not hide it via CSS.

Leverage CDN and Edge Computing

If your content is static this is pretty easy to do. Use the correct cache-control tags and you are all set.

If you have dynamic content you can do the following:

1. You can use a CDN which gives you “Purge By Tag” or “Purge by URL”. You can purge these pages using that.
2. Whenever another system changes this content, make sure you purge that particular page using one of the above mechanisms.
3. If your page needs to dynamic for a user, see if you can use edge computing. Most CDN’s advertise edge computing as a product. There are a lot of other products you can use for Edge computing if your CDN is not a part of it.

A typical edge computing setup

You can find a typical edge compute setup in the above diagram. You can use the worker to make requests that can call multiple origins and combine the response at the edge and send it back. The edge compute setup needs to be distributed. There are multiple services which give this setup.

Render Mobile Pages based on User Agent

You can use the user agent header and and render a different page for mobile. Accelerated mobile pages (AMP) are fast and slick. There are other frameworks like Svelte which help you build really slick mobile pages. You can venture into these frameworks to create a different layout for mobile.

These are a few ways you can get started on moving to complete server side rendering. Do comment and let me know if there is any feedback around this topic or you want to know more about this topic.