Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

คำแนะนำในการพัฒนาเว็บที่ทันสมัยเบื้องต้น

1. คำแนะนำในการพัฒนาเว็บที่ทันสมัยคืออะไร

คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะใช้แนวทางปฏิบัติแนะนำสมัยใหม่และความเข้ากันได้ของเบราว์เซอร์กับเอเจนต์การเขียนโค้ดโดยตรง ทักษะเหล่านี้จะช่วยให้โค้ดของคุณสอดคล้องกับความสามารถของแพลตฟอร์มเว็บในปัจจุบัน ตั้งแต่การพัฒนาต้นแบบใหม่ไปจนถึงการเปลี่ยนโครงสร้างภายในโค้ดระบบเดิม คำแนะนำในการพัฒนาเว็บที่ทันสมัย ช่วยให้เข้าถึงมาตรฐานเว็บที่ทันสมัยได้

นักพัฒนาแอปสามารถใช้เพื่อทำสิ่งต่อไปนี้ได้

สร้างบนรากฐานที่มั่นคง: เริ่มโปรเจ็กต์ที่ใช้ฟีเจอร์เว็บที่ทำงานร่วมกันได้
ปรับปรุงโค้ดเดิม: แทนที่การติดตั้งใช้งานรูปแบบอินเทอร์เฟซผู้ใช้ทั่วไปที่กำหนดเอง
เรียนรู้ไปพร้อมกับการพัฒนา: พัฒนาความรู้เกี่ยวกับรูปแบบเว็บสมัยใหม่เนื่องจากทักษะนี้จะให้คำแนะนำที่รับรู้บริบทในระหว่างการพัฒนา

การตรวจสอบแอปเดิม การตั้งเป้าหมาย Baseline และการเปรียบเทียบคำแนะนำมาตรฐานของ AI กับกฎคำแนะนำในการพัฒนาเว็บที่ทันสมัยจะช่วยให้คุณเรียนรู้วิธีการเขียนพรอมต์เอเจนต์การเขียนโค้ดที่ปรับปรุงแล้วตามคำแนะนำในการพัฒนาเว็บที่ทันสมัยเพื่อสร้างโค้ดเว็บที่ทันสมัยที่มีประสิทธิภาพสูงแทนที่จะพึ่งเอาต์พุตโมเดลที่ล้าสมัยหรือทั่วไป

2. ข้อกำหนดเบื้องต้น

ก่อนเริ่ม Codelab นี้ โปรดตรวจสอบว่าคุณมีความรู้ต่อไปนี้

เอกสารประกอบคำแนะนำในการพัฒนาเว็บที่ทันสมัยและการติดตั้งที่ไม่ขึ้นอยู่กับเอเจนต์
ความเข้าใจพื้นฐานเกี่ยวกับ Baseline และ Lighthouse
ความเข้าใจพื้นฐานเกี่ยวกับการเขียนพรอมต์

Codelab นี้ใช้สิ่งต่อไปนี้

คำแนะนำในการพัฒนาเว็บที่ทันสมัย (v0.0.173)
Antigravity CLI (v1.0.10 ที่มี Gemini 3.5 Flash)

Codelab นี้เริ่มต้นด้วยแอป "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. ตั้งเป้าหมายพื้นฐาน

พื้นฐานจะให้ข้อมูลเกี่ยวกับฟีเจอร์ที่ทำงานร่วมกันได้ในเบราว์เซอร์ในปัจจุบัน นอกจากนี้ ยังมีวิธีระบุเบราว์เซอร์ที่คุณต้องการรองรับโดยไม่ต้องระบุเครื่องมือและเวอร์ชันของเบราว์เซอร์ด้วย ฟีเจอร์จะถือว่าเป็นฟีเจอร์พื้นฐานหากทำงานร่วมกันได้

ก่อนที่จะพัฒนาเว็บแอปพลิเคชัน ให้เลือกเป้าหมายพื้นฐาน โดยค่าเริ่มต้น modern-web-guidance จะใช้ Baseline Widely available ซึ่งรวมถึงฟีเจอร์ที่ทำงานร่วมกันได้เป็นเวลาอย่างน้อย 30 เดือน หากต้องการรองรับฟีเจอร์ใหม่ๆ คุณจะต้องรวมเป้าหมาย Baseline ที่เหมาะสมไว้ในไฟล์ AGENTS.md

