This post is about my on performance techniques used to make Uber mobile web using as fast as possible. learning React **Motivation**It’s been a year since Flipkart Lite was launched and few months since Housing Go was launched and I was always fascinated with the idea of how mobile web is a future and I wanted to give a try. First I needed an app on which I can implement the perf techniques, and Uber had just recently launched their app with new design and it looked promising so I decided to clone the app using React. It took me some time to build the basic implementation of the app, I have used for the map and used to create a path from the source and destination along with the https://github.com/uber/react-map-gl svg-overlay html-overlay. Below is the gif of the app with basic interaction. Now that I had the basic app to work on, I started to improve the performance of it. I have used to check the performance of the web app in each stage. Chrome Lighthouse initially load time looked like this. To improve the above stats I have used following techniques **_Code Splitting — reduces load time from 19sec to 4sec_**First thing I did was used techniques to divide the app into various chunks based on the route and load what is needed for that particular route. webpack code splitting This I did by using the api of where I require the component only when the route is requested. getComponent react-router I also extracted the vendor code using in webpack. CommonChunkPlugin With this I have reduced the load time from 19secs to 4secs. Performance metrics using code splitting **_2. Server side rendering — reduces load time from 4sec to 921ms_**I then implemented SSR by rendering the initial route on the server and passing on to the client. I used Express for this on the backend and used api of the match react-router Thanks to SSR, now the load time is 921ms. Performance metrics using SSR **_reduces load time from 921ms to 546ms_**Then I decided to compress all the static files, this I did this by using in the webpack 3. Compressed static assets — CompressionPlugin and to serve the compressed file from the server which falls back to uncompressed if required file is not found. express-static-gzip yippee I saved almost 400ms. Good job, Narendra! Performance metrics after compressing the assets **_4. Caching — helped load time of repeat visits from ~500ms to ~300ms_**Now that i had improved the performance of my web app from 19seconds to 546ms, I wanted to cache static assets so the repeat visits are much faster. I did this by using for browsers which support service workers sw-toolbox and headers for browsers which don’t support. cache-control By doing this I improved the repeat visit by approximately 200ms. Repeat visit without service worker Repeat visit with service worker **5. Preload and then load**I have used in the tag and used for the browser which doesn’t support preload.At the end of the body I load the application JS in a regular tag.For more about preload and prefetch please visit <link rel="preload" ... as="script"> head prefetch <script> https://css-tricks.com/prefetching-preloading-prebrowsing/ Finally tested with Google PageSpeed and this is the result Scores from PageSpeed Insights This has been a good learning for me, I know I can optimize more and will keep exploring. Performance improvement is an ongoing process this is just a benchmark to what I have achieved. Give a try with your app and let me know your story. Github: Live Demo: or https://github.com/narendrashetty/uber-mobile-web https://uberweb.herokuapp.com/ https://uberweb-v2.herokuapp.com/ Please give a visit to the demo on your mobile browser and share your inputs with me. (Since I hosted it on heroku, it’s goes down when it has no visits. Don’t lose patience if it doesn’t load at first :P Such an irony). Maintaining Performance is like a chess, one wrong move and it undos lot of hardwork done. Thanks for reading, If you liked this article, click “Recommend” or write a response below. You can connect with me on Twitter . @narendra_shetty
