1. Qu'est-ce que Modern Web Guidance ?
Les conseils pour le Web moderne appliquent directement les bonnes pratiques modernes et la compatibilité des navigateurs à vos agents de codage. Ces compétences garantissent que votre code reste aligné sur les capacités actuelles de la plate-forme Web. Qu'il s'agisse de développer de nouveaux prototypes ou de refactoriser des systèmes existants, Modern Web Guidance vous donne accès aux normes Web modernes.
Les développeurs peuvent l'utiliser pour :
- Créez des bases solides : lancez des projets qui utilisent des fonctionnalités Web interopérables.
- Modernisez l'ancien code : remplacez les implémentations personnalisées des modèles d'interface utilisateur courants.
- Apprenez en développant : améliorez vos connaissances sur les modèles Web modernes, car la compétence fournit des conseils contextuels pendant le développement.
En auditant une ancienne application, en définissant une cible de référence et en comparant les suggestions d'IA standards aux règles des consignes pour le Web moderne, vous apprenez à inciter les agents de codage améliorés par les consignes pour le Web moderne à générer du code Web moderne et performant au lieu de vous fier à des résultats de modèle obsolètes ou génériques.
2. Prérequis
Avant de commencer cet atelier de programmation, assurez-vous de disposer des connaissances suivantes :
- Documentation Modern Web Guidance et installation indépendante de l'agent
- Connaissances de base sur Baseline et Lighthouse
- Connaissances de base sur les requêtes
Cet atelier de programmation utilise les éléments suivants :
- Modern Web Guidance (v0.0.173)
- Antigravity CLI (v1.0.10 avec Gemini 3.5 Flash)
Cet atelier de programmation commence avec une ancienne application "Cozy Nook" qui est intentionnellement composée d'un ancien code. Clonez le dépôt de démonstration et accédez à l'application 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. Définir votre cible de référence
Baseline fournit des informations sur les fonctionnalités interopérables dans les navigateurs aujourd'hui. Il vous permet également d'indiquer les navigateurs que vous souhaitez prendre en charge, sans avoir à spécifier les moteurs et les versions de navigateur. Une fonctionnalité est considérée comme de base si elle est interopérable.
Avant de développer votre application Web, choisissez votre cible Baseline. Par défaut, modern-web-guidance utilise le profil de base largement disponible, qui inclut des fonctionnalités interopérables depuis au moins 30 mois. Si vous devez prendre en charge des fonctionnalités plus récentes, vous devrez inclure la cible de référence appropriée dans votre fichier AGENTS.md.
Pour cet atelier de programmation, ce projet utilise une cible fixe de baseline widely available on 2026-06-01.
// AGENTS.md
This project's Baseline target is "Baseline widely available on 2026-06-01".
4. Identifier les priorités du projet
Après avoir choisi votre cible de référence, définissez les priorités et regroupez les fonctionnalités et les thèmes associés. Adoptez le modèle mental d'amélioration incrémentielle, comme vous le feriez lorsque vous créez une fonctionnalité.
Catégorisez vos mises à jour en fonction de fonctionnalités obsolètes spécifiques ou de disciplines de développement Web plus générales, par exemple :
- Performances : optimisez vos métriques Core Web Vitals.
- Expérience utilisateur : améliorez les interactions et la convivialité.
- Accessibilité : résolvez les problèmes d'accessibilité pour élargir l'accès à votre application.
- Formulaires et sécurité : modernisez la gestion des entrées et renforcez les points d'entrée de données de votre application.
Dans cet atelier de programmation, vous allez comparer les performances de l'ancienne application Bookshop pour voir comment la compétence "Conseils pour le Web moderne" améliore sa vitesse. Concentrez-vous sur une tâche à la fois pour surveiller les modifications apportées par l'agent et vous assurer que le résultat correspond aux objectifs de votre projet.
Pour commencer, obtenez une image claire des performances de l'application de librairie dans son état initial à l'aide d'un audit Lighthouse.
Ouvrez l'interface de ligne de commande Antigravity sur votre ordinateur local et démarrez une nouvelle session :
agy
Vous devriez obtenir un résultat d'agent semblable à ce qui suit.
● 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
En ouvrant le fichier Markdown, nous obtenons les résultats suivants :
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'application obtient un score de 61/100 pour ses performances sur mobile. Demandez à modern-web-guidance des recommandations pour optimiser l'application pour mobile et améliorer le score de performances.
5. Requête pour améliorer les performances
Pour évaluer les différences entre les recommandations générées par le modèle de base standard et celles produites lorsque modern-web-guidance est actif, effectuez un test comparatif en demandant à l'agent des suggestions d'optimisation des performances.
Tout d'abord, sans installer modern-web-guidance, interrogez le modèle de base pour voir quels types d'améliorations des performances du Web mobile il peut recommander.
Une fois que vous avez obtenu un résultat de fonctionnalités Web avec les raisons pour lesquelles le modèle les a recommandées, installez modern-web-guidance dans une autre fenêtre de terminal et acceptez toutes les valeurs par défaut.
npx modern-web-guidance@latest install
Retournez à Antigravity, interrogez la compétence nouvellement installée et demandez-lui de se comparer à la liste recommandée par le modèle de 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)
Une fois que l'agent a terminé son raisonnement, il présente une analyse comparative qui montre les recommandations du modèle avec et sans la compétence modern-web-guidance, et met en évidence les suggestions qui se chevauchent. Le résultat suivant dépend de la version du modèle Gemini et de la version actuelle de modern-web-guidance.
Étant donné que les environnements locaux peuvent différer, partagez vos résultats et vos commentaires spécifiques concernant les conseils pour le Web moderne en signalant un problème dans le dépôt GitHub.
La sortie de l'agent devrait ressembler à ce qui suit :
### 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. |
Pour en savoir plus, consultez le tableau comparatif ci-dessous :
Zone d'optimisation | Recommandation de modèle de base | Règle "Modern Web Guidance" | Contraintes obligatoires et écarts |
Interaction entre le chargement différé et la priorité de récupération | Séparation standard entre le chargement différé et la haute priorité. | Obligatoire : ne combinez pas | Contrainte : les images chargées de manière différée sous la ligne de flottaison doivent se charger à une priorité normale lorsqu'elles entrent dans la fenêtre d'affichage. La priorité basse est strictement réservée au contenu masqué au-dessus de la ligne de flottaison. |
Chargement spéculatif | Précharger les éléments ou les composants de la page suivante en général. | Utilisez l'API Speculation Rules (script basé sur JSON) pour précharger ou prérendre les pages que vous êtes susceptible de consulter ensuite. | Écart : le modèle de base recommande des préchargements d'assets de base. Ce guide présente les règles de spéculation modernes (listes et règles liées aux documents). |
Restrictions liées au chargement spéculatif | Prérécupération spéculative standard. | N'utilisez pas de règles de spéculation sur les applications monopages (SPA). Ne spéculez pas sur les URL qui déclenchent des changements d'état (par exemple, | Contrainte : bloque explicitement les règles de spéculation pour les routeurs SPA et les actions de modification d'état afin d'empêcher le déclenchement involontaire de sessions ou d'actions par des requêtes de navigateur en arrière-plan. |
Thread principal et PIN | Décomposez les tâches longues et limitez les événements. | À faire : implémentez la règle des 50 ms : toute exécution de script de plus de 50 ms doit céder la place au thread principal. Utilisez | Contrainte : interdit explicitement de s'appuyer uniquement sur |
Visibilité du contenu CSS | Minification du style standard. | À faire : associez | Contrainte : interdit d'utiliser |
Le tableau montre que le modèle de base comprend comment améliorer les performances, mais que modern-web-guidance affine ces recommandations générales en règles strictes.
Dans la section "Interaction entre le chargement différé et la priorité de récupération", le modèle de base reconnaît que loading="lazy" est une bonne pratique, mais la compétence fournit une information cruciale : ne jamais combiner fetchpriority="low" avec un attribut loading="lazy". Cette application est utile lorsque vous codez avec des agents d'IA.
Une fois que l'agent a compris les règles strictes modern-web-guidance, demandez-lui de rédiger le code pour les deux approches afin de voir la différence d'implémentation.
Examinez les forfaits recommandés par l'agent :
▾ 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. Comparer les implémentations guidées et non guidées
Voici des exemples de résultats d'agents issus de tests comparatifs avec Gemini et modern-web-guidance pour cette application de librairie.
Vos résultats peuvent être différents. Utilisez donc cette stratégie plutôt que des étapes rigides. Utilisez ces plans pour voir comment les choses changent lorsque vous activez modern-web-guidance pour l'application de librairie sur votre ordinateur. Une fois que vous avez terminé d'exécuter vos propres tests comparatifs, demandez à votre agent quelle approche convient le mieux à votre configuration spécifique.
Vous pouvez suivre les performances de votre application avec Lighthouse ou DevTools pour les agents pour voir les améliorations concrètes à mesure que vous apportez des modifications.
1. Interaction entre le chargement différé et la priorité de récupération
Optimisez les images hors écran pour éviter les conflits de bande passante du thread principal.
Plan A (modèle de base)
Appliquez le style standard loading="lazy" à toutes les images hors écran. (Sous-optimal : chargez de manière différée les éléments hors écran, mais laissez les éléments visibles non-LCP au-dessus de la ligne de flottaison rivaliser avec l'image LCP.)
<img src="https://..." alt="..." class="pick-small-img" loading="lazy">
Plan B (Modern Web Guidance)
Ciblez les éléments above the fold initialement invisibles avec fetchpriority="low" et assurez-vous que les images à chargement différé standard conservent leurs priorités par défaut. (Meilleure option : rétrograder les éléments masqués qui bloquent le chemin de rendu critique sans diluer les temps de chargement au défilement.)
<img src="https://..." fetchpriority="low" width="96" height="144" alt="..." class="pick-small-img" loading="lazy">
2. Chargement spéculatif
Accélérez le chargement des pages futures en préchargeant les documents ou les éléments de la page suivante.
Plan A (modèle de base)
Cette approche utilise des éléments . (Sous-optimal : les transitions de sous-pages présentent toujours un délai d'environ une seconde.)
<link rel="prefetch" href="about.html">
<link rel="prefetch" href="contact.html">
Plan B (Modern Web Guidance)
Utilise l'API Speculation Rules. (Meilleure option : les règles de spéculation vous permettent d'effectuer un préchargement et un prérendu avec des requêtes correspondantes pour réduire le temps de navigation perçu.)
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
3. Restrictions liées au chargement spéculatif
Évitez les conflits de sécurité, de performances ou d'état en empêchant explicitement le préchargement de certaines pages, par exemple /logout ou /basket.html.
Plan A (modèle de base)
Cette approche exige des développeurs qu'ils gèrent manuellement les URL à inclure. (Sous-optimal : cette approche est risquée, car elle augmente le risque de sécurité lié aux actions en arrière-plan involontaires.)
Plan B (Modern Web Guidance)
Cette approche exclut de manière déclarative les chemins administratifs, avec état ou d'achat. (Option recommandée : les exclusions programmatiques empêchent le navigateur d'exécuter des actions en arrière-plan non souhaitées.)
<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 principal et Interaction to Next Paint (INP)
Priorisez la disponibilité du thread principal pour les entrées utilisateur afin de maintenir une réactivité élevée.
Forfait A (modèle de base) :
Différez les calculs lourds à l'aide de boucles de rappel synchrones. (Sous-optimal : vous pouvez rencontrer une valeur INP (Interaction to Next Paint) élevée si le thread principal de la page est occupé.)
function renderBigCatalog(items) {
items.forEach(item => {
renderItem(item);
});
}
Plan B (Modern Web Guidance) :
Pour que le thread principal reste réactif, utilisez scheduler.yield() pour céder la place au thread principal. (Meilleure option : la méthode scheduler.yield() permet de maintenir la réactivité des entrées sans affamer les tâches.)
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. CSS content-visibility
Gérez les calculs de mise en page hors écran en différant les opérations de rendu des éléments hors écran.
Plan A (modèle de base)
Minifiez les bundles de feuilles de style. (Sous-optimal : surcharge de rendu standard lors de la première peinture.)
.book-item {
display: flex;
margin: 1rem;
}
Plan B (Modern Web Guidance)
Ne peignez pas les éléments hors écran tant qu'ils ne s'approchent pas de la limite de la fenêtre d'affichage. (Meilleure option : évite la surcharge de rendu mobile sur les grandes pages. L'outil modern-web-guidance garantit que content-visibility n'est appliqué qu'aux éléments hors écran et l'associe à contain-intrinsic-size. Sans ce contexte, un modèle de base peut l'appliquer globalement, ce qui peut entraîner des changements de mise en page importants lors du défilement.)
.book-item {
display: flex;
margin: 1rem;
content-visibility: auto;
contain-intrinsic-size: auto 350px;
}
7. Implémenter et valider
Après avoir analysé les différences et identifié le plan B comme approche optimisée, vous pouvez l'appliquer au projet. Vous pouvez désormais voir comment ces règles concernant les conseils pour le Web moderne affectent votre score Lighthouse réel.
L'agent applique le fetchpriority intégré, configure l'API Speculation Rules et ajoute la génération de microtâches. Lorsque le rapport Lighthouse final est généré, le score mobile passe de 61/100 à 82/100.
Vous avez officiellement modernisé l'ancien code.
8. Itérer en fonction des priorités
Cette approche évalue votre application lorsque vous appliquez modern-web-guidance et évalue la façon dont elle suit les bonnes pratiques de développement Web moderne. Au fur et à mesure, testez différentes configurations :
- Ajouter une fonctionnalité : recommandez un en-tête flottant qui se masque lors du défilement pour maximiser l'espace à l'écran.
- Testez différentes cibles de référence : modifiez l'état de référence dans le projet pour observer les effets.
- Concentrez-vous sur des disciplines spécifiques et observez comment différents choix affectent votre code.
L'itération vous aide à gérer la complexité des applications volumineuses ou anciennes : affinez, testez, compilez et répétez.
9. Étapes suivantes
Pour en savoir plus sur l'utilisation des conseils pour le Web moderne, consultez la documentation sur les commandes des conseils pour le Web moderne et Outils de développement pour les agents.
Si vous avez des questions ou des commentaires concernant les conseils sur le Web moderne, ouvrez un problème dans le dépôt GitHub.