Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Modern Web Guidance 101

1. Hướng dẫn về web hiện đại là gì?

Modern Web Guidance áp dụng các phương pháp hay nhất hiện đại và khả năng tương thích với trình duyệt trực tiếp vào các tác nhân lập trình của bạn. Những kỹ năng này đảm bảo mã của bạn vẫn phù hợp với các tính năng hiện tại của nền tảng web. Từ việc phát triển nguyên mẫu mới đến tái cấu trúc các hệ thống cũ, Hướng dẫn về web hiện đại cung cấp quyền truy cập vào các tiêu chuẩn web hiện đại.

Nhà phát triển có thể sử dụng hướng dẫn này để:

Xây dựng trên nền tảng vững chắc: Bắt đầu các dự án sử dụng các tính năng web có khả năng tương tác.
Hiện đại hoá mã cũ: Thay thế các cách triển khai riêng biệt của các mẫu giao diện người dùng phổ biến.
Học hỏi trong quá trình phát triển: Nâng cao kiến thức về các mẫu web hiện đại vì kỹ năng này cung cấp hướng dẫn theo ngữ cảnh trong quá trình phát triển.

Bằng cách kiểm tra một ứng dụng cũ, đặt mục tiêu Baseline và so sánh các đề xuất AI tiêu chuẩn với các quy tắc của Modern Web Guidance, bạn sẽ học cách ra lệnh cho các tác nhân lập trình nâng cao theo hướng dẫn Modern Web Guidance để tạo mã web hiện đại có hiệu suất cao thay vì dựa vào các đầu ra của mô hình lỗi thời hoặc chung chung.

2. Điều kiện tiên quyết

Trước khi bắt đầu lớp học lập trình này, hãy đảm bảo rằng bạn có kiến thức sau:

Tài liệu về Modern Web Guidance và cách cài đặt không phụ thuộc vào tác nhân
Hiểu biết cơ bản về Cơ sở và Lighthouse
Hiểu biết cơ bản về cách nhắc

Lớp học lập trình này sử dụng những nội dung sau:

Hướng dẫn về web hiện đại (v0.0.173)
Antigravity CLI (v1.0.10 với Gemini 3.5 Flash)

Lớp học lập trình này bắt đầu bằng một ứng dụng cũ "Cozy Nook" (Góc ấm cúng) được tạo từ mã cũ. Sao chép kho lưu trữ bản minh hoạ demo repository và chuyển đến ứng dụng web 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. Đặt mục tiêu Cơ sở

Baseline cung cấp thông tin về những tính năng có khả năng tương tác trong các trình duyệt hiện nay. Tính năng này cũng cung cấp một cách để thể hiện những trình duyệt mà bạn muốn hỗ trợ mà không yêu cầu bạn chỉ định các công cụ và phiên bản trình duyệt. Một tính năng được coi là Cơ sở nếu có khả năng tương tác.

Trước khi phát triển ứng dụng web, hãy chọn mục tiêu Cơ sở. Theo mặc định, modern-web-guidance sử dụng Cơ sở có sẵn rộng rãi, bao gồm các tính năng đã có khả năng tương tác trong ít nhất 30 tháng. Nếu cần hỗ trợ các tính năng mới hơn, bạn sẽ cần đưa mục tiêu Cơ sở thích hợp vào tệp AGENTS.md.

Đối với lớp học lập trình này, dự án này sử dụng mục tiêu cố định là baseline widely available on 2026-06-01.

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

4. Xác định mức độ ưu tiên của dự án

Sau khi chọn mục tiêu Cơ sở, hãy xác định mức độ ưu tiên và nhóm các tính năng và chủ đề liên quan. Áp dụng mô hình tư duy cải thiện từng bước, như khi bạn xây dựng một tính năng.

Phân loại các bản cập nhật dựa trên các tính năng cụ thể đã lỗi thời hoặc các lĩnh vực phát triển web rộng hơn, ví dụ:

