[{"data":1,"prerenderedAt":121},["ShallowReactive",2],{"hub:tools-lighthouse":3},{"path":4,"key":5,"title":6,"h1":7,"description":8,"crumbs":9,"blocks":17},"\u002Ftools\u002Flighthouse\u002F","tools-lighthouse","Lighthouse and Lighthouse CI for Static Sites","Lighthouse","Guides that use Lighthouse and Lighthouse CI on static sites: budgets that fail builds, stable CI scores, throttling and lab against field.",[10,13,16],[11,12],"Home","\u002F",[14,15],"Tools","\u002Ftools\u002F",[7,4],[18,21,23,26,35,37,98,100],{"k":19,"text":20},"p","Lighthouse is the most-used and most-misread performance tool on static sites. A score is a simulation of one specific reader on one run, and the guides below treat it that way: as a regression gate with budgets per template, run several times and summarised by the median, with throttling calibrated against what real readers experience rather than the default profile.",{"k":19,"text":22},"Several of the guides exist because Lighthouse disagreed with itself or with the field — scores that moved by double digits between identical runs, layout shifts from banners and embeds that a single lab load never triggered — and show how to find out which number to believe.",{"k":24,"html":25},"fig","\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 223\" role=\"img\" aria-labelledby=\"hub-lighthouse-hero-title hub-lighthouse-hero-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-lighthouse-hero-title\">Lighthouse lab results compared with field data\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-lighthouse-hero-desc\">Two panels. Lighthouse in the lab is fast, repeatable and good for catching regressions before merge, but simulates one reader and misses late shifts and third parties. Field data from CrUX or RUM reflects real readers and devices and is what rankings use, but arrives days later.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"223\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"20.0\" y=\"58.0\" width=\"350.0\" height=\"149.0\" rx=\"10\" fill=\"#1982c4\" opacity=\"0.14\" stroke=\"#1982c4\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ccircle cx=\"40.0\" cy=\"103.0\" r=\"2.5\" fill=\"#1982c4\" stroke=\"#1982c4\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ccircle cx=\"40.0\" cy=\"125.0\" r=\"2.5\" fill=\"#1982c4\" stroke=\"#1982c4\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ccircle cx=\"40.0\" cy=\"146.9\" r=\"2.5\" fill=\"#1982c4\" stroke=\"#1982c4\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Crect x=\"390.0\" y=\"58.0\" width=\"350.0\" height=\"149.0\" rx=\"10\" fill=\"#8ac926\" opacity=\"0.2\" stroke=\"#5a8a16\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ccircle cx=\"410.0\" cy=\"103.0\" r=\"2.5\" fill=\"#8ac926\" stroke=\"#5a8a16\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ccircle cx=\"410.0\" cy=\"125.0\" r=\"2.5\" fill=\"#8ac926\" stroke=\"#5a8a16\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ccircle cx=\"410.0\" cy=\"146.9\" r=\"2.5\" fill=\"#8ac926\" stroke=\"#5a8a16\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Lab and field, and what each is good for\u003C\u002Ftext>\n    \u003Ctext x=\"34.0\" y=\"83.5\" fill=\"#166a9e\" style=\"font-size:13.5px;text-anchor:start;font-weight:700\">Lab (Lighthouse)\u003C\u002Ftext>\n    \u003Ctext x=\"50.0\" y=\"107.0\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:start\">fast and repeatable\u003C\u002Ftext>\n    \u003Ctext x=\"50.0\" y=\"129.0\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:start\">gates pull requests\u003C\u002Ftext>\n    \u003Ctext x=\"50.0\" y=\"150.9\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:start\">one simulated reader\u003C\u002Ftext>\n    \u003Ctext x=\"34.0\" y=\"193.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">catch regressions\u003C\u002Ftext>\n    \u003Ctext x=\"404.0\" y=\"83.5\" fill=\"#3f6410\" style=\"font-size:13.5px;text-anchor:start;font-weight:700\">Field (CrUX, RUM)\u003C\u002Ftext>\n    \u003Ctext x=\"420.0\" y=\"107.0\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:start\">real devices and networks\u003C\u002Ftext>\n    \u003Ctext x=\"420.0\" y=\"129.0\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:start\">late shifts and third parties\u003C\u002Ftext>\n    \u003Ctext x=\"420.0\" y=\"150.9\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:start\">days of delay\u003C\u002Ftext>\n    \u003Ctext x=\"404.0\" y=\"193.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">confirm the result\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>The guides below use the lab to gate changes and the field to confirm them.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":28,"items":29},"group","Choosing the Right Static Site Generator for Production",[30],{"t":31,"u":32,"d":33,"y":34},"Fixing Low Color Contrast Flagged by Lighthouse","\u002Fchoosing-the-right-static-site-generator-for-production\u002Faccessibility-for-static-sites\u002Ffixing-low-color-contrast-flagged-by-lighthouse\u002F","Trace Lighthouse and axe contrast failures on a static site back to a few design tokens, pick compliant replacements and keep them passing in both themes.","Fix",{"k":24,"html":36},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 295\" role=\"img\" aria-labelledby=\"hub-lighthouse-kinds-title hub-lighthouse-kinds-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-lighthouse-kinds-title\">Number of Lighthouse guides of each kind\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-lighthouse-kinds-desc\">Vertical bars: How-tos 10, Fixes 3, Comparisons 2 and Concepts 0.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"295\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"80.0\" y=\"76.0\" width=\"90.0\" height=\"170.0\" rx=\"3\" fill=\"#1982c4\" opacity=\"0.3\" stroke=\"#1982c4\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"250.0\" y=\"195.0\" width=\"90.0\" height=\"51.0\" rx=\"3\" fill=\"#ff595e\" opacity=\"0.3\" stroke=\"#d83b41\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"420.0\" y=\"212.0\" width=\"90.0\" height=\"34.0\" rx=\"3\" fill=\"#ffca3a\" opacity=\"0.45\" stroke=\"#a97b00\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"590.0\" y=\"243.0\" width=\"90.0\" height=\"3.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M30.0 246.0 L730.0 246.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Lighthouse guides by kind\u003C\u002Ftext>\n    \u003Ctext x=\"125.0\" y=\"69.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">10\u003C\u002Ftext>\n    \u003Ctext x=\"125.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">How-tos\u003C\u002Ftext>\n    \u003Ctext x=\"295.0\" y=\"188.0\" fill=\"#b32b30\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">3\u003C\u002Ftext>\n    \u003Ctext x=\"295.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Fixes\u003C\u002Ftext>\n    \u003Ctext x=\"465.0\" y=\"205.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">2\u003C\u002Ftext>\n    \u003Ctext x=\"465.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Comparisons\u003C\u002Ftext>\n    \u003Ctext x=\"635.0\" y=\"236.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">0\u003C\u002Ftext>\n    \u003Ctext x=\"635.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Concepts\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>15 guides use Lighthouse in depth; each is listed below under the section it belongs to.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":38,"items":39},"Core Web Vitals Optimization for SSGs",[40,45,49,54,58,62,66,70,74,78,82,86,90,94],{"t":41,"u":42,"d":43,"y":44},"Comparing Lab and Field Data with CrUX","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fcomparing-lab-and-field-data-with-crux\u002F","Pull Chrome UX Report data for your origin and key URLs, line it up against Lighthouse lab numbers per template, and use the gap to set better budgets.","Comparison",{"t":46,"u":47,"d":48,"y":44},"Lighthouse CI vs WebPageTest for Regression Gates","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Flighthouse-ci-vs-webpagetest-for-regression-gates\u002F","Lighthouse CI and WebPageTest compared as pull request performance gates on a static site: variance, regressions caught, false alarms, speed and cost.",{"t":50,"u":51,"d":52,"y":53},"Auditing Third-Party Scripts With Lighthouse","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fthird-party-script-performance-on-static-sites\u002Fauditing-third-party-scripts-with-lighthouse\u002F","Use the third-party summary, the treemap and a long-task trace to attribute every kilobyte and millisecond to a vendor — then gate the total in CI so it cannot creep back.","How-to",{"t":55,"u":56,"d":57,"y":53},"How to Reduce Bundle Size in Eleventy Builds","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Fhow-to-reduce-bundle-size-in-eleventy-builds\u002F","Cut JavaScript in Eleventy builds — scope scripts per route, tree-shake and bundle with esbuild, and defer third-party code. Concrete before\u002Fafter KB numbers.",{"t":59,"u":60,"d":61,"y":53},"Measuring Third-Party Cost with Request Blocking","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fthird-party-script-performance-on-static-sites\u002Fmeasuring-third-party-cost-with-request-blocking\u002F","Quantify what each third-party script costs a static site by blocking it in Lighthouse and WebPageTest, then compare LCP, TBT and bytes with and without it.",{"t":63,"u":64,"d":65,"y":53},"Measuring Web Vitals in Playwright Tests","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fmeasuring-web-vitals-in-playwright-tests\u002F","Measure LCP, CLS and interaction latency inside existing Playwright tests on a static site, with throttling, stable thresholds and per-PR results.",{"t":67,"u":68,"d":69,"y":53},"Optimizing LCP on Astro with Priority Hints","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Foptimizing-lcp-on-astro-with-priority-hints\u002F","Use fetchpriority=\"high\", rel=preload, and Astro Image priority to load the hero first and cut LCP — with measured before\u002Fafter numbers from Lighthouse and WebPageTest.",{"t":71,"u":72,"d":73,"y":53},"Per-Template Performance Budgets","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fper-template-performance-budgets\u002F","Set a performance budget for each page template of a static site, pick representative URLs automatically, and enforce them with Lighthouse CI and size checks.",{"t":75,"u":76,"d":77,"y":53},"Performance Testing on Throttled Mobile Profiles","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fperformance-testing-on-throttled-mobile-profiles\u002F","Choose throttling that matches your real readers, calibrate Lighthouse and WebPageTest against field data, and test static sites on real mid-range phones.",{"t":79,"u":80,"d":81,"y":53},"Running WebPageTest Scripts Against Preview Deploys","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Frunning-webpagetest-scripts-against-preview-deploys\u002F","Script multi-step WebPageTest journeys — search, navigation, repeat views — against every preview deploy, from locations Lighthouse cannot emulate.",{"t":83,"u":84,"d":85,"y":53},"Setting Up Lighthouse CI for a Static Site","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fsetting-up-lighthouse-ci-for-a-static-site\u002F","Wire Lighthouse CI into GitHub Actions against every preview deploy: URL selection, assertions, a required status check and stored reports, in about an hour.",{"t":87,"u":88,"d":89,"y":53},"Writing a Performance Budget That Fails Builds","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fwriting-a-performance-budget-that-fails-builds\u002F","Derive byte, request and timing limits from your own site, encode them per template in budget.json and CI, and ratchet them down without constant false alarms.",{"t":91,"u":92,"d":93,"y":34},"Eliminating Render-Blocking CSS on Static Sites","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Feliminating-render-blocking-css-on-static-sites\u002F","Inline critical CSS, defer the rest, and purge unused rules to cut render delay on static sites — with measured LCP and FCP before\u002Fafter from Lighthouse.",{"t":95,"u":96,"d":97,"y":34},"Reducing Lighthouse Score Variance in CI","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Freducing-lighthouse-score-variance-in-ci\u002F","Why Lighthouse numbers jump between identical CI runs, and the six changes that shrank LCP spread from 800 ms to 90 ms so timing budgets can safely fail builds.",{"k":24,"html":99},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 244\" role=\"img\" aria-labelledby=\"hub-lighthouse-topics-title hub-lighthouse-topics-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-lighthouse-topics-title\">Topics with the most Lighthouse guides\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-lighthouse-topics-desc\">Horizontal bars, largest first: Performance Budgets and Lighthouse CI 9, Largest Contentful Paint Optimization for Static Sites 2, Third-Party Script Performance on Static Sites 2, JavaScript Hydration & Partial Rendering 1 and Accessibility for Static Sites 1.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"244\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"350.0\" y=\"65.0\" width=\"365.6\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"99.0\" width=\"81.2\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"133.0\" width=\"81.2\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"167.0\" width=\"40.6\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"201.0\" width=\"40.6\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M350.0 60.0 L350.0 226.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Where Lighthouse comes up\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"79.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Performance Budgets and Lighthouse CI\u003C\u002Ftext>\n    \u003Ctext x=\"723.6\" y=\"79.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">9\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"113.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Largest Contentful Paint Optimization\u003C\u002Ftext>\n    \u003Ctext x=\"439.2\" y=\"113.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">2\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"147.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Third-Party Script Performance\u003C\u002Ftext>\n    \u003Ctext x=\"439.2\" y=\"147.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">2\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"181.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">JavaScript Hydration & Partial Rendering\u003C\u002Ftext>\n    \u003Ctext x=\"398.6\" y=\"181.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">1\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"215.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Accessibility\u003C\u002Ftext>\n    \u003Ctext x=\"398.6\" y=\"215.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">1\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>Topic pages give the wider context for each group; the numbers count only guides that use this tool in depth.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":101,"items":102},"Often used with Lighthouse",[103,108,113,117],{"t":104,"u":105,"d":106,"y":107},"Astro","\u002Ftools\u002Fastro\u002F","Islands, content collections, astro:assets and deployment.","2 shared guides",{"t":109,"u":110,"d":111,"y":112},"Eleventy","\u002Ftools\u002Feleventy\u002F","Incremental builds, image pipelines and the data cascade.","1 shared guides",{"t":114,"u":115,"d":116,"y":112},"GitHub Actions","\u002Ftools\u002Fgithub-actions\u002F","Caching, matrix builds, reusable workflows and pinning.",{"t":118,"u":119,"d":120,"y":112},"Playwright","\u002Ftools\u002Fplaywright\u002F","End-to-end and visual regression tests on built output.",1790943190468]