تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

أساسيات إرشادات الويب الحديث

1. ما هي "إرشادات الويب الحديث"؟

تطبّق إرشادات الويب الحديث أفضل الممارسات الحديثة والتوافق مع المتصفّحات مباشرةً على وكلاء الترميز. تضمن هذه المهارات أن يظل الرمز البرمجي متوافقًا مع إمكانات منصة الويب الحالية. من تطوير نماذج أولية جديدة إلى إعادة هيكلة الأنظمة القديمة، يوفّر إرشادات الويب الحديث إمكانية الوصول إلى معايير الويب الحديثة.

يمكن للمطوّرين استخدامها لإجراء ما يلي:

البناء على أساس متين: ابدأ مشاريع تستخدم ميزات ويب قابلة للتشغيل التفاعلي.
تحديث الرموز القديمة: استبدِل عمليات التنفيذ المخصّصة لأنماط واجهة المستخدم الشائعة.
التعلّم أثناء التطوير: يمكنك تحسين معرفتك بأنماط الويب الحديثة لأنّ المهارة تقدّم إرشادات تراعي السياق أثناء عملية التطوير.

من خلال تدقيق تطبيق قديم، وتحديد هدف أساسي، ومقارنة اقتراحات الذكاء الاصطناعي العادية بقواعد "إرشادات الويب الحديث"، يمكنك تعلُّم كيفية مطالبة وكلاء الترميز المحسّنين باستخدام "إرشادات الويب الحديث" بإنشاء رمز ويب حديث عالي الأداء بدلاً من الاعتماد على نتائج نماذج قديمة أو عامة.

2. المتطلبات الأساسية

قبل البدء في هذا الدرس العملي، تأكَّد من توفّر المعرفة التالية لديك:

مستندات "إرشادات الويب الحديث" وعملية التثبيت غير المرتبطة بوكيل
فهم أساسي للمقياس الأساسي وLighthouse
فهم أساسي للطلبات

يستخدم الدرس التطبيقي حول الترميز ما يلي:

إرشادات الويب الحديث (الإصدار 0.0.173)
Antigravity CLI (الإصدار 1.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 معلومات عن الميزات التي يمكن تشغيلها بشكل متوافق في المتصفّحات اليوم. وتوفّر أيضًا طريقة لتحديد المتصفحات التي تريد أن تكون متوافقة معها، بدون الحاجة إلى تحديد محركات المتصفحات وإصداراتها. تُعدّ الميزة أساسية إذا كانت قابلة للتشغيل التفاعلي.

قبل تطوير تطبيق الويب، اختَر هدفك الأساسي. بشكلٍ تلقائي، تستخدم 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".

4. تحديد أولويات المشروع

بعد اختيار هدف "خط الأساس"، حدِّد الأولويات وجمِّع الميزات والمواضيع ذات الصلة. اتّبِع النموذج الذهني للتحسين التدريجي، كما تفعل عند إنشاء ميزة.

يمكنك تصنيف التحديثات استنادًا إلى ميزات قديمة معيّنة أو مجالات أوسع لتطوير الويب، مثل:

الأداء: حسِّن مؤشرات Core Web Vitals.
تجربة المستخدم: تحسين التفاعلات وسهولة الاستخدام
إمكانية الوصول: عالِج مشاكل إمكانية الوصول لتوسيع نطاق الوصول إلى تطبيقك.
النماذج والأمان: يمكنك تحديث طريقة التعامل مع الإدخال وتعزيز نقاط إدخال البيانات في تطبيقك.

في هذا الدرس العملي، ستركز على مقارنة أداء تطبيق المكتبة القديم لمعرفة كيف تحسّن مهارة "إرشادات الويب الحديث" سرعته. ركِّز على مهمة واحدة في كل مرة لتتبُّع التغييرات التي يجريها الوكيل والتأكّد من أنّ النتيجة تتوافق مع أهداف مشروعك.

للبدء، احصل على صورة واضحة عن أداء تطبيق المكتبة في حالته الأولية باستخدام تدقيق 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

ارجع إلى 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. |

اطّلِع على الجدول التالي لإلقاء نظرة فاحصة على المقارنة:

منطقة التحسين	اقتراح النموذج الأساسي	قاعدة "إرشادات الويب الحديث"	القيود والتناقضات الإلزامية
التفاعل بين التحميل الكسول وأولوية الجلب	فصل عادي بين التحميل الكسول والأولوية العالية	إلزامي: لا تدمج `fetchpriority="high"` مع `loading="lazy"` في صور مقياس LCP، ولا تستخدم `fetchpriority="low"` في الصور العادية التي يتم تحميلها كسولاً في الجزء غير المرئي من الصفحة.	قيد: يجب تحميل الصور التي يتم تحميلها بشكل كسول في الجزء السفلي غير المرئي من الصفحة بأولوية عادية عند دخولها إطار العرض، ويتم حجز الأولوية المنخفضة للمحتوى المخفي في الجزء المرئي من الصفحة فقط.
التحميل المبني على توقُّع	التحميل المُسبَق لعناصر الصفحة التالية أو مواد العرض بشكل عام	الإجراء: استخدِم واجهة Speculation Rules API (نص برمجي مستند إلى JSON) لجلب الصفحات أو عرضها مسبقًا التي من المحتمل أن تزورها لاحقًا.	التناقض: يقترح النموذج الأساسي عمليات التحميل المُسبَق الأساسية لمواد العرض. تقدّم هذه الدليل قواعد التوقّع الحديثة (قواعد القائمة والمستندات).
قيود التحميل المبني على توقّع	التحميل المُسبق التخميني العادي	لا تستخدِم قواعد التخمين على تطبيقات الصفحة الواحدة. لا تتوقّع عناوين URL تؤدي إلى تغييرات في الحالة (مثل `/logout` أو `/add-to-cart`).	قيد: يحظر بشكل صريح قواعد التخمين الخاصة بأدوات توجيه تطبيقات الصفحة الواحدة والإجراءات التي تغيّر الحالة لمنع بدء جلسات أو إجراءات غير مقصودة من خلال طلبات المتصفّح في الخلفية.
سلسلة التعليمات الرئيسية و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. التحميل المبني على توقُّع

تسريع تحميل الصفحات المستقبلية من خلال جلب مستندات أو مواد عرض الصفحة التالية مسبقًا

الخطة (أ) (النموذج الأساسي)

يستخدم هذا الأسلوب عناصر . (غير مثالي: لا يزال الانتقال بين الصفحات الفرعية يتضمّن تأخيرًا يبلغ ثانية واحدة تقريبًا).

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

الخطة البديلة (إرشادات الويب الحديث)

يستخدم Speculation Rules 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)

