Latest Reads

Maximiliano Firtman's content and learning experiences for Web Performance

The Ultimate Guide to React: Conquering Concurrent Mode and Suspense

Concurrent mode and suspense are two game-changing features that have been introduced in recent versions of React. They allow you to write more responsive and performant applications by unlocking the power of concurrent rendering and suspenseful loading. In this guide, we'll take a deep dive into both features and provide actionable tips on how to use them effectively in your own React applications.

Understanding the critical path

The critical rendering path is a concept in web performance that deals with how quickly the initial rendering of a page appears in the browser. This module goes into the theory behind the critical rendering path, covering concepts such as render-blocking and parser-blocking resources, and how they play a key role in how quickly a page appears in the browser.

Prefetching, prerendering, and service worker precaching

While much of performance deals with what you can do to optimize and eliminate unnecessary resources, it may seem a bit paradoxical to suggest that some resources should be loaded before they're needed. However, there are some cases in which it _might_ be appropriate to load certain resources ahead of time. In this module, this aspect of performance is explored, as prefetching, prerendering, and service worker precaching are discussed.

Assist the browser with resource hints

Resource hints are a collection of features available in HTML that can assist the browser in loading resources earlier and possibly even with higher resource priority. In this module, a few resource hints that can help your pages load even faster are covered.

Building Mobile Apps With Capacitor, Quasar And Vue.js : A Comprehensive Guide

This tutorial will guide you through the process of leveraging Capacitor and the latest web technologies, including Quasar and Vue.js, to develop robust mobile applications that seamlessly run on both Android and iOS platforms.

Addy Osmani's 18-Point Web Performance Checklist

The first performance improvement that I check for is whether the site can be shipping less JavaScript while still providing most of their value to the end user. If you're sending down multiple megabytes of JS, that might be completely fine if your target audience are primarily on desktop, but if they're on mobile this can often dwarf the costs of other resources because it can take longer to process.

Integrating Capacitor with Next.js: A Step-by-Step Guide

In this guide, we’ll walk through how to integrate Capacitor with a Next.js project to build cross-platform mobile apps. Capacitor is a powerful tool that helps turn web applications into native mobile experiences.

Svelte Compiler: How It Works

Svelte Compiler: How It Works

Everything You Need To Know About Caching in NextJs

If you are unfamiliar with Next.js caching technique, you may feel as though you are always at odds with it rather than enjoying the advantages of its potency. For this reason, I’ll explain in detail each component of Next.js cache functions in this post so you can finally stop battling with it and benefit from its amazing performance.

Early Hints: How Cloudflare Can Improve Website Load Times by 30%

Want to know a secret about Internet performance? Browsers spend an inordinate amount of time twiddling their thumbs waiting to be told what to do. This waiting impacts page load performance. Today, we’re excited to announce support for Early Hints, which dramatically improves browser page load performance and reduces thumb-twiddling time.

Early Hints update: How Cloudflare, Google, and Shopify are working together to build a faster Internet for everyone

Early Hints was designed to take advantage of this “server think time” to send instructions to the browser to begin loading readily-available resources while the server finishes compiling the full response. Concretely, the server sends two responses: the first to instruct the browser on what it can begin loading right away, and the second is the full response with the remaining information. By sending these hints to a browser before the full response is prepared, the browser can figure out what it needs to do to load the webpage faster for the end user.