Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Load Fast.
Don't Suck.

Some Honest Advice For Core Web Vitals

Hi!

My name is Lemon.

(I make websites.)

The Psychology of Performance

6 Thresholds

0 - 100 msInstant

• Action and reaction feel fused
• Interface feels like a physical extension of the hand
• The ceiling we're chasing

100ms - 300 msThe Machine

• Slight perceptible lag, but still feels like you're in control
• The computer is visibly doing something — but you're not waiting
• Gold standard for snappy web interactions

300ms - 1sThe Flow Threshold

• Limit for keeping a user's train of thought uninterrupted
• At 1s, users lose the sense of operating directly on the data

1s - 3sThe Anxiety Threshold

• Mental focus shifts
• User is aware of delay
• Bounce probability increases by 32%

3s - 5sThe Abandonment Threshold

• User's attention is fully on the delay
• User is actively deciding whether to stay or go
• Bounce probability increases by 90%

10 secondsThe Ghost Town

• Your site doesn't have users anymore

CrUX

Chrome User Experience Report

• Launched 2017 by the Chrome team
• Real field data from opted-in Chrome users
• Rolling 28-day window — millions of real sessions

Google made it a ranking factor.

In June 2021, Google launched the Page Experience update.

Core Web Vitals — drawn from CrUX — became an official search ranking signal.

Your CrUX score is your position in search results.

It's not just Google.

5 metrics

CrUX report: NDC Oslo.com

For each metric, we'll answer two questions.

• What is it?
• Why should I care?

TTFB

Time To First Byte

The user requested your webpage and is waiting for a response from the server.

This is measured in milliseconds (ms).

But first, we need a baseline.

Which means we need another acronym.

RTT

Round Trip Time

The time it takes for the client to send a signal to the server and receive an acknowledgment back.

This is also measured in milliseconds (ms).

aka...

ping

ping

Bad Things...

<?php
  if (isset($_COOKIE['sid'])) {
      if ($email = json_decode(file_get_contents("api/email?sid=".$_COOKIE['sid']), true)['email']) {
          if ($status = json_decode(file_get_contents("api/status?email=".$email), true)['active']) {
              if ($pref = json_decode(file_get_contents("api/pref?email=".$email), true)) {
                  if ($theme = $pref['settings']['theme']) {
                      if ($avatar = json_decode(file_get_contents("api/avatar?id=".$pref['id']), true)['url']) {
                          define('READY', true);
                          echo "<img src='$avatar' class='$theme'>";
                      }
                  }
              }
          }
      }
  } else {
      header("Location: /login");
  }

SELECT
    * FROM users

SELECT
    * FROM users
LEFT JOIN
    orders ON users.id = orders.user_id

SELECT
    * FROM users
LEFT JOIN
    orders ON users.id = orders.user_id
LEFT JOIN
    activity_logs ON users.id = activity_logs.user_id

SELECT
    * FROM users
LEFT JOIN
    orders ON users.id = orders.user_id
LEFT JOIN
    activity_logs ON users.id = activity_logs.user_id
LEFT JOIN
    site_themes ON users.theme_id = site_themes.id

SELECT
    * FROM users
LEFT JOIN
    orders ON users.id = orders.user_id
LEFT JOIN
    activity_logs ON users.id = activity_logs.user_id
LEFT JOIN
    site_themes ON users.theme_id = site_themes.id
WHERE
    users.id = 42
LIMIT 1

Bad Hosting

Good Things...

# Cache static assets for 1 year

  Header set Cache-Control "public, max-age=31536000, immutable"


# Cache HTML for 24 hours (CDN) / 1 hour (browser)

  Header set Cache-Control "public, max-age=3600, s-maxage=86400"


# Don't cache dynamic content

  Header set Cache-Control "no-cache, must-revalidate"

HTTP/3 + TLS 1.3

The handshake is done.

The First 14kb

1. Handshake
   TCP/TLS Negotiation (2.5 RTTs)
2. Initial Burst
   The first 14KB is sent immediately.
3. ACK Wait
   Server stops. Waits for confirmation.
4. Everything Else
   The rest follows.

initcwnd

Oh no! That means we have to discuss

"The Fold"

And now, a brief tangent about...

"The Fold"

The Business View

"Above the fold" is where everything important should go.

This was true of newspapers in the 1950's.

And everything on our website is important.

Therefore everything must go above the fold.

And therefore...

CAROUSEL

CAROUSEL

