Web performance is important. But often, you don’t have time for it.
So, what to do if you want a quick app but can’t invest into performance at the moment? From my experience, there’re three things that yield the best performance results without large investments of time.
Next.js is a lightweight framework for React apps that automatically applies lots of complex performance-relates optimizations (server-side rendering, per-route code splitting, proper webpack configuration, etc.). You just write the code as usual, whereas Next.js does a bunch of heavy tuning behind the scenes.
The only major requirement of Next.js – the one that helps it to do all these optimizations – is that you have to structure your routes on the file system. So, if your app has 4 pages:
/ /profile /profile/settings /about
you’ll need to create 4 files to render them:
pages/index.jsx pages/profile/index.jsx pages/profile/settings/index.jsx pages/about/index.jsx
A good place to start is a performance-oriented Next.js introduction at
Nuxt.js is a similar framework for Vue.js.
Cloudflare is a CDN provider slash web-performance-as-a-service company. You sign up for Cloudflare, connect your site to it, and Cloudflare starts proxying your traffic and applying optimizations like image compression, Brotli, or HTTP/2 on the fly.
Cloudflare has free and paid plans; free plans work quite well, but paid plans allow doing more advanced optimizations. Start with a free plan – and make sure to enable the most useful optimization toggles.
Cloudflare is the tool that I personally like the most. But if you want to explore alternatives, there’re a few other similar services:
I’ve seen a number of apps to get huge and slow because
- either it depends on a library that has a large unnecessary dependency under the hood;
- or it depends on several similar libraries (e.g., checkbox components) because they were added by different developers.
To avoid this, pick a day every 3-6 months to analyze your app bundle and understand what shouldn’t be there. webpack-bundle-analyzer would help with this; and I also wrote a guide about what to look on during the analysis.
- Next.js is very easy to start with. It will be harder to migrate if you already have an existing app, but it might still be worth the try
- Cloudflare and dependency review work great for both new and existing apps
- Use these practices if you don’t have time to invest into performance
- And check out Web Performance 101 if you want to learn more