Modern Web Guidance 101

1. O que é o Modern Web Guidance?

A Modern Web Guidance aplica práticas recomendadas modernas e compatibilidade com navegadores diretamente aos seus agentes de programação. Essas habilidades garantem que seu código permaneça alinhado com os recursos atuais da plataforma da Web. Desde o desenvolvimento de novos protótipos até a refatoração de sistemas legados, o Modern Web Guidance oferece acesso aos padrões da Web moderna.

Os desenvolvedores podem usar o SDK para:

• Crie uma base sólida:inicie projetos que usam recursos da Web interoperáveis.
• Modernize o código legado:substitua implementações personalizadas de padrões comuns da interface do usuário.
• Aprenda enquanto desenvolve:melhore seu conhecimento sobre padrões da Web modernos à medida que a habilidade oferece orientação contextual durante o desenvolvimento.

Ao auditar um app legado, definir um alvo de Baseline e contrastar as sugestões padrão de IA com as regras de Modern Web Guidance, você aprende a pedir que os agentes de programação aprimorada de Modern Web Guidance gerem código da Web moderno de alta performance em vez de depender de saídas de modelos genéricos ou desatualizados.

2. Pré-requisitos

Antes de começar este codelab, confira se você tem os seguintes conhecimentos:

• Documentação do Modern Web Guidance e instalação independente de agente
• Noções básicas sobre Baseline e Lighthouse
• Noções básicas sobre comandos

O codelab usa o seguinte:

• Modern Web Guidance (v0.0.173)
• CLI do Antigravity (v1.0.10 com o Gemini 3.5 Flash)

Este codelab começa com um app legado "Cozy Nook" (Cantinho aconchegante) que é intencionalmente composto de código legado. Clone o repositório de demonstração e acesse o app da Web cozy-nook-bookshop.

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

3. Definir sua meta de valor de referência

O Baseline fornece informações sobre quais recursos são interoperáveis nos navegadores hoje. Ele também oferece uma maneira de expressar quais navegadores você quer oferecer suporte, sem precisar especificar mecanismos e versões. Um recurso é considerado de linha de base se for interoperável.

Antes de desenvolver seu aplicativo da Web, escolha sua meta de comparativo de mercado. Por padrão, o modern-web-guidance usa o Baseline amplamente disponível, que inclui recursos interoperáveis há pelo menos 30 meses. Se você precisar oferecer suporte a recursos mais recentes, inclua a meta de base adequada no arquivo AGENTS.md.

Neste codelab, o projeto usa uma meta fixa de baseline widely available on 2026-06-01.

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

4. Identificar prioridades de projetos

Depois de escolher a meta de valor de referência, defina as prioridades e agrupe recursos e temas relacionados. Adote o modelo mental de melhoria incremental, como faria ao criar um recurso.

Categorize suas atualizações com base em recursos específicos desatualizados ou disciplinas mais amplas de desenvolvimento da Web, por exemplo:

• Performance:otimize as Core Web Vitals.
• Experiência do usuário:melhore as interações e a usabilidade.
• Acessibilidade:resolva problemas de acessibilidade para ampliar o acesso ao seu aplicativo.
• Formulários e segurança:modernize o processamento de entrada e fortaleça os pontos de entrada de dados do seu aplicativo.

Neste codelab, você vai comparar o desempenho do app da livraria legado para ver como a habilidade de Modern Web Guidance melhora a velocidade dele. Concentre-se em uma tarefa por vez para monitorar as mudanças feitas pelo agente e garantir que o resultado esteja alinhado às metas do projeto.

Para começar, tenha uma ideia clara de como o app da livraria funciona no estado inicial usando uma auditoria do Lighthouse.

Abra a CLI do Antigravity na máquina local e inicie uma nova sessão:

agy

> Comando:execute npx lighthouse para fazer uma auditoria do Lighthouse, gerar um relatório de pontuação e identificar melhorias importantes para este app no modo de desenvolvimento para computador e dispositivos móveis. Salvar os relatórios localmente e mostrar nesta conversa. Não implemente nenhuma mudança.

Você vai ver uma saída do agente semelhante a esta.

● 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

Ao abrir o Markdown, temos os seguintes 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 |

O app tem uma pontuação de 61/100 em desempenho em dispositivos móveis. Consulte modern-web-guidance para receber recomendações de otimização do app para dispositivos móveis e melhorar a pontuação de performance.

Importante:como os modelos não são deterministas, a saída não deve se desviar muito da saída aqui. Use esses comandos como recomendações para sua estratégia ou abordagem mais ampla ao usar o modern-web-guidance.

5. Consulta para melhorar a performance

Para avaliar as diferenças entre as recomendações geradas pelo modelo de base padrão e aquelas produzidas quando modern-web-guidance está ativo, faça um teste de comparação enquanto pede sugestões de otimização de performance ao agente.

Primeiro, sem instalar o modern-web-guidance, consulte o modelo de base para ver que tipo de melhorias de desempenho da Web para dispositivos móveis ele pode recomendar.

