Quick apps in 3 steps

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.

1️⃣ Switch to Next.js (or Nuxt.js)

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 web.dev.

Nuxt.js is a similar framework for Vue.js.

2️⃣ Connect Cloudflare (or another CDN service)

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.

3️⃣ Review your dependencies every 3-6 months

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.

Summing up

• 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