A rather geeky/technical weblog, est. 2001, by Bramus
Embedded above, but also available as a transcript, is Scott Jehl’s talk “Move Fast & Don’t Break Things” on how to keep your website performant. The talk starts of with Progressive Enhancement (of course!) and covers things such as Responsive Images, Native Lazy Loading of Images, font-display: swap;, Paint Metrics, etc. Move Fast & Don’t …
Aggelos Arvanitakis, writing for the Web Performance Calendar 2019 edition: Besides some of the great advantages CSS-in-JS boasts over traditional CSS, it may still create performance issues in certain apps. In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on …
Continue reading “The unseen performance costs of modern CSS-in-JS libraries in React apps”
UPDATE 2020.07: the thresholds have been adjusted to be less eager: We’ve improved <img> lazy-loading in Chrome! https://t.co/zx8sf7I86L The new thresholds for when we load <img loading=lazy>: * Offer *much* better data-savings* Are closer to JavaScript lazy-loading libraries* Are rolling out to Chrome 79+ pic.twitter.com/3OHm2rnRAm — Addy Osmani (@addyosmani) July 17, 2020 For the Web …
Continue reading “Native Image Lazy Loading in Chrome Is Way Too Eager”
The problem in business is we have lopsided metrics. We have a million-and-one metrics to measure someone’s performance, and negligible to no metrics to measure someone’s trustworthiness. 👉 You might know Simon from other videos such as Millennials (in the Workplace) or Why Leaders Eat Last. Totally worth your time.
Alex MacArthur: The advantages of Web Workers are many, but things really clicked for me when it came to the several DOM event listeners in any given application. These all necessarily live on the browser’s main thread, and if that thread is congested by a long-running process, the responsiveness of those listeners begins to suffer, …
Continue reading “Handling JavaScript events with Web Workers”
JSON.parse()
A performance trick that’s been doing rounds on Twitter, now available as a video: Because the JSON grammar is much simpler than JavaScript’s grammar, JSON can be parsed more efficiently than JavaScript. This knowledge can be applied to improve start-up performance for web apps that ship large JSON-like configuration object literals (such as inline Redux …
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 …
Continue reading “One simple trick to optimize React re-renders”
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 …
Amazon AWS has offered a Serverless Image Handler for a while that allows you to spin up an AWS Lambda function to create your own private little image transform service that is inexpensive, fast, and is fronted by the CloudFront content delivery network (CDN). Whenever an image is uploaded to the bucket, a Lambda function …
Continue reading “Using AWS’ “Serverless Image Handler” to roll your own Image Transform Service”
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 …
Continue reading “Optimizing images for the web – an in-depth guide”