این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

راهنمای وب مدرن ۱۰۱

۱. راهنمای وب مدرن چیست؟

راهنمای وب مدرن، بهترین شیوه‌های مدرن و سازگاری مرورگر را مستقیماً بر روی عوامل کدنویسی شما اعمال می‌کند. این مهارت‌ها تضمین می‌کنند که کد شما با قابلیت‌های فعلی پلتفرم وب همسو باقی بماند. از توسعه نمونه‌های اولیه جدید گرفته تا بازسازی سیستم‌های قدیمی، راهنمای وب مدرن دسترسی به استانداردهای وب مدرن را فراهم می‌کند.

توسعه‌دهندگان می‌توانند از آن برای موارد زیر استفاده کنند:

بر پایه‌ای محکم بنا کنید: پروژه‌هایی را شروع کنید که از ویژگی‌های وبِ سازگار استفاده می‌کنند.
مدرن‌سازی کد قدیمی: جایگزین کردن پیاده‌سازی‌های سفارشی الگوهای رابط کاربری رایج.
همزمان با توسعه، یاد بگیرید: دانش خود را در مورد الگوهای وب مدرن بهبود بخشید، زیرا این مهارت، راهنمایی‌های آگاهانه در مورد زمینه را در طول توسعه ارائه می‌دهد.

با بررسی یک برنامه قدیمی، تعیین یک هدف پایه و مقایسه پیشنهادات استاندارد هوش مصنوعی با قوانین راهنمای وب مدرن، یاد می‌گیرید که به جای تکیه بر خروجی‌های مدل قدیمی یا عمومی، از عوامل کدنویسی پیشرفته راهنمای وب مدرن بخواهید که کد وب مدرن و با کارایی بالا تولید کنند.

۲. پیش‌نیازها

قبل از شروع این آزمایشگاه کد، مطمئن شوید که دانش زیر را دارید:

مستندات راهنمای وب مدرن و نصب مستقل از عامل (agent-agnostic)
درک اولیه از Baseline و Lighthouse
درک اولیه از ترغیب

کدلب از موارد زیر استفاده می‌کند:

راهنمای وب مدرن (نسخه ۰.۰.۱۷۳)
رابط خط فرمان آنتی‌گراویتی (نسخه ۱.۰.۱۰ با فلش جمینی ۳.۵)

این آزمایشگاه کد با یک برنامه قدیمی "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/

۳. هدف پایه خود را تعیین کنید

Baseline اطلاعاتی در مورد اینکه کدام ویژگی‌ها امروزه در مرورگرها قابل تعامل هستند، ارائه می‌دهد. همچنین راهی برای بیان اینکه می‌خواهید از کدام مرورگرها پشتیبانی کنید، بدون نیاز به مشخص کردن موتورها و نسخه‌های مرورگر، ارائه می‌دهد. یک ویژگی در صورتی Baseline در نظر گرفته می‌شود که قابل تعامل باشد.

قبل از توسعه برنامه وب خود، هدف Baseline خود را انتخاب کنید . به طور پیش‌فرض، modern-web-guidance از Baseline Widely available استفاده می‌کند که شامل ویژگی‌هایی است که حداقل 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".

۴. اولویت‌های پروژه را مشخص کنید

بعد از اینکه هدف پایه خود را انتخاب کردید، اولویت‌ها و ویژگی‌ها و موضوعات مرتبط را دسته‌بندی کنید. مدل ذهنی بهبود تدریجی را اتخاذ کنید، همانطور که هنگام ساخت یک ویژگی این کار را می‌کنید.

به‌روزرسانی‌های خود را بر اساس ویژگی‌های خاص منسوخ‌شده یا رشته‌های گسترده‌تر توسعه وب دسته‌بندی کنید، برای مثال:

عملکرد: عوامل حیاتی اصلی وب خود را بهینه کنید.
تجربه کاربری: بهبود تعاملات و قابلیت استفاده.
دسترسی‌پذیری: برای گسترش دسترسی به برنامه خود، به مشکلات دسترسی‌پذیری رسیدگی کنید.
فرم‌ها و امنیت: مدیریت ورودی‌ها را مدرن کنید و نقاط ورود داده‌های برنامه خود را ایمن‌تر کنید.

در این آزمایشگاه کد، شما بر مقایسه عملکرد برنامه فروشگاه کتاب قدیمی تمرکز می‌کنید تا ببینید چگونه مهارت Modern Web Guidance سرعت آن را بهبود می‌بخشد. روی یک کار در یک زمان تمرکز کنید تا تغییراتی را که عامل انجام می‌دهد نظارت کنید و مطمئن شوید که نتیجه با اهداف پروژه شما همسو است.

