1. Transpile to modern JavaScript #
Babel was a revolutionary tool, devs could write modern JS which is not supported by Browsers and transpile to ES5 to support browsers .
Transpiling to ES5 is not really a good idea these days. Around 95% of browsers support ES2017 features, So transpiling to ES2017 should reduce bundle size by 10-15%. If there is need to support older browsers(like IE11) there could be two build one with ES5 and one with 2017. Because of 3% of users 97% of user experience should not be compromised.
Previously there was performance issue with using modern JS in browsers but thats long been fixed.
2. Lazy load all your routes #
Lazily loading routes will split JS bundle into chunks(code-splitting) can chunks will be loaded when user navigates to that route.
react-router is most popular router in react community. Lazy loading routes is easy as we only need to change import statements to dynamic imports.
From:
import Home from '../component/Home';To:
const Home = React.lazy(() => import('../component/Home'));3. Stop using create-react-app #
Create-react-app is official CLI tool to bootstrap react application. It is most popular way to bootstrap a react application. There were good reasons to use it until now, It comes with sensible defaults and most of the things work out of box.
Problem with CRA is, it is quite slow. There are better tools available like vite and snowpack which are lot faster than CRA. Both there tools use native ES6 modules in dev mode which make statup time as low as 50ms.
4. Enable brotli compression on web server #
Brotli is modern lossless compression made by Google. Brotli can reduce (file size by 15-25%)[https://blogs.akamai.com/2016/02/understanding-brotlis-potential.html]. It works well with text based documents so do not use it for images/videos.
All the common web servers like nginx, Apache and IIS support it and will serve brotli compressed document only if supported by browser.
5. Serve modern image formats #
JPEG/PNG are most popular image file format on the web. JPEG was standardized 28 years ago in 1992. There are modern image formats available like webp and AVIF. WEBP can reduce file size by 30% and avif by 50%. This is a huge saving as images contibute most to size of a webpage.
WEBP had a adoption problem as chrome and Edge were only browsers supporting it, But now that has changed. Webp is supported by 92% of users on web. Avif is supported by chromium browsers as of now.
To serve images as per browser support picture tag can be used.
<picture>
<source srcset="img/photo.avif" type="image/avif">
<source srcset="img/photo.webp" type="image/webp">
<img src="img/photo.jpg" alt="Description of Photo">
</picture>There are also other solutions which serves images as per browser without making any change on client code.
Notable imaginary and optimg
6. Lazy load images #
Lazily loading images is technique to load images when user scrolls to image container. Lazily loading images can reduce web load time as browser need to load less data initially.
Lazy loading images has never been easy natively. Now there is a native way to lazily load images. Just add a loading="lazy" to img tag.
<img src="/earth.jpeg" loading="lazy">7. Make app PWA #
PWA stands for progressive web app. Making as PWA means making web apps run similar to native apps. PWA web apps can be installed and can run without browser shell.
PWA can work offline, send notifications and can run in background. Workbox can be used to make a react app PWA.
Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated ! For feedback, please ping me on Twitter.
Published