Эта страница переведена с помощью Cloud Translation API.

Основы современного веб-разработки

1. Что такое современные рекомендации по веб-разработке?

Modern Web Guidance применяет современные лучшие практики и обеспечивает совместимость с браузерами непосредственно к вашим агентам разработки кода. Эти навыки гарантируют, что ваш код будет соответствовать текущим возможностям веб-платформы. От разработки новых прототипов до рефакторинга устаревших систем, Modern Web Guidance предоставляет доступ к современным веб-стандартам.

Разработчики могут использовать его для:

Опирайтесь на прочный фундамент: запускайте проекты, использующие совместимые веб-функции.
Модернизация устаревшего кода: замена специально разработанных реализаций распространенных шаблонов пользовательского интерфейса.
Учитесь в процессе разработки: совершенствуйте свои знания современных веб-шаблонов, поскольку этот навык предоставляет контекстно-зависимые рекомендации во время разработки.

Проведя аудит устаревшего приложения, установив базовый целевой уровень и сравнив стандартные предложения ИИ с правилами Modern Web Guidance, вы научитесь направлять агентов кодирования, использующих современные веб-методы, на генерацию высокопроизводительного современного веб-кода вместо того, чтобы полагаться на устаревшие или стандартные результаты работы модели.

2. Предварительные требования

Прежде чем приступить к выполнению этого практического задания, убедитесь, что вы обладаете следующими знаниями:

Современная документация Web Guidance и установка, не зависящая от конкретного агента.
Базовое понимание базовых функций Baseline и Lighthouse.
Базовое понимание процесса подсказок.

В ходе практического занятия используются следующие материалы:

Современные веб-руководства (v0.0.173)
Antigravity CLI (v1.0.10 с Gemini 3.5 Flash)

Этот практический урок начинается с устаревшего приложения "Cozy Nook", которое намеренно составлено из устаревшего кода. Клонируйте репозиторий с демонстрационными примерами и перейдите к веб-приложению 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. Установите базовый целевой уровень.

Базовый уровень (Baseline) предоставляет информацию о том, какие функции совместимы в современных браузерах. Он также позволяет указать, какие браузеры вы хотите поддерживать, без необходимости указывать движки и версии браузеров. Функция считается совместимой с базовым уровнем, если она таковая.

Прежде чем приступить к разработке веб-приложения, выберите целевой объект Baseline . По умолчанию modern-web-guidance использует широкодоступный Baseline, который включает функции, совместимые друг с другом не менее 30 месяцев. Если вам необходимо поддерживать более новые функции, вам потребуется указать соответствующий целевой объект Baseline в файле AGENTS.md .

Для данного практического занятия используется фиксированный целевой baseline widely available on 2026-06-01 .

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

4. Определите приоритеты проекта.

После выбора базового целевого уровня определите приоритеты и связанные с пакетом функции и темы. Примите модель поэтапного улучшения, как при разработке новой функции.

Классифицируйте обновления по категориям, например, по устаревшим функциям или более широким направлениям веб-разработки:

Производительность: Оптимизация основных параметров веб-приложений .
Улучшение пользовательского опыта: повышение удобства взаимодействия и юзабилити.
Доступность: Устраните проблемы доступности, чтобы расширить доступность вашего приложения.
Формы и безопасность: модернизируйте обработку ввода и укрепите точки ввода данных в вашем приложении.

В этом практическом задании вы сравните производительность устаревшего приложения книжного магазина, чтобы увидеть, как навык Modern Web Guidance повышает его скорость. Сосредоточьтесь на одной задаче за раз, чтобы отслеживать изменения, вносимые агентом, и убедиться, что результат соответствует целям вашего проекта.

Для начала, с помощью аудита Lighthouse , получите четкое представление о том, как работает приложение книжного магазина в его первоначальном состоянии.

Откройте Antigravity CLI на своем локальном компьютере и начните новую сессию:

agy

Вы должны увидеть вывод агента, аналогичный следующему.

● 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

Открыв Markdown-файл, мы получаем примерно следующие результаты:

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 |

Приложение показало производительность 61/100 на мобильных устройствах. Обратитесь к modern-web-guidance за рекомендациями по оптимизации приложения для мобильных устройств и улучшению показателей производительности.

5. Запрос для повышения производительности

Чтобы оценить различия между рекомендациями, сгенерированными стандартной базовой моделью, и рекомендациями, полученными при активации modern-web-guidance , проведите сравнительный тест, запросив у агента предложения по оптимизации производительности.

Во-первых, не устанавливая modern-web-guidance , запросите у базовой модели, какие улучшения производительности мобильного веб-сайта она может порекомендовать.

После того, как вы увидите список веб-функций с обоснованием того, почему модель их рекомендовала, установите modern-web-guidance в другом окне терминала и примите все настройки по умолчанию.

npx modern-web-guidance@latest install

Вернитесь к «Антигравитации», запросите информацию о недавно установленном навыке и попросите его сравнить себя со списком, рекомендованным базовой моделью.

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

После завершения рассуждений агент представляет сравнительный анализ, показывающий рекомендации модели с использованием и без использования навыка modern-web-guidance , а также выделяет совпадающие предложения. Полученный результат зависит от версии модели Gemini и текущей версии modern-web-guidance .

Поскольку локальные среды могут отличаться, поделитесь своими конкретными результатами и отзывами относительно рекомендаций по использованию современных веб-технологий, создав заявку в репозитории GitHub .

Результат работы агента должен быть примерно следующим:

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

Для более подробного сравнения см. таблицу ниже:

Область оптимизации	Рекомендация базовой модели	Современные правила веб-разработки	Обязательные ограничения и несоответствия
Ленивая загрузка и взаимодействие приоритетов выборки	Стандартное разделение отложенной загрузки и загрузки с высоким приоритетом.	Обязательно: не используйте сочетание `fetchpriority="high"` и `loading="lazy"` для изображений LCP и не используйте `fetchpriority="low"` для стандартных изображений, загружаемых с отложенной разметкой.	Ограничение: Отложенная загрузка изображений, расположенных ниже видимой области, должна осуществляться с обычным приоритетом при попадании в область просмотра; низкий приоритет зарезервирован исключительно для скрытого контента, расположенного выше видимой области.
Спекулятивная загрузка	Предварительная загрузка элементов или ресурсов следующей страницы в целом.	Рекомендация: Используйте API правил спекуляции (скрипт на основе JSON) для предварительной загрузки или предварительной отрисовки страниц, которые вы, вероятно, посетите в следующий раз.	Расхождение: Базовая модель рекомендует базовую предварительную загрузку активов. В руководстве представлены современные правила спекулятивного управления (правила составления списков и документов).
Спекулятивные ограничения на погрузку	Стандартная спекулятивная предварительная выборка.	Не используйте правила спекулятивного выполнения в одностраничных приложениях (SPA). Не используйте правила спекулятивного выполнения для URL-адресов, которые вызывают изменения состояния (например, `/logout` или `/add-to-cart` ).	Ограничение: Явно блокирует правила спекулятивного выполнения для SPA-маршрутизаторов и действий, изменяющих состояние, чтобы предотвратить непреднамеренное запуск сессий или действий фоновыми запросами браузера.
Основная ветка и INP	Разбивайте длительные задачи на этапы и ограничивайте количество событий.	Рекомендация: Реализуйте правило 50 мс: любое выполнение скрипта, длящееся более 50 мс, должно передавать управление основному потоку. Используйте `scheduler.yield()` с резервным вариантом Promise.	Ограничение: Явно запрещается полагаться только на `setTimeout(..., 0)` поскольку это помещает продолжения в конец очереди, потенциально лишая пользователя ввода данных.
CSS видимость содержимого	Минимизация в стандартном стиле.	Рекомендация: Используйте сочетание `content-visibility: auto` и `contain-intrinsic-size` только для элементов, находящихся за пределами видимой области экрана, на больших и сложных страницах.	Ограничение: Запрещает использование `content-visibility: auto` на простых страницах или контенте, отображаемом в верхней части страницы, из-за избыточности и риска скачков.

В таблице показано, что базовая модель понимает, как повысить производительность, но modern-web-guidance уточняют эти общие рекомендации, превращая их в строгие правила.

В разделе «Взаимодействие ленивой загрузки и приоритета выборки» базовая модель признает, что loading="lazy" — это хорошая практика, но навык предоставляет важную информацию: никогда не комбинируйте fetchpriority="low" с атрибутом loading="lazy" . Это правило полезно при программировании с использованием агентов искусственного интеллекта.

После того, как агент поймет строгие правила modern-web-guidance , попросите его составить код для обоих подходов, чтобы увидеть разницу в реализации.

Ознакомьтесь с планами, которые рекомендует агент:

▾ 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. Сравните реализации без управления и с управлением.

Ниже приведены примеры результатов работы агентов, полученных в ходе сравнительного тестирования с использованием Gemini и modern-web-guidance для этого приложения книжного магазина.

Ваши результаты могут отличаться, поэтому используйте эту стратегию, а не жесткие пошаговые инструкции. Используйте эти планы, чтобы увидеть, как изменится ситуация, когда вы включите modern-web-guidance для приложения книжного магазина на своем компьютере. После того, как вы завершите собственные сравнительные тесты, спросите своего агента, какой подход лучше всего подходит для вашей конкретной ситуации.

Вы можете отслеживать производительность своего приложения с помощью Lighthouse или DevTools for Agents, чтобы видеть реальные улучшения по мере внесения обновлений.

1. Взаимодействие между отложенной загрузкой и приоритетом выборки.

Оптимизируйте изображения, находящиеся за пределами экрана, чтобы избежать конфликтов с пропускной способностью основного потока.

План А (базовая модель)

Примените стандартную loading="lazy" ко всем изображениям, находящимся за пределами видимой области экрана. ( Неоптимальный вариант: загружать ресурсы, находящиеся за пределами видимой области, с отложенной загрузкой, но позволять видимым ресурсам, не являющимся LCP-элементами, конкурировать с LCP-изображением.)

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

План Б (Рекомендации по использованию современных веб-технологий)

Для изначально невидимых элементов, отображаемых без прокрутки, используйте fetchpriority="low" , и убедитесь, что стандартные изображения, загружаемые с отложенной загрузкой, сохраняют приоритет по умолчанию. ( Лучший вариант: понизьте приоритет скрытых ресурсов, блокирующих критически важный путь рендеринга, не сокращая при этом время загрузки при прокрутке.)

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

2. Спекулятивная загрузка

Ускорьте загрузку последующих страниц, предварительно загружая документы или ресурсы следующей страницы.

План А (базовая модель)

Этот подход использует элементы. ( Неоптимальный вариант: переходы между подстраницами по-прежнему имеют задержку примерно в 1 секунду.)

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

План Б (Рекомендации по использованию современных веб-технологий)

Использует API правил спекуляции. ( Лучший вариант: правила спекуляции позволяют выполнять предварительную выборку и предварительную отрисовку с помощью соответствующих запросов, что сокращает воспринимаемое время навигации.)

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

3. Спекулятивные ограничения на погрузку

Предотвратите конфликты безопасности, производительности или состояния, явно заблокировав предварительную загрузку определенных страниц, например, /logout или /basket.html .

План А (базовая модель)

Этот подход требует от разработчиков вручную управлять тем, какие URL-адреса следует включать. ( Неоптимальный вариант: этот подход рискован, поскольку создает более высокий риск непреднамеренных фоновых действий.)

План Б (Рекомендации по использованию современных веб-технологий)

Этот подход декларативно исключает административные, сохраняющие состояние или торговые пути. ( Лучший вариант: программные исключения предотвращают выполнение браузером непредусмотренных фоновых действий.)

<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. Основная тема и взаимодействие со следующей покраской (INP)

Для обеспечения высокой скорости отклика необходимо отдавать приоритет доступности основного потока для ввода пользовательских данных.

План А (базовая модель):

Отложите ресурсоемкие вычисления, используя синхронные циклы обратного вызова. ( Неоптимальный вариант: вы можете столкнуться с высокой частотой взаимодействия с функцией Next Paint (INP), если основной поток страницы занят.)

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

План Б (Рекомендации по использованию современных веб-технологий):

Чтобы основной поток оставался отзывчивым, используйте scheduler.yield() для передачи управления основному потоку. ( Лучший вариант: метод scheduler.yield() помогает поддерживать отзывчивость входных данных без «голодания» задач.)

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`

Управляйте вычислениями компоновки элементов, находящихся за пределами видимой области экрана, откладывая операции рендеринга этих элементов.

План А (базовая модель)

Минимизация пакетов таблиц стилей. ( Неоптимальный вариант: стандартные накладные расходы на отрисовку при первоначальной отрисовке.)

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

План Б (Рекомендации по использованию современных веб-технологий)

Отрисовка элементов, находящихся за пределами видимой области, прекращается до тех пор, пока они не приблизятся к границе области просмотра. ( Лучший вариант: предотвращает накладные расходы на рендеринг на мобильных устройствах на больших страницах. Инструмент modern-web-guidance гарантирует, что content-visibility применяется только к элементам, находящимся за пределами видимой области, и сочетается с contain-intrinsic-size . Без этого контекста базовая модель может применять его глобально, что может вызвать значительные изменения компоновки при прокрутке.)

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

7. Внедрить и проверить

После анализа различий и определения плана Б как оптимального подхода, вы можете применить его к проекту. Теперь вы можете увидеть, как эти правила Modern Web Guidance влияют на ваш реальный результат в Lighthouse.

Агент применяет встроенную fetchpriority , настраивает API правил спекуляции и добавляет микрозадачи. После генерации окончательного отчета Lighthouse оценка для мобильных устройств повышается с первоначальных 61 из 100.

Вы официально модернизировали устаревший код.

8. Повторяйте действия в соответствии с приоритетами.

Этот подход оценивает ваше приложение с учетом modern-web-guidance и определяет, насколько оно соответствует лучшим практикам современной веб-разработки. По мере продвижения экспериментируйте с различными конфигурациями:

Добавлена новая функция: рекомендуется использовать плавающий заголовок, который скрывается при прокрутке для максимального увеличения пространства на экране.
Поэкспериментируйте с различными целевыми значениями базового уровня: измените статус базового уровня в проекте, чтобы понаблюдать за результатами.
Сосредоточьтесь на конкретных дисциплинах и понаблюдайте, как различные решения влияют на ваш код.

Итеративный подход помогает справляться со сложностями больших или устаревших приложений: совершенствовать, тестировать, создавать и повторять.

9. Дальнейшие шаги

Для получения дополнительной информации об использовании Modern Web Guidance см. документацию по командам Modern Web Guidance и DevTools for Agents .

Если у вас есть вопросы или отзывы о Modern Web Guidance, создайте заявку в репозитории GitHub .

Основы современного веб-разработки

1. Что такое современные рекомендации по веб-разработке?

2. Предварительные требования

3. Установите базовый целевой уровень.

4. Определите приоритеты проекта.

5. Запрос для повышения производительности

6. Сравните реализации без управления и с управлением.

1. Взаимодействие между отложенной загрузкой и приоритетом выборки.

План А (базовая модель)

План Б (Рекомендации по использованию современных веб-технологий)

2. Спекулятивная загрузка

План А (базовая модель)

План Б (Рекомендации по использованию современных веб-технологий)

3. Спекулятивные ограничения на погрузку

План А (базовая модель)

План Б (Рекомендации по использованию современных веб-технологий)

4. Основная тема и взаимодействие со следующей покраской (INP)

План А (базовая модель):

План Б (Рекомендации по использованию современных веб-технологий):

5. CSS content-visibility

План А (базовая модель)

План Б (Рекомендации по использованию современных веб-технологий)

7. Внедрить и проверить

8. Повторяйте действия в соответствии с приоритетами.

9. Дальнейшие шаги

5. CSS `content-visibility`