1. Che cos'è Modern Web Guidance?
Modern Web Guidance applica le best practice moderne e la compatibilità del browser direttamente ai tuoi agenti di codifica. Queste competenze assicurano che il codice rimanga allineato alle funzionalità della piattaforma web corrente. Dallo sviluppo di nuovi prototipi al refactoring dei sistemi legacy, Modern Web Guidance fornisce l'accesso agli standard web moderni.
Gli sviluppatori possono utilizzarlo per:
- Creare una base solida: avviare progetti che utilizzano funzionalità web interoperabili.
- Modernizzare il codice legacy: sostituire le implementazioni personalizzate dei pattern di interfaccia utente comuni.
- Imparare durante lo sviluppo: migliorare la conoscenza dei pattern web moderni, poiché la competenza fornisce indicazioni sensibili al contesto durante lo sviluppo.
Eseguendo l'audit di un'app legacy, impostando un target di riferimento e confrontando i suggerimenti standard dell'AI con le regole di Modern Web Guidance, impari a chiedere agli agenti di codifica migliorati di Modern Web Guidance di generare codice web moderno ad alte prestazioni anziché affidarti a output di modelli obsoleti o generici.
2. Prerequisiti
Prima di iniziare questo codelab, assicurati di avere le seguenti conoscenze:
- Documentazione di Modern Web Guidance e installazione indipendente dall'agente
- Conoscenza di base di Baseline e Lighthouse
- Conoscenza di base dei prompt
Il codelab utilizza quanto segue:
- Modern Web Guidance (v0.0.173)
- Antigravity CLI (v1.0.10 con Gemini 3.5 Flash)
Questo codelab inizia con un'app legacy "Cozy Nook" composta intenzionalmente da codice legacy. Clona il repository demo e vai all'app web cozy-nook-bookshop.
git clone git@github.com:GoogleChromeLabs.modern-web-guidance-demos.git
cd modern-web-guidance-demos/legacy-demos/cozy-nook-bookshop/
3. Imposta il target di riferimento
Baseline fornisce informazioni sulle funzionalità interoperabili nei browser oggi. Offre anche un modo per esprimere i browser che vuoi supportare, senza dover specificare motori e versioni dei browser. Una funzionalità è considerata di riferimento se è interoperabile.
Prima di sviluppare l'applicazione web, scegli il target di riferimento. Per impostazione predefinita, modern-web-guidance utilizza Baseline Widely available, che include le funzionalità interoperabili da almeno 30 mesi. Se devi supportare funzionalità più recenti, devi includere il target di riferimento appropriato nel file AGENTS.md.
Per questo codelab, il progetto utilizza un target fisso di baseline widely available on 2026-06-01.
// AGENTS.md
This project's Baseline target is "Baseline widely available on 2026-06-01".
4. Identifica le priorità del progetto
Dopo aver scelto il target di riferimento, definisci le priorità e raggruppa le funzionalità e gli argomenti correlati. Adotta il modello mentale di miglioramento incrementale, come faresti quando crei una funzionalità.
Categorizza gli aggiornamenti in base a funzionalità specifiche obsolete o a discipline di sviluppo web più ampie, ad esempio:
- Rendimento: ottimizza i Core Web Vitals.
- Esperienza utente: migliora le interazioni e l'usabilità.
- Accessibilità: risolvi i problemi di accessibilità per ampliare l'accesso alla tua applicazione.
- Moduli e sicurezza: modernizza la gestione dell'input e proteggi i punti di inserimento dei dati dell'applicazione.
In questo codelab, ti concentri sul confronto del rendimento dell'app legacy del negozio di libri per vedere in che modo la competenza Modern Web Guidance ne migliora la velocità. Concentrati su un'attività alla volta per monitorare le modifiche eseguite dall'agente e assicurarti che il risultato sia in linea con gli obiettivi del progetto.
Per iniziare, ottieni un'immagine chiara del rendimento dell'app del negozio di libri nel suo stato iniziale utilizzando un audit di Lighthouse.
Apri Antigravity CLI sulla tua macchina locale e avvia una nuova sessione:
agy
Dovresti vedere un output dell'agente simile al seguente.
● Bash(ctrl+o to expand)
▸ Thought for 13s
This report will detail the desktop and mobile scores, provide a comparative metrics table, explain the root causes of the performance bottlenecks, and offer highly actionable recommendations based on modern web standards (e.g. Baseline Widely available on 2026-06-01 target).
● Create(lighthouse_audit_report.md) (ctrl+o to expand)
▸ Thought for 5s
Confirming Task Completion
I have successfully run the Lighthouse audits using npx lighthouse for both desktop and mobile viewports against a production build of the application.
The generated local reports have been saved in the project root:
• Mobile Reports: lighthouse-mobile.report.html and lighthouse-mobile.report.json
• Desktop Reports: lighthouse-desktop.report.html and lighthouse-desktop.report.json
I have compiled the audit scores, identified performance bottlenecks, and outlined a step-by-step key improvement action plan in the following artifact:
Open lighthouse_audit_report.md
Aprendo il Markdown, otteniamo i seguenti risultati:
Here is the complete Lighthouse audit report generated for the application:
**Lighthouse Audit Report: Cozy Nook Bookshop**
This report provides the Lighthouse audit scores, core web vitals performance
metrics, and key areas for improvement for The Legacy Cozy Nook in development mode.
**Summary Scores**
| Category | Mobile Score | Desktop Score |
|-----------------|--------------|---------------|
| Performance | 61 / 100 | 93 / 100 |
| Accessibility | 98 / 100 | 98 / 100 |
| Best Practices | 96 / 100 | 96 / 100 |
| SEO | 92 / 100 | 92 / 100 |
**⚡ Core Web Vitals & Key Metrics**
| Metric | Mobile Value | Desktop Value |
|-----------------|--------------|---------------|
| First Contentful Paint (FCP) | 2.9 s | 0.7 s |
| Largest Contentful Paint (LCP) | 4.8 s | 1.2 s |
| Total Blocking Time (TBT) | 0 ms | 0 ms |
| Cumulative Layout Shift (CLS) | 0.336 | 0.114 |
| Speed Index (SI) | 2.9 s | 0.7 s |
L'app ottiene un punteggio di 61/100 per il rendimento sui dispositivi mobili. Esegui una query su modern-web-guidance per ricevere consigli su come ottimizzare l'app per i dispositivi mobili e migliorare il punteggio di rendimento.
5. Esegui una query per migliorare il rendimento
Per valutare le differenze tra i consigli generati dal modello di base standard e quelli prodotti quando modern-web-guidance è attivo, esegui un test di confronto mentre chiedi all'agente suggerimenti per l'ottimizzazione del rendimento.
Innanzitutto, senza installare modern-web-guidance, esegui una query sul modello di base per vedere quali tipi di miglioramenti del rendimento del web mobile può consigliare.
Una volta visualizzato un output di funzionalità web con i motivi per cui il modello le ha consigliate, procedi all'installazione di modern-web-guidance in un'altra finestra del terminale e accetta tutte le impostazioni predefinite.
npx modern-web-guidance@latest install
Torna ad Antigravity, esegui una query sulla competenza appena installata e chiedi di confrontarsi con l'elenco consigliato dal modello di base.
● Bash(npx -y modern-web-guidance@latest search "performance")
⎿ [{"id":"performance","description":"Actionable guidelines for optimizing modern web applications. Use this guide when auditing performance, optimizing loading metrics, fixing slow interactions and optimizing Core Web Vitals (LCP, INP, CLS)","category":"performance","similarity":0.5569},
{"id":"efficient-background-processing","description":"Conserve system resources and battery life by pausing background JavaScript execution (such as `<canvas>` animations, WebGL rendering, or high-frequency WebSocket data polling) when the component is off-screen and then resume them just-in-time when they scroll back into view.","category":"performance","featuresUsed":["content-visibility"], "similarity":0.5066},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this
guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html", "similarity":0.4478},
{"id":"faster-spa-view-transitions","description":"Enable faster transitions back to previously visited views in a Single-Page Application (SPA) by preserving their structural DOM state instead of
destroying and rebuilding them on every navigation.","category":"performance","featuresUsed":["content-visibility"], "similarity":0.444},
{"id":"identify-heavy-scripts","description":"Identify the scripts most responsible for long animation frames","category":"performance","featuresUsed":["Long animation
frames"], "similarity":0.4287}] (ctrl+o to collapse)
● Bash(npx -y modern-web-guidance@latest search "image")
⎿ [{"id":"deliver-optimized-decorative-images","description":"Deliver optimized decorative images (such as backgrounds, UI icons, or complex masks) by simultaneously providing next-generation image formats
(like AVIF or WebP) alongside multiple pixel densities (like 1x and 2x) so the browser can dynamically negotiate the best combination of file size and visual quality for the user's device
capabilities.","category":"user-experience","featuresUsed":["image-set()"], "similarity":0.4038},
{"id":"performance","description":"Actionable guidelines for optimizing modern web applications. Use this guide when auditing performance, optimizing loading metrics, fixing slow interactions and
optimizing Core Web Vitals (LCP, INP, CLS)","category":"performance", "similarity":0.3761},
{"id":"visually-texture-content","description":"Apply realistic weathering and texture patterns to elements to give them an organic, aged, or physical material
appearance.","category":"user-experience","featuresUsed":["Masks"], "similarity":0.3716},
{"id":"resolution-optimized-pseudo-elements","description":"Use resolution-optimized images in CSS pseudo-elements (such as `::before` and `::after`) to reduce the number of DOM
nodes.","category":"performance","featuresUsed":["image-set()"], "similarity":0.3566},
{"id":"optimize-image-priority","description":"Optimize the loading priority of Largest Contentful Paint (LCP) candidate images and deprioritize non-critical images to reduce critical resource load
delays.","category":"performance","featuresUsed":["Fetch priority"],"similarity":0.32}] (ctrl+o to collapse)
● Bash(npx -y modern-web-guidance@latest retrieve "performance,optimize-image-priority")
⎿ <output +165 lines>
- **RECOMMENDED**: Avoid using `fetchpriority="auto"`. If you want the default priority, omit the attribute entirely to keep your HTML clean.
- **DO NOT** combine `fetchpriority="high"` with `loading="lazy"` for the LCP image.
- **DO NOT** use the deprecated `importance` attribute. It has been replaced by `fetchpriority` and is not supported by any browser.
## Fallback strategy
Baseline status for Fetch priority: Newly available. It's been Baseline since 2024-10-29.
Supported by: Chrome 103 (Jun 2022), Edge 103 (Jun 2022), Firefox 132 (Oct 2024), and Safari 17.2 (Dec 2023).
The `fetchpriority` attribute is a progressive enhancement for the `<img>` element. If a browser does not support it, the attribute is ignored, and the browser uses its default priority heuristics. (ctrl+o
to collapse)
Al termine del ragionamento, l'agente presenta un'analisi comparativa che mostra i consigli del modello con e senza la competenza modern-web-guidance ed evidenzia i suggerimenti sovrapposti. L'output seguente dipende dalla versione del modello Gemini e dalla versione corrente di modern-web-guidance.
Poiché gli ambienti locali possono variare, condividi i risultati e i feedback specifici relativi a Modern Web Guidance aprendo un problema nel repository GitHub.
L'output dell'agente dovrebbe essere simile al seguente:
### 1. Base Model Knowledge Recommendations (Internal Training Only)
Based purely on standard web development practices, the following steps are recommended to improve the application's mobile performance score:
• Hero Image Optimization: Move the dynamic Javascript-loaded hero image into the source HTML file ( index.html ) so the browser preload scanner can fetch it immediately. Add fetchpriority="high" and serve the image in modern WebP
or AVIF formats.
• Layout Stability (CLS): Provide explicit width and height dimensions in HTML image elements so the browser can calculate the layout box size before the image has finished loading.
• Payload Compression: Minify JS and CSS bundles and compress images to reduce the 6.1 MB payload.
• Resource Optimization: Defer non-critical scripts and lazy-load offscreen/below-the-fold images.
──────
### 2. Fetched Modern Web Guidance Guides
The following official performance guides were successfully fetched and inspected from the repository's local skills folder:
1. optimize-image-priority.md
2. improve-next-page-load-performance.md
3. performance.md
──────
### 3. Comparison & Key Constraints Comparison
Below is the side-by-side comparison of the base model recommendations against the fetched performance guidelines:
| Optimization Area | Base Model Recommendation | Modern Web Guidance Rule | Mandatory Constraints & Discrepancies |
|---|---|---|---|
| Lazy Loading & Fetch Priority Interaction | Standard separation of lazy-load and high priority. | MANDATORY: Do not combine fetchpriority="high" with loading="lazy" on LCP images, and do not use fetchpriority="low" on standard below-the-fold lazy-loaded images. | Constraint: Below-the-fold lazy-loaded images must load at normal priority when they enter the viewport; low priority is reserved strictly for hidden above-the-fold content. |
| Speculative Loading | Preload the next page elements or assets generally. | DO: Use the Speculation Rules API (JSON-based script) to prefetch or prerender pages the user will likely visit next. | Discrepancy: The base model recommends traditional asset preloads. The guide introduces modern speculation rules (list and document rules). |
| Speculative Loading Restrictions | Standard speculative prefetching. | DO NOT use speculation rules on Single Page Applications (SPAs). DO NOT speculate URLs that trigger state changes (e.g., /logout , /add-to-cart ). | Constraint: Explicitly blocks speculation rules for SPA routers and state-changing actions to prevent unintentional sessions/actions from being triggered by background browser requests. |
| Main Thread & INP | Break up long tasks and throttle events. | DO: Implement the 50ms rule: any script execution > 50ms must yield to the main thread. Use scheduler.yield() with a Promise fallback. | Constraint: Explicitly forbids relying only on setTimeout(..., 0) because it places continuations at the back of the queue, potentially starving user input. |
| CSS Content Visibility | Standard style minification. | DO: Pair content-visibility: auto with contain-intrinsic-size for offscreen elements on large, complex pages only. | Constraint: Forbids using content-visibility: auto on simple/small pages or above-the-fold content due to overhead and jumping risks. |
Consulta la tabella seguente per un'analisi più approfondita del confronto:
Area di ottimizzazione | Consiglio del modello di base | Regola di Modern Web Guidance | Vincoli e discrepanze obbligatori |
Interazione tra caricamento lento e priorità di recupero | Separazione standard di caricamento lento e priorità alta. | Obbligatorio: non combinare | Vincolo: le immagini con caricamento lento sotto la piega devono essere caricate con priorità normale quando entrano nell'area visibile; la priorità bassa è riservata rigorosamente ai contenuti nascosti sopra la piega. |
Caricamento speculativo | Precarica in genere gli elementi o gli asset della pagina successiva. | Procedi così: utilizza l'API Speculation Rules (script basato su JSON) per recuperare in anticipo o pre-renderizzare le pagine che probabilmente visiterai in seguito. | Discrepanza: il modello di base consiglia i precaricamenti di asset di base. La guida introduce le regole di speculazione moderne (regole di elenco e di documenti). |
Limitazioni del caricamento speculativo | Recupero in anticipo speculativo standard. | Non utilizzare le regole di speculazione nelle applicazioni a pagina singola (SPA). Non speculare sugli URL che attivano modifiche dello stato (ad esempio, | Vincolo: blocca esplicitamente le regole di speculazione per i router SPA e le azioni che modificano lo stato per impedire che sessioni o azioni non intenzionali vengano attivate dalle richieste del browser in background. |
Thread principale e INP | Suddividi le attività lunghe e limita gli eventi. | Procedi così: implementa la regola dei 50 ms: qualsiasi esecuzione di script superiore a 50 ms deve cedere il posto al thread principale. Utilizza | Vincolo: vieta esplicitamente di affidarsi solo a |
Visibilità dei contenuti CSS | Minimizzazione dello stile standard. | Procedi così: associa | Vincolo: vieta l'utilizzo di |
La tabella mostra che il modello di base comprende come migliorare il rendimento, ma modern-web-guidance perfeziona questi consigli generali in regole rigorose.
Nella sezione "Interazione tra caricamento lento e priorità di recupero", il modello di base riconosce che loading="lazy" è una best practice, ma la competenza fornisce informazioni cruciali: non combinare mai fetchpriority="low" con un attributo loading="lazy". Questa applicazione è utile quando codifichi con gli agenti AI.
Dopo che l'agente ha compreso le regole rigorose di modern-web-guidance, chiedigli di redigere il codice per entrambi gli approcci per vedere la differenza nell'implementazione.
Esamina i piani consigliati dall'agente:
▾ Thought for 2s
Formulating Mobile Optimization Plans
Okay, I'm currently focused on crafting two mobile optimization plans as
requested. I'm structuring them specifically for both a base model and one
leveraging modern-web-guidance. I'm adding sources and baselines to each for
comparison. My goal is to present these plans to you for review before any
implementation begins. I'm trying to make sure I get this exactly right.
...
● ListDir(modern-web-guidance-demos/legacy-demos/cozy-nook-bookshop/static/assets)
⎿ 8 files, 0 directories (ctrl+o to collapse)
Below are two implementation plans to optimize the mobile performance of The
Cozy Nook to a 90+ score.
──────
### Plan A: Base Model Only (Traditional Web Performance)
This plan uses classic web performance optimization patterns based on general
knowledge from standard MDN/web.dev documentation.
#### Proposed Changes
1. LCP Hero Image HTML Declaration:
• Modify index.html to include the static hero image source directly:
<img src="./assets/hero-img.png" alt="Old Books stack on wooden table" class="hero-img">
• Remove the dynamic JS source injection in hero.js to prevent JS execution delay blocking the render.
2. Critical Preload Link:
• Add a preload link in the <head> of index.html to prioritize the asset request:
<link rel="preload" as="image" href="./assets/hero-img.png">
3. Cumulative Layout Shift (CLS) Fixes:
• Add explicit width and height dimensions to all static image elements in index.html (e.g., hero, staff picks, avatars).
#### Sources & References
• Preloading Assets: MDN Web Docs - Preloading Content https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
• CLS Prevention: web.dev - Optimize Cumulative Layout Shift https://web.dev/articles/cls
### Plan B: Modern Web Guidance (Recommended)
This plan strictly follows Google Chrome's modern guidelines, progressive
enhancements, and rules. It minimizes resource contention and leverages native
speculation tools.
#### Proposed Changes
1. HTML Declaration with Native Fetch Priority:
• Modify index.html to load the hero image inline and declare priority:
<img src="./assets/hero-img.png" fetchpriority="high" alt="Old Books stack on wooden table" class="hero-img">
• Constraint Met: Do not add a duplicate <link rel="preload">. Modern web
guidance mandates letting the browser's preload scanner natively discover
the raw HTML image tag. Adding a separate preload resource block causes
unnecessary network overhead.
• Remove the dynamic source loading in hero.js.
2. Explicit Layout Boundaries (CLS):
• Set physical width and height attributes matching the design aspect
ratio directly on the hero, pick covers, and avatar elements inside
index.html.
3. Speculative MPA Navigation (Next-page optimization):
• Since this is a Multi-Page Application (MPA), embed a Speculation Rules
script block in the bottom of index.html to prefetch same-origin routes
(about.html, contact.html, details.html) with moderate eagerness with
script type "speculationrules" with the following content.
{
"prefetch": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/basket.html" } }
]
},
"eagerness": "moderate"
}]
}
• Constraint Met: We explicitly exclude shopping checkout items like
basket.html from prefetching to avoid unnecessary/accidental request
triggers.
#### Sources & References
• optimize-image-priority.md
• improve-next-page-load-performance.md
• performance.md
6. Confronta le implementazioni non guidate e guidate
Di seguito sono riportati alcuni output di esempio dell'agente dai test di confronto con Gemini e modern-web-guidance per questa app del negozio di libri.
I risultati potrebbero essere diversi, quindi utilizza questa strategia anziché passaggi rigidi. Utilizza questi piani per vedere come cambiano le cose quando attivi modern-web-guidance per l'app del negozio di libri sul tuo computer. Dopo aver completato i test di confronto, chiedi all'agente quale approccio funziona meglio per la tua configurazione specifica.
Puoi monitorare il rendimento della tua app con Lighthouse o DevTools for Agents per vedere i miglioramenti reali man mano che apporti aggiornamenti.
1. Interazione tra caricamento lento e priorità di recupero
Ottimizza le immagini fuori schermo per evitare la contesa della larghezza di banda del thread principale.
Piano A (modello di base)
Applica loading="lazy" standard a tutte le immagini fuori schermo. (Non ottimale: carica lentamente gli asset fuori schermo, ma lascia che gli asset visibili non LCP sopra la piega competano con l'immagine LCP.)
<img src="https://..." alt="..." class="pick-small-img" loading="lazy">
Piano B (Modern Web Guidance)
Imposta come target gli elementi sopra la piega inizialmente invisibili con fetchpriority="low" e assicurati che le immagini con caricamento lento standard rimangano con le priorità predefinite. (Opzione migliore: declassa gli asset nascosti che bloccano il percorso di rendering critico senza diluire i tempi di caricamento dello scorrimento.)
<img src="https://..." fetchpriority="low" width="96" height="144" alt="..." class="pick-small-img" loading="lazy">
2. Caricamento speculativo
Velocizza il caricamento delle pagine future recuperando in anticipo i documenti o gli asset della pagina successiva.
Piano A (modello di base)
Questo approccio utilizza gli elementi . (Non ottimale: le transizioni delle sottopagine hanno ancora un ritardo di circa 1 secondo.)
<link rel="prefetch" href="about.html">
<link rel="prefetch" href="contact.html">
Piano B (Modern Web Guidance)
Utilizza l'API Speculation Rules. (Opzione migliore: le regole di speculazione ti consentono di eseguire il recupero in anticipo e il pre-rendering con query corrispondenti per ridurre il tempo di navigazione percepito.)
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
3. Limitazioni del caricamento speculativo
Previeni conflitti di sicurezza, rendimento o stato bloccando esplicitamente il recupero in anticipo di determinate pagine, ad esempio /logout o /basket.html.
Piano A (modello di base)
Questo approccio richiede agli sviluppatori di gestire manualmente gli URL da includere. (Non ottimale: questo approccio è rischioso perché crea un rischio di sicurezza più elevato di azioni in background non intenzionali.)
Piano B (Modern Web Guidance)
Questo approccio esclude in modo dichiarativo i percorsi amministrativi, con stato o di acquisto. (Opzione migliore: le esclusioni programmatiche impediscono al browser di eseguire azioni in background non intenzionali.)
<script type="speculationrules">
{
"prefetch": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/wp-admin/*" } },
{ "not": { "href_matches": "/basket.html" } },
{ "not": { "selector_matches": ".do-not-prerender" } }
]
},
"eagerness": "moderate"
}]
}
</script>
4. Thread principale e Interaction to Next Paint (INP)
Dai la priorità alla disponibilità del thread principale per l'input dell'utente per mantenere una reattività elevata.
Piano A (modello di base):
Posticipa i calcoli pesanti utilizzando i loop di callback sincroni. (Non ottimale: potresti riscontrare un valore elevato di Interaction to Next Paint (INP) se la pagina ha un thread principale occupato.)
function renderBigCatalog(items) {
items.forEach(item => {
renderItem(item);
});
}
Piano B (Modern Web Guidance):
Per mantenere reattivo il thread principale, utilizza scheduler.yield() per cedere il posto al thread principale. (Opzione migliore: il metodo scheduler.yield() aiuta a mantenere reattivi gli input senza privare le attività.)
async function yieldToMain() {
if ('scheduler' in window && 'yield' in scheduler) {
return await scheduler.yield();
}
return new Promise(resolve => setTimeout(resolve, 0));
}
async function renderBigCatalog(items) {
for (let i = 0; i < items.length; i++) {
renderItem(items[i]);
if (i % 50 === 0) {
await yieldToMain();
}
}
}
5. content-visibility CSS
Gestisci i calcoli del layout fuori schermo posticipando le operazioni di rendering degli elementi fuori schermo.
Piano A (modello di base)
Minimizza i bundle di fogli di stile. (Non ottimale: sovraccarico di rendering standard sul paint iniziale.)
.book-item {
display: flex;
margin: 1rem;
}
Piano B (Modern Web Guidance)
Salta il paint degli elementi fuori schermo finché non si avvicinano al limite dell'area visibile. (Opzione migliore: impedisce il sovraccarico di rendering mobile su pagine di grandi dimensioni. Lo strumento modern-web-guidance garantisce che content-visibility venga applicato solo agli elementi fuori schermo e lo associa a contain-intrinsic-size. Senza questo contesto, un modello di base potrebbe applicarlo a livello globale, il che può causare spostamenti significativi del layout durante lo scorrimento.)
.book-item {
display: flex;
margin: 1rem;
content-visibility: auto;
contain-intrinsic-size: auto 350px;
}
7. Implementa e verifica
Dopo aver analizzato le differenze e identificato il Piano B come approccio ottimizzato, puoi applicarlo al progetto. Ora puoi vedere in che modo queste regole di Modern Web Guidance influiscono sul punteggio di Lighthouse reale.
L'agente applica fetchpriority integrato, configura l'API Speculation Rules e aggiunge la generazione di microtask. Quando viene generato il report finale di Lighthouse, il punteggio mobile aumenta rispetto al valore iniziale di 61 su 100.
Hai modernizzato ufficialmente il codice legacy.
8. Esegui l'iterazione in base alle priorità
Questo approccio valuta l'applicazione quando applichi modern-web-guidance e valuta in che modo segue le best practice di sviluppo web moderne. Man mano che procedi, sperimenta diverse configurazioni:
- Aggiungi una nuova funzionalità: consiglia un'intestazione mobile che si nasconde durante lo scorrimento per massimizzare lo spazio sullo schermo.
- Sperimenta con target di riferimento diversi: modifica lo stato di riferimento nel progetto per osservare gli effetti.
- Concentrati su discipline specifiche e osserva in che modo le diverse scelte influiscono sul codebase.
L'iterazione ti aiuta a gestire la complessità delle applicazioni legacy o di grandi dimensioni; perfeziona, testa, crea e ripeti.
9. Passaggi successivi
Per ulteriori informazioni sull'utilizzo di Modern Web Guidance, consulta la documentazione dei comandi di Modern Web Guidance e DevTools for Agents.
Se hai domande o feedback su Modern Web Guidance, segnala un problema nel repository GitHub.