Introducción a Modern Web Guidance

1. ¿Qué es Modern Web Guidance?

Modern Web Guidance aplica las prácticas recomendadas modernas y la compatibilidad del navegador directamente a tus agentes de codificación. Estas habilidades garantizan que tu código siga alineado con las capacidades actuales de la plataforma web. Desde el desarrollo de nuevos prototipos hasta la refactorización de sistemas heredados, Modern Web Guidance proporciona acceso a los estándares web modernos.

Los desarrolladores pueden usarlo para lo siguiente:

• Crea sobre una base sólida: Inicia proyectos que usen funciones web interoperables.
• Moderniza el código heredado: Reemplaza las implementaciones personalizadas de patrones comunes de la interfaz de usuario.
• Aprende a medida que desarrollas: Mejora tus conocimientos sobre los patrones web modernos, ya que la habilidad proporciona orientación según el contexto durante el desarrollo.

Al auditar una app heredada, establecer un objetivo de referencia y comparar las sugerencias estándar de la IA con las reglas de la guía de la Web moderna, aprenderás a solicitar a los agentes de codificación mejorados con la guía de la Web moderna que generen código web moderno de alto rendimiento en lugar de depender de resultados de modelos obsoletos o genéricos.

2. Requisitos previos

Antes de comenzar este codelab, asegúrate de tener los siguientes conocimientos:

• Documentación de Modern Web Guidance y instalación independiente del agente
• Conocimientos básicos sobre Baseline y Lighthouse
• Conocimientos básicos sobre la creación de instrucciones

En este codelab, se usan los siguientes elementos:

• Modern Web Guidance (v0.0.173)
• CLI de Antigravity (v1.0.10 con Gemini 3.5 Flash)

Este codelab comienza con una app heredada de "Cozy Nook" que se compone intencionalmente de código heredado. Clona el repositorio de demostración y ve a la app web de cozy-nook-bookshop.

git clone [e-mail]:GoogleChromeLabs.modern-web-guidance-demos.git
cd modern-web-guidance-demos/legacy-demos/cozy-nook-bookshop/

3. Establece tu objetivo de referencia

Baseline proporciona información sobre qué funciones son interoperables en los navegadores hoy en día. También ofrece una forma de expresar qué navegadores quieres admitir, sin necesidad de especificar los motores y las versiones de los navegadores. Una función se considera básica si es interoperable.

Antes de desarrollar tu aplicación web, elige tu objetivo de referencia. De forma predeterminada, modern-web-guidance usa la opción Baseline Widely available, que incluye funciones que han sido interoperables durante al menos 30 meses. Si necesitas admitir funciones más recientes, deberás incluir el destino de Baseline adecuado en tu archivo AGENTS.md.

En este codelab, el proyecto usa un destino fijo de baseline widely available on 2026-06-01.

// AGENTS.md
This project's Baseline target is "Baseline widely available on 2026-06-01".

4. Identifica las prioridades del proyecto

Después de elegir tu objetivo de referencia, define las prioridades y agrupa las funciones y los temas relacionados. Adopta el modelo mental de mejora incremental, como lo harías cuando compilas una función.

Categoriza tus actualizaciones según funciones específicas desactualizadas o disciplinas más amplias del desarrollo web, por ejemplo:

• Rendimiento: Optimiza tus métricas web esenciales.
• Experiencia del usuario: Mejora las interacciones y la usabilidad.
• Accesibilidad: Aborda los problemas de accesibilidad para ampliar el acceso a tu aplicación.
• Formularios y seguridad: Moderniza el control de entrada y refuerza los puntos de entrada de datos de tu aplicación.

En este codelab, te enfocarás en comparar el rendimiento de la app de librería heredada para ver cómo la habilidad de Modern Web Guidance mejora su velocidad. Enfócate en una tarea a la vez para supervisar los cambios que realiza el agente y asegurarte de que el resultado se alinee con los objetivos de tu proyecto.

Para comenzar, obtén una imagen clara del rendimiento de la app de librería en su estado inicial con una auditoría de Lighthouse.

Abre la CLI de Antigravity en tu máquina local y comienza una sesión nueva:

agy

