Housing Go - Behind the Screens
Migrating to Progressive Web Application
Redesign of our mobile website provided us the opportunity to revamp the code base to push performance to the max. With the technological advancement and improved capabilities of modern browsers like Service Workers, IndexedDB, Add to Home Screen, Push Notifications, our aim was to make an app that is fast, performant and reliable.
Here’s how we mastered front-end performance for our progressive web app Housing Go.
Tech Stack and Tools
- React with Redux
- NodeJS with Express
- Babel
- Webpack
Server Architecture
Initial discussions revolved around using a subdomain like m.housing.com or mobile.housing.com, but that would have increased http redirects for a user and could have hampered our existing SEO rankings.
Finally we made a decision to resolve the request at Ngnix level using the user-agent string and then pass it to the eligible server.
We didn’t migrate our complete website and hence there are a few routes which are still being served from the desktop server, we catered to these by using our custom internal redirects.
Performance with Design (UX)
A product with no users is no product. User Experience is something that defines state-of-the-art applications.
We focused on parameters such as page load time, time to first paint, visual feedback on every action etc. maintaining necessary page transitions and designs aesthetics
Page Load Time
One of the most important and basic metric that defines the performance of a website is Page Load time (perceived vs actual). We did a series of experiments to make this number as small as possible. We’ll be soon sharing a different blog on all of these.
We’ll let Google PageSpeed do the talking for now.
Server Side Rendering
We wanted to serve first meaningful content to the users as early as possible and thats the reason we went ahead with serve side rendered app. This helped us show the meaningful content to users 3s faster on normal 3G mobile networks as compared to client side rendered app, though it increased few KBs in our initials document size.
No code modification for SEO bots came in as a bonus.
Here is a comparison from WebPageTest of our server side rendered app & a previous version, which used client side rendering.
Test Params: Location: Singapore EC2, Browser: Chrome, 3G Network.
Minimize intermediate Loading Time
One of the most important performance parameters, that might annoy the user is waiting when switching from one page to another. Traditional methods include showing a loader while data is being fetched. Most of the time this can be avoided if you have a subset of the data which is available with you and asking the server only for the remaining ones.
When someone clicks on a property in the search listings page we try to show the available relevant information while making request for the remaining data.This way the user doesn’t get the sense of waiting and once the remaining data arrives, the user can browse through the whole page.
Frames Per Second (FPS)
Having smooth scrolling is often overlooked by many but is a crucial part of User Experience. Implementing an infinite list with constraints on the device capabilities is a challenge. To solve this, we used react-virtualized. It ensured that the maximum number of list elements present in the DOM at a time is fixed (~10).
This solves for both keeping the DOM as light as possible and maintaining 60FPS. You may want to check this out in your browser dev tools.
User Engagement
Re-engaging users on the web is tough. With the introduction of the Web Push API, we now have the capability to send Push Notifications to our users, even when the browser is closed.
The typical journey of zeroing down on a single house usually takes few months. Push APIs helps us to re-engage with our users throughout the journey and have increased our conversion metrics many folds.
Add to Home Screen — A2HS
This gives users the ability to quickly and seamlessly add web applications to their home screen without leaving the browser, providing a native app like experience.
Persistent Auto Login
To provide a sophisticated user experience, it’s important to help users authenticate themselves to your website. Authenticated users can interact with each other using a dedicated profile, sync data across devices, or process data while offline; the list goes on and on. But creating, remembering and typing passwords tends to be cumbersome for end users, especially on mobile screens
— source : https://developers.google.com/web/updates/2016/04/credential-management-api
Once the user has logged in, we automatically log him/her in with the Credentials Manager API and provide the most personalised experience possible.
Offline Experience
We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past.
We wanted our users to be able to revisit their earlier session any time they want, irrespective of the network. To make this happen we used Service Worker’s lifecycle events to pre-cache assets and sw-toolbox, to intercept request and maintain their respective caches.
Secure Browsing
All our pages are served over HTTPS, preventing intruders from tampering with the communications between our website and user’s browsers.
Future work
We have tried to build a website that is fast, performant and reliable. Our website is not yet optimised for all browsers and the work in under progress. Give this experience a try by visiting Housing.com on your mobile browser and let us know your feedback.
Big Cheers to all involved!
