page_performance

Page Performance Insight

Page Performance Insight gives Drupal editors and developers a built-in
Google Lighthouse performance dashboard — without leaving the Drupal admin.
Instead of manually running PageSpeed Insights for every page, this module
automatically audits every node on your site and presents the results in a
structured, drill-down interface.

Why This Module Exists

Web performance directly affects user experience, SEO ranking, and Core Web
Vitals scores that Google uses to rank pages in search results. Most
performance tools (Google PageSpeed Insights, Lighthouse CLI, WebPageTest)
require you to test each URL individually and interpret raw JSON or technical
reports.

The problem this module solves

You have hundreds of Article, Product, or Landing Page nodes and no easy
way to know which ones are slow.
You want to see performance broken down by content type, not just one URL.
Editors need a clear red/amber/green summary — not a raw technical score.
You want to track whether performance improves after deploying a fix.

How It Works

Configure your public site URL and a free Google PageSpeed Insights API key
in the module settings.
Audit — Click Audit all [type] nodes for a content
type, or Run audit on an individual node. The module calls the
PageSpeed Insights API twice per node (once for Mobile, once for Desktop)
and stores all results in a dedicated database table.
Analyse — Visit the dashboard at:
Admin → Reports → Page Performance to see:
- A card grid of all content types with their average performance score.
- A node list for each type showing the latest Mobile and Desktop scores side by side.
- A detailed node report with Core Web Vitals, an Opportunities list,
  and a 7-run score history chart.

What You See — and What It Means

Score Rings (0–100)

Each audit produces a Lighthouse Performance Score from 0 to 100:

90–100 (Green) — Good. The page loads fast for most users.
50–89 (Amber) — Needs improvement. Some users will experience slow loads.
0–49 (Red) — Poor. Significant performance issues affecting most users.

The score is a weighted combination of the Core Web Vitals metrics below.

Core Web Vitals

The module displays 7 Lighthouse metrics, each colour-coded using Google's
official thresholds:

Metric Abbr Good Needs Work Poor Largest Contentful Paint LCP < 2.5 s 2.5–4 s > 4 s First Contentful Paint FCP < 1.8 s 1.8–3 s > 3 s Total Blocking Time TBT < 200 ms 200–600 ms > 600 ms Cumulative Layout Shift CLS < 0.1 0.1–0.25 > 0.25 Interaction to Next Paint INP < 200 ms 200–500 ms > 500 ms Server Response Time TTFB < 800 ms 800–1800 ms > 1800 ms Speed Index SI < 3.4 s 3.4–5.8 s > 5.8 s

Each metric card also shows the threshold legend (for example:
< 2.5s · < 4.0s · > 4.0s) so the colour context is
always visible without needing a tooltip.

Mobile vs Desktop Tabs

Mobile and Desktop are audited separately because:

Google crawls with a simulated Moto G Power (slow 4G, 1× CPU throttling)
for mobile — scores are typically 15–30 points lower than desktop.
Your server-side issues (TTFB, render-blocking resources) affect both
equally, while JavaScript execution time affects mobile much more.

The detail page shows a tab switcher so you can compare both strategies.

Opportunities to Improve

Below the metrics, the module lists the Lighthouse opportunity audits that
have the highest potential time savings, with resource-level detail:

File name and URL of the offending resource.
Estimated time saved (for example: ~1.2 s saved).
Bytes wasted (for unused JS/CSS).

Only actionable audits are shown — pure diagnostic metrics (FCP, LCP entries)
are filtered out since they are already visible in the Core Web Vitals grid.

Examples of opportunities you may see:

Render-blocking requests — CSS/JS in
<head> that delay first paint.

Fix: Move to async/defer or inline critical CSS.
Reduce unused JavaScript — JS bundles loaded but not executed.

Fix: Code-split with Webpack or remove unused libraries.
Serve images in next-gen formats — JPEG/PNG instead of WebP/AVIF.

Fix: Configure image styles to output WebP.
Efficiently encode images — Oversized image files.

Fix: Compress images or use a CDN with on-the-fly optimisation.

Score History Chart

The detail page includes a canvas-based dual-series line chart showing the
last 7 audit runs for both Mobile (indigo) and Desktop (emerald). Background
colour bands (green, amber, and red zones) make it easy to see whether a
deployment improved or worsened performance over time.

Features Summary

Dual-strategy auditing — Mobile and Desktop in every audit run.
Content-type overview — Card grid with average scores per type.
Node list — Table showing Mobile and Desktop badges for every node.
Core Web Vitals dashboard — 7 metrics with progress bars and threshold chips.
Tabbed Mobile/Desktop view — Instant JavaScript tab switch with no page reload.
Opportunities list — Actionable fixes with file-level detail and savings.
Score history chart — 7-run dual-series trend line on canvas.
Bulk audit — Batch operation to audit all nodes of a content type.
Configurable score bands — Adjust Good/Average thresholds to match your SLA.
CSRF-protected audit routes — Secure against cross-site request forgery.

Requirements

Drupal 10 or Drupal 11
PHP 8.1+
Free Google PageSpeed Insights API key
(Google Cloud Console → Enable "PageSpeed Insights API" → Create API Key)
A publicly reachable URL for your site (staging or production).
Google's PSI service runs in the cloud and cannot reach localhost/DDEV.