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
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.
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 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
To perform some bundle tests and analyze the performance of Treebo PWA, they only trusted the Webpack-bundle-analyzer.
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.