> Instrucción: Ejecuta npx lighthouse para realizar una auditoría de Lighthouse, generar un informe de puntuación e identificar las mejoras clave para esta app en modo de desarrollo tanto para computadoras como para dispositivos móviles. Guardar los informes de forma local y mostrarlos en esta conversación No implementes ningún cambio.

Deberías ver un resultado del agente similar al siguiente.

● 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

Si abrimos el Markdown, obtenemos los siguientes resultados:

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 |

La app obtiene una puntuación de 61/100 en cuanto al rendimiento en dispositivos móviles. Pregunta modern-web-guidance para obtener recomendaciones para optimizar la app para dispositivos móviles y mejorar la puntuación de rendimiento.

Importante: Como los modelos no son determinísticos, el resultado no debería alejarse demasiado del que se muestra aquí. Usa estas instrucciones como recomendaciones para tu estrategia o enfoque más amplios sobre el uso de modern-web-guidance.

5. Consulta para mejorar el rendimiento

Para evaluar las diferencias entre las recomendaciones que genera el modelo base estándar y las que se producen cuando modern-web-guidance está activo, realiza una prueba de comparación mientras le pides al agente sugerencias para optimizar el rendimiento.

Primero, sin instalar modern-web-guidance, consulta el modelo base para ver qué tipo de mejoras en el rendimiento de la Web para dispositivos móviles puede recomendar.

Instrucción: Proporciona una lista de recomendaciones de mejora sobre el rendimiento de la Web móvil para esta app usando SOLO tu capacitación interna. NO implementes ningún cambio. NO active otras habilidades ni servidores de MCP.

Una vez que veas un resultado de funciones web con motivos por los que el modelo las recomendó, instala modern-web-guidance en otra ventana de terminal y acepta todos los valores predeterminados.

npx modern-web-guidance@latest install

Vuelve a Antigravity, consulta la habilidad recién instalada y pídele que se compare con la lista que recomendó el modelo base.

Instrucción: Recomienda mejoras en el rendimiento de la Web para dispositivos móviles de esta app con la habilidad modern-web-guidance. Luego, compara el resultado como una lista paralela que compara tus recomendaciones básicas con las reglas oficiales de la habilidad. Destaca explícitamente cualquier restricción o discrepancia obligatoria.

● 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)  

Después de que el agente termina su razonamiento, presenta un análisis comparativo que muestra las recomendaciones del modelo con y sin la habilidad de modern-web-guidance, y destaca las sugerencias superpuestas. El siguiente resultado depende de la versión del modelo de Gemini y de la versión actual de modern-web-guidance.

Dado que los entornos locales pueden diferir, comparte tus resultados y comentarios específicos sobre la guía de la Web moderna abriendo un problema en el repositorio de GitHub.

El resultado del agente debería ser similar al siguiente:

 ### 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 siguiente tabla para obtener más detalles sobre la comparación:

Área de optimización	Recomendación del modelo base	Regla de Modern Web Guidance	Restricciones obligatorias y discrepancias
Interacción entre la carga diferida y la prioridad de recuperación	Separación estándar de carga diferida y alta prioridad.	Obligatorio: No combines fetchpriority="high" con loading="lazy" en imágenes LCP ni uses fetchpriority="low" en imágenes estándar cargadas de forma diferida por debajo del pliegue.	Restricción: Las imágenes de carga diferida en la mitad inferior de la página deben cargarse con prioridad normal cuando ingresan al viewport. La prioridad baja se reserva estrictamente para el contenido oculto en la mitad superior de la página.
Carga especulativa	Precarga los elementos o recursos de la página siguiente en general.	Haz lo siguiente: Usa la API de Speculation Rules (secuencia de comandos basada en JSON) para obtener previamente o renderizar previamente las páginas que probablemente visitarás a continuación.	Discrepancia: El modelo base recomienda la carga previa de recursos básicos. En esta guía, se presentan las reglas de especulación modernas (reglas de lista y de documento).
Restricciones de carga especulativa	Es la recuperación previa especulativa estándar.	No uses reglas de especulación en aplicaciones de una sola página (SPA). No especules sobre las URLs que activan cambios de estado (por ejemplo, /logout o /add-to-cart).	Restricción: Bloquea de forma explícita las reglas de especulación para los routers de SPA y las acciones que cambian el estado para evitar que las solicitudes del navegador en segundo plano activen sesiones o acciones no deseadas.
Subproceso principal y INP	Divide las tareas largas y limita los eventos.	Qué hacer: Implementa la regla de los 50 ms: cualquier ejecución de secuencia de comandos que dure más de 50 ms debe ceder el control al subproceso principal. Usa scheduler.yield() con una promesa de resguardo.	Restricción: Prohíbe explícitamente depender solo de setTimeout(..., 0) porque coloca las continuaciones al final de la cola, lo que podría impedir la entrada del usuario.
Visibilidad del contenido de CSS	Es la reducción del código de un diseño estándar.	Hazlo: Combina content-visibility: auto con contain-intrinsic-size solo para los elementos fuera de pantalla en páginas grandes y complejas.	Restricción: Prohíbe el uso de content-visibility: auto en páginas más simples o en contenido visible sin desplazarse debido a la sobrecarga y los riesgos de saltos.

