Speed Index monitoring setup for website

Setting Up Speed Index Monitoring

Speed Index is rarely optimized intentionally, though it directly reflects user perception of loading. Unlike LCP which captures one element, Speed Index measures how fast the entire visible screen fills. Values 0–3.4 seconds are good by Lighthouse scale, but real targets depend on competitive environment.

What Speed Index Is Technically

Speed Index is computed from page load video. Algorithm divides video into frames and computes percentage of visible area already rendered at each moment. Final value integrates "incompleteness" over time.

Simplified: page loading uniformly gets better SI than page empty for long then suddenly rendering.

Monitoring Tools

WebPageTest — most accurate. Runs real browser, records video, computes SI from frames. Available as public service and self-hosted via Docker.

Self-hosted WebPageTest:

docker run -d -p 4000:80 \
  -e AGENTS=1 \
  --name wpt-server \
  webpagetest/server

docker run -d \
  --network host \
  -e SERVER_URL=http://localhost:4000 \
  -e LOCATION=Test \
  --cap-add=SYS_ADMIN \
  webpagetest/agent

Lighthouse CI — integrates to CI/CD, captures SI on each deploy. Less accurate than WebPageTest, sufficient for regression tracking.

SpeedCurve — commercial tool for continuous monitoring. Runs Lighthouse and WebPageTest on schedule, builds trend graphs, alerts to Slack.

Lighthouse CI Setup for SI Tracking

npm install --save-dev @lhci/cli

.lighthouserc.js:

module.exports = {
  ci: {
    collect: {
      url: ['https://staging.example.com/', 'https://staging.example.com/catalog/'],
      numberOfRuns: 3,
      settings: {
        preset: 'desktop',
        throttlingMethod: 'simulate',
        throttling: {
          rttMs: 40,
          throughputKbps: 10240,
          cpuSlowdownMultiplier: 1,
        },
      },
    },
    assert: {
      assertions: {
        'speed-index': ['warn', { maxNumericValue: 3400 }],
        'first-contentful-paint': ['error', { maxNumericValue: 2000 }],
      },
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'https://lhci.internal.example.com',
      token: process.env.LHCI_TOKEN,
    },
  },
};

In GitHub Actions:

- name: Run Lighthouse CI
  run: |
    npm install -g @lhci/cli
    lhci autorun
  env:
    LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
    LHCI_TOKEN: ${{ secrets.LHCI_TOKEN }}

Self-Hosted LHCI Server

For storing history and comparing deploys set up LHCI server:

npm install -g @lhci/server

# With PostgreSQL for production
DATABASE_URL=postgres://user:pass@localhost/lhci \
PORT=9001 \
LHCI_STORAGE__SQL_DIALECT=postgres \
lhci server

Or via Docker Compose:

services:
  lhci-server:
    image: patrickhulce/lhci-server
    ports:
      - "9001:9001"
    environment:
      LHCI_STORAGE__SQL_DIALECT: sqlite
      LHCI_STORAGE__SQL_DATABASE_PATH: /data/lhci.db
    volumes:
      - lhci-data:/data

WebPageTest API for Automation

WebPageTest provides REST API to run tests from CI:

# Run test
curl "https://www.webpagetest.org/runtest.php?url=https://example.com&f=json&k=${WPT_API_KEY}&runs=3&video=1" \
  | jq '.data.testId'

# Get results
curl "https://www.webpagetest.org/jsonResult.php?test=${TEST_ID}" \
  | jq '.data.median.firstView.SpeedIndex'

Via npm package webpagetest:

const WebPageTest = require('webpagetest');
const wpt = new WebPageTest('www.webpagetest.org', process.env.WPT_API_KEY);

wpt.runTest('https://example.com', {
  runs: 3,
  video: true,
  location: 'Dulles:Chrome',
  connectivity: 'Cable',
}, (err, data) => {
  const si = data.data.median.firstView.SpeedIndex;
  console.log(`Speed Index: ${si}ms`);
  if (si > 3400) process.exit(1);
});

Alerting and Thresholds

Single SI measurement is unreliable—metric depends on network, server load, random fluctuations. Proper approach: median of 3–5 runs, alert on 7-day moving average breach.

Example alert logic in Grafana:

SELECT moving_average(mean("speed_index"), 7)
FROM "lighthouse_metrics"
WHERE time > now() - 30d
GROUP BY time(1d), "page"

Alert threshold: if current value exceeds 7-day moving average by more than 20%—notify Slack.

What Affects Speed Index Most

SI degrades when:

• Render-blocking resources delay first render (CSS in <head> without media, sync JS)
• Fonts load without font-display: swap — text hidden until font loaded
• Above-fold images lack explicit sizes — layout shift delays "screen fill"
• Heavy inline scripts in <head> block parser

SI monitoring value lies not in itself, but as integral signal: if SI grows—regression in first-screen rendering somewhere, check filmstrip in WebPageTest to find exact moment where screen "froze".

Timeframe

Basic Lighthouse CI setup with SI tracking in existing pipeline — 1–2 business days. Self-hosted LHCI server with PostgreSQL, Grafana dashboard and Slack alerts — 3–5 business days. Full stack with self-hosted WebPageTest + automation via API — 1–2 weeks accounting for geographic agent setup.