Hiệu suất: Tối ưu hoá Chỉ số quan trọng chính của trang web.
Trải nghiệm người dùng: Cải thiện khả năng tương tác và khả năng sử dụng.
Khả năng hỗ trợ tiếp cận: Giải quyết các vấn đề về khả năng hỗ trợ tiếp cận để mở rộng quyền truy cập vào ứng dụng của bạn.
Biểu mẫu và bảo mật: Hiện đại hoá quy trình xử lý dữ liệu đầu vào và tăng cường các điểm nhập dữ liệu của ứng dụng.

Trong lớp học lập trình này, bạn tập trung vào việc so sánh hiệu suất của ứng dụng cửa hàng sách cũ để xem kỹ năng Hướng dẫn về web hiện đại cải thiện tốc độ của ứng dụng như thế nào. Tập trung vào một nhiệm vụ tại một thời điểm để theo dõi các thay đổi mà tác nhân thực hiện và đảm bảo kết quả phù hợp với mục tiêu của dự án.

Để bắt đầu, hãy nắm rõ hiệu suất của ứng dụng cửa hàng sách ở trạng thái ban đầu bằng cách sử dụng quá trình kiểm tra Lighthouse.

Mở Antigravity CLI trên máy cục bộ và bắt đầu một phiên mới:

agy

Bạn sẽ thấy kết quả đầu ra của tác nhân tương tự như sau.

● 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

Khi mở Markdown, chúng ta sẽ nhận được các kết quả sau:

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 |

Ứng dụng đạt điểm 61/100 về hiệu suất trên thiết bị di động. Truy vấn modern-web-guidance để biết các đề xuất tối ưu hoá ứng dụng cho thiết bị di động và cải thiện điểm hiệu suất.

5. Truy vấn để cải thiện hiệu suất

Để đánh giá sự khác biệt giữa các đề xuất do mô hình cơ sở tiêu chuẩn tạo ra và các đề xuất được tạo ra khi modern-web-guidance đang hoạt động, hãy thực hiện một bài kiểm tra so sánh trong khi bạn yêu cầu tác nhân đưa ra các đề xuất tối ưu hoá hiệu suất.

Trước tiên, mà không cần cài đặt modern-web-guidance, hãy truy vấn mô hình cơ sở để xem loại cải tiến hiệu suất web dành cho thiết bị di động mà mô hình này có thể đề xuất.

Sau khi bạn thấy kết quả đầu ra của các tính năng web kèm theo lý do tại sao mô hình đề xuất tính năng đó, hãy cài đặt modern-web-guidance trong một cửa sổ dòng lệnh khác và chấp nhận tất cả các giá trị mặc định.

npx modern-web-guidance@latest install

Quay lại Antigravity, truy vấn kỹ năng mới cài đặt và yêu cầu kỹ năng này so sánh với danh sách do mô hình cơ sở đề xuất.

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

Sau khi tác nhân hoàn tất quá trình suy luận, tác nhân sẽ trình bày một phân tích so sánh cho thấy các đề xuất của mô hình khi có và không có kỹ năng modern-web-guidance và nêu bật các đề xuất trùng lặp. Kết quả đầu ra sau đây phụ thuộc vào phiên bản mô hình Gemini và phiên bản modern-web-guidance hiện tại.

Vì môi trường cục bộ có thể khác nhau, hãy chia sẻ kết quả cụ thể và ý kiến phản hồi của bạn về Hướng dẫn về web hiện đại bằng cách mở một vấn đề trong kho lưu trữ GitHub.

Kết quả đầu ra của tác nhân sẽ tương tự như sau:

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

Hãy xem bảng sau để biết rõ hơn về quá trình so sánh:

Khu vực tối ưu hoá	Đề xuất của mô hình cơ sở	Quy tắc của Hướng dẫn về web hiện đại	Các ràng buộc và điểm khác biệt bắt buộc
Tải từng phần và tương tác ưu tiên tìm nạp	Tách riêng tải từng phần và mức độ ưu tiên cao theo tiêu chuẩn.	Bắt buộc: Không kết hợp `fetchpriority="high"` với `loading="lazy"` trên hình ảnh LCP và không sử dụng `fetchpriority="low"` trên hình ảnh được tải từng phần tiêu chuẩn bên dưới nếp gấp.	Ràng buộc: Hình ảnh được tải từng phần bên dưới nếp gấp phải tải ở mức độ ưu tiên bình thường khi chúng xuất hiện trong khung nhìn; mức độ ưu tiên thấp chỉ dành riêng cho nội dung ẩn bên trên nếp gấp.
Tải suy đoán	Tải trước các phần tử hoặc thành phần của trang tiếp theo nói chung.	Thực hiện: Sử dụng Speculation Rules API (tập lệnh dựa trên JSON) để tìm nạp trước hoặc kết xuất trước các trang mà bạn có thể sẽ truy cập tiếp theo.	Điểm khác biệt: Mô hình cơ sở đề xuất tải trước thành phần cơ bản. Hướng dẫn này giới thiệu các quy tắc suy đoán hiện đại (danh sách và quy tắc tài liệu).
Hạn chế về tải suy đoán	Tìm nạp trước theo suy đoán tiêu chuẩn.	Không sử dụng quy tắc suy đoán trên các ứng dụng một trang (SPA). Không suy đoán các URL kích hoạt thay đổi trạng thái (ví dụ: `/logout` hoặc `/add-to-cart`).	Ràng buộc: Chặn rõ ràng các quy tắc suy đoán cho bộ định tuyến SPA và các hành động thay đổi trạng thái để ngăn các phiên hoặc hành động không chủ ý bị kích hoạt bởi các yêu cầu của trình duyệt ở chế độ nền.
Luồng chính và INP	Chia nhỏ các thao tác dài và điều tiết các sự kiện.	Thực hiện: Triển khai quy tắc 50 mili giây: mọi quá trình thực thi tập lệnh dài hơn 50 mili giây phải nhường cho luồng chính. Sử dụng `scheduler.yield()` với phương án dự phòng Promise.	Ràng buộc: Cấm rõ ràng việc chỉ dựa vào `setTimeout(..., 0)` vì phương thức này đặt các phần tiếp theo ở cuối hàng đợi, có khả năng làm mất dữ liệu đầu vào của người dùng.
Chế độ hiển thị nội dung CSS	Thu gọn kiểu tiêu chuẩn.	Thực hiện: Chỉ ghép nối `content-visibility: auto` với `contain-intrinsic-size` cho các phần tử ngoài màn hình trên các trang lớn và phức tạp.	Ràng buộc: Cấm sử dụng `content-visibility: auto` trên các trang đơn giản hơn hoặc nội dung bên trên nếp gấp do chi phí và rủi ro về việc chuyển đổi.

Bảng này cho thấy mô hình cơ sở hiểu cách tăng hiệu suất, nhưng modern-web-guidance tinh chỉnh các đề xuất rộng rãi đó thành các quy tắc nghiêm ngặt.

Trong phần "Tải từng phần và tương tác ưu tiên tìm nạp", mô hình cơ sở nhận ra rằng loading="lazy" là một phương pháp hay, nhưng kỹ năng này cung cấp thông tin quan trọng: không bao giờ kết hợp fetchpriority="low" với thuộc tính loading="lazy". Việc thực thi này rất hữu ích khi bạn viết mã bằng các tác nhân AI.

Sau khi tác nhân hiểu các quy tắc modern-web-guidance nghiêm ngặt, hãy yêu cầu tác nhân soạn thảo mã cho cả hai phương pháp để xem sự khác biệt trong quá trình triển khai.

Xem lại các kế hoạch mà tác nhân đề xuất:

▾ 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. So sánh các cách triển khai không có hướng dẫn và có hướng dẫn

Sau đây là các kết quả đầu ra mẫu của tác nhân từ quá trình kiểm thử so sánh với Gemini và modern-web-guidance cho ứng dụng cửa hàng sách này.

Kết quả của bạn có thể khác, vì vậy hãy sử dụng chiến lược này thay vì các bước cứng nhắc. Sử dụng các kế hoạch này để xem mọi thứ thay đổi như thế nào khi bạn bật modern-web-guidance cho ứng dụng cửa hàng sách trên máy tính. Sau khi bạn hoàn tất việc chạy các bài kiểm thử so sánh của riêng mình, hãy hỏi tác nhân của bạn xem phương pháp nào phù hợp nhất với chế độ thiết lập cụ thể của bạn.

