One simple trick to optimize React re-renders

Kent C. Dodds: If you’re experiencing React performance issues, try this: “Lift” the expensive component to a parent where it will be rendered less often. Then pass the expensive component down as a prop. You may find doing so solves your performance problem without needing to spread React.memo all over you codebase like a giant […]

Making sense of API response times

Mathias Hansen, co-founder of Geocodio, on how they analyze their API response times: For the longest time, we focused on average response times. It is a quick and simple metric that you can quickly break down by API endpoint and time window. […] While measuring average response time have their place they can also be […]

Using AWS’ “Server­less Image Han­dler” to roll your own Image Transform Service

Ama­zon AWS has offered a Server­less Image Han­dler for a while that allows you to spin up an AWS Lamb­da func­tion to cre­ate your own pri­vate lit­tle image trans­form ser­vice that is inex­pen­sive, fast, and is front­ed by the Cloud­Front con­tent deliv­ery net­work (CDN). Whenever an image is uploaded to the bucket, a Lambda function […]

Optimizing images for the web – an in-depth guide

It’s very easy for unoptimized images to end up on a production site and slow down its initial load considerably. Inexperienced devs usually aren’t aware of this potential problem. They also aren’t aware of a wide range of tools and approaches for optimizing images. This article aims to cover most of the tools and approaches […]

Use React.memo() wisely

To improve user interface performance, React offers a higher-order component React.memo(). By memoizing the rendered output, React skips unnecessary re-rendering. This post helps you distinguish the situations when React.memo() improves the performance, and, not less important, understand when its usage is useless Use React.memo() wisely →

Find the cost of adding a npm package to your bundle with BundlePhobia

Ever wondered what the (size) impact of adding an NPM package to your project is? BundlePhobia is a tool that does not only that, it also recommends you other similar packages that have a lesser load. This thing lets you understand the performance cost of npm install‘ing a new npm package before actually adding it […]

Making faster

Over the years Instagram (as a product) grew a lot. With more features to show, their web experience began to degrade. In a series of (upcoming) posts they’re covering what they have done to improve performance. In this first part they cover script preloading and image prefetching, reducing the loading time of the “feed page” […]

Automatically compress images to your Pull Requests with this GitHub Action

The folks at Calibre have release a GitHub Action named “Image Actions” and I must say, it looks amazing insane: Image actions will automatically compress jpeg and png images in GitHub Pull Requests. Compression is fast, efficient and lossless Uses mozjpeg + libvips, the best image compression available Runs in GitHub Actions, so it’s visible […]

How Web Content Can Affect Power Usage

The Webkit blog, on how to optimize your pages so that they don’t drain the battery of your visitors their devices: Users spend a large proportion of their online time on mobile devices, and a significant fraction of the rest is users on untethered laptop computers. For both, battery life is critical. In this post, […]

Time to First Byte: What It Is and Why It Matters

Harry Roberts has done an extensive write-up on Time To First Byte (TTFB), an often overlooked metric when it comes to measuring the performance of websites. While a good TTFB doesn’t necessarily mean you will have a fast website, a bad TTFB almost certainly guarantees a slow one. To see what happens during your TTFB, […]