Pushing Pixels

A presentation at Performance.now() in November 2023 in Amsterdam, Netherlands by Mark Zeman

Pushing Pixels

Hopeful Idealist

Pages

Buttery Smooth

Thinking in pages has fostered a monolithic approach to the web experience

Let’s bust up that monolith

Let’s burn those pages

Let’s burn those pages an ape wearing a spacesuit burning pages in a book surrounded by hundreds of other burning books

Not every pixel has the same value

Nav Cart Hero Ad Content

Design an island

Don’t throw pages over the wall from design to development

Collaborate and prototype early in small interdisciplinary teams

Kumara Incident

Approach the UX as time based

Nav Cart Hero Ad Content

Static App Static Third Party Static

Design Dev Marketing Agency Content

Build an island

patterns.dev

Islands Architecture Katie Sylor-Miller

astro.build

Multi Page App Content Focused BYO JS Components astro.build

astro.build

astro.build

astro.build

Critical Rendering Path web.dev

Static vs SPA 1.7s 10.5s

Measure an island

Hero Times

Hero Times 1.7s

Paul Irish

Largest Contentful Paint

Largest Contentful Paint Cumulative Layout Shift First Input Delay

Largest Contentful Paint Cumulative Layout Shift First Input Delay Interaction to Next Paint

First Meaningful Paint

Cumulative Layout Shift Windows

Unexpected LCP

Unexpected LCP

Unexpected LCP

WC3 Web Performance Working Group

Element Timing <img src=”/images/logo.png” elementtiming=”logo-shown” /> Chromium only img and text nodes RUM & Synthetic

Time to first tweet

Think in smaller islands of content and stream them into the browser (islands architecture)

Don’t prioritise developer experience over user experience (everything has a cost, especially SPAs)

Keep measurement simple and easy for everyone to understand and improve (build a performance culture)

Pushing Code

Pushing Pixels

Mark Zeman
@zeman

1 / 62

Often, when building websites, our units of measure are “pages”. It’s time to get more granular! Not every pixel on a page has the same importance. Users want to see the most important content first, while the ad team might want their content delivered early as well. Content elements need deliberate prioritisation rather than trying to make the whole page fast. Let’s pull the idea of a “page” apart and explore a design and development pipeline that focuses on islands of content. How do we then design, build and monitor the performance of our content islands?

Buzz and feedback

Here’s what was said about this presentation on social media.