Bạn có thể theo dõi hiệu suất của ứng dụng bằng Lighthouse hoặc Công cụ cho nhà phát triển cho tác nhân để xem các điểm cải thiện trong thực tế khi bạn thực hiện các bản cập nhật.

1. Tải từng phần và tương tác ưu tiên tìm nạp

Tối ưu hoá hình ảnh ngoài màn hình để tránh xung đột băng thông luồng chính.

Kế hoạch A (mô hình cơ sở)

Áp dụng loading="lazy" tiêu chuẩn cho tất cả hình ảnh ngoài màn hình. (Không tối ưu: Tải từng phần các thành phần ngoài màn hình, nhưng cho phép các thành phần không phải LCP hiển thị bên trên nếp gấp cạnh tranh với hình ảnh LCP.)

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

Kế hoạch B (Hướng dẫn về web hiện đại)

Nhắm mục tiêu các phần tử ban đầu không hiển thị bên trên nếp gấp bằng fetchpriority="low" và đảm bảo hình ảnh được tải từng phần tiêu chuẩn vẫn ở mức độ ưu tiên mặc định. (Lựa chọn tốt nhất: Giảm cấp các thành phần ẩn chặn đường kết xuất quan trọng mà không làm giảm thời gian tải khi cuộn vào.)

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

2. Tải suy đoán

Tăng tốc quá trình tải trang trong tương lai bằng cách tìm nạp trước các tài liệu hoặc thành phần của trang tiếp theo.

Kế hoạch A (mô hình cơ sở)

Phương pháp này sử dụng các phần tử . (Không tối ưu: Quá trình chuyển đổi trang con vẫn có độ trễ khoảng 1 giây.)

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

Kế hoạch B (Hướng dẫn về web hiện đại)

Sử dụng Speculation Rules API. (Lựa chọn tốt nhất: Quy tắc suy đoán cho phép bạn thực hiện quá trình tìm nạp trước và kết xuất trước bằng các truy vấn phù hợp để giảm thời gian điều hướng cảm nhận được.)

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

3. Hạn chế về tải suy đoán

Ngăn chặn các xung đột về bảo mật, hiệu suất hoặc trạng thái bằng cách chặn rõ ràng một số trang được tìm nạp trước, ví dụ: /logout hoặc /basket.html.

Kế hoạch A (mô hình cơ sở)

Phương pháp này yêu cầu nhà phát triển phải tự quản lý các URL cần đưa vào. (Không tối ưu: Phương pháp này có rủi ro vì tạo ra rủi ro bảo mật cao hơn đối với các hành động không chủ ý ở chế độ nền.)

Kế hoạch B (Hướng dẫn về web hiện đại)

Phương pháp này loại trừ các đường dẫn quản trị, có trạng thái hoặc mua sắm một cách khai báo. (Lựa chọn tốt nhất: Các điểm loại trừ theo chương trình ngăn trình duyệt thực thi các hành động không chủ ý ở chế độ nền.)

<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. Luồng chính và Lượt tương tác đến nội dung hiển thị tiếp theo (INP)

Ưu tiên khả năng sử dụng luồng chính cho hoạt động đầu vào của người dùng để duy trì khả năng phản hồi cao.

Kế hoạch A (mô hình cơ sở):

Hoãn các phép tính nặng bằng cách sử dụng các vòng lặp gọi lại đồng bộ. (Không tối ưu: Bạn có thể gặp phải Lượt tương tác đến nội dung hiển thị tiếp theo (INP) cao nếu trang có luồng chính bận.)

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

Kế hoạch B (Hướng dẫn về web hiện đại):

Để duy trì khả năng phản hồi của luồng chính, hãy sử dụng scheduler.yield() để nhường cho luồng chính. (Lựa chọn tốt nhất: Phương thức scheduler.yield() giúp duy trì khả năng phản hồi của dữ liệu đầu vào mà không làm mất dữ liệu đầu vào.)

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. `content-visibility` CSS

Quản lý các phép tính bố cục ngoài màn hình bằng cách hoãn các thao tác kết xuất của các phần tử ngoài màn hình.

Kế hoạch A (mô hình cơ sở)

Thu gọn các gói biểu định kiểu. (Không tối ưu: Chi phí kết xuất tiêu chuẩn khi hiển thị ban đầu.)

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