The

CAROUSEL

is where content goes to die.

• 1% of users click a carousel feature.
• Of those, 90% only click the first one.
• Slower sites. Frustrated users. Fewer conversions.
• Ad blindness takes effect here.
• Bad for accessibility, SEO, and performance.

but

Requirements
are requirements

FCP

First Contentful Paint

The first pixels of your website's content appear on the user's screen.

Bad Things...

<head>
  <link rel="stylesheet" href="/styles/global.css">
  <link rel="stylesheet" href="/styles/unused-bootstrap-v2.css">
  <link rel="stylesheet" href="/styles/that-one-widget-we-deleted-in-2019.css">

  <script src="/js/jquery-ui-full-1.12.1.min.js"></script>

  <script src="https://dead-tracking-service.io/tracker.js"></script>
</head>

<head>

  <link rel="stylesheet" href="/css/fontawesome-all-pro-v6.css">

</head>
<body>

  <p>Check out my blog!</p>
  <i class="fa-solid fa-face-smile-wink"></i>

</body>

<head>

  <title>Enterprise SaaS Turbo Ultra</title>

</head>
<body>

  <div id="app"></div>

  <script src="/static/js/main.9f2a83b1.chunk.js"></script>
  <script src="/static/js/vendors~heavy-enterprise-modules.882c12.bundle.js"></script>

</body>

@font-face {
  font-family: 'ExtremelyFancySerif';
  src: url('/fonts/ultra-bold-italic-extra-wide.woff2');
}

h1 {
  font-family: 'ExtremelyFancySerif';
}

FOIT & FOUT

Flash of Invisible Text
Flash of Unstyled Text

Well, let's see a demo...

Good Things...

<head>

  <script src="/analytics.js" async></script>
  <script src="/app-interactivity.js" defer></script>

</head>
<body>

  <header class="site-header">...</header>
  <div class="skeleton-nav"></div>
  <img src="/footer-ad.jpg" loading="lazy" width="300" height="250">

</body>

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand-font.woff2') format('woff2');
  /* The browser paints instantly with a system font */
  font-display: swap;
}

