html-minifier-setup 0.0.0-stage → 0.2.0

package/src/render.js

@@ -0,0 +1,397 @@
+// Renders pages as written and as minified in a headless browser, and compares screenshots, text,
+// and script errors—what catches CSS and scripts relying on what minification changed
+
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import http from 'node:http';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { isInside } from './pages.js';
+
+/**
+ * @typedef {object} Verdict
+ * @prop {boolean} equal
+ * @prop {boolean} inconclusive Whether, at some viewport, nothing but script errors could be compared, and none differed
+ * @prop {string[]} reasons Why the minified page isn’t equal
+ * @prop {string[]} notes What limited the comparison
+ * @prop {string[]} [blocked] Files pages requested but didn’t get, as symbolic links lead them outside the site
+ */
+
+/**
+ * @typedef {object} Renderer
+ * @prop {(page: import('./pages.js').Page, html: string) => Promise<Verdict>} compare
+ * @prop {() => Promise<void>} close
+ * @prop {Viewport[]} [viewports]
+ * @prop {string} [browser] Name and major version
+ */
+
+/** @typedef {{name: string, channel?: string}} Browser */
+
+/** @typedef {{width: number, height: number}} Viewport */
+/** @typedef {{shot: Buffer, text: string, errors: string[], blocked: string[]}} Capture */
+
+// @@ Probe a higher or core-based default, weighing speed against memory and inconclusive renders
+export const CONCURRENCY_DEFAULT = 4;
+
+/** @type {Viewport[]} */
+export const VIEWPORTS_DEFAULT = [{ width: 1280, height: 800 }, { width: 390, height: 844 }];
+
+/** @type {Record<string, string>} */
+const TYPES = {
+  '.css': 'text/css',
+  '.gif': 'image/gif',
+  '.htm': 'text/html',
+  '.html': 'text/html',
+  '.ico': 'image/x-icon',
+  '.jpeg': 'image/jpeg',
+  '.jpg': 'image/jpeg',
+  '.js': 'text/javascript',
+  '.json': 'application/json',
+  '.mjs': 'text/javascript',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.txt': 'text/plain',
+  '.webp': 'image/webp',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2'
+};
+
+/** @param {Viewport} viewport */
+const describeViewport = ({ width, height }) => `${width}×${height}`;
+
+/**
+ * Settles as the page work does, or rejects where it takes longer than a responsive page would
+ * @template T
+ * @param {Promise<T>} work
+ * @param {number} limit
+ * @returns {Promise<T>}
+ */
+async function responsive(work, limit) {
+  /** @type {NodeJS.Timeout | undefined} */
+  let timer;
+  // The work rejects as its context closes, which is no longer of interest
+  work.catch(() => {});
+  try {
+    return await Promise.race([work, new Promise((_, reject) => {
+      timer = setTimeout(() => reject(new Error(`Page stopped responding (no answer within ${limit} ms)`)), limit);
+    })]);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/**
+ * Serves a directory on a local port, so that pages load their resources as on the web
+ * @param {string | null} root
+ * @param {{followLinks?: boolean}} [settings] `followLinks`: serve what symbolic links lead to outside the root
+ * @returns {Promise<{origin: string, close: () => Promise<void>}>}
+ */
+export async function serve(root, { followLinks = false } = {}) {
+  const rootReal = root ? await fs.promises.realpath(root).catch(() => null) : null;
+  const server = http.createServer(async (request, response) => {
+    let pathname;
+    try {
+      pathname = decodeURIComponent(new URL(request.url ?? '/', 'http://localhost').pathname);
+    } catch {
+      response.writeHead(400).end();
+      return;
+    }
+    const file = root ? path.join(root, pathname.endsWith('/') ? `${pathname}index.html` : pathname) : null;
+    const inside = Boolean(root && file && isInside(root, file));
+    // Forbidden rather than not found, for captures to tell what they didn’t get
+    const fileReal = inside && !followLinks ? await fs.promises.realpath(/** @type {string} */ (file)).catch(() => null) : null;
+    if (fileReal && !(rootReal && isInside(rootReal, fileReal))) {
+      response.writeHead(403).end();
+      return;
+    }
+    const body = inside && file ? await fs.promises.readFile(file).catch(() => null) : null;
+    if (!body || !file) {
+      response.writeHead(404).end();
+      return;
+    }
+    response.writeHead(200, { 'content-type': TYPES[path.extname(file).toLowerCase()] ?? 'application/octet-stream' }).end(body);
+  });
+  await new Promise((resolve) => server.listen(0, '127.0.0.1', () => resolve(undefined)));
+  const { port } = /** @type {import('node:net').AddressInfo} */ (server.address());
+  return {
+    origin: `http://127.0.0.1:${port}`,
+    close: () => new Promise((resolve) => {
+      server.closeAllConnections();
+      server.close(() => resolve());
+    })
+  };
+}
+
+/**
+ * The first line each text has that the other lacks, as a hint at what changed
+ * @param {string} a
+ * @param {string} b
+ */
+function firstDifference(a, b) {
+  const [linesA, linesB] = [a, b].map((text) => text.split('\n').map((line) => line.trim()).filter(Boolean));
+  const [setA, setB] = [new Set(linesA), new Set(linesB)];
+  const lost = linesA?.find((line) => !setB.has(line));
+  const gained = linesB?.find((line) => !setA.has(line));
+  /** @param {string | undefined} line */
+  const quote = (line) => line === undefined ? 'nothing' : `“${line.length > 40 ? `${line.slice(0, 39)}…` : line}”`;
+  return lost === undefined && gained === undefined ? 'line breaks or spacing changed' : `${quote(lost)} became ${quote(gained)}`;
+}
+
+/**
+ * The original’s two captures as one, with what stayed the same between loads and every file
+ * either load didn’t get
+ * @param {Capture} first
+ * @param {Capture} second
+ */
+export const combineOriginals = (first, second) => ({
+  capture: { ...first, blocked: [...new Set([...first.blocked, ...second.blocked])] },
+  stableShot: first.shot.equals(second.shot),
+  stableText: first.text === second.text
+});
+
+// Playwright’s Chromium, or else browsers people tend to have, as original and minified pages are
+// compared in the same browser
+/** @type {Browser[]} */
+const BROWSERS = [{ name: 'Chromium' }, { name: 'Chrome', channel: 'chrome' }, { name: 'Edge', channel: 'msedge' }];
+
+/** The path of Playwright’s command line interface, if installed */
+export function playwrightCli() {
+  try {
+    return path.join(path.dirname(createRequire(import.meta.url).resolve('playwright/package.json')), 'cli.js');
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Downloads Playwright’s Chromium, showing the installer’s output
+ * @returns {Promise<boolean>}
+ */
+export const installChromium = () => new Promise((resolve) => {
+  const fileCli = playwrightCli();
+  if (!fileCli) return resolve(false);
+  const child = spawn(process.execPath, [fileCli, 'install', 'chromium'], { stdio: 'inherit' });
+  child.on('error', () => resolve(false));
+  child.on('close', (code) => resolve(code === 0));
+});
+
+/**
+ * Runs functions given no more than `limit` at a time, in the order given
+ * @param {number} limit
+ */
+export function createLimit(limit) {
+  let active = 0;
+  /** @type {(() => void)[]} */
+  const queue = [];
+  /**
+   * @template T
+   * @param {() => Promise<T>} fn
+   * @returns {Promise<T>}
+   */
+  return async (fn) => {
+    if (active < limit) {
+      active++;
+    } else {
+      await new Promise((resolve) => queue.push(() => resolve(undefined)));
+    }
+    try {
+      return await fn();
+    } finally {
+      // Hands the slot to the next in line, if any
+      const next = queue.shift();
+      if (next) {
+        next();
+      } else {
+        active--;
+      }
+    }
+  };
+}
+
+/**
+ * A renderer using the first browser that starts, or, where none does, why not
+ * @param {{viewports?: Viewport[], timeout?: number, browsers?: Browser[], concurrency?: number, followLinks?: boolean}} [settings] `concurrency`: pages rendered at once; `followLinks`: as for `serve`
+ * @returns {Promise<{renderer: Renderer | null, reason: string, missing?: boolean}>}
+ */
+export async function createRenderer({ viewports = VIEWPORTS_DEFAULT, timeout = 30000, browsers = BROWSERS, concurrency = CONCURRENCY_DEFAULT, followLinks = false } = {}) {
+  if (!viewports.length || viewports.some(({ width, height }) => !(width >= 1 && height >= 1))) {
+    throw new Error(`Invalid viewports: ${JSON.stringify(viewports)} (at least one, each at least 1×1)`);
+  }
+  if (!Number.isInteger(concurrency) || concurrency < 1) throw new Error(`Invalid concurrency: ${concurrency} (pages rendered at once, at least 1)`);
+  /** @type {typeof import('playwright') | null} */
+  const playwright = await import('playwright').catch(() => null);
+  if (!playwright) return { renderer: null, reason: 'Playwright isn’t installed' };
+  /** @type {import('playwright').Browser | null} */
+  let browser = null;
+  let nameBrowser = '';
+  for (const { name, channel } of browsers) {
+    try {
+      browser = await playwright.chromium.launch(channel ? { channel } : {});
+      nameBrowser = `${name} ${browser.version().split('.')[0]}`;
+      break;
+    } catch {
+      // Tries the next browser
+    }
+  }
+  if (!browser) {
+    return { renderer: null, reason: `No browser found (${browsers.map(({ name }) => name).join(', ')})—\`npx playwright install chromium\` downloads Chromium`, missing: true };
+  }
+  const browserOpen = browser;
+
+  /** @type {Map<string | null, ReturnType<typeof serve>>} */
+  const servers = new Map();
+  /** @type {WeakMap<import('./pages.js').Page, Map<string, Promise<{capture: Capture, stableShot: boolean, stableText: boolean}>>>} */
+  const originals = new WeakMap();
+  /** @type {WeakMap<import('./pages.js').Page, Map<string, Promise<Verdict>>>} */
+  const verdicts = new WeakMap();
+  // Bounds all browser work, which is otherwise started at once
+  const limit = createLimit(concurrency);
+
+  /** @param {import('./pages.js').Page} page */
+  async function urlOf(page) {
+    if (page.url) return page.url;
+    let server = servers.get(page.root);
+    if (!server) {
+      server = serve(page.root, { followLinks });
+      servers.set(page.root, server);
+    }
+    return `${(await server).origin}/${page.id.split('/').map(encodeURIComponent).join('/')}`;
+  }
+
+  /**
+   * @param {import('./pages.js').Page} page
+   * @param {string} html
+   * @param {Viewport} viewport
+   * @returns {Promise<Capture>}
+   */
+  async function capture(page, html, viewport) {
+    const url = await urlOf(page);
+    // Requests leave out fragments
+    const urlRequested = new URL(url);
+    urlRequested.hash = '';
+    return limit(async () => {
+      const context = await browserOpen.newContext({ viewport, deviceScaleFactor: 1, reducedMotion: 'reduce' });
+      try {
+        const tab = await context.newPage();
+        /** @type {string[]} */
+        const errors = [];
+        tab.on('pageerror', (err) => errors.push(err.message));
+        tab.on('console', (message) => { if (message.type() === 'error') errors.push(message.text()); });
+        /** @type {string[]} */
+        const blocked = [];
+        if (!page.url) {
+          tab.on('response', (response) => {
+            const target = new URL(response.url());
+            if (response.status() === 403 && target.origin === urlRequested.origin) blocked.push(decodeURIComponent(target.pathname.slice(1)));
+          });
+        }
+        await tab.route((target) => target.href === urlRequested.href, (route) => route.fulfill({ status: 200, contentType: 'text/html; charset=utf-8', body: html }));
+        await tab.goto(url, { waitUntil: 'load', timeout });
+        // For fonts and two frames, but not beyond the timeout, as either may never come
+        await responsive(tab.evaluate(async (wait) => {
+          const settled = (async () => {
+            await document.fonts?.ready;
+            await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+          })();
+          await Promise.race([settled, new Promise((resolve) => setTimeout(resolve, wait))]);
+        }, timeout), 2 * timeout);
+        const shot = await tab.screenshot({ fullPage: true, animations: 'disabled', caret: 'hide', timeout });
+        const text = await responsive(tab.evaluate(() => document.body?.innerText ?? ''), timeout);
+        return { shot, text, errors, blocked };
+      } finally {
+        await context.close();
+      }
+    });
+  }
+
+  /**
+   * Renders the original twice, as what differs between loads (e.g., animations, ads, or
+   * dates) can’t tell minification apart
+   * @param {import('./pages.js').Page} page
+   * @param {Viewport} viewport
+   */
+  function original(page, viewport) {
+    const byViewport = originals.get(page) ?? new Map();
+    originals.set(page, byViewport);
+    const key = describeViewport(viewport);
+    let pending = byViewport.get(key);
+    if (!pending) {
+      pending = (async () => {
+        const [first, second] = await Promise.all([capture(page, page.html, viewport), capture(page, page.html, viewport)]);
+        return combineOriginals(first, second);
+      })();
+      byViewport.set(key, pending);
+    }
+    return pending;
+  }
+
+  /**
+   * @param {import('./pages.js').Page} page
+   * @param {string} html
+   * @returns {Promise<Verdict>}
+   */
+  async function compareUncached(page, html) {
+    const results = await Promise.all(viewports.map(async (viewport) => {
+      /** @type {string[]} */
+      const reasons = [];
+      /** @type {string[]} */
+      const notes = [];
+      let blind = false;
+      const at = describeViewport(viewport);
+      const [{ capture: before, stableShot, stableText }, after] = await Promise.all([original(page, viewport), capture(page, html, viewport)]);
+      if (!stableShot && !stableText) {
+        blind = true;
+        notes.push(`Looks and reads different between loads at ${at}, so only script errors were compared`);
+      } else if (!stableShot) {
+        notes.push(`Looks different between loads at ${at}, so screenshots weren’t compared`);
+      } else if (!stableText) {
+        notes.push(`Text differs between loads at ${at}, so text wasn’t compared`);
+      }
+      if (stableShot && !before.shot.equals(after.shot)) {
+        reasons.push(`Looks different at ${at}`);
+      }
+      if (stableText && before.text !== after.text) {
+        reasons.push(`Text differs at ${at}: ${firstDifference(before.text, after.text)}`);
+      }
+      const known = [...before.errors];
+      for (const error of after.errors) {
+        const index = known.indexOf(error);
+        if (index === -1) {
+          reasons.push(`New script error at ${at}: ${error.split('\n')[0]?.slice(0, 120)}`);
+        } else {
+          known.splice(index, 1);
+        }
+      }
+      return { reasons, notes, blind, blocked: [...before.blocked, ...after.blocked] };
+    }));
+    const reasons = [...new Set(results.flatMap((result) => result.reasons))];
+    const notes = [...new Set(results.flatMap((result) => result.notes))];
+    const inconclusive = results.some((result) => result.blind) && reasons.length === 0;
+    const blocked = [...new Set(results.flatMap((result) => result.blocked))].sort();
+    return { equal: reasons.length === 0 && !inconclusive, inconclusive, reasons, notes, blocked };
+  }
+
+  return {
+    reason: '',
+    renderer: {
+      viewports,
+      browser: nameBrowser,
+      compare(page, html) {
+        // The same output, as different options may produce, renders the same
+        const byHtml = verdicts.get(page) ?? new Map();
+        verdicts.set(page, byHtml);
+        let verdict = byHtml.get(html);
+        if (!verdict) {
+          verdict = compareUncached(page, html);
+          byHtml.set(html, verdict);
+        }
+        return verdict;
+      },
+      async close() {
+        await browserOpen.close();
+        await Promise.all([...servers.values()].map(async (server) => (await server).close()));
+      }
+    }
+  };
+
+}

package/src/report.js

@@ -0,0 +1,252 @@
+import { presets as PRESETS } from 'html-minifier';
+import { VISIBLE_BY_DESIGN } from './catalog.js';
+import { paint } from './color.js';
+import { METRICS, NAMES_METRIC } from './measure.js';
+import { MESSAGE_RENDERS_SAME } from './select.js';
+
+const URL_SCHEMA = 'https://raw.githubusercontent.com/j9t/html-minifier/main/html-minifier.schema.json';
+
+const MAX_LISTED = 3;
+
+// Render differences, worded so as not to read as errors
+const LABEL_RENDER = 'Looks different';
+
+/** @param {string} level */
+const labelOf = (level) => level === 'render' ? LABEL_RENDER : `${level.charAt(0).toUpperCase()}${level.slice(1)}`;
+
+// Share of the size below which whitespace collapsing suggests minified pages
+const SHARE_MINIFIED = 0.01;
+
+const ORDER_STATUS = ['kept', 'accepted', 'rejected', 'no-gain', 'no-effect', 'skipped'];
+
+// Statuses in words, so as not to read as verdicts on options
+/** @type {Record<string, string>} */
+const LABELS_STATUS = { 'accepted': 'recommended', 'kept': 'kept', 'rejected': 'doesn’t fit', 'no-gain': 'no gain', 'no-effect': 'no effect', 'skipped': 'skipped' };
+
+/** @param {string} status */
+const formatStatus = (status) => LABELS_STATUS[status] ?? status;
+
+/**
+ * The result as an HTML Minifier configuration, sorted by option name
+ * @param {import('./select.js').Result} result
+ * @param {Record<string, unknown>} [preserved] CLI settings to keep (e.g., `fileExt`)
+ * @returns {Record<string, unknown>}
+ */
+export function toConfig(result, preserved = {}) {
+  return {
+    $schema: URL_SCHEMA,
+    ...Object.fromEntries(Object.entries({ ...preserved, ...result.options }).sort(([a], [b]) => a.localeCompare(b)))
+  };
+}
+
+/**
+ * The configuration as the HTML Minifier preset needing the fewest changes to have the same
+ * effect, if that at least halves the options to list
+ * @param {import('./select.js').Result} result
+ * @param {Record<string, unknown>} [preserved]
+ * @returns {{name: string, changes: string[], config: Record<string, unknown>} | null}
+ */
+export function toPresetConfig(result, preserved = {}) {
+  const { options } = result;
+  const [nearest] = Object.entries(PRESETS).map(([name, preset]) => {
+    /** @type {Record<string, unknown>} */
+    const presetOptions = preset;
+    /** @type {Record<string, unknown>} */
+    const overrides = {};
+    for (const key of new Set([...Object.keys(presetOptions), ...Object.keys(options)])) {
+      const value = key in options ? options[key] : false;
+      if (JSON.stringify(value) !== JSON.stringify(presetOptions[key] ?? false)) overrides[key] = value;
+    }
+    return { name, overrides };
+  }).sort((a, b) => Object.keys(a.overrides).length - Object.keys(b.overrides).length);
+  if (!nearest || Object.keys(nearest.overrides).length * 2 > Object.keys(options).length) return null;
+  const { $schema, ...rest } = toConfig({ ...result, options: nearest.overrides }, preserved);
+  return { name: nearest.name, changes: Object.keys(nearest.overrides).sort(), config: { $schema, preset: nearest.name, ...rest } };
+}
+
+/** @param {number} bytes */
+const formatBytes = (bytes) => `${bytes.toLocaleString('en-US')} B`;
+
+/**
+ * @param {number} before
+ * @param {number} after
+ * @param {boolean} color
+ */
+const formatChange = (before, after, color) => {
+  const share = before ? Math.abs(1 - after / before) * 100 : 0;
+  const change = after === before || !share
+    ? paint('dim', '±0%', color)
+    : paint(after < before ? 'success' : 'failure', `${after < before ? '−' : '+'}${share.toFixed(1)}%`, color);
+  return `${formatBytes(before)} → ${formatBytes(after)} (${change})`;
+};
+
+/**
+ * The folder all pages are in, with a trailing slash, if any
+ * @param {string[]} pages
+ */
+function sharedFolder(pages) {
+  const [first = [], ...rest] = pages.map((page) => page.split('/').slice(0, -1));
+  let length = 0;
+  while (length < first.length && rest.every((segments) => segments[length] === first[length])) length++;
+  return length ? `${first.slice(0, length).join('/')}/` : '';
+}
+
+/** @param {string[]} items */
+const listShort = (items) => items.length > MAX_LISTED
+  ? `${items.slice(0, MAX_LISTED).join(', ')}, and ${items.length - MAX_LISTED} more`
+  : items.join(', ');
+
+/**
+ * Reasons as lines, summing up render differences by pages (with an example) and other reasons
+ * by message
+ * @param {import('./select.js').Reason[]} reasons
+ * @returns {string[]}
+ */
+function condenseReasons(reasons) {
+  /** @type {string[]} */
+  const lines = [];
+  let pagesRenderedBefore = '';
+  for (let index = 0; index < reasons.length;) {
+    const level = /** @type {import('./select.js').Reason} */ (reasons[index]).level;
+    // Reasons of a kind in a row: render differences, info, or anything else
+    const kind = level === 'render' || level === 'info' ? level : 'other';
+    /** @type {import('./select.js').Reason[]} */
+    const run = [];
+    for (let next = reasons[index]; next && (next.level === 'render' || next.level === 'info' ? next.level : 'other') === kind; next = reasons[++index]) run.push(next);
+
+    if (kind === 'render') {
+      const pages = [...new Set(run.flatMap((reason) => reason.page ?? []))];
+      const count = `${pages.length} page${pages.length === 1 ? '' : 's'}`;
+      if (pages.join('\u0000') === pagesRenderedBefore) {
+        lines.push(`${LABEL_RENDER} on the same ${count}`);
+      } else {
+        const example = /** @type {import('./select.js').Reason} */ (run.find((reason) => reason.message.includes('“')) ?? run[0]);
+        lines.push(`${LABEL_RENDER} on ${count} (${listShort(pages)}), e.g., ${example.page ? `${example.page}: ` : ''}${example.message}`);
+      }
+      pagesRenderedBefore = pages.join('\u0000');
+      continue;
+    }
+    /** @type {Map<string, {level: string, message: string, pages: string[]}>} */
+    const byMessage = new Map();
+    for (const reason of run) {
+      const key = `${reason.level}\u0000${reason.message}`;
+      const entry = byMessage.get(key) ?? { level: reason.level, message: reason.message, pages: [] };
+      if (reason.page) entry.pages.push(reason.page);
+      byMessage.set(key, entry);
+    }
+    for (const { level: levelEntry, message, pages } of byMessage.values()) {
+      lines.push(`${labelOf(levelEntry)}${pages.length ? ` (${listShort(pages)})` : ''}: ${message}`);
+    }
+  }
+  return lines;
+}
+
+/**
+ * @param {string[][]} rows
+ */
+function table(rows) {
+  const widths = rows[0]?.map((_, column) => Math.max(...rows.map((row) => (row[column] ?? '').length))) ?? [];
+  return rows.map((row) => row.map((cell, column) => column === row.length - 1 ? cell : cell.padEnd(widths[column] ?? 0)).join('  ').trimEnd()).join('\n');
+}
+
+/**
+ * @param {import('./select.js').Result} result
+ * @param {{renderReason?: string, color?: boolean, verbose?: boolean}} [settings]
+ * @returns {string}
+ */
+export function formatReport(result, { renderReason = '', color = false, verbose = false } = {}) {
+  const { blocked = [] } = result;
+  const { metric } = result;
+  const dirShared = sharedFolder(result.pages);
+  const evaluations = result.evaluations.map((evaluation) => ({
+    ...evaluation,
+    reasons: evaluation.reasons.map((reason) => reason.page?.startsWith(dirShared) ? { ...reason, page: reason.page.slice(dirShared.length) } : reason)
+      .map((reason) => blocked.length && reason.message === MESSAGE_RENDERS_SAME ? { ...reason, message: `${reason.message}, but without files outside the site` } : reason)
+  })).sort((a, b) =>
+    ORDER_STATUS.indexOf(a.status) - ORDER_STATUS.indexOf(b.status) ||
+    (b.contribution ?? b.savings) - (a.contribution ?? a.savings) ||
+    a.name.localeCompare(b.name));
+
+  const renderedAs = `Render-checked in ${result.browser ?? 'Chromium'}${result.viewports.length ? ` at ${result.viewports.join(' and ')}` : ''}`;
+  const renderSummary = blocked.length
+    ? paint('warning', `${renderedAs}: The recommended configuration may not look the same as the original pages, as files outside the site were missing`, color)
+    : result.renderedSame
+      ? `${renderedAs}: The recommended configuration looks the same as the original pages`
+      : paint('warning', `${renderedAs}: The recommended configuration may not look the same as the original pages (see notes)`, color);
+  const lines = [
+    `• Evaluated ${result.pagesFound ? `${result.pages.length} of ${result.pagesFound.toLocaleString('en-US')} pages` : `${result.pages.length} page${result.pages.length === 1 ? '' : 's'}`}${dirShared ? ` in ${dirShared}` : ''}${result.pagesFound ? ' (use `--sample` to evaluate more)' : ''}, judging gains by ${NAMES_METRIC[metric]} size`,
+    result.rendered
+      ? `• ${renderSummary}`
+      : `• Not render-checked${renderReason ? `: ${renderReason}` : ''}—options that need a render check aren’t recommended`,
+    ...result.rendered && blocked.length ? [`• ${paint('warning', `Rendered without ${blocked.length} file${blocked.length === 1 ? '' : 's'} that symbolic links lead to outside the site (${listShort(blocked)}), which may change how pages look—\`--follow-links\` follows them`, color)}`] : [],
+    // Only in development
+    ...result.equivalence ? [`• Equivalence-checked with ${result.equivalence}`] : [],
+    '',
+    table([
+      ['Option', 'Status', 'Saves alone', 'Contributes', 'Variant'],
+      ...evaluations.map((evaluation) => [
+        evaluation.name,
+        formatStatus(evaluation.status),
+        evaluation.status === 'skipped' ? '' : formatBytes(evaluation.savings),
+        evaluation.contribution === undefined ? '' : formatBytes(evaluation.contribution),
+        evaluation.variant ?? ''
+      ])
+    ]),
+    '',
+    ...METRICS.map((m) => `${m === 'raw' ? 'Uncompressed' : NAMES_METRIC[m]}: ${formatChange(result.baseline[m], result.final[m], color)}`)
+  ];
+
+  if (result.presets.length) {
+    const finalMetric = result.final[metric];
+    lines.push('', `Compared with HTML Minifier’s presets (${NAMES_METRIC[metric]}):`, table(result.presets.map((preset) => {
+      const share = finalMetric ? (preset.size / finalMetric - 1) * 100 : 0;
+      const size = preset.errors ? `fails on ${preset.errors} of ${result.pages.length}` : formatBytes(preset.size);
+      const relative = preset.errors ? '' : Math.abs(share) < 0.05 ? 'same size' : `${Math.abs(share).toFixed(1)}% ${share > 0 ? 'larger' : 'smaller'}`;
+      // Over the pages the preset could minify
+      const checked = result.pages.length - preset.errors;
+      const ofPages = `of ${checked} page${checked === 1 ? '' : 's'}`;
+      const rendering = preset.failing === null || !checked
+        ? 'not render-checked'
+        : preset.failing
+          ? paint('failure', `looks different on ${preset.failing} ${ofPages}${preset.inconclusive ? `, inconclusive on ${preset.inconclusive}` : ''}`, color)
+          : preset.inconclusive
+            ? `inconclusive on ${preset.inconclusive} ${ofPages}`
+            : paint('success', preset.errors ? `looks the same on the other ${checked} page${checked === 1 ? '' : 's'}` : 'looks the same', color);
+      const rejected = preset.rejected.length ? `; includes ${paint('failure', preset.rejected.map((name) => `\`${name}\``).join(', '), color)}, which ${preset.rejected.length === 1 ? 'doesn’t' : 'don’t'} fit` : '';
+      return [`  ${preset.name}`, size, relative, `${rendering}${rejected}`];
+    })));
+  }
+
+  // Unminified pages have whitespace to collapse; where there’s next to none, options that change
+  // nothing can’t be judged, as minification may have done their work
+  const whitespace = evaluations.find((evaluation) => evaluation.name === 'collapseWhitespace');
+  if (whitespace && whitespace.status !== 'skipped' && whitespace.savings < result.baseline[metric] * SHARE_MINIFIED) {
+    const evaluated = evaluations.filter((evaluation) => evaluation.status !== 'skipped');
+    const ineffective = evaluated.filter((evaluation) => evaluation.status === 'no-effect');
+    lines.push('', `These pages look minified already: Collapsing whitespace saves less than ${SHARE_MINIFIED * 100}%, and ${ineffective.length} of ${evaluated.length} options have no effect. To evaluate those options, run on pages before minification (e.g., your build output with minification turned off).`);
+  }
+
+  const explained = evaluations.filter((evaluation) => evaluation.reasons.some((reason) => reason.level !== 'info' || (evaluation.status !== 'no-gain' && evaluation.status !== 'no-effect')));
+  if (explained.length) {
+    lines.push('', 'Details:');
+    let condensed = false;
+    for (const evaluation of explained) {
+      lines.push(`  ${evaluation.name} (${formatStatus(evaluation.status)})`);
+      const reasonLines = verbose
+        ? evaluation.reasons.map((reason) => `${labelOf(reason.level)}${reason.page ? ` (${reason.page})` : ''}: ${reason.message}`)
+        : condenseReasons(evaluation.reasons);
+      condensed ||= reasonLines.length < evaluation.reasons.length;
+      if (evaluation.reasons.some((reason) => reason.level === 'render')) {
+        const design = VISIBLE_BY_DESIGN[evaluation.name];
+        lines.push(`    Why: ${design ? `${design}—that’s how the option works, not an error` : 'Not meant to change how pages look—possibly an HTML Minifier bug worth reporting'}`);
+      }
+      lines.push(...reasonLines.map((line) => `    ${line}`));
+    }
+    if (condensed) lines.push('  (Run with `-v` for every page and viewport)');
+  }
+  if (result.notes.length) {
+    lines.push('', 'Notes:', ...result.notes.map((note) => `• ${note}`));
+  }
+  lines.push('', 'Checks can show that options change these pages, not that they never will—test the configuration on your site.');
+  return lines.join('\n');
+}