Progressive Web App Case Study III : India’s Leading Hotel Brand Treebo

PWA Journey of Treebo

So, here we are back again people with the yet another episode of PWA case study. This time we are going to check out the PWA Journey of our Indian top rated hotel chain, Treebo. Treebo has been serving the travelers for pretty long time with the whopping worth of $20 Billion. They initially launched their website with the help of React, but later on, they shifted towards Preact  

  • So, let’s first study the  changes seen in the performance of Treebo website after using PWA technology:
  • Improvement in time to first paint has been increased by 70%+.
  • 31% of improvement in time-to-interactive can be seen.
  • The load time has insanely improved on 4G network website loads within 4s and on the average 3G network it hardly takes 5-6s to load the page.
  • Importantly, only switching from React to Preact has improved 15% of the time to interactive of the Treebo.

Now, people as we see the impact of PWA Treebo in the real world, so let’s dive deep and scrutinize the PWA Journey of Treebo in detail.

A Performance Journey

Old Site of Treebo

Well, the old mobile site of the Treebo runs on the monolithic Django setup. Which takes very long time to load the page. The first paint has been recorded by 1.5s which eventually leads to an interactive time of 6.5s, now that’s super slow.

Single Page React App

The first reconstruction of Treebo began on the Single Page Application built using React and a simple web pack setup. The coding involved large JavaScript and CSS bundles. That results in first paint time to be around 4.8s and the interactive time for 5.6s. And, that can be called super slow process.

Server-Side Rendering

In the next phase to fix their performance, Treebo adopted server-side rendering. It should be noted here that render service side doesn’t come free, it optimized something else also in the process. Treebo used React’s renderToString() to render components to an HTML string.

In result, their paint time reduced to 1.1s and whereas first paint time lowers to 2.4s. But, this also results in increase in the interactive time, so which means rendering server side wasn’t ideal solution for Treebo.

Code-splitting & route-based chunking

So, in lieu to fix the time to interactive numbers, Treebo adopted the route based chunking. Where minimal codes are used to complete the route that means route will complete more quickly. For this, they separated their vendor dependencies, their Webpack runtime manifests, and their routes into different chunks.

In result, time to interactive reduced to 4.8s, now we are coming to the track. Moreover, it improves the user experience and for this code splitting route based chunking, Treebo has few big plans stored up. They’re using React Router’s declarative support for getComponent with a webpack import() call to asynchronously load in chunks.

HTML Streaming

Well, sometimes renderToString() is a difficult task and it became a hurdle for performance rendering on the react site. That’s why to improve performance and render the site properly, Treebo used the HTML Streaming. In which, they would stream the head tag with link rel preload tags set up to early preload in their CSS and their JavaScripts.

Then, they would render service side of the site and send payload down to the browser. In result, resource downloading starts early and paint time reduced to 0.9s and interactive time to 4.4s. Awesome!

Inlining critical-path CSS

CSS stylesheets can block the rendering process until all the stylesheets are loaded into the browser, the page will appear blank. So, to fix this Treebo take the benefit from the Inlining critical-path CSS. It helped in removing the block link tags from the critical path of stylesheets and inlining the few core CSS. And, the results received where totally marvelous as paint time reduced to .4s.

Service Worker

Service Worker is a network proxy which determines how your page will react to the network. Treebo took support from the Service Worker to cache the website offline for the users.

Switching to Preact

Well, preact is a tiny 3KB alternative of the React with the same API. The aim behind Preact is to get high-performance rendering. In numerous PWAs, shifting to preact leads to shorter JavaScript bundles size. In case of Treebo PWA, the size has reduced to 100KB from the 140KB.

Webpack-bundle-analyzer

To perform some bundle tests and analyze the performance of Treebo PWA, they only trusted the Webpack-bundle-analyzer.

Conclusion

Well, people, this just a miniature version of whole Treebo PWA Journey as lots of other complicated layers are involved in it. Moreover, Treebo knows that no app is perfect that’s why they are currently working in the area of A/B testing, lazy image loads, dual importing and eager loading.

So, stay tuned for the more PWA Journeys folks.

Send a Message