body {
  /* Falls back nearest available fonts until 'BrandFont' is ready */
  font-family: 'BrandFont', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

<head>

  <title>Enterprise SaaS Turbo Ultra</title>

</head>
<body>

  <div id="app">
    <header>...</header>
    <main>
      <h1>Welcome to the App</h1>
      <p>This content was rendered on the server!</p>
    </main>
    <footer>...</footer>
  </div>

  <script src="/static/js/main-bundle.js" defer></script>

</body>

<head>
  <style>
    /* Critical CSS: above-fold styles inlined — no network request */
    .site-header { height: 60px; background: #1a1a1a; }
    .nav-link { color: #fff; padding: 10px; }
  </style>
</head>
<body>
  <header class="site-header">
    <nav class="nav-link">Home</nav>
  </header>

  <link rel="stylesheet" href="/styles.css">

  <main>...</main>

  <link rel="stylesheet" href="/print.css" media="print">
</body>

LCP

Largest Contentful Paint

The largest visible content element on your website has been rendered.

Bad Things...

1. The "Secret Agent" Image

/* The browser doesn't know this exists until the CSS is parsed */
.header-wrapper .hero-inner {
  background-image: url('/assets/huge-hero.jpg');
}

2. The "Last in Line"

<body>
  <img src="/hero.jpg" loading="lazy" alt="Hero">
</body>

3. The "Mystery Box"

<body>
  <img src="huge-hero.jpg">
</body>

Good Things...

1. The "VIP Pass"

<head>
  <link rel="preload" as="image" href="/hero.avif">
</head>
<body>
  <img src="/hero.avif" fetchpriority="high" alt="Hero">
</body>

2. The "Pre-Reserved Seat"

.hero-image {
  /* Reserves a 16:9 box so the page doesn't jump */
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

3. The "Right-Sized Payload"

<picture> 
  <source srcset="hero-400.webp" media="(max-width: 400px)" type="image/webp">
  <source srcset="hero-600.webp" media="(max-width: 600px)" type="image/webp">
  <source srcset="hero-900.webp" media="(max-width: 900px)" type="image/webp">
  <source srcset="hero-1200.webp" media="(max-width: 1200px)" type="image/webp">
  <source srcset="hero-1800.webp" type="image/webp">
  <img src="hero-1800.webp" alt="Hero">
</picture>

INP

Interaction to Next Paint

Measures how long it takes for the page to visually respond to user input.

Bad Things...

The Greedy Handler

button.addEventListener('click', () => {

  const data = JSON.parse(massivePayload);  // ~300ms

  rows.forEach(row => {
    const h = row.offsetHeight;             // forces layout
    row.style.height = (h * 1.5) + 'px';   // invalidates layout
  });                                        // × 500 rows

  localStorage.setItem('cart', JSON.stringify(data)); // ~80ms

  // Total: ~600ms of main thread. Page looks frozen.
});

Good Things...

scheduler.yield()

button.addEventListener('click', async () => {

  const data = JSON.parse(massivePayload);

  await scheduler.yield(); // hand control back to the browser

  rows.forEach(row => {
    row.style.height = (row.offsetHeight * 1.5) + 'px';
  });

  await scheduler.yield(); // and again

  localStorage.setItem('cart', JSON.stringify(data));

});

Debounce the Expensive Stuff

// ✗ Runs on every keystroke
input.addEventListener('input', searchEverything);

// ✓ Waits until the user stops typing
input.addEventListener('input', debounce(searchEverything, 300));

CLS

Cumulative Layout Shift

Measures the visual stability of your page by tracking unexpected layout shifts.

Each layout shift is scored as:

impact fraction × distance fraction

A 400px element in an 800px viewport shifts down by 200px:

Bad Things...

The Unsized Image

<!-- Browser has no idea how tall this will be -->
<img src="/hero.jpg" alt="Hero">
<p>User is already reading this...</p>

<!-- Image arrives. Everything below shifts down. -->

The Late Arrival

<body>

  <main>
    <p>...to continue reading,</p>
    <a href="/next">Next page →</a>  <!-- 👆 user is here -->
  </main>

</body>

The Late Arrival

<body>

  <div class="ad-network-banner">
    <!-- SPONSORED -->               <!-- 👆 user clicks THIS -->
  </div>

  <main>
    <p>...to continue reading,</p>
    <a href="/next">Next page →</a>  <!-- ↓ now 90px lower  -->
  </main>

</body>

The Font Swap Shove

@font-face {
  font-family: 'TallFont';
  src: url('/fonts/tall.woff2');
  /* font-display: swap = invisible text, then sudden reflow */
}

body { font-family: 'TallFont', sans-serif; }

/* Fallback font: line-height 1.4, 14 lines visible  */
/* TallFont arrives: line-height 1.8, now 11 lines   */
/* Everything below the text block just shifted up.  */

Good Things...

Explicit Dimensions

<!-- Tell the browser exactly what size to expect -->
<img src="/hero.jpg"
     width="1200"
     height="630"
     alt="Hero">

<!-- Or in CSS -->
<style>
  .hero { aspect-ratio: 16 / 9; width: 100%; }
</style>

Reserve Space for Late Content

/* Give ad slots and widgets a guaranteed home */
.ad-banner    { min-height: 90px;  }
.cookie-bar   { min-height: 64px;  }
.chat-widget  { min-height: 56px;  }

/* Content loads into the reserved space — nothing shifts */

font-display: optional

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand-font.woff2') format('woff2');
  font-display: optional;
}

/* optional: use the web font only if it's already cached.
   Otherwise, stick with the fallback. No swap. No shift. */

Takeaways...

Page Speed Insights

pagespeed.web.dev

Request Metrics Crux Report*

requestmetrics.com/resources/tools/crux

Google Search Console

search.google.com/search-console

Lighthouse

Easy wins.

Size every image

Reserve space for late arrivals

/* Anything injected after the initial render */
.ad-banner    { min-height: 90px;  }
.cookie-bar   { min-height: 64px;  }
.chat-widget  { min-height: 56px;  }

/* Content loads into space that was already there — nothing shifts */

Two lines that kill font CLS

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand-font.woff2') format('woff2');
  font-display: optional; /* no swap, no shift */
}

Break up your handlers

// ✗ Everything fires before the browser can paint
input.addEventListener('input', searchEverything);
button.addEventListener('click', runTheWholeThing);

// ✓ Wait until the user pauses (INP win for inputs)
input.addEventListener('input', debounce(searchEverything, 300));

// ✓ Yield between chunks (INP win for heavy handlers)
button.addEventListener('click', async () => {
  doFirstThing();
  await scheduler.yield();
  doSecondThing();
});

This Talk

Thank you.

ahoylemon.xyz