Performance

Performance chapter of the 2024 Web Almanac covering Core Web Vitals, with deep dives into the Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint metrics and their diagnostics.

Learn how browser turn your code into functional website from high-level architecture to the specifics of the rendering pipeline.

Those of us who consider ourselves developers, including me, are very task-oriented. We like to be **guided towards optimal results**, and we find ourselves uncomfortable when there is no clear path to follow. That is why we all want to know how to do things; we like step-by-step tutorials and how-tos. However, such guidelines are based on certain theories, deep knowledge and experience. For this reason, I will not provide you, the reader, with a structured answer to the question of how to make a website faster. Instead, I aim to provide you with the **reasons and theories for why things function in certain way**. I will use examples that are observable in the offline world and, using principles of psychology, research and analysis in psychophysics and neuroscience, I will try to answer some “Why?” questions.

Understanding server-side waterfalls with RSCs and client-side waterfalls we're familiar with and why server-side waterfalls are probably better.

Have you ever wondered how the biggest services in the world, like AWS and Netflix, achieve single-digit millisecond response times…

Essay on the benefits of speedy software, and how it affects user perception of engineering quality and overall usability

How we rolled out zstandard and other improvements across our gateway cluster to reduce the amount of bandwidth that’s used by our clients.

Track data flowing through Java programs.

We'll walk through key configurations like Tiered Cache, Cache Reserve, and crafting specific cache rules, highlighting how these optimizations benefit Pillser's users.

Page Speed Insights and Lighthouse can't evaluate performance across your entire stack of services and apps. You need something more powerful: tracing.

What's the Difference Between Throughput vs. Latency? How to Use Throughput vs. Latency with AWS.

Rate limiting is a technique to restrict the number of requests made to network resources at one time. Learn how it works.

Learn how we discovered what was slowing down large database queries, and what we did to make Postgres queries 1000x faster.

How web devs can tackle high latency networks and enhance UX and the role React Server Components plays in this.

'npm scripts' are executed by JavaScript developers and CI systems all around the world all the time. Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.

What data is put on the stack and what data is put on the heap?

romgrk's personal blog

A comprehensive guide about hotspots in your codebase, cognitive complexity and avoiding disasters by being proactive. An article inspired by the book "Your Code as a Crime Scene" by Adam Tornhill with practical examples.

TL;DR: If your font file is significantly larger than 20K you may ask yourself "How did I get here?".For images I think we (web developers) have a sense of how many bytes we can expect an image we see on a page to be. A JPEG photo? 100-ish K is ok for a decent quality. Less is nice. How about 200K?

How much HTML, CSS, and JavaScript can we afford? More than in years past, but much less than frontend developers are burdening users with.