En la tabla, se muestra que el modelo base comprende cómo mejorar el rendimiento, pero modern-web-guidance refina esas recomendaciones generales en reglas estrictas.

En la sección "Interacción entre la carga diferida y la prioridad de recuperación", el modelo base reconoce que loading="lazy" es una buena práctica, pero la habilidad proporciona información crucial: nunca combines fetchpriority="low" con un atributo loading="lazy". Esta aplicación es útil cuando escribes código con agentes de IA.

Después de que el agente comprenda las reglas estrictas de modern-web-guidance, pídele que redacte el código para ambos enfoques y que veas la diferencia en la implementación.

Instrucción: Usa las recomendaciones para mejorar el rendimiento en dispositivos móviles de esta app. Crea dos planes: uno para el modelo básico y otro con modern-web-guidance. Incluye fuentes para ambos y preséntalos antes de implementar cualquiera de ellos.

Revisa los planes que recomienda el 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. Comparación entre las implementaciones guiadas y las no guiadas

A continuación, se muestran ejemplos de resultados del agente de pruebas comparativas con Gemini y modern-web-guidance para esta app de librería.

Tus resultados pueden ser diferentes, por lo que te recomendamos que uses esta estrategia en lugar de seguir pasos rígidos. Usa estos planes para ver cómo cambian las cosas cuando activas modern-web-guidance para la app de la librería en tu computadora. Después de que termines de ejecutar tus propias pruebas de comparación, pregúntale a tu agente qué enfoque funciona mejor para tu configuración específica.

Puedes hacer un seguimiento del rendimiento de tu app con Lighthouse o DevTools para agentes y ver las mejoras en el mundo real a medida que realizas actualizaciones.

1. Interacción entre la carga diferida y la prioridad de recuperación

Optimiza las imágenes fuera de la pantalla para evitar la contención del ancho de banda del subproceso principal.

Plan A (modelo base)

Aplica loading="lazy" estándar a todas las imágenes fuera de la pantalla. (Subóptimo: Carga diferida de recursos fuera de la pantalla, pero permite que los recursos visibles que no son de LCP y se encuentran en la parte superior de la página compitan con la imagen de LCP).

<img src="https://..." alt="..." class="pick-small-img" loading="lazy">

Plan B (Modern Web Guidance)

Segmenta los elementos visibles inicialmente sin necesidad de desplazamiento con fetchpriority="low" y asegúrate de que las imágenes estándar cargadas de forma diferida conserven las prioridades predeterminadas. (Mejor opción: Reduce la prioridad de los recursos ocultos que bloquean la ruta de renderización crítica sin diluir los tiempos de carga de desplazamiento).

<img src="https://..." fetchpriority="low" width="96" height="144" alt="..." class="pick-small-img" loading="lazy">

2. Carga especulativa

Acelerar la carga de páginas futuras mediante la recuperación anticipada de documentos o recursos de la página siguiente

Plan A (modelo base)

Este enfoque usa elementos . (Subóptimo: Las transiciones de subpáginas aún tienen una demora de aproximadamente 1 segundo).

<link rel="prefetch" href="about.html">
<link rel="prefetch" href="contact.html">

Plan B (Modern Web Guidance)

Usa la API de Speculation Rules. (Mejor opción: Las reglas de especulación te permiten realizar la carga previa y la renderización previa con búsquedas coincidentes para reducir el tiempo de navegación percibido).

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

