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

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

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