GoogleChrome

Modern Web Guidance (MWG): Google Chrome's Gold Standard for Modern Web Implementation --- title: "Modern Web Guidance (MWG): Google Chrome's Gold Standard for Modern Web Implementation" published: true description: "What Chrome's Modern Web Guidance is, how to install it, and why your AI coding agent should check it before writing any web feature." tags: webdev, ai, javascript, css --- > TL;DR: Modern Web Guidance (MWG) is an official skill pack + CLI from the Google Chrome team that embeds web platform best practices and browser compatibility data directly into the workflow of developers and AI coding agents. It's not about content strategy. It's about writing modern web code the right way. 1. What Is Modern Web Guidance? Modern Web Guidance (MWG) is a curated collection of technical implementation guides for modern web features, maintained in the GoogleChrome/modern-web-guidance repository. It was introduced at Google I/O 2026, released under the Apache 2.0 license, and is backed by the Google Chrome team, the Microsoft Edge team, and the web developer community. Its core goal: stop developers (and especially AI coding agents) from generating outdated JavaScript patterns and hacky workarounds, and steer them toward native HTML/CSS APIs that are secure, performant, and match your browser support target. 2. Installation The recommended path is the interactive wizard: npx modern-web-guidance@latest install Or install it for a specific agent: | Agent / Tool | Command | | :--- | :--- | | Claude Code | /plugin marketplace add GoogleChrome/modern-web-guidance → /plugin install modern-web-guidance@googlechrome → /reload-plugins | | GitHub Copilot CLI | /plugin marketplace add GoogleChrome/modern-web-guidance → /plugin install modern-web-guidance@googlechrome | | Gemini CLI | gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update | | Antigravity CLI | agy plugin install https://github.com/GoogleChrome/modern-web-guidance | | GitHub CLI | gh skill install GoogleChrome/modern-web-guidance | | Vercel Skills | npx skills add GoogleChrome/modern-web-guidance | The npm package is self-contained with no extra dependencies, which keeps latency low and reduces supply-chain risk. 3. Core CLI Commands # Search for relevant guides npx -y modern-web-guidance@latest search "<query>" --skill-version <version> # Retrieve the full guide (comma-separate multiple IDs) npx -y modern-web-guidance@latest retrieve "<id>" # List every available guide npx -y modern-web-guidance@latest list Windows tip: if npx fails, use npx.cmd instead. 4. When You Should Use It Check MWG at these three moments: 1. Before implementing any web feature. 2. Before building a new component, to see whether a standard pattern already exists. 3. Whenever you're tempted to write an ad-hoc solution or pull in a heavy dependency you don't really need. 5. The Three-Step Workflow Step 1: Search Use action-oriented queries (describe what you want to achieve, not just a feature name): npx -y modern-web-guidance@latest search "optimize largest contentful paint image loading" --skill-version 2026_05_16-c5e7870 The output is JSON containing id, description, category, featuresUsed, and similarity. If every similarity score is low (< 0.5) or the result is empty, treat it as not relevant and browse manually with list. Step 2: Retrieve Fetch the full guide using an id from the search results: npx -y modern-web-guidance@latest retrieve "optimize-image-priority" Step 3: Adapt Guides are framework-agnostic. Adapt the code samples to your stack (React, Vue, vanilla JS, etc.), and always check the fallback and browser support sections before shipping. 6. How the Guides Work - Framework-agnostic: you adapt them to your stack. - Baseline-aware: every guide states its browser support status using Baseline. With no explicit config, MWG defaults to Baseline Widely Available. If a feature isn't there yet, follow the guide's fallback recommendation, unless your project has its own browser support policy (e.g. "Safari 17.4+" or "no polyfills"). - Declare your Baseline target in CLAUDE.md or AGENTS.md, for example: This project's Baseline target is Baseline 2024. That lets your agent use newer features while still generating fallbacks for older browsers. - Treat it as your project's preferred standard: don't ignore it, and don't make up what it says. 7. What's Covered MWG ships 100+ expert-verified use cases spanning more than a hundred web platform features, grouped into these categories: | Category | What's inside | | :--- | :--- | | accessibility | Semantic HTML, focus management, ARIA, form accessibility | | built-in-ai | On-device browser AI: Prompt API, Summarizer, Translator, Language Detector | | canvas | WebGL shaders, exporting media from canvas, HTML in 3D scenes | | css | Scrollbar styling, dark mode, clip-path, container-based styling | | css-layout | Flexbox, grid, subgrid, container queries, anchor positioning, fluid scaling | | datetime | Duration math, time zones, recurring intervals, non-Gregorian calendars | | forms | Autofill (address/payment/sign-in), custom select, validation after interaction | | html | Dialog/Popover/Details APIs, invoker commands, resource prioritization | | motion | View transitions, physics-based easing, cross-document transitions | | overlays | Dialogs, popovers, tooltips, navigation drawers, context menus | | passkeys | WebAuthn: registration, authentication, passkey management | | performance | Core Web Vitals (LCP, INP, CLS), long tasks, image/script priority | | privacy | Data minimization, third-party audits, security headers | | scroll | Scroll-snap, parallax, scrollytelling, infinite scroll UX | | security | XSS, CSP, cookies, Cross-Origin Isolation | | typography | Stable font fallbacks, text balancing, precise alignment | | webmcp | Exposing client-side functions as tools for AI agents (Web Model Context Protocol) | There's also a separate skill for Chrome Extensions (Manifest V3), which you can select with npx modern-web-guidance@latest install --choose. 8. Why Use It - No reinventing the wheel: technical patterns (accessibility, performance, form validation, and more) are already curated by the Chrome team. - Fewer common bugs: guides cover the edge cases people usually miss. For example, autofill-address-form prevents wrong autocomplete attributes, and required-field-feedback stops errors from showing before the user has even interacted. - Lighter bundles: it pushes you toward native browser features instead of large libraries. - Cross-browser safety: every guide lists its Baseline status and fallbacks. - Consistency across projects and teams: one shared standard instead of everyone's personal style. - Measurable impact: Google's internal benchmark showed roughly a 37 percentage point improvement in agents' adherence to web best practices when equipped with MWG. 9. What Goes Wrong Without It - Repeated ad-hoc solutions: every developer or agent solves the same problem (custom select, dialog, form validation) differently, which makes the codebase inconsistent and hard to maintain. - Dependency bloat: installing a big library when the browser already has a native API (e.g. a dialog library when <dialog> does the job). - Missing native features: falling behind on more efficient, safer APIs (Popover API, View Transitions, on-device Prompt API) that are already Baseline. - Accessibility and security regressions: critical details like ARIA, focus management, CSP, XSS prevention, and autofill attributes slip through quick testing but hurt real users. - Ignored fallbacks: cutting-edge features without fallbacks break on older Safari or minority browsers, and you only find out when users complain. 10. A Note on Scope: MWG Is Not an SEO Tool MWG is about code implementation (performance, accessibility, layout, security), not content strategy or SEO/GEO. At the time of writing, it doesn't include a dedicated guide for structured data / schema.org (searches return similarity scores below 0.4). For JSON-LD and schema markup, go straight to schema.org. 11. Keeping It Updated The examples in this post use version 2026_05_16-c5e7870. The CLI warns you automatically when a newer version is available. See the updating instructions in the repo. --- Resources - GoogleChrome/modern-web-guidance on GitHub - Modern Web Guidance on Chrome for Developers Have you tried MWG with your coding agent yet? I'd love to hear how it changed the code it writes.