Comando:forneça uma lista de recomendações de melhoria sobre a performance da Web para dispositivos móveis deste app usando APENAS seu treinamento interno. NÃO implemente nenhuma mudança. NÃO acione outras habilidades ou servidores MCP.

Depois de ver uma saída de recursos da Web com os motivos da recomendação do modelo, instale o modern-web-guidance em outra janela do terminal e aceite todos os padrões.

npx modern-web-guidance@latest install

Volte para a Antigravity, consulte a skill recém-instalada e peça para ela se comparar com a lista recomendada pelo modelo de base.

Comando:recomende melhorias na performance da Web para dispositivos móveis deste app usando a habilidade modern-web-guidance. Depois, compare a saída como uma lista lado a lado comparando suas recomendações básicas com as regras oficiais da skill. Destaque explicitamente restrições ou discrepâncias obrigatórias.

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

Depois que o agente termina o raciocínio, ele apresenta uma análise comparativa que mostra as recomendações do modelo com e sem a habilidade modern-web-guidance, além de destacar sugestões sobrepostas. A saída a seguir depende da versão do modelo do Gemini e da versão atual do modern-web-guidance.

Como os ambientes locais podem ser diferentes, compartilhe seus resultados e feedback específicos sobre o Modern Web Guidance abrindo um problema no repositório do GitHub.

A saída do agente será semelhante a esta:

 ### 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. |

Confira a tabela a seguir para uma comparação mais detalhada:

Área de otimização	Recomendação de modelo de base	Regra do Modern Web Guidance	Restrições obrigatórias e discrepâncias
Carregamento lento e interação de prioridade de busca	Separação padrão de carregamento lento e alta prioridade.	Obrigatório: não combine fetchpriority="high" com loading="lazy" em imagens LCP e não use fetchpriority="low" em imagens padrão carregadas de forma lenta abaixo da dobra.	Restrição: as imagens abaixo da dobra carregadas lentamente precisam ser carregadas com prioridade normal quando entram na janela de visualização. A prioridade baixa é reservada estritamente para conteúdo oculto acima da dobra.
Carregamento especulativo	Pré-carregar os elementos ou recursos da próxima página em geral.	Faça: use a API Speculation Rules (script baseado em JSON) para pré-buscar ou pré-renderizar páginas que você provavelmente vai visitar em seguida.	Discrepância: o modelo de base recomenda pré-carregamentos básicos de recursos. O guia apresenta regras de especulação modernas (listas e documentos).
Restrições de carregamento especulativo	Pré-busca especulativa padrão.	Não use regras de especulação em aplicativos de página única (SPAs). Não especule URLs que acionam mudanças de estado (por exemplo, /logout ou /add-to-cart).	Restrição: bloqueia explicitamente as regras de especulação para roteadores de SPA e ações de mudança de estado para evitar que sessões ou ações não intencionais sejam acionadas por solicitações de navegador em segundo plano.
Linha de execução principal e INP	Divida tarefas longas e limite eventos.	Faça: implemente a regra de 50 ms: qualquer execução de script com mais de 50 ms precisa ceder à linha de execução principal. Use scheduler.yield() com um substituto de promessa.	Restrição: proíbe explicitamente depender apenas de setTimeout(..., 0) porque isso coloca continuações no final da fila, possivelmente prejudicando a entrada do usuário.
Visibilidade do conteúdo CSS	Minificação de estilo padrão.	Faça: combine content-visibility: auto com contain-intrinsic-size apenas para elementos fora da tela em páginas grandes e complexas.	Restrição: proíbe o uso de content-visibility: auto em páginas mais simples ou conteúdo acima da dobra devido a riscos de sobrecarga e pulo.

A tabela mostra que o modelo de base entende como melhorar a performance, mas o modern-web-guidance refina essas recomendações gerais em regras estritas.

Na seção "Interação de carregamento lento e prioridade de busca", o modelo de base reconhece que loading="lazy" é uma prática recomendada, mas a habilidade fornece uma informação crucial: nunca combine fetchpriority="low" com um atributo loading="lazy". Essa aplicação é útil ao programar com agentes de IA.

Depois que o agente entender as regras estritas de modern-web-guidance, peça para ele criar o código para as duas abordagens e ver a diferença na implementação.

Comando:use as recomendações para melhorar a performance do app em dispositivos móveis. Crie dois planos: um apenas para o modelo básico e outro usando modern-web-guidance. Inclua fontes para os dois e apresente-as antes de implementar qualquer um deles.

Analise os planos recomendados pelo 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. Comparar implementações sem orientação e com orientação

Confira a seguir exemplos de saídas de agentes de testes de comparação com o Gemini e o modern-web-guidance para esse app de livraria.

Seus resultados podem ser diferentes, então use essa estratégia em vez de etapas rígidas. Use esses planos para ver como as coisas mudam quando você ativa o modern-web-guidance para o app da livraria no seu computador. Depois de concluir os testes de comparação, pergunte ao seu agente qual abordagem funciona melhor para sua configuração específica.

Você pode acompanhar a performance do seu app com o Lighthouse ou as DevTools para agentes e conferir as melhorias no mundo real à medida que faz atualizações.

1. Carregamento lento e interação de prioridade de busca