สำหรับ Codelab นี้ โปรเจ็กต์นี้ใช้เป้าหมายคงที่ที่ 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
ประสบการณ์ของผู้ใช้: ปรับปรุงการโต้ตอบและความสามารถในการใช้งาน
การช่วยเหลือพิเศษ: แก้ไขปัญหาการช่วยเหลือพิเศษเพื่อขยายการเข้าถึงแอปพลิเคชัน
แบบฟอร์มและความปลอดภัย: ปรับปรุงการจัดการอินพุตและเพิ่มความปลอดภัยให้กับจุดป้อนข้อมูลของแอปพลิเคชัน

ใน Codelab นี้ คุณจะมุ่งเน้นที่การเปรียบเทียบประสิทธิภาพของแอป Bookshop รุ่นเดิมเพื่อดูว่าทักษะคำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วยเพิ่มความเร็วได้อย่างไร มุ่งเน้นที่งานเดียวในแต่ละครั้งเพื่อตรวจสอบการเปลี่ยนแปลงที่เอเจนต์ดำเนินการ และตรวจสอบว่าผลลัพธ์สอดคล้องกับเป้าหมายของโปรเจ็กต์

เริ่มต้นด้วยการดูภาพที่ชัดเจนว่าแอปบุ๊กช็อปทำงานอย่างไรในสถานะเริ่มต้นโดยใช้การตรวจสอบ 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

เมื่อเปิดมาร์กดาวน์ เราจะเห็นผลลัพธ์ต่อไปนี้

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

ดูรายละเอียดเพิ่มเติมเกี่ยวกับการเปรียบเทียบได้ในตารางต่อไปนี้

พื้นที่การเพิ่มประสิทธิภาพ	คำแนะนำโมเดลพื้นฐาน	กฎคำแนะนำในการพัฒนาเว็บที่ทันสมัย	ข้อจำกัดและความคลาดเคลื่อนที่ต้องมี
การโต้ตอบระหว่างการโหลดแบบ Lazy Loading กับลำดับความสำคัญในการดึงข้อมูล	การแยกการโหลดแบบ Lazy Loading และการโหลดที่มีลำดับความสำคัญสูงตามมาตรฐาน	ข้อบังคับ: อย่ารวม `fetchpriority="high"` กับ `loading="lazy"` ในรูปภาพ LCP และอย่าใช้ `fetchpriority="low"` ในรูปภาพที่โหลดแบบ Lazy Loading มาตรฐานที่อยู่ใต้พับ	ข้อจำกัด: รูปภาพที่โหลดแบบ Lazy Loading ในครึ่งหน้าล่างต้องโหลดที่ลำดับความสำคัญปกติเมื่อเข้าสู่วิวพอร์ต ส่วนลำดับความสำคัญต่ำจะสงวนไว้สำหรับเนื้อหาครึ่งหน้าบนที่ซ่อนไว้เท่านั้น
การโหลดแบบคาดเดา	โหลดองค์ประกอบหรือชิ้นงานของหน้าถัดไปล่วงหน้าโดยทั่วไป	ทำ: ใช้ Speculation Rules API (สคริปต์ที่อิงตาม JSON) เพื่อดึงข้อมูลหรือแสดงผลหน้าเว็บที่คุณน่าจะเข้าชมถัดไปล่วงหน้า	ความคลาดเคลื่อน: โมเดลพื้นฐานแนะนําให้โหลดล่วงหน้าของชิ้นงานพื้นฐาน คู่มือนี้จะแนะนำกฎการคาดเดาสมัยใหม่ (กฎรายการและกฎเอกสาร)
ข้อจำกัดการโหลดแบบคาดเดา	การดึงข้อมูลล่วงหน้าแบบคาดการณ์มาตรฐาน	อย่าใช้กฎการคาดคะเนในแอปพลิเคชันหน้าเว็บเดียว (SPA) อย่าคาดเดา URL ที่ทริกเกอร์การเปลี่ยนแปลงสถานะ (เช่น `/logout` หรือ `/add-to-cart`)	ข้อจำกัด: บล็อกกฎการคาดคะเนสำหรับเราเตอร์ SPA และการดำเนินการที่เปลี่ยนสถานะอย่างชัดเจนเพื่อป้องกันไม่ให้คำขอของเบราว์เซอร์ในเบื้องหลังทริกเกอร์เซสชันหรือการดำเนินการโดยไม่ตั้งใจ
เทรดหลักและ INP	แบ่งงานที่ใช้เวลานานและควบคุมกิจกรรม	สิ่งที่ควรทำ: ใช้กฎ 50 มิลลิวินาที: การเรียกใช้สคริปต์ใดๆ ที่นานกว่า 50 มิลลิวินาทีต้องส่งต่อให้ชุดข้อความหลัก ใช้ `scheduler.yield()` กับการสำรองข้อมูลของ Promise	ข้อจำกัด: ห้ามใช้เฉพาะ `setTimeout(..., 0)` เนื่องจากจะทำให้การดำเนินการต่ออยู่ในส่วนท้ายของคิว ซึ่งอาจทำให้ผู้ใช้ป้อนข้อมูลไม่ได้
CSS content visibility	การลดขนาดสไตล์มาตรฐาน	ทำ: จับคู่ `content-visibility: auto` กับ `contain-intrinsic-size` สำหรับองค์ประกอบนอกหน้าจอในหน้าเว็บขนาดใหญ่และซับซ้อนเท่านั้น	ข้อจำกัด: ห้ามใช้ `content-visibility: auto` ในหน้าเว็บที่เรียบง่ายกว่าหรือเนื้อหาในครึ่งหน้าบนเนื่องจากความเสี่ยงด้านค่าใช้จ่ายและค่าใช้จ่ายที่เพิ่มขึ้น