Why did PageSpeed Insights jump overnight? (Lighthouse 13.6, site unchanged) Lighthouse 13.6.0 shipped on 27 October 2026. Within about a week, PageSpeed Insights was running that build. The change is not a new weight table for the Performance score. It is a change to Lantern, the model that estimates how a fast capture would look under mobile throttling. Simulated First Contentful Paint and Largest Contentful Paint get closer to reality, and Barry Pollard noted that scores often come out higher, especially on JavaScript-heavy pages. So a URL can show a different lab Performance score when the HTML, CSS, and scripts are the same as yesterday. That is awkward for anyone who keeps saved PageSpeed Insights screenshots for clients. The useful question is not “did Google make us faster?” It is “are we comparing two Lighthouse versions, or two states of the site?” What follows is a short path through that question: what Lantern changed, where the Lighthouse version appears on the PageSpeed Insights card, why field CrUX will not move with the lab score, and what usually belongs in the client note. For the longer scoring guide on our monitoring blog, see Google Lighthouse Score Explained: How Scoring Works. For why one-off reports still sit poorly next to a schedule, see PageSpeed Insights vs Automated Monitoring. What Lighthouse 13.6 changed in the lab simulation PageSpeed Insights loads the page quickly, then Lantern estimates how that load would behave on a slower mobile profile. Until 13.6, that estimate relied heavily on fetch priority to decide what blocked rendering. Lantern now prefers Chrome’s own render-blocking label for each request, and only falls back to priority when that label is missing. A second change affects pages whose Largest Contentful Paint is text in the same frame as first content. Lantern now estimates that LCP from the same request and task set it uses for FCP, instead of folding in a wider set of earlier work that could push simulated LCP later. Ivan Akulov’s Framer example showed how the old model could punish useful module and font preloads; the Lighthouse team closed that class of issue in the 13.6 Lantern upgrade. None of that rewrites CrUX. It rewrites the lab timings that feed the weighted Performance score. When an overnight jump sits on a JavaScript-heavy template or a text-first above-the-fold block, the simulator is usually the first place to look before crediting a release. How to tell a simulation jump from a real site change The two PageSpeed Insights reports under discussion each name a Lighthouse version next to the emulated device. When one says 13.5.x and the other says 13.6.0, the runs are not on the same measurement. Part of the Performance difference may be Lantern, not a code change. Three questions usually settle the case: 1. Did the site change? Same commit, same CDN purge window, same tag-manager container? If nothing moved, simulation is the more likely explanation. 2. Did FCP or LCP move more than Total Blocking Time or CLS? Lantern’s 13.6 notes centre on simulated paint. A swing that is mostly Total Blocking Time still points at main-thread work. 3. Does field data agree? The CrUX block on the same PageSpeed Insights page still covers a rolling window of real Chrome visits. It will not jump overnight because Lantern changed. If modulepreloads or font preloads were removed earlier to improve a lab colour band, it is worth running the same URL again on 13.6 before leaving them out. A preload that helped real visits may no longer cost as much in the lab. Image LCP is a different story: work that finishes before the image paints can still stretch simulated LCP. Lab scores and field CrUX after the update Lab Performance is one controlled navigation under a fixed profile. Field Core Web Vitals are percentiles from eligible Chrome users. Both can mention LCP; only the lab score folds Speed Index and Total Blocking Time into a 0–100 blend with documented weights. A higher lab Performance score after 13.6 does not mean Search Console’s Core Web Vitals report improved. Google’s field status still comes from CrUX, not from the Lighthouse Performance integer. Claiming “we gained twelve points overnight” without naming the Lighthouse version credits a lab change the field never showed. Charts that track only the lab Performance score will show a step at the PageSpeed Insights roll-out, so that step belongs as a note on the monitoring board. Metric budgets (LCP, INP, CLS, and lab Total Blocking Time where you use them) on the same URLs still give engineering a clear ticket when the Performance score improves while visitor experience does not. What to put in the client note A short, honest note usually beats a celebration deck: - PageSpeed Insights now runs Lighthouse 13.6.0, which changed how simulated FCP and LCP are estimated. - Our lab Performance score moved on [URL] between [date A] and [date B]; versions were [x] then [y]. - Field CrUX on the same report [moved / did not move] for LCP, INP, and CLS. - We keep the same URLs on a short schedule so the next comparison uses one Lighthouse minor and a dated trail. That is enough for most account threads. When someone wants the weight table and calculator path, the Watcher scoring guide linked above already names the Lighthouse 10 weights and the version footnote, so a second methodology essay in Slack is rarely needed. FAQ Can PageSpeed Insights scores rise when the site has not changed? Yes. When PageSpeed Insights upgrades the Lighthouse build (for example to 13.6.0), Lantern can change simulated FCP and LCP even if HTML and assets are identical. Matching the Lighthouse version on both reports and reading the field block usually comes before attributing the jump to a release. Is a higher lab score better for SEO ranking? Not by itself. Lab Performance is a diagnostic blend. Field Core Web Vitals (via CrUX and Search Console when eligible) are the experience signals Google documents for page experience. The Performance score stays useful as engineering context. Why did my local DevTools Lighthouse disagree with PageSpeed Insights? Version, throttling preset, and machine noise all differ. Matching Lighthouse versions before comparing, and preferring a short schedule of the same live URLs over two one-off screenshots, usually closes that gap. That is a monitoring problem as much as a scoring problem. CTA Before the next client email about an overnight PageSpeed Insights jump, it is usually enough to match the Lighthouse versions, read the field block, and keep the same live URLs on a short schedule so LCP, INP, and CLS still have dates beside the Performance score. The scoring walkthrough lives in Google Lighthouse Score Explained: How Scoring Works. The schedule argument is in PageSpeed Insights vs Automated Monitoring. References - Lighthouse 13.6.0 release notes (Lighthouse project) - PageSpeed Insights Scores May Rise After Lighthouse Update (Search Engine Journal) - Lighthouse variability (Lighthouse project) - Lighthouse performance scoring (Chrome for Developers) - Google Lighthouse Score Explained: How Scoring Works (Apogee Watcher) - PageSpeed Insights vs Automated Monitoring (Apogee Watcher)