3. Restricciones de carga especulativa

Evita conflictos de seguridad, rendimiento o estado bloqueando explícitamente la recuperación previa de ciertas páginas, por ejemplo, /logout o /basket.html.

Plan A (modelo base)

Este enfoque requiere que los desarrolladores administren manualmente las URLs que se incluirán. (Subóptimo: Este enfoque es riesgoso porque crea un mayor riesgo de seguridad de acciones en segundo plano no intencionales).

Plan B (Modern Web Guidance)

Este enfoque excluye de forma declarativa las rutas administrativas, con estado o de compras. (Mejor opción: Las exclusiones programáticas evitan que el navegador ejecute acciones en segundo plano no deseadas).

<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. Subproceso principal y Interaction to Next Paint (INP)

Prioriza la disponibilidad del subproceso principal para la entrada del usuario y, así, mantener una alta capacidad de respuesta.

Plan A (modelo base):

Difiere los cálculos pesados con bucles de devolución de llamada síncronos. (Subóptimo: Es posible que experimentes un Interaction to Next Paint (INP) alto si la página tiene un subproceso principal ocupado).

function renderBigCatalog(items) {
  items.forEach(item => {
    renderItem(item);
  });
}

Plan B (Modern Web Guidance):

Para mantener la capacidad de respuesta del subproceso principal, usa scheduler.yield() para ceder el control al subproceso principal. (Mejor opción: El método scheduler.yield() ayuda a mantener las entradas responsivas sin que se agoten las tareas).

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

Administra los cálculos de diseño fuera de la pantalla posponiendo las operaciones de renderización de los elementos fuera de la pantalla.

Plan A (modelo base)

Reduce los paquetes de hojas de estilo. (Subóptimo: Sobrecarga de renderización estándar en la pintura inicial).

.book-item {
  display: flex;
  margin: 1rem;
}

Plan B (Modern Web Guidance)

Omitir la pintura de los elementos fuera de la pantalla hasta que se acerquen al límite del viewport (Mejor opción: Evita la sobrecarga del procesamiento en dispositivos móviles en páginas grandes. La herramienta modern-web-guidance garantiza que content-visibility solo se aplique a los elementos fuera de la pantalla y lo vincula con contain-intrinsic-size. Sin este contexto, un modelo base podría aplicarlo de forma global, lo que puede causar cambios significativos en el diseño durante el desplazamiento).

.book-item {
  display: flex;
  margin: 1rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 350px;
}

7. Implementa y verifica

Después de analizar las diferencias y determinar que el plan B es el enfoque optimizado, puedes aplicarlo al proyecto. Ahora puedes ver cómo estas reglas de la Guía de la Web Moderna afectan tu puntuación de Lighthouse en el mundo real.

Instrucción: Implementa el plan B en toda la base de código. Una vez que termines de realizar los cambios en el archivo, vuelve a ejecutar npx lighthouse para dispositivos móviles y muéstrame la nueva puntuación de rendimiento para verificar nuestro trabajo.

El agente aplica el fetchpriority integrado, configura la API de Speculation Rules y agrega la generación de microtareas. Cuando se genera el informe final de Lighthouse, la puntuación para dispositivos móviles aumenta desde el 61 inicial de 100.

Oficialmente, modernizaste el código heredado.

8. Itera en función de las prioridades

Este enfoque evalúa tu aplicación cuando aplicas modern-web-guidance y analiza cómo sigue las prácticas recomendadas de desarrollo web moderno. A medida que avances, experimenta con diferentes configuraciones:

• Agregar una función nueva: Recomienda un encabezado flotante que se oculte mientras se desplaza para maximizar el espacio de la pantalla.
• Experimenta con diferentes objetivos de Baseline: Cambia el estado de Baseline en el proyecto para observar los efectos.
• Concéntrate en disciplinas específicas y observa cómo las diferentes opciones afectan tu base de código.

La iteración te ayuda a navegar por las complejidades de las aplicaciones grandes o heredadas: refina, prueba, compila y repite.

9. Próximos pasos

Para obtener más información sobre el uso de Modern Web Guidance, consulta la documentación de los comandos de Modern Web Guidance y DevTools for Agents.

Si tienes preguntas o comentarios sobre la guía de la Web moderna, informa un problema en el repositorio de GitHub.