Todays web is all about performance, so how do we squeeze that last bit of speed out of NextJS?

Let’s say you’ve created a cool blog based on a CMS like wordpress using headless and nextJS. It could look something like this

You’ve worked tirelessly on the project for weeks and it’s finally coming together.

But you notice that there's a distinct lag between page transitions, one that you aren’t used to from your old single page application based projects. Every time a person clicks to navigate, the entire page reloads.

So looking at your website you’ve set up the…

One of the most awesome things about web development is how fast its evolving, is also its biggest pain point: having brownfield parts of your codebase is hard.

At some point you’re going to have to make a choice at some point;

A) Refractor everything into something state of the art
B) Settle and develop in something that isn’t what Dan Abramov is talking about.

Well there is a pretty awesome middle ground - let’s talk about it!

Huh? What? Hmm how?

First of all lets talk about what we want to achieve

In order to support our old codebase we want to create…

When working on a big JavaScript project your package script section will usually end up looking crazy. Let’s use Node to make it a little less overwhelming.

Let’s do this!

Start by adding a small Node.js script to the root of your project and call it start.js

  • Edit const choices with the targets you need,
  • Replace process.env.REACT_APP_TARGET with the name of the environment variable you use to distinguish between targets.

From here change your package.json scripts to:

Now running npm start will now let you choose the target you need 🎉

I’ve worked for a year optimizing one of the largest banks mobile apps performance. We ended up getting it from 14s TTI to around 2.5s on a slow Huawei P20 Lite. Here is what i wish i knew before starting!

0. Find Your Monsters

A common mistake of optimizing is focusing on everything all at once. Get your hands on a slow android phone, install your app and do a complete test run and identify your highway functionality — Ask your self what does your users do most? which paths is performance a crucial part of the experience?

  • Try removing all animations — how…

With React Natives performance being a hot issue on twitter, i see every expert out there mentioning ‘Measure, before and after — this tip isn’t applicable everywhere’ in some form. It’s definitely good advice, but also leaves the question: Well how? 🤷‍♂

The Low Tech Approach

This is especially useful when making macro decisions like changing out a component, choosing a library or applying a big rewrite.

Having an as accessible app is becoming the new norm, but it hasn’t always been like that.

The good news is that React Native defaults to having font scaling enabled, but if your one of the few unlucky people out there that has disabled it for various reasons, here are some tips on how (relatively) easily get back on track!

Fixed heights are the enemy

The solutions for this are either not setting a fixed height or in this case setting a limit to scaling with the attribute: maxFontSizeMultiplier={1.5} or disabling this particular texts scaling all together by setting allowFontScaling={false}

Side by side views

This will often happen in…


Optimizing assets in your React Native apps provides an easy way to achieve big performance gains with little effort.

Why? PNG’s definitely aren’t created equal, especially if you’re working with multiple designers who use various export settings when creating assets.

Tell me how!

ImageOptim is the application we’re looking for. It works by optimizing pngs and jpgs losslessly, by applying several different compression algorithms, stripping all metadata and other things that you don’t need in production. Better yet, it even has a CLI!

Thomas Kjær-Rasmussen

I love anything JS and sometimes write about it

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store