Otimize imagens fora da tela para evitar a disputa de largura de banda da linha de execução principal.

Plano A (modelo básico)

Aplique o loading="lazy" padrão a todas as imagens fora da tela. Subótimo:carregue recursos fora da tela de forma lenta, mas deixe os recursos visíveis acima da dobra que não são LCP competirem com a imagem LCP.

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

Plano B (Modern Web Guidance)

Inicialmente, direcione elementos acima da dobra invisíveis com fetchpriority="low" e garanta que as imagens padrão carregadas de forma lenta permaneçam nas prioridades padrão. Melhor opção:rebaixe os recursos ocultos que bloqueiam o caminho de renderização crítica sem diluir os tempos de carregamento de rolagem.

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

2. Carregamento especulativo

Acelere o carregamento de páginas futuras pré-buscando documentos ou recursos da próxima página.

Plano A (modelo básico)

Essa abordagem usa elementos . Subótimo:as transições de subpáginas ainda têm um atraso de aproximadamente 1 segundo.

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

Plano B (Modern Web Guidance)

Usa a API Speculation Rules. Melhor opção:as regras de especulação permitem fazer pré-busca e pré-renderização com consultas correspondentes para diminuir o tempo de navegação percebido.

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

3. Restrições de carregamento especulativo

Evite conflitos de segurança, desempenho ou estado bloqueando explicitamente a pré-busca de determinadas páginas, por exemplo, /logout ou /basket.html.

Plano A (modelo básico)

Essa abordagem exige que os desenvolvedores gerenciem manualmente quais URLs incluir. Subótima:essa abordagem é arriscada porque cria um risco de segurança maior de ações em segundo plano não intencionais.

Plano B (Modern Web Guidance)

Essa abordagem exclui de maneira declarativa caminhos administrativos, com estado ou de compras. Melhor opção:as exclusões programáticas impedem que o navegador execute ações em segundo plano não intencionais.

<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. Linha de execução principal e Interaction to Next Paint (INP)

Priorize a disponibilidade da linha de execução principal para entrada do usuário e mantenha uma alta capacidade de resposta.

Plano A (modelo básico):

Adie cálculos pesados usando loops de callback síncronos. Subótimo:você pode ter uma métrica Interaction to Next Paint (INP) alta se a página tiver uma linha de execução principal ocupada.

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

Plano B (Modern Web Guidance):

Para manter a capacidade de resposta da linha de execução principal, use scheduler.yield() para ceder à linha de execução principal. Melhor opção:o método scheduler.yield() ajuda a manter as entradas responsivas sem privação de tarefas.

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

Gerencie os cálculos de layout fora da tela adiando as operações de renderização de elementos fora da tela.

Plano A (modelo básico)

Reduza os pacotes de folhas de estilo. (Subótimo:sobrecarga de renderização padrão na pintura inicial.)

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

Plano B (Modern Web Guidance)

Pule a pintura de elementos fora da tela até que eles se aproximem do limite da janela de visualização. Melhor opção:evita a sobrecarga de renderização em dispositivos móveis em páginas grandes. A ferramenta modern-web-guidance garante que content-visibility seja aplicado apenas a elementos fora da tela e o pareia com contain-intrinsic-size. Sem esse contexto, um modelo de base pode aplicá-lo globalmente, o que pode causar mudanças significativas no layout durante a rolagem.

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

7. Implementar e verificar

Depois de analisar as diferenças e identificar o Plano B como a abordagem otimizada, você pode aplicá-lo ao projeto. Agora você pode ver como essas regras de Modern Web Guidance afetam sua pontuação real do Lighthouse.

Comando:implemente o Plano B em toda a base de código. Depois de terminar as mudanças no arquivo, execute npx lighthouse novamente para dispositivos móveis e mostre a nova pontuação de performance para verificar nosso trabalho.

O agente aplica o fetchpriority integrado, configura a API Speculation Rules e adiciona a geração de microratarefas. Quando o relatório final do Lighthouse é gerado, a pontuação para dispositivos móveis aumenta em relação aos 61 de 100 iniciais.

Você modernizou oficialmente o código legado.

8. Iterar com base nas prioridades

Essa abordagem avalia seu aplicativo quando você aplica modern-web-guidance e analisa como ele segue as práticas recomendadas de desenvolvimento da Web moderno. À medida que você avança, teste diferentes configurações:

• Adicionar um novo recurso:recomendar um cabeçalho flutuante que fica oculto durante a rolagem para maximizar o espaço da tela.
• Teste diferentes metas de valor de referência:mude o status do valor de referência no projeto para observar os efeitos.
• Concentre-se em disciplinas específicas e observe como diferentes escolhas afetam sua base de código.

A iteração ajuda você a lidar com as complexidades de aplicativos grandes ou legados: refinar, testar, criar e repetir.

9. Próximas etapas

Para mais informações sobre como usar o Modern Web Guidance, consulte a documentação de comandos do Modern Web Guidance e o DevTools para agentes.

Se você tiver dúvidas ou feedback sobre o Modern Web Guidance, registre um problema no repositório do GitHub.