ตารางแสดงให้เห็นว่าโมเดลพื้นฐานเข้าใจวิธีเพิ่มประสิทธิภาพ แต่ modern-web-guidance ปรับแต่งคำแนะนำแบบกว้างๆ เหล่านั้นให้เป็นกฎที่เข้มงวด

ในส่วน "การโหลดแบบ Lazy Loading และการโต้ตอบลำดับความสำคัญในการดึงข้อมูล" โมเดลพื้นฐานจะรับรู้ว่า loading="lazy" เป็นแนวทางปฏิบัติที่ดี แต่ทักษะจะให้ข้อมูลที่สำคัญ นั่นคือห้ามรวม fetchpriority="low" กับแอตทริบิวต์ loading="lazy" การบังคับใช้นี้มีประโยชน์เมื่อคุณเขียนโค้ดด้วย AI Agent

หลังจากที่เอเจนต์เข้าใจกฎที่เข้มงวดของ modern-web-guidance แล้ว ให้ขอให้เอเจนต์ร่างโค้ดสำหรับทั้ง 2 แนวทางเพื่อดูความแตกต่างในการใช้งาน

ตรวจสอบแพ็กเกจที่ตัวแทนแนะนำ

▾ 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สำหรับแอป Bookshop ในคอมพิวเตอร์ หลังจากทดสอบการเปรียบเทียบด้วยตนเองเสร็จแล้ว ให้สอบถามตัวแทนว่าแนวทางใดเหมาะกับการตั้งค่าของคุณมากที่สุด

คุณสามารถติดตามประสิทธิภาพของแอปด้วย Lighthouse หรือ DevTools สำหรับเอเจนต์ เพื่อดูการปรับปรุงในโลกแห่งความเป็นจริงเมื่อคุณทำการอัปเดต

1. การโต้ตอบระหว่างการโหลดแบบ Lazy Loading กับลำดับความสำคัญในการดึงข้อมูล

เพิ่มประสิทธิภาพรูปภาพนอกหน้าจอเพื่อหลีกเลี่ยงการแย่งแบนด์วิดท์ของเทรดหลัก

แพ็กเกจ A (รุ่นพื้นฐาน)

ใช้ loading="lazy" มาตรฐานกับรูปภาพนอกหน้าจอทั้งหมด (ไม่เหมาะสม: เลื่อนการโหลดชิ้นงานนอกหน้าจอ แต่ปล่อยให้ชิ้นงานที่ไม่ใช่ LCP ที่มองเห็นได้เหนือพับแข่งขันกับรูปภาพ LCP)

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

แผน B (คำแนะนำในการพัฒนาเว็บที่ทันสมัย)

กำหนดเป้าหมายองค์ประกอบที่มองไม่เห็นในตอนแรกเหนือพับหน้าเว็บด้วย fetchpriority="low" และตรวจสอบว่ารูปภาพที่โหลดแบบ Lazy Loading มาตรฐานยังคงมีลำดับความสำคัญเริ่มต้น (ตัวเลือกที่ดีที่สุด: ลดระดับชิ้นงานที่ซ่อนอยู่ซึ่งบล็อกเส้นทางการแสดงผลที่สำคัญโดยไม่ทำให้เวลาในการโหลดเมื่อเลื่อนลงลดลง)

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

