Embracing Interaction to Next Paint (INP) for Better Web Responsiveness

The Evolving Nature of Web Vitals For web perf professionals, ones become familiar with Google’s Core Web Vitals. These metrics have fundamentally changed how we approach performance optimization, shifting focus from technical measurements to metrics that better reflect real user experiences. As real-world usage patterns evolve and browser capabilities advance, these metrics need to evolve too. That’s the role Interaction to Next Paint (INP) plays. Announced earlier this year, INP is Google’s experimental metric designed to better measure a page’s overall responsiveness to user interactions. More importantly, it’s positioned to replace First Input Delay (FID) as a Core Web Vital next year, so understanding it now will give you a significant head start. ...

October 11, 2023 · 6 min · 1117 words · Dennis Lin

Import Maps: The Missing Piece in JavaScript's Module Ecosystem

What are import maps? ES modules with direct URLs have been around for a while, allowing us to write code like: import { something } from 'https://cdn.example.com/packages/module/v1.2.3/index.js'; Import maps provide a level of indirection between module specifiers and the actual URL where the module resides. They’re a simple JSON structure that maps from import specifiers to URLs: <script type="importmap"> { "imports": { "react": "https://esm.sh/react@18.2.0", "react-dom": "https://esm.sh/react-dom@18.2.0", "lib/": "https://cdn.skypack.dev/lib@1.2.3/" } } </script> With this map in place, our application code can now use clean, maintainable imports: ...

May 18, 2023 · 5 min · 946 words · Dennis Lin

Gearing Up for React 18: Concurrent React

React 18 is on the horizon, and it’s bringing some of the most significant changes to the library since hooks were introduced. As the alpha version has hit GitHub and the React team has shared their plans, there’s a lot to unpack and prepare for. Having spent the last few weeks digging through discussions and experimenting with the alpha, I’m excited to share what these changes mean for our codebases. ...

August 14, 2021 · 8 min · 1502 words · Dennis Lin

Beyond the Network: Building Truly Resilient PWAs with Offline Support

Progressive Web Apps have been with us for a while now, transforming the way we think about web applications and blurring the line between native and web experiences. But despite the technology’s maturity, I’ve found that many developers continue to overlook one of the most powerful PWA features: offline support. And according to recent announcements from the Chrome team, this oversight is about to become a much bigger problem. The coming offline requirement If you’ve deployed a PWA recently and checked your console, you might have noticed a new warning: “Page does not work offline.” This isn’t just a friendly reminder—it’s a harbinger of significant changes. Starting with Chrome 93 (scheduled for release in August), Google will be changing their installability criteria to require offline functionality. Without it, your PWA simply won’t be installable. ...

February 5, 2021 · 7 min · 1356 words · Dennis Lin