Tips for building Lightning Fast Web Applications!
Web developers typically aren't exposed to low-level browser rendering primitives, yet the concepts of Layers and Compositing are…
Tracing web applications takes time and practice to master. However, there are a few general visual patterns one can use to quickly spot if…
A common question I've encountered when consulting with teams that utilize in their web application architecture is: Does an…
Many web applications utilize animations to achieve a variety of visual effects. For example, a web application may surface an animated…
The browser's style and layout process (also known as reflow ) is responsible for assigning visual styles and geometry to elements of a…
Web Developers often fixate on optimizing the delivery of assets to the end-user's device, and overlook the computation that takes place…
I use Office 365 for my personal productivity tool of choice and often use the OneDrive web UX to manage my personal files and photos…
The Sequential Network Request pattern is a web performance anti-pattern, and it's unfortunately common in production web applications…
CORS (Cross Origin Resource Sharing) enables web apps to communicate securely across origins. It typically functions by having the browser…
Users love pixels (frames) delivered on screen as fast as possible; that's what makes a web application feel fast ! HTML and CSS are the…
Despite the name of React's most well known API, ReactDOM.render(...) , React does not render! 😮 Rendering (the process of presenting…
While Web Applications are granted a single thread, the Main Thread , to run most of their application and UI logic, Web Browsers are…
The majority of my time spent analyzing the CPU component of a web application's performance trace is within the Chromium F12 Profiler's…
Applying compression algorithms like gzip or brotli to your resources transferred over the network is crucial to ensuring optimal…
In this tip, we'll look at common network bottlenecks, how they manifest in Chromium Profiler, Network Tab, and how you can quantify them in…
All web applications are granted a single thread, the Main Thread, which is responsible for: Handling user input events, like clicks and…
As part of the ES2015 specification, JavaScript received support for the class syntax. This syntax provides familiar object oriented…
Minification is one of the most common techniques web developers use to reduce the their app's resource sizes . Minifiers are build tools…
The browser's 'mouseover' event can be used as an explicit signal from your users indicating what their next action might be. In this tip…
Do your performance measurements capture when the browser renders pixels to your user? Most likely, not! In my experience, most developers…
Measuring allows engineers to identify how their app's time is being spent at runtime. Setting up proper measurements helps: Establish a…
The Browser Event Loop is probably the most important frontend performance concept to grasp. Its behavior dictates how web applications…
The size of the resources (images, JavaScript files, CSS files, etc.) web applications deliver to end-users directly impacts performance. It…
Like many others throughout the pandemic, I used Uber Eats to safely deliver food while going to restaurants was unavailable. One day, I…
In this tip, we'll discuss function self time, how it's represented in a flamegraph, and how it differs from cumulative time. Understanding…
Many web applications require the presentation of user-friendly date strings within their UI. For example, most users would prefer seeing…
The Chromium Profiler produces incredibly useful visualizations via flamegraphs to help us understand what is consuming CPU time in thread…
Performance profiles of modern web applications usually produce flamegraphs of significant complexity. In this tip, we'll look at more…
Flamegraphs are the industry-standard way to visually represent runtime code stack traces and their respective time to execute as a…
The Chromium Performance Profiler's UI can appear overwhelming at first, but it is actually quite intuitive once you understand how it's…
The Chromium Network tab has many capabilities, ranging from payload previews, request blocking and replaying, traffic filtering, and much…
Network bottlenecks are one of the most common types of performance issues in web apps I diagnose. The web fundamentally operates by…
Whenever I work with a team that is interested in improving their web product's performance, one of the first things I ask is Have you…