2. การโหลดแบบคาดเดา

เพิ่มความเร็วในการโหลดหน้าเว็บในอนาคตด้วยการดึงข้อมูลล่วงหน้าของเอกสารหรือชิ้นงานในหน้าถัดไป

แพ็กเกจ A (รุ่นพื้นฐาน)

แนวทางนี้ใช้องค์ประกอบ (ไม่เหมาะสม: การเปลี่ยนหน้าย่อยยังคงมีความล่าช้าประมาณ 1 วินาที)

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

แผน B (คำแนะนำในการพัฒนาเว็บที่ทันสมัย)

ใช้ Speculation Rules API (ตัวเลือกที่ดีที่สุด: กฎการคาดการณ์ช่วยให้คุณดึงข้อมูลล่วงหน้าและแสดงผลล่วงหน้าด้วยการค้นหาที่ตรงกันเพื่อลดเวลาในการนำทางที่รับรู้)

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

3. ข้อจำกัดการโหลดแบบคาดเดา

ป้องกันความขัดแย้งด้านความปลอดภัย ประสิทธิภาพ หรือสถานะโดยการบล็อกไม่ให้มีการดึงข้อมูลล่วงหน้าของบางหน้าอย่างชัดเจน เช่น /logout หรือ /basket.html

แพ็กเกจ A (รุ่นพื้นฐาน)

แนวทางนี้กำหนดให้นักพัฒนาแอปต้องจัดการ URL ที่จะรวมด้วยตนเอง (ไม่เหมาะสม: วิธีนี้มีความเสี่ยงเนื่องจากทำให้เกิดความเสี่ยงด้านความปลอดภัยที่สูงขึ้นจากการดำเนินการในเบื้องหลังโดยไม่ตั้งใจ)

แผน B (คำแนะนำในการพัฒนาเว็บที่ทันสมัย)

แนวทางนี้จะยกเว้นเส้นทางการดูแลระบบ เส้นทางที่มีสถานะ หรือเส้นทาง Shopping โดยการประกาศ (ตัวเลือกที่ดีที่สุด: การยกเว้นแบบเป็นโปรแกรมจะป้องกันไม่ให้เบราว์เซอร์ดำเนินการในเบื้องหลังโดยไม่ตั้งใจ)

<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. เทรดหลักและ Interaction to Next Paint (INP)

ให้ความสำคัญกับความพร้อมใช้งานของเทรดหลักสำหรับข้อมูลจากผู้ใช้เพื่อรักษาการตอบสนองที่รวดเร็ว

แพ็กเกจ A (โมเดลพื้นฐาน):