Kế hoạch B (Hướng dẫn về web hiện đại)

Bỏ qua việc tạo điểm ảnh cho các phần tử ngoài màn hình cho đến khi chúng tiếp cận ranh giới khung nhìn. (Lựa chọn tốt nhất: Ngăn chặn chi phí kết xuất trên thiết bị di động trên các trang lớn. Công cụ modern-web-guidance đảm bảo content-visibility chỉ được áp dụng cho các phần tử ngoài màn hình và ghép nối với contain-intrinsic-size. Nếu không có ngữ cảnh này, mô hình cơ sở có thể áp dụng trên toàn cầu, điều này có thể gây ra sự thay đổi đáng kể về bố cục trong quá trình cuộn.)

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

7. Triển khai và xác minh

Sau khi phân tích sự khác biệt và xác định Kế hoạch B là phương pháp tối ưu hoá, bạn có thể áp dụng kế hoạch này cho dự án. Giờ đây, bạn có thể thấy các quy tắc Modern Web Guidance này ảnh hưởng đến điểm số Lighthouse trong thực tế như thế nào.

Tác nhân áp dụng fetchpriority tích hợp, thiết lập Speculation Rules API và thêm quá trình nhường vi tác vụ. Khi báo cáo Lighthouse cuối cùng được tạo, điểm số trên thiết bị di động sẽ tăng từ 61 ban đầu lên 100.

Bạn đã chính thức hiện đại hoá mã cũ.

8. Lặp lại theo mức độ ưu tiên

Phương pháp này đánh giá ứng dụng của bạn khi bạn áp dụng modern-web-guidance và đánh giá cách ứng dụng tuân theo các phương pháp hay nhất về phát triển web hiện đại. Khi bạn tiếp tục, hãy thử nghiệm với nhiều cấu hình:

Thêm một tính năng mới: Đề xuất tiêu đề nổi ẩn trong khi cuộn để tối đa hoá không gian màn hình.
Thử nghiệm với các mục tiêu Cơ sở khác nhau: Thay đổi trạng thái Cơ sở trong dự án để quan sát các hiệu ứng.
Tập trung vào các lĩnh vực cụ thể và quan sát cách các lựa chọn khác nhau ảnh hưởng đến cơ sở mã của bạn.

Quá trình lặp lại giúp bạn giải quyết các vấn đề phức tạp của các ứng dụng lớn hoặc cũ; tinh chỉnh, kiểm thử, xây dựng và lặp lại.

9. Các bước tiếp theo

Để biết thêm thông tin về cách sử dụng Modern Web Guidance, hãy xem tài liệu về các lệnh Modern Web Guidance và Công cụ cho nhà phát triển cho tác nhân.

Nếu bạn có câu hỏi hoặc ý kiến phản hồi về Modern Web Guidance, hãy gửi một vấn đề trong kho lưu trữ GitHub.

Modern Web Guidance 101

1. Hướng dẫn về web hiện đại là gì?

2. Điều kiện tiên quyết

3. Đặt mục tiêu Cơ sở

4. Xác định mức độ ưu tiên của dự án

5. Truy vấn để cải thiện hiệu suất

6. So sánh các cách triển khai không có hướng dẫn và có hướng dẫn

1. Tải từng phần và tương tác ưu tiên tìm nạp

Kế hoạch A (mô hình cơ sở)

Kế hoạch B (Hướng dẫn về web hiện đại)

2. Tải suy đoán

Kế hoạch A (mô hình cơ sở)

Kế hoạch B (Hướng dẫn về web hiện đại)

3. Hạn chế về tải suy đoán

Kế hoạch A (mô hình cơ sở)

Kế hoạch B (Hướng dẫn về web hiện đại)

4. Luồng chính và Lượt tương tác đến nội dung hiển thị tiếp theo (INP)

Kế hoạch A (mô hình cơ sở):

Kế hoạch B (Hướng dẫn về web hiện đại):

5. content-visibility CSS

Kế hoạch A (mô hình cơ sở)

Kế hoạch B (Hướng dẫn về web hiện đại)

7. Triển khai và xác minh

8. Lặp lại theo mức độ ưu tiên

9. Các bước tiếp theo

5. `content-visibility` CSS