@PhotonHQ @vercel Framer perf engineer here. Some of it is Lighthouse incorrectly giving bad scores (see lighthouse#16539, fixed just last week), but some is great feedback, thank you. We’ll fix

@JosepiBuildsIt yea, sadly, that still makes LCP artificially worse: lighthouse#16539

Sadly, one other improvement I hoped for didn’t make it: lighthouse#16539 t.co

I wasn't following the history completely, as this all took a while, but IIUC it started with this: lighthouse#16539 Which led to this (amongst other things): lighthouse#16782 Which Connor finished off as: chromium-review.git.corp.google.com

Lighthouse 13.6 Can Raise PageSpeed Insights Scores Without a Site Change PageSpeed Insights scores can change because the testing model changes, not only because a website becomes faster. That distinction matters following Lighthouse 13.6.0, which updates the simulation and tracing work used to produce Lighthouse lab results. The release can be particularly relevant for JavaScript-heavy pages, where improved navigation handling and estimates for Largest Contentful Paint (LCP) and First Contentful Paint (FCP) may produce different results from earlier Lighthouse versions. A higher Performance score is useful context, but it is not, by itself, evidence that real visitors experienced a faster page. For SEO teams, agencies, and publishers that use PageSpeed Insights (PSI) in recurring reporting, the immediate task is to identify the Lighthouse version behind a report and separate tool-driven score movement from changes caused by development work. What changed in Lighthouse 13.6 Lighthouse 13.6.0 was released on October 27, 2026. According to the official Lighthouse 13.6.0 release notes, the release includes updates to Lighthouse's tracing model, improvements to navigation handling, and revised LCP and FCP estimation. Lighthouse uses a controlled lab environment to load and evaluate a page. Its Lantern model estimates how a page would perform under simulated conditions. Changes to that model can alter timings, opportunities, diagnostics, and the weighted score derived from them, even when the tested URL and its deployed code are unchanged. Search Engine Journal reported that PSI now runs Lighthouse 13.6.0 and noted that the updated simulation can produce higher lab scores on JavaScript-heavy sites. The release notes indicated that the update was expected to reach Chrome DevTools and PSI within roughly a week, while Chrome 159 stable deployment was scheduled for early December 2026. The practical point is not that every score will rise. Results can move in either direction depending on a page's loading behavior and the way the revised model interprets it. The update means that direct comparisons with reports generated under earlier Lighthouse versions require more care. Why lab scores and field data can tell different stories PageSpeed Insights presents two related but different types of performance evidence: - Lab data is a single controlled Lighthouse test. It is useful for diagnostics, reproducing issues, and assessing the likely effect of a technical change. - Field data comes from the Chrome UX Report (CrUX), where available. It reflects aggregated experiences from real Chrome users over time and is the more relevant measure of how users actually encountered the site. A Lighthouse simulation update affects lab reporting directly. It does not retroactively change how users' devices, networks, and browsers performed in the field. That is why a new PSI score should not automatically be presented as a user-experience improvement. This does not make lab data unimportant. Lab reports remain valuable because they provide actionable diagnostics that field datasets generally cannot provide for an individual page load. However, lab results are model outputs. They should be interpreted alongside field metrics rather than substituted for them. For example, a team might see an LCP-related lab improvement after Lighthouse 13.6 and assume its recent code release solved a rendering problem. Before drawing that conclusion, it should check whether the page changed, whether the test used a new Lighthouse version, and whether CrUX data later indicates a corresponding shift in real-user LCP. A better way to compare PageSpeed Insights reports Version-aware reporting is the simplest protection against misleading before-and-after comparisons. Record the Lighthouse version whenever an audit is exported, added to a dashboard, or used as the baseline for a performance project. <table> <thead> <tr> <th scope="col">Question</th> <th scope="col">What to check</th> <th scope="col">Why it matters</th> </tr> </thead> <tbody> <tr> <th scope="row">Did the site change?</th> <td>Deployments, templates, scripts, CDN settings, and third-party tags</td> <td>Confirms whether there is a plausible on-page cause for a result change.</td> </tr> <tr> <th scope="row">Did the test method change?</th> <td>The Lighthouse version shown in the report</td> <td>Separates model changes from website changes.</td> </tr> <tr> <th scope="row">Did users see a change?</th> <td>Available CrUX field metrics and their reporting period</td> <td>Tests whether the movement is reflected in real-user experience.</td> </tr> <tr> <th scope="row">Is the result repeatable?</th> <td>Multiple comparable lab runs</td> <td>Reduces the risk of treating normal test variation as a trend.</td> </tr> </tbody> </table> When communicating results, it is reasonable to state that a lab score changed after an auditing-model update. It is less accurate to claim a performance win unless the evidence also includes a documented site change and, where available, supporting field-data movement. This is especially important for agency reporting and executive dashboards. A score increase can be encouraging, but the report should identify whether it reflects implementation work, changed measurement methodology, or both. That level of attribution prevents teams from taking credit for a tooling shift and helps them focus engineering effort on user-facing issues. ARD changes are separate from the performance score question Lighthouse 13.6 also updates its Agentic Resource Discovery (ARD) audit to ARD v0.91. The release replaces ai-catalog.json with ard.json and adds discovery sources including Link headers, rel="ard", and /.well-known/ard.json. ARD concerns how resources can be discovered by agentic systems. It is distinct from the Lighthouse Performance score and should not be treated as a conventional ranking or Core Web Vitals signal. Still, the update is relevant to teams preparing content and technical infrastructure for AI-driven discovery. The new audit behavior means websites that are evaluating ARD readiness should revisit any prior implementation assumptions based on ai-catalog.json. A current review should account for the discovery methods recognized in ARD v0.91 and document what has actually been implemented. Because this area is evolving, teams should avoid presenting an ARD audit result as proof of visibility or citation in AI search products. The release also includes changes to Performance Insight audits, which now populate numericValue and numericUnit using estimated time or byte savings. That can make audit outputs more useful for prioritization, but the savings remain estimates produced by the lab environment. If a Lighthouse update has made it harder to explain why your performance dashboard moved, create a GEO Search Leads account to begin assessing your website's GEO readiness and identify optimization opportunities across the content and technical signals that shape AI-driven discovery. Use the assessment as a structured starting point, then validate performance conclusions with versioned Lighthouse reports and the field data available for your pages. Frequently Asked Questions Did Lighthouse 13.6 make every PageSpeed Insights score higher? No. The updated tracing and simulation model can change results, particularly on JavaScript-heavy pages, but it does not guarantee a higher or lower score for every URL. Does a higher PSI score after the update prove that a site is faster for users? No. A lab-score increase may result from the changed Lighthouse model. Check CrUX field data, where available, and confirm whether a site deployment could explain the difference. What should be recorded in a performance audit? Record the tested URL, test date, Lighthouse version, relevant deployment history, and the distinction between lab results and available CrUX field data. This makes future comparisons more reliable. What changed in Lighthouse's ARD audit? The audit moved to ARD v0.91, replacing ai-catalog.json with ard.json and adding discovery options such as Link headers, rel="ard", and /.well-known/ard.json. Is the ARD audit a Google ranking factor or proof of AI search visibility? No. The supplied release information describes an audit for agentic resource discovery. It does not establish that an ARD result is a Google ranking factor or proof that a site will appear in AI-generated answers. --- Conclusion Lighthouse 13.6 is a reminder that performance measurement includes both website behavior and the methodology used to measure it. Treat PSI lab-score changes as a prompt to investigate, not as automatic proof of an optimization result. Versioned audits, repeatable testing, and CrUX field data provide a firmer basis for judging real-world performance progress.

How to configure a Web Performance Budget with Lighthouse CI Hey folks, it's me again! :) Today, I would like to share with you how you can use Lighthouse CI to audit various software qualities of your project in Continous Integration but also how you can set up a Web Performance Budget strategy to not ship unintentional regressions. I used this techique in various kinds of projects and I really liked the outcome of it. Enjoy! Problem In Software Development, we always aimed to develop and ship fast. Nowadays with the growing popularity of AI agents that help us ship code even faster, being able to set certain quality guardrails (i.e. in Continous Integration/Continous Deployment) is essential to maintain software quality. This is especially visible in the area of Web Performance where we can very easily ship performance regressions by adding a third party script, an unoptimized image or multiple custom fonts. To maintain good performance and exceptional user experience, we need to find a way to warn us early about unexpected regressions. This is where Lighthouse CI can help us. Solution Lighthouse CI is a tool that can be used both in local development as well (and primarily) in the CI GitHub Action. The idea is simple: 1. Define a configuration file 2. Add a GitHub action/step 3. See results and react to them before they reach production The basic example could just be like following: name: CI on: [push] jobs: lighthouseci: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 22 - run: npm install && npm install -g @lhci/cli@0.15.x - run: npm run build - run: lhci autorun But this will run the test in a basic setup - in our case we want to add some more configuration that will allow us to define our custom budget, and update it on the go to more restrict setup after time. ci: collect: numberOfRuns: 5 startServerCommand: rails server -e production url: - http://localhost:3000/ - http://localhost:3000/pricing - http://localhost:3000/support assert: preset: lighthouse:recommended assertions: first-contentful-paint: - error - maxNumericValue: 2000 aggregationMethod: optimistic largest-contentful-paint: - error - maxNumericValue: 2500 aggregationMethod: optimistic cumulative-layout-shift: - error - maxNumericValue: 100 aggregationMethod: optimistic upload: target: lhci serverBaseUrl: https://lhci.example.com This configuration can either be in the yaml,js,json or any other supported format. What is important is that with it, you can be warned early about unexpected regressions and update the budget later to match your needs and goals better. And if you would like to compare one LHCI result to the previous one to show instant improvements/regressions, here is a great example for that adevinta/actions-lighthouseci-compare Learn more Here is the recording of my talk at JS Poland conference where I was talking about this topic (and also a bit about Playwright and Accessibility): {% embed youtube.com %}

Lighthouse v13.6.0 out, including some fixes to make the simulated network throttling calcs better for LCP / FCP (it could get tripped up by good practices like preloading before) Read more here: github.com/GoogleChrome/lighthouse/releases Updated on my fetch & render tool here: tamethebots.com

🚀 [Fastest Growing GitHub Repos] lighthouse: The Free Tool Taking Over GitHub! #shorts Discover GoogleChrome/lighthouse: Automated auditing, performance metrics, and best practices for the web. 💬 Comment "LIGHTHOUSE" below for the direct link, or grab it from the links below: 👉 Interactive Star History & Live Analysis: githubrepo.cloud ⭐ Embed Live Verified Badges in your README: githubrepo.cloud 🔗 Direct GitHub Repository: GoogleChrome/lighthouse 📊 Repository Specs: ⭐ Stars: 30,916 🍴 Forks: 9,771 💻 Language: JavaScript 📜 License: Apache-2.0 #shorts #lighthouse #audit #bestpractices #chromedevtools #developertools #webdev #javascript #typescript