เลื่อนการคำนวณที่ซับซ้อนโดยใช้ลูปการเรียกกลับแบบซิงโครนัส (ไม่เหมาะสม: คุณอาจพบ Interaction to 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`

จัดการการคำนวณเลย์เอาต์นอกหน้าจอโดยเลื่อนการดำเนินการแสดงผลขององค์ประกอบนอกหน้าจอ

แพ็กเกจ A (รุ่นพื้นฐาน)

ย่อขนาดชุดไฟล์สไตล์ชีต (ไม่เหมาะสม: ค่าใช้จ่ายในการแสดงผลมาตรฐานในการแสดงผลครั้งแรก)

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

แผน B (คำแนะนำในการพัฒนาเว็บที่ทันสมัย)

ข้ามการแสดงผลองค์ประกอบนอกหน้าจอจนกว่าจะเข้าใกล้ขอบเขตวิวพอร์ต (ตัวเลือกที่ดีที่สุด: ป้องกันค่าใช้จ่ายในการแสดงผลในอุปกรณ์เคลื่อนที่ในหน้าเว็บขนาดใหญ่ เครื่องมือ modern-web-guidance จะช่วยให้มั่นใจได้ว่า content-visibility จะใช้กับองค์ประกอบนอกหน้าจอเท่านั้น และจับคู่กับ contain-intrinsic-size หากไม่มีบริบทนี้ โมเดลพื้นฐานอาจใช้กับทั่วโลก ซึ่งอาจทําให้เกิดการเปลี่ยนเลย์เอาต์อย่างมากในระหว่างการเลื่อน)

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

7. ใช้งานและยืนยัน

หลังจากวิเคราะห์ความแตกต่างและระบุว่าแผน B เป็นแนวทางที่เพิ่มประสิทธิภาพแล้ว คุณก็สามารถนำไปใช้กับโปรเจ็กต์ได้ ตอนนี้คุณสามารถดูว่ากฎคำแนะนำในการพัฒนาเว็บที่ทันสมัยเหล่านี้ส่งผลต่อคะแนน Lighthouse ในโลกแห่งความเป็นจริงอย่างไร

Agent จะใช้ fetchpriority ในตัว ตั้งค่า Speculation Rules API และเพิ่มการหยุดชั่วคราวของ Microtask เมื่อสร้างรายงาน Lighthouse สุดท้ายแล้ว คะแนนในอุปกรณ์เคลื่อนที่จะเพิ่มขึ้นจาก 61 ใน 100 ซึ่งเป็นคะแนนเริ่มต้น

คุณได้ปรับโค้ดเดิมให้ทันสมัยอย่างเป็นทางการแล้ว

8. ทำซ้ำตามลำดับความสำคัญ

แนวทางนี้จะประเมินแอปพลิเคชันของคุณเมื่อคุณใช้ modern-web-guidance และประเมินว่าแอปพลิเคชันเป็นไปตามแนวทางปฏิบัติแนะนำในการพัฒนาเว็บสมัยใหม่อย่างไร เมื่อดำเนินการต่อ ให้ทดลองใช้การกำหนดค่าต่างๆ ดังนี้

เพิ่มฟีเจอร์ใหม่: แนะนำส่วนหัวแบบลอยที่ซ่อนขณะเลื่อนเพื่อเพิ่มพื้นที่หน้าจอให้มากที่สุด
ทดสอบเป้าหมายพื้นฐานต่างๆ: เปลี่ยนสถานะพื้นฐานในโปรเจ็กต์เพื่อสังเกตผลลัพธ์
มุ่งเน้นที่สาขาเฉพาะและสังเกตว่าตัวเลือกต่างๆ ส่งผลต่อโค้ดเบสอย่างไร

การทำซ้ำช่วยให้คุณรับมือกับความซับซ้อนของแอปพลิเคชันขนาดใหญ่หรือแอปพลิเคชันเดิมได้ ปรับแต่ง ทดสอบ สร้าง และทำซ้ำ

9. ขั้นตอนถัดไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยได้ที่เอกสารประกอบเกี่ยวกับคำสั่งคำแนะนำในการพัฒนาเว็บที่ทันสมัยและเครื่องมือสำหรับนักพัฒนาเว็บสำหรับเอเจนต์

หากมีคำถามหรือความคิดเห็นเกี่ยวกับคำแนะนำในการพัฒนาเว็บที่ทันสมัย โปรดแจ้งปัญหาในที่เก็บข้อมูล GitHub

คำแนะนำในการพัฒนาเว็บที่ทันสมัยเบื้องต้น

1. คำแนะนำในการพัฒนาเว็บที่ทันสมัยคืออะไร

2. ข้อกำหนดเบื้องต้น

3. ตั้งเป้าหมายพื้นฐาน

4. ระบุลำดับความสำคัญของโปรเจ็กต์

5. คำค้นหาเพื่อปรับปรุงประสิทธิภาพ

6. เปรียบเทียบการติดตั้งใช้งานแบบไม่มีคำแนะนำกับการติดตั้งใช้งานแบบมีคำแนะนำ

1. การโต้ตอบระหว่างการโหลดแบบ Lazy Loading กับลำดับความสำคัญในการดึงข้อมูล

แพ็กเกจ A (รุ่นพื้นฐาน)

แผน B (คำแนะนำในการพัฒนาเว็บที่ทันสมัย)

2. การโหลดแบบคาดเดา

แพ็กเกจ A (รุ่นพื้นฐาน)

แผน B (คำแนะนำในการพัฒนาเว็บที่ทันสมัย)

3. ข้อจำกัดการโหลดแบบคาดเดา

แพ็กเกจ A (รุ่นพื้นฐาน)

แผน B (คำแนะนำในการพัฒนาเว็บที่ทันสมัย)

4. เทรดหลักและ Interaction to Next Paint (INP)

แพ็กเกจ A (โมเดลพื้นฐาน):

แผน ข (คำแนะนำในการพัฒนาเว็บที่ทันสมัย):

5. CSS content-visibility

แพ็กเกจ A (รุ่นพื้นฐาน)

แผน B (คำแนะนำในการพัฒนาเว็บที่ทันสมัย)

7. ใช้งานและยืนยัน

8. ทำซ้ำตามลำดับความสำคัญ

9. ขั้นตอนถัดไป

5. CSS `content-visibility`