← Extractions

How I brought LCP down to under 350 ms — wroclove.rb 2024

Paweł Pokrywka explains how he drove Largest Contentful Paint on planujewesele.pl below 350 ms by adopting Signed Exchanges (SXG) via Cloudflare, including HTML and sub-resource prefetching from Google's SXG cache. He walks through the SXG history (from AMP), Rails/Next.js constraints (no server-side personalization, no cookies, no HSTS), debugging tooling, and a two-dimensional measurement approach based on canary sub-resources.

Model

claude-opus-4-7

Ingestion

9593c813

Input tokens

551,084

fresh: 372,944
cached: 167,384
cache write: 10,756

Output tokens

17,660

Duration

284.2s

Roundtrips

Tool calls

Cost

$0.00

Nodes/edges extracted

24 / 43

Read set (nodes/edges)

128 / 2

Nodes (24)

update How I brought LCP down to under 350 ms talk

description Talk at wroclove.rb 2024. → Paweł Pokrywka's wroclove.rb 2024 talk explaining how he brought Largest Contentful Paint on planujewesele.pl below 3...

short_description Talk at wroclove.rb 2024. → Paweł Pokrywka's wroclove.rb 2024 talk on using Signed Exchanges to slash LCP.

update Paweł Pokrywka person

attrs {"nationality" => "Polish"} → {"role" => "Founder, co-owner, CTO of Planuj Wesele", "nationality" => "Polish"}

description Conference speaker. At wroclove.rb 2019 gave a lightning talk combining a 12-year spam/email-leak experiment with a c... → Conference speaker. Founder, co-owner and CTO of Planuj Wesele, a Polish wedding-vendors directory built on Rails wit...

create Planuj Wesele company

kind (empty) → company

name (empty) → Planuj Wesele

slug (empty) → planuj-wesele

attrs (empty) → {"country" => "Poland", "industry" => "wedding vendors directory"}

description (empty) → Polish wedding-vendors directory that helps couples find photographers, music bands and other vendors for their weddi...

short_description (empty) → Polish wedding-vendors directory (photographers, bands, venues).

create Largest Contentful Paint concept

kind (empty) → concept

name (empty) → Largest Contentful Paint

slug (empty) → largest-contentful-paint

attrs (empty) → {"aliases" => "LCP", "category" => "practice"}

description (empty) → One of Google's Core Web Vitals. Measures the render time of the largest content element visible in the viewport and ...

short_description (empty) → Core Web Vital measuring when a page's largest visible content element renders.

create Core Web Vitals concept

kind (empty) → concept

name (empty) → Core Web Vitals

slug (empty) → core-web-vitals

attrs (empty) → {"category" => "practice"}

description (empty) → Set of user-centric performance metrics Google uses to quantify page experience, including Largest Contentful Paint. ...

short_description (empty) → Google's user-centric performance signals (LCP, FID/INP, CLS) influencing SERP rank.

create Signed Exchanges concept

kind (empty) → concept

name (empty) → Signed Exchanges

slug (empty) → signed-exchanges

attrs (empty) → {"aliases" => "SXG", "category" => "architecture", "introduced" => "2018"}

description (empty) → Web technology (short name 'sxg') that lets a cacheable HTTP exchange (request + response + headers) be cryptographic...

short_description (empty) → Draft web standard letting a third party serve a cryptographically signed copy of a page.

create Accelerated Mobile Pages concept

kind (empty) → concept

name (empty) → Accelerated Mobile Pages

slug (empty) → accelerated-mobile-pages

attrs (empty) → {"aliases" => "AMP", "category" => "architecture", "introduced" => "2015"}

description (empty) → Google project (short name AMP) launched in 2015 that solved the privacy/control problems of naive prefetching by kee...

short_description (empty) → Google's 2015 simplified-HTML framework for prefetching mobile pages from Google servers.

create Cloudflare company

kind (empty) → company

name (empty) → Cloudflare

slug (empty) → cloudflare

attrs (empty) → {"industry" => "CDN / edge services"}

description (empty) → CDN and edge-services company. In Pawel Pokrywka's talk, Cloudflare is used as the reverse proxy in front of Planuj W...

short_description (empty) → CDN and edge-services company offering SXG via a one-click reverse-proxy feature.

create Automatic Signed Exchanges tool

kind (empty) → tool

name (empty) → Automatic Signed Exchanges

slug (empty) → automatic-signed-exchanges

attrs (empty) → {"aliases" => "ASX", "category" => "service"}

description (empty) → Cloudflare's automated SXG pipeline (ASX). Sitting as a reverse proxy in front of the origin, it parses the HTML resp...

