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