Strategic Content Precaching: Pinterest's 60% Engagement Playbook

Pinterest rebuilt their mobile web experience with service worker precaching and reported a 60% increase in core engagement, 44% increase in ad revenue, and 40% increase in time spent. The underlying technology was not a redesign — it was making pages load instantly for returning visitors.

Service worker precaching stores your website's critical resources on the user's device after their first visit. On every subsequent visit, the site loads from the local cache in milliseconds — not seconds. The experience transforms from "loading a website" to "opening an app."

For a multi-site content network, precaching is especially powerful. When a reader visits one site in the network and follows a cross-reference to another, both sites load instantly if both are precached. The network feels like a single, interconnected application.

I implemented Workbox precaching across all 52 sites in our network. Return visit load times dropped to under 100 milliseconds. Pages per session increased by 25%. The implementation took a single afternoon.

How Precaching Changes User Behavior

The performance improvement from precaching is not incremental — it is transformative. A page that loads in 1.5 seconds feels like a website. A page that loads in 50 milliseconds feels like an app. This perception shift changes behavior:

Exploration increases. When tapping from one article to another is instant, users explore more. The loading pause that normally creates an exit opportunity disappears. In our network, pages per session for returning visitors increased by approximately 25%.

Bounce rate decreases. Returning visitors who experience instant loading bounce at significantly lower rates. In our network, return visitor bounce rate decreased by approximately 15%.

Session duration extends. More pages explored at deeper engagement per page compounds into longer sessions. Return visitor session duration increased by approximately 20%.

Return visit frequency increases. Users who experience instant loading are conditioned to return. The site becomes a tool they use rather than a page they visit.

Workbox: The Implementation Framework

Workbox is Google's open-source library for service worker management. It abstracts the complexity of cache management, versioning, and update strategies into clean configuration.

Step 1: Install Workbox CLI

npm install workbox-cli --save-dev

Step 2: Configure Precaching

Create workbox-config.js:

module.exports = {
  globDirectory: '_site/',
  globPatterns: [
    '**/*.html',
    '**/*.css',
    '**/*.js',
    'fonts/**/*.woff2',
    'images/logo.svg',
    'images/icons/**/*.png'
  ],
  globIgnores: [
    'images/blog/**/*.webp',  // Runtime cache blog images
    'images/blog/**/*.avif'
  ],
  swDest: '_site/sw.js',
  runtimeCaching: [
    {
      urlPattern: /images\/blog\/.*\.(webp|avif|jpg)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'blog-images',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 30 * 24 * 60 * 60
        }
      }
    }
  ]
};

This configuration precaches all HTML, CSS, JavaScript, and fonts (the resources needed for instant page rendering). Blog images are cached on demand using a CacheFirst strategy — cached after the first view, served from cache on subsequent views.

Step 3: Generate and Register

# Add to build script
eleventy && npx workbox generateSW workbox-config.js

Register the service worker in your HTML:

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
</script>

Step 4: Deploy

The service worker file deploys with your site. On the first visit, it installs silently in the background. On every subsequent visit, it intercepts requests and serves cached responses.

Strategic Decisions for Content Networks

What to Precache

For a content network with 15-40 pages per site:

• Always precache: HTML pages, CSS, JavaScript, fonts, logos, icons
• Runtime cache: Blog post hero images, social sharing images
• Never cache: Third-party analytics scripts, external API responses

Total precache size for a typical site in our network: 2-4 MB. This downloads in the background on the first visit without affecting page performance.

Cross-Site Precaching

For a multi-site network, consider precaching the landing page of related sites. When a user visits Site A, the service worker can prefetch Site B's homepage in the background. If the user follows a cross-reference to Site B, the page loads instantly.

This requires careful implementation to avoid excessive bandwidth usage, but for a small network with clear cross-reference patterns, it creates a seamless multi-site experience.

Cache Update Strategy

Workbox handles cache versioning automatically through content hashing. When a file changes, its hash changes, and only the modified file is re-downloaded. Unchanged files remain cached.

This means deployments are efficient. A small blog post update does not re-download the entire site — only the changed HTML file and any modified assets.

Offline Fallback

When a user accesses a page that is not cached while offline, show a custom offline page instead of the browser's default error:

import { setCatchHandler } from 'workbox-routing';
import { precacheAndRoute, matchPrecache } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

setCatchHandler(async () => {
  return matchPrecache('/offline.html');
});

Create an offline.html page with a message like: "You're offline, but these pages are available:" followed by links to the most important cached pages.

Measuring Impact

Core Web Vitals

Google Search Console tracks Core Web Vitals for your pages:

• LCP (Largest Contentful Paint): Under 500ms for precached pages (Good threshold: 2.5s)
• CLS (Cumulative Layout Shift): Near zero for precached pages (cached fonts prevent FOUT)
• INP (Interaction to Next Paint): Improved due to cached JavaScript

Engagement Metrics

Compare returning visitor metrics before and after implementation:

• Bounce rate (expect 10-20% improvement)
• Pages per session (expect 20-30% improvement)
• Session duration (expect 15-25% improvement)
• Return visit frequency (expect gradual increase)

Lighthouse Scores

Lighthouse PWA audits will show significant improvements. Performance scores will improve specifically for return visits.

Network-Wide Results

After implementing Workbox precaching across all 52 sites:

• Return visit LCP: under 100ms (from 1.2s average)
• Pages per session (returning visitors): +25%
• Bounce rate (returning visitors): -15%
• All 52 sites: "Good" Core Web Vitals in Search Console
• Offline sessions: approximately 3% of total sessions used cached content while offline
• Total implementation time: approximately 4 hours (shared config, deployed across all sites)

The performance improvement from precaching is the single highest-impact technical optimization in our entire stack. It costs nothing, requires no infrastructure changes, and delivers measurable improvements to every engagement metric.

The difference between a site that loads in 1.5 seconds and one that loads in 50 milliseconds is not a performance optimization. It is a category change in user experience.

For the complete performance and network architecture strategy, see The $100 Dollar Network.