إعطاء الأولوية لتوفُّر سلسلة التعليمات الرئيسية لبيانات أدخلها المستخدم من أجل الحفاظ على سرعة الاستجابة العالية

الخطة (أ) (النموذج الأساسي):

تأجيل العمليات الحسابية المعقّدة باستخدام حلقات معاودة الاتصال المتزامنة (غير جيّد: قد تواجه مدة استجابة عالية لتفاعلات المستخدم (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. التنفيذ والتحقّق

بعد تحليل الاختلافات وتحديد أنّ "الخطة ب" هي النهج الأمثل، يمكنك تطبيقها على المشروع. يمكنك الآن معرفة تأثير قواعد "إرشادات الويب الحديث" هذه في نتيجة Lighthouse الفعلية.

يطبّق الوكيل fetchpriority المضمّنة، ويُعدّ واجهة برمجة التطبيقات Speculation Rules API، ويضيف ميزة "التنازل عن المهام الصغيرة". عند إنشاء تقرير Lighthouse النهائي، تزيد النتيجة على الأجهزة الجوّالة من 61 من أصل 100.

لقد تم رسميًا تحديث الرمز القديم.

8. التكرار حسب الأولويات

يقيّم هذا الأسلوب تطبيقك عند تطبيق modern-web-guidance ويقيّم مدى اتّباعه لأفضل ممارسات التطوير الحديث للبرامج على الويب. عند التقدّم، جرِّب إعدادات مختلفة:

إضافة ميزة جديدة: اقتراح عنوان عائم يتم إخفاؤه أثناء التمرير للاستفادة إلى أقصى حد من مساحة الشاشة
تجربة أهداف مختلفة للمقياس الأساسي: غيِّر حالة المقياس الأساسي في المشروع لمراقبة التأثيرات.
التركيز على مجالات محدّدة ومراقبة تأثير الخيارات المختلفة في قاعدة الرموز البرمجية

تساعدك التكرارات في التغلب على تعقيدات التطبيقات الكبيرة أو القديمة، وتحسينها واختبارها وإنشائها وتكرارها.

9- الخطوات التالية

لمزيد من المعلومات حول استخدام إرشادات الويب الحديث، اطّلِع على مستندات أوامر إرشادات الويب الحديث وأدوات مطوّري البرامج للوكلاء.

إذا كانت لديك أسئلة أو ملاحظات حول "إرشادات الويب الحديث"، يمكنك الإبلاغ عن مشكلة في مستودع GitHub.

أساسيات إرشادات الويب الحديث

1. ما هي "إرشادات الويب الحديث"؟

2. المتطلبات الأساسية

3- ضبط استهداف "المتوقّع"

4. تحديد أولويات المشروع

5- طلب البحث لتحسين الأداء

6. مقارنة عمليات التنفيذ غير الموجَّهة بعمليات التنفيذ الموجَّهة

1. التفاعل بين التحميل الكسول وأولوية الجلب

الخطة (أ) (النموذج الأساسي)

الخطة البديلة (إرشادات الويب الحديث)

2. التحميل المبني على توقُّع

الخطة (أ) (النموذج الأساسي)

الخطة البديلة (إرشادات الويب الحديث)

3- قيود التحميل المبني على توقّع

الخطة (أ) (النموذج الأساسي)

الخطة البديلة (إرشادات الويب الحديث)

4. سلسلة التعليمات الرئيسية ومقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP)

الخطة (أ) (النموذج الأساسي):

الخطة البديلة (إرشادات الويب الحديث):

5- CSS content-visibility

الخطة (أ) (النموذج الأساسي)

الخطة البديلة (إرشادات الويب الحديث)

7. التنفيذ والتحقّق

8. التكرار حسب الأولويات

9- الخطوات التالية

5- CSS `content-visibility`