PicPerf Optimization Pipeline

This page demonstrates every step of the PicPerf full-site optimization pipeline. View the page source or proxy response to see each transformation in action. Edge cases from real production sites are annotated in comments.

1. Speculation Rules

Same-origin <a> links above trigger a <script type="speculationrules"> block with eagerness: "moderate", enabling hover-triggered prefetch. The external link is excluded.

2. Resource Hints

External origins detected in src, href, and url() attributes get <link rel="preconnect"> and <link rel="dns-prefetch"> injected into <head>. Font origins (fonts.googleapis.com, fonts.gstatic.com) always include crossorigin. Pre-existing hints are honored (no duplicates).

External origins detected on this page include:

cdn.jsdelivr.net
cdnjs.cloudflare.com
fonts.googleapis.com
fonts.gstatic.com
picsum.photos
googletagmanager.com
connect.facebook.net
static.hotjar.com

3. Static Prep

Same-origin <link rel="stylesheet"> and <script src> tags are downloaded, optionally minified, uploaded to R2, and rewritten to /pp-static/<hash>.<ext>. ESM modules (type="module") are skipped (contains ESM syntax).

Relative CSS

<link rel="stylesheet" href="/css/demo.css"> → self-hosted to R2.

Relative JS

<script src="/js/demo.js"> → self-hosted to R2.

ESM Module (skipped)

<script type="module" src="..."> → left as-is (ESM syntax check prevents self-hosting).

4. Images

All image URLs are prefixed with https://picperf.io/ for automatic optimization. Works on <img src>, <img srcset>, <source srcset>, and inline background-image. Also handles background shorthand with url() and loading="lazy" images.

Standard <img src> (with loading="lazy")

<img> with srcset

<picture> with <source srcset>

Inline background-image

Edge case: inline `background` shorthand with multiple layers

Edge case: inline `style` attribute with `background` shorthand containing `url()`

5. Scripts

Known-safe third-party scripts automatically get async added. Scripts that already have async or defer are left alone. ESM modules (type="module") are naturally deferred by the browser and not modified. application/ld+json scripts are invisible to the pipeline (no src attribute).

Already async

Hotjar snippet: <script async src="..."> → left as-is.

Already deferred

Bootstrap bundle: <script defer src="..."> → left as-is.

ESM module

<script type="module"> → not modified by scripts step (no src), skipped by static prep.

JSON-LD

<script type="application/ld+json"> → invisible to all steps (no src, not a module).

6. Fonts

Google Fonts <link> tags are fetched, font files uploaded to R2, and the original link is replaced with an inline <style> containing self-hosted @font-face declarations with font-display: swap. Fontsource fonts (jsdelivr CDN) are not self-hosted but still trigger resource hints. Pre-existing inline @font-face declarations in <style> are left untouched.

Inter

Google Fonts — self-hosted by FontsStep.

Roboto

Fontsource via jsdelivr CDN — left as-is.

Merriweather