short_description (empty) → Cloudflare feature that generates and signs SXG packages, including sub-resource hashes.

create Cloudflare Workers tool

kind (empty) → tool

name (empty) → Cloudflare Workers

slug (empty) → cloudflare-workers

attrs (empty) → {"category" => "platform"}

description (empty) → Cloudflare's edge-compute platform used in Pokrywka's SXG setup for two fixes: (1) conditionally stripping the Rails-...

short_description (empty) → Cloudflare's edge compute platform for running JavaScript on HTTP requests/responses.

create Next.js tool

kind (empty) → tool

name (empty) → Next.js

slug (empty) → next-js

attrs (empty) → {"category" => "framework"}

description (empty) → React-based meta-framework. Used as the front end for Planuj Wesele's progressive migration away from a pure Rails st...

short_description (empty) → React meta-framework for server-rendered and static web applications.

create Google Search Console tool

kind (empty) → tool

name (empty) → Google Search Console

slug (empty) → google-search-console

attrs (empty) → {"category" => "service"}

description (empty) → Google's site-owner tool. Its URL inspection feature instructs Googlebot to fetch a page and exposes the resulting HT...

short_description (empty) → Google tool for site owners to inspect URLs as Googlebot sees them.

create SXG Validator tool

kind (empty) → tool

name (empty) → SXG Validator

slug (empty) → sxg-validator

attrs (empty) → {"category" => "tool"}

description (empty) → Browser extension that inspects a page and reports whether it implements Signed Exchanges correctly, offering hints. ...

short_description (empty) → Browser extension that validates a page's Signed Exchange implementation.

create Requestly tool

kind (empty) → tool

name (empty) → Requestly

slug (empty) → requestly

attrs (empty) → {"category" => "tool"}

description (empty) → Browser extension that modifies HTTP headers (among other things). Useful for debugging SXG because, unlike curl, it ...

short_description (empty) → Browser extension for modifying HTTP requests and response headers.

create Bot Fight Mode concept

kind (empty) → concept

name (empty) → Bot Fight Mode

slug (empty) → bot-fight-mode

attrs (empty) → {"category" => "practice"}

description (empty) → Cloudflare feature that detects and blocks bot-like HTTP clients. Because curl is classified as a bot, Pokrywka had t...

short_description (empty) → Cloudflare feature blocking bot-like requests; must be disabled for curl-based debugging.

create Google SXG Cache concept

kind (empty) → concept

name (empty) → Google SXG Cache

slug (empty) → google-sxg-cache

attrs (empty) → {"category" => "architecture"}

description (empty) → Opaque, underdocumented Google-operated cache (served under web-pkg-c.com) that stores Signed Exchange packages fetch...

short_description (empty) → Google's opaque cache (web-pkg-c.com) that stores and serves Signed Exchange packages.

create SXG Sub-resource Prefetching concept

kind (empty) → concept

name (empty) → SXG Sub-resource Prefetching

slug (empty) → sxg-sub-resource-prefetching

attrs (empty) → {"category" => "pattern"}

description (empty) → Extension of Signed Exchanges that prefetches critical sub-resources (CSS, JS, images, fonts) together with the main ...

short_description (empty) → Prefetching CSS/JS/fonts/images alongside the HTML via hashed entries in the Link header.

create Crawler Budget concept

kind (empty) → concept

name (empty) → Crawler Budget

slug (empty) → crawler-budget

attrs (empty) → {"category" => "practice"}

description (empty) → SEO concept: each crawler (e.g. Googlebot) imposes a limit on how many requests it will perform against a given site ...

short_description (empty) → Per-crawler per-day request budget that bounds how many pages a site gets indexed.

create Canary Sub-resource concept

kind (empty) → concept

name (empty) → Canary Sub-resource

slug (empty) → canary-sub-resource

attrs (empty) → {"category" => "practice"}

description (empty) → Measurement technique Pokrywka invented for SXG: include a specific sub-resource that is sometimes loaded and use Jav...

short_description (empty) → Optional sub-resource used via JS to detect whether SXG prefetching succeeded.

create Ditch the AMP framework, keep the cached-signed-page idea takeaway

kind (empty) → takeaway

name (empty) → Ditch the AMP framework, keep the cached-signed-page idea

slug (empty) → ditch-the-amp-framework-keep-the-cached-signed-page-idea

attrs (empty) → {"type" => "insight"}

description (empty) → The key design insight behind SXG: AMP had the right idea (cache a trusted page on Google servers, prefetch from ther...

short_description (empty) → SXG preserves AMP's privacy and control benefits without its HTML limitations.

create Decouple request from response for SXG takeaway

kind (empty) → takeaway

name (empty) → Decouple request from response for SXG

slug (empty) → decouple-request-from-response-for-sxg

attrs (empty) → {"type" => "recommendation"}

description (empty) → The biggest mental rewiring required when adopting SXG: stop treating HTTP responses as personalized, request-scoped ...

short_description (empty) → Think of SXG responses as independently-lived, cache-friendly artifacts — not request-scoped.

create Measure SXG with a canary, not before/after takeaway

kind (empty) → takeaway

name (empty) → Measure SXG with a canary, not before/after

slug (empty) → measure-sxg-with-a-canary-not-before-after

attrs (empty) → {"type" => "recommendation"}

description (empty) → Naive before/after measurement of SXG is swamped by seasonal bias, low SXG share of traffic, and the fact that SXG us...

short_description (empty) → Compare SXG traffic with working vs broken sub-resource prefetching, not pre- vs post-deploy.

create Bump asset version when debugging multi-layer caches takeaway

kind (empty) → takeaway

name (empty) → Bump asset version when debugging multi-layer caches

slug (empty) → bump-asset-version-when-debugging-multi-layer-caches

attrs (empty) → {"type" => "recommendation"}

description (empty) → When debugging SXG changes, invalidate every layer of cache (Cloudflare, Google SXG cache, browser cache) at once by ...

short_description (empty) → Invalidate Cloudflare, Google SXG and browser caches at once by changing asset versions.

create Does SXG break on its own due to Google changes? question

kind (empty) → question

name (empty) → Does SXG break on its own due to Google changes?

slug (empty) → does-sxg-break-on-its-own-due-to-google-changes

attrs (empty) → {"answer_summary" => "Unknown so far — speaker only started measuring error rate to prepare this talk, so can't yet s...

description (empty) → After the talk an audience member asks whether, since Google's SXG cache behavior is undocumented, the speaker has to...

short_description (empty) → Does SXG need re-measurement even without deployments because Google silently changes things?

Edges (43)

update Paweł Pokrywka → authored → How I brought LCP down to under 350 ms

context (empty) → Speaker of the wroclove.rb 2024 talk on SXG-based LCP optimization.

update How I brought LCP down to under 350 ms → presented_at → wroclove.rb 2024

context (empty) → Delivered at wroclove.rb 2024.

create Paweł Pokrywka → attended → wroclove.rb 2024

context (empty) → Gave the LCP/SXG talk at wroclove.rb 2024.

relation (empty) → attended

source_node_id (empty) → 2d80c770-9d41-4499-9218-c9dc85f49567

target_node_id (empty) → 748e0524-a102-41d4-97dc-575881583d91

create Paweł Pokrywka → works_at → Planuj Wesele

attrs (empty) → {"role" => "Founder, co-owner, CTO"}

context (empty) → Founder, co-owner and CTO of the wedding-vendors directory.

relation (empty) → works_at

source_node_id (empty) → 2d80c770-9d41-4499-9218-c9dc85f49567

target_node_id (empty) → 7a9aac45-1836-431c-9378-b56efc0b941c

create Planuj Wesele → uses → Ruby on Rails

context (empty) → Site was started as a Rails application 16 years before the talk.

relation (empty) → uses

source_node_id (empty) → 7a9aac45-1836-431c-9378-b56efc0b941c

target_node_id (empty) → 7aac705a-0987-49f2-b665-9d4e08a6acee

create Planuj Wesele → uses → Next.js

context (empty) → Migrating front end to Next.js.

relation (empty) → uses

source_node_id (empty) → 7a9aac45-1836-431c-9378-b56efc0b941c

target_node_id (empty) → 3c364ae0-0e7e-4fbc-b2b6-3f4bd983fc17

create Planuj Wesele → uses → Cloudflare

context (empty) → Uses Cloudflare as reverse proxy that generates Signed Exchanges and runs Workers.

relation (empty) → uses

source_node_id (empty) → 7a9aac45-1836-431c-9378-b56efc0b941c

target_node_id (empty) → a55e94b3-dde9-43f3-b42b-ba00b37f86a7

create Planuj Wesele → uses → Signed Exchanges

context (empty) → Adopted SXG via Cloudflare to bring LCP below 350 ms.

relation (empty) → uses

source_node_id (empty) → 7a9aac45-1836-431c-9378-b56efc0b941c

target_node_id (empty) → 1739eca0-170a-4eb1-9839-e82fcc9a5c6e

create How I brought LCP down to under 350 ms → about → Largest Contentful Paint

context (empty) → Entire talk is about bringing LCP below 350 ms.

relation (empty) → about