A (short) guide into web performance for startups

· Ivan Akulov

Web performance is important. Making a web app faster typically improves conversion, user satisfaction, or revenue, and there’re lots of studies about that:

A screenshot of the wpostats.com website

The problem, however, is that web performance usually requires a lot of research and time, so, quite often, it’s left as an afterthought. So how to keep your web app quick (and experience improved metrics) if you’re a startup and can’t spend a lot of effort on this?

From my experience, there’re three things that yield the most significant performance results without large investments of time.

1️⃣ Next.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, and it does everything on its own.

The only major requirement of Next.js – the one that helps it to do all these optimizations – is that you have to organize 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

If you use Vue.js, there’s also a similar framework called Nuxt.js.

2️⃣ Cloudflare

Cloudflare is a web-performance-as-a-service company. You sign up for Cloudflare, connect it to your site, and Cloudflare starts proxying your traffic and applying optimizations (like image optimization, Brotli compression, or HTTP/2) on runtime.

The Cloudflare has a free plan, and it works quite well. But I’d recommend trying Pro ($20/month) to enable more optimizations. (We’re not affiliated.)

Here’re the most useful optimization toggles we’ve collected: GitHub Gist

3️⃣ Reviewing your dependencies every 3-6 months

I’ve seen a number of cases when an app gets huge and slow because

  • either it depends on a library that has a huge 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 task; I also wrote a guide about what to look on during the analysis.

Summing up

Next.js might be a bit hard to integrate into an existing app because of routing requirements, but it’s very easy to start for new ones. And Cloudflare and the reviewing practice work well both for new and for existing products.

Keep your apps fast!

This article was brought to you by PerfPerfPerf. We help companies to earn more by making web apps faster.

Have a web performance issue or just want to learn what to improve? We’d be glad to help