برای شروع، با استفاده از ممیزی Lighthouse، تصویر روشنی از نحوه عملکرد اپلیکیشن کتابفروشی در حالت اولیه خود به دست آورید.

Antigravity CLI را روی دستگاه محلی خود باز کنید و یک جلسه جدید را شروع کنید:

agy

شما باید خروجی agent مشابه زیر را ببینید.

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

این برنامه از نظر عملکرد در موبایل امتیاز ۶۱ از ۱۰۰ را کسب کرده است. برای دریافت توصیه‌هایی جهت بهینه‌سازی برنامه برای موبایل و بهبود امتیاز عملکرد، از modern-web-guidance کمک بگیرید.

۵. پرس‌وجو برای بهبود عملکرد

برای ارزیابی تفاوت‌های بین توصیه‌های تولید شده توسط مدل پایه استاندارد و توصیه‌های تولید شده هنگام فعال بودن modern-web-guidance ، یک تست مقایسه انجام دهید و همزمان از عامل، پیشنهادهای بهینه‌سازی عملکرد را درخواست کنید.

ابتدا، بدون نصب modern-web-guidance ، مدل پایه را بررسی کنید تا ببینید چه نوع بهبودهایی در عملکرد وب موبایل می‌تواند پیشنهاد دهد.

وقتی خروجی ویژگی‌های وب را به همراه دلایلی که مدل آن را توصیه کرده است مشاهده کردید، می‌توانید modern-web-guidance در یک پنجره ترمینال دیگر نصب کنید و همه پیش‌فرض‌ها را بپذیرید.

npx modern-web-guidance@latest install

به Antigravity برگردید، مهارت تازه نصب شده را جستجو کنید و از آن بخواهید که خود را با لیستی که توسط مدل پایه توصیه شده است مقایسه کند.

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

برای مقایسه دقیق‌تر، جدول زیر را ببینید:

منطقه بهینه‌سازی	توصیه مدل پایه	قانون راهنمای وب مدرن	محدودیت‌ها و اختلافات اجباری
تعامل اولویت‌دار بارگذاری تنبل و واکشی	جداسازی استاندارد بارگذاری تنبل و اولویت بالا.	اجباری: در تصاویر LCP، از ترکیب `fetchpriority="high"` با `loading="lazy"` استفاده نکنید و در تصاویر استاندارد بارگذاری شده با تنبلی در پایین صفحه `fetchpriority="low"` استفاده نکنید.	محدودیت: تصاویر بارگذاری‌شده با تنبلی در پایین صفحه باید هنگام ورود به نمای دید با اولویت عادی بارگذاری شوند؛ اولویت پایین صرفاً برای محتوای پنهان بالای صفحه محفوظ است.
بارگذاری حدسی	عناصر یا فایل‌های صفحه بعد را به‌طورکلی از قبل بارگذاری کنید.	انجام دهید: از API قوانین حدس و گمان (اسکریپت مبتنی بر JSON) برای پیش‌واکشی یا پیش‌رندر صفحاتی که احتمالاً در مرحله بعد بازدید خواهید کرد، استفاده کنید.	اختلاف: مدل پایه، پیش‌بارگذاری اولیه دارایی‌ها را توصیه می‌کند. این راهنما قوانین مدرن سفته‌بازی (قوانین فهرست و سند) را معرفی می‌کند.
محدودیت‌های بارگذاری احتمالی	پیش‌واکشی گمانه‌زن استاندارد.	از قوانین حدس و گمان در برنامه‌های تک صفحه‌ای (SPA) استفاده نکنید. URLهایی را که باعث تغییر وضعیت می‌شوند (مثلاً `/logout` یا `/add-to-cart` ) حدس و گمان نکنید.	محدودیت: به طور صریح قوانین حدس و گمان را برای روترهای SPA و اقدامات تغییر وضعیت مسدود می‌کند تا از ایجاد جلسات یا اقدامات ناخواسته توسط درخواست‌های مرورگر در پس‌زمینه جلوگیری شود.
نخ اصلی و INP	وظایف طولانی را به بخش‌های کوچک‌تر تقسیم کنید و رویدادها را محدود کنید.	انجام دهید: قانون ۵۰ میلی‌ثانیه را پیاده‌سازی کنید: هر اجرای اسکریپتی که بیش از ۵۰ میلی‌ثانیه طول بکشد باید به نخ اصلی (main thread) واگذار شود. `scheduler.yield()` به همراه یک Promise fallback استفاده کنید.	محدودیت: صراحتاً تکیه صرف بر `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

۶. پیاده‌سازی‌های هدایت‌نشده را در مقابل پیاده‌سازی‌های هدایت‌شده مقایسه کنید

در ادامه، نمونه‌هایی از خروجی‌های عامل از آزمایش مقایسه‌ای با Gemini و modern-web-guidance برای این اپلیکیشن کتابفروشی آمده است.

ممکن است نتایج شما متفاوت به نظر برسد، بنابراین به جای گام‌های سفت و سخت، از این استراتژی استفاده کنید. از این برنامه‌ها استفاده کنید تا ببینید وقتی modern-web-guidance برای برنامه کتابفروشی روی رایانه خود روشن می‌کنید، اوضاع چگونه تغییر می‌کند. پس از اتمام اجرای تست‌های مقایسه‌ای خود، از نماینده خود بپرسید که کدام رویکرد برای تنظیمات خاص شما بهتر عمل می‌کند.

شما می‌توانید عملکرد برنامه خود را با Lighthouse یا DevTools for Agents پیگیری کنید تا همزمان با انجام به‌روزرسانی‌ها، بهبودهای واقعی را مشاهده کنید.

۱. تعامل اولویت‌دار بارگذاری و واکشی تنبل

تصاویر خارج از صفحه را بهینه کنید تا از تداخل پهنای باند نخ اصلی جلوگیری شود.

طرح A (مدل پایه)

loading="lazy" برای همه تصاویر خارج از صفحه اعمال کنید. ( غیربهینه: فایل‌های خارج از صفحه را به صورت تنبل بارگذاری کنید، اما فایل‌های غیر LCP قابل مشاهده بالای صفحه را با تصویر LCP رقابت کنید.)

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

طرح B (راهنمای وب مدرن)

عناصر بالای صفحه که در ابتدا نامرئی هستند را با fetchpriority="low" هدف قرار دهید و مطمئن شوید که تصاویر استاندارد با بارگذاری تنبل در اولویت‌های پیش‌فرض باقی می‌مانند. ( بهترین گزینه: فایل‌های پنهانی که مسیر رندر بحرانی را مسدود می‌کنند، بدون کاهش زمان بارگذاری اسکرول، از اولویت خارج کنید.)

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

۲. بارگذاری حدسی

با پیش‌واکشی اسناد یا فایل‌های صفحه بعد، سرعت بارگذاری صفحات آینده را افزایش دهید.

طرح A (مدل پایه)

این رویکرد با استفاده از عناصر. ( غیربهینه: انتقال زیرصفحه هنوز تقریباً ۱ ثانیه تأخیر دارد.)

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

طرح B (راهنمای وب مدرن)

از API مربوط به Speculation Rules استفاده می‌کند. ( بهترین گزینه: Speculation Rules به شما امکان می‌دهد تا با کوئری‌های منطبق، پیش‌واکشی و پیش‌رندرینگ را انجام دهید تا زمان پیمایش درک‌شده کاهش یابد.)

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

۳. محدودیت‌های بارگذاری احتمالی

با مسدود کردن صریح پیش‌واکشی صفحات خاص، مانند /logout یا /basket.html ، از تداخل‌های امنیتی، عملکردی یا وضعیتی جلوگیری کنید.

طرح A (مدل پایه)

این رویکرد مستلزم آن است که توسعه‌دهندگان به صورت دستی مدیریت کنند که کدام URLها را شامل شوند. ( غیربهینه: این رویکرد پرخطر است زیرا خطر امنیتی بالاتری را از اقدامات پس‌زمینه ناخواسته ایجاد می‌کند.)

طرح B (راهنمای وب مدرن)

این رویکرد، مسیرهای مدیریتی، دارای وضعیت یا خرید را به صورت اعلانی حذف می‌کند. ( بهترین گزینه: حذف‌های برنامه‌ریزی‌شده، مرورگر را از اجرای اقدامات پس‌زمینه ناخواسته باز می‌دارند.)

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

۴. نخ اصلی و تعامل با رنگ بعدی (INP)

برای حفظ سرعت پاسخگویی بالا، اولویت را به در دسترس بودن نخ اصلی برای ورودی کاربر بدهید.

طرح الف (مدل پایه):

محاسبات سنگین را با استفاده از حلقه‌های فراخوانی همزمان به تعویق بیندازید. ( غیربهینه: اگر صفحه دارای یک رشته اصلی شلوغ باشد، ممکن است با تعامل بالا برای رنگ‌آمیزی بعدی (INP) مواجه شوید.)

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

طرح ب (راهنمای وب مدرن):

To keep the main thread responsive, use scheduler.yield() to yield to the main thread. ( Best option: The scheduler.yield() method helps keep inputs responsive without task starvation.)

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();
    }
  }
}

۵. `content-visibility` CSS

با به تعویق انداختن عملیات رندر عناصر خارج از صفحه، محاسبات طرح‌بندی خارج از صفحه را مدیریت کنید.

طرح A (مدل پایه)

فشرده‌سازی بسته‌های استایل‌شیت. ( غیربهینه: سربار رندر استاندارد در رنگ‌آمیزی اولیه.)

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

طرح B (راهنمای وب مدرن)

از نقاشی عناصر خارج از صفحه تا زمانی که به مرز viewport نزدیک شوند، صرف نظر کنید. ( بهترین گزینه: از سربار رندر موبایل در صفحات بزرگ جلوگیری می‌کند. ابزار modern-web-guidance تضمین می‌کند که content-visibility فقط برای عناصر خارج از صفحه اعمال می‌شود و آن را با contain-intrinsic-size جفت می‌کند. بدون این زمینه، یک مدل پایه ممکن است آن را به صورت سراسری اعمال کند، که می‌تواند باعث تغییرات قابل توجه در طرح‌بندی هنگام پیمایش شود.)

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

۷. پیاده‌سازی و تأیید

بعد از اینکه تفاوت‌ها را تجزیه و تحلیل کردید و طرح B را به عنوان رویکرد بهینه شناسایی کردید، می‌توانید آن را در پروژه اعمال کنید. اکنون می‌توانید ببینید که چگونه این قوانین راهنمای وب مدرن بر امتیاز Lighthouse شما در دنیای واقعی تأثیر می‌گذارند.

عامل، fetchpriority داخلی را اعمال می‌کند، API قوانین حدس و گمان را تنظیم می‌کند و بازده میکروتسک را اضافه می‌کند. هنگامی که گزارش نهایی Lighthouse تولید می‌شود، امتیاز موبایل از ۶۱ از ۱۰۰ اولیه افزایش می‌یابد.

شما رسماً کد قدیمی را مدرن کردید.

۸. اولویت‌ها را تکرار کنید

این رویکرد، برنامه شما را هنگام اعمال modern-web-guidance ارزیابی می‌کند و نحوه پیروی آن از بهترین شیوه‌های توسعه وب مدرن را ارزیابی می‌کند. همانطور که به جلو حرکت می‌کنید، پیکربندی‌های مختلف را آزمایش کنید:

یک ویژگی جدید اضافه کنید: یک هدر شناور پیشنهاد دهید که هنگام پیمایش پنهان شود تا فضای صفحه نمایش به حداکثر برسد.
با اهداف پایه مختلف آزمایش کنید: وضعیت پایه را در پروژه تغییر دهید تا اثرات آن را مشاهده کنید.
روی رشته‌های خاص تمرکز کنید و مشاهده کنید که چگونه انتخاب‌های مختلف بر کدبیس شما تأثیر می‌گذارند.

تکرار به شما کمک می‌کند تا پیچیدگی‌های برنامه‌های بزرگ یا قدیمی را مدیریت کنید؛ اصلاح کنید، آزمایش کنید، بسازید و تکرار کنید.

۹. مراحل بعدی

برای اطلاعات بیشتر در مورد استفاده از Modern Web Guidance، به مستندات دستورات Modern Web Guidance و DevTools for Agents مراجعه کنید.

اگر در مورد راهنمای وب مدرن سؤال یا بازخوردی دارید، مشکل خود را در مخزن گیت‌هاب ثبت کنید.

راهنمای وب مدرن ۱۰۱

۱. راهنمای وب مدرن چیست؟

۲. پیش‌نیازها

۳. هدف پایه خود را تعیین کنید

۴. اولویت‌های پروژه را مشخص کنید

۵. پرس‌وجو برای بهبود عملکرد

۶. پیاده‌سازی‌های هدایت‌نشده را در مقابل پیاده‌سازی‌های هدایت‌شده مقایسه کنید

۱. تعامل اولویت‌دار بارگذاری و واکشی تنبل

طرح A (مدل پایه)

طرح B (راهنمای وب مدرن)

۲. بارگذاری حدسی

طرح A (مدل پایه)

طرح B (راهنمای وب مدرن)

۳. محدودیت‌های بارگذاری احتمالی

طرح A (مدل پایه)

طرح B (راهنمای وب مدرن)

۴. نخ اصلی و تعامل با رنگ بعدی (INP)

طرح الف (مدل پایه):

طرح ب (راهنمای وب مدرن):

۵. content-visibility CSS

طرح A (مدل پایه)

طرح B (راهنمای وب مدرن)

۷. پیاده‌سازی و تأیید

۸. اولویت‌ها را تکرار کنید

۹. مراحل بعدی

۵. `content-visibility` CSS