1. Apa yang dimaksud dengan Panduan Web Modern?
Panduan Web Modern menerapkan praktik terbaik modern dan kompatibilitas browser langsung ke agen coding Anda. Keahlian ini memastikan kode Anda tetap selaras dengan kemampuan platform web saat ini. Mulai dari mengembangkan prototipe baru hingga memfaktorkan ulang sistem lama, Panduan Web Modern memberikan akses ke standar web modern.
Developer dapat menggunakannya untuk:
- Bangun di atas fondasi yang kokoh: Mulai project yang menggunakan fitur web yang dapat dioperasikan.
- Memodernisasi kode lama: Mengganti implementasi khusus pola antarmuka pengguna umum.
- Belajar sambil mengembangkan: Tingkatkan pengetahuan Anda tentang pola web modern karena keterampilan ini memberikan panduan yang sadar konteks selama pengembangan.
Dengan mengaudit aplikasi lama, menetapkan target Dasar, dan membandingkan saran AI standar dengan aturan Panduan Web Modern, Anda akan mempelajari cara meminta agen pengodean yang ditingkatkan dengan panduan web modern untuk membuat kode web modern berperforma tinggi, bukan mengandalkan output model yang sudah usang atau generik.
2. Prasyarat
Sebelum memulai codelab ini, pastikan Anda memiliki pengetahuan berikut:
- Dokumentasi Panduan Web Modern dan penginstalan yang tidak bergantung pada agen
- Pemahaman dasar tentang Baseline dan Lighthouse
- Pemahaman dasar tentang pembuatan perintah
Codelab ini menggunakan hal berikut:
- Panduan Web Modern (v0.0.173)
- Antigravity CLI (v1.0.10 dengan Gemini 3.5 Flash)
Codelab ini dimulai dengan aplikasi "Cozy Nook" Lama yang sengaja dibuat dari kode lama. Buat clone repositori demo dan buka aplikasi 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. Menetapkan target Dasar
Baseline memberikan informasi tentang fitur mana yang dapat beroperasi di browser saat ini. Fitur ini juga menawarkan cara untuk menyatakan browser mana yang ingin Anda dukung, tanpa mengharuskan Anda menentukan mesin dan versi browser. Fitur dianggap sebagai Dasar jika dapat beroperasi dengan fitur lain.
Sebelum mengembangkan aplikasi web, pilih target Dasar Anda. Secara default, modern-web-guidance menggunakan Baseline Tersedia luas, yang mencakup fitur yang telah dapat beroperasi selama minimal 30 bulan. Jika Anda perlu mendukung fitur yang lebih baru, Anda harus menyertakan target Dasar yang sesuai dalam file AGENTS.md.
Untuk codelab ini, project ini menggunakan target tetap baseline widely available on 2026-06-01.
// AGENTS.md
This project's Baseline target is "Baseline widely available on 2026-06-01".
4. Mengidentifikasi prioritas proyek
Setelah memilih target Dasar, tentukan prioritas dan kelompokkan fitur serta topik terkait. Terapkan model mental peningkatan inkremental, seperti yang Anda lakukan saat membangun fitur.
Kategorikan info terbaru Anda berdasarkan fitur tertentu yang sudah tidak berlaku atau disiplin pengembangan web yang lebih luas, misalnya:
- Performa: Optimalkan Core Web Vitals Anda.
- Pengalaman pengguna: Meningkatkan interaksi dan kegunaan.
- Aksesibilitas: Atasi masalah aksesibilitas untuk memperluas akses ke aplikasi Anda.
- Formulir dan keamanan: Modernisasi penanganan input dan perkuat titik entri data aplikasi Anda.
Dalam codelab ini, Anda akan berfokus pada perbandingan performa aplikasi toko buku lama untuk melihat bagaimana keterampilan Panduan Web Modern meningkatkan kecepatannya. Fokus pada satu tugas dalam satu waktu untuk memantau perubahan yang dilakukan agen dan memastikan hasilnya selaras dengan sasaran proyek Anda.
Untuk memulai, dapatkan gambaran yang jelas tentang performa aplikasi toko buku dalam kondisi awalnya menggunakan audit Lighthouse.
Buka Antigravity CLI di komputer lokal Anda dan mulai sesi baru:
agy
Anda akan melihat output agen yang mirip dengan berikut ini.
● 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
Dengan membuka Markdown, kita akan mendapatkan hasil berikut:
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 |
Aplikasi ini mendapat skor 61/100 untuk performa di perangkat seluler. Kueri modern-web-guidance untuk mendapatkan rekomendasi guna mengoptimalkan aplikasi untuk perangkat seluler dan meningkatkan skor performa.
5. Kueri untuk meningkatkan performa
Untuk mengevaluasi perbedaan antara rekomendasi yang dihasilkan oleh model dasar standar dan yang dihasilkan saat modern-web-guidance aktif, lakukan uji perbandingan saat Anda meminta saran pengoptimalan performa kepada agen.
Pertama, tanpa menginstal modern-web-guidance, kueri model dasar untuk melihat jenis peningkatan performa web seluler yang dapat direkomendasikannya.
Setelah Anda melihat output fitur web dengan alasan mengapa model merekomendasikannya, lanjutkan dan instal modern-web-guidance di jendela terminal lain dan terima semua default.
npx modern-web-guidance@latest install
Kembali ke Antigravity, kueri skill yang baru diinstal, dan minta skill tersebut untuk membandingkan dirinya dengan daftar yang direkomendasikan oleh model dasar.
● 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)
Setelah agen menyelesaikan penalarannya, agen akan menyajikan analisis komparatif yang menunjukkan rekomendasi model dengan dan tanpa keterampilan modern-web-guidance serta menandai saran yang tumpang-tindih. Output berikut bergantung pada versi model Gemini dan versi modern-web-guidance saat ini.
Karena lingkungan lokal dapat berbeda, bagikan hasil dan masukan spesifik Anda terkait Panduan Web Modern dengan membuka masalah di repositori GitHub.
Output agen akan terlihat seperti berikut:
### 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. |
Lihat tabel berikut untuk melihat perbandingan lebih lanjut:
Area pengoptimalan | Rekomendasi model dasar | Aturan Modern Web Guidance | Batasan dan perbedaan wajib |
Interaksi pemuatan lambat dan prioritas pengambilan | Pemisahan standar untuk pemuatan lambat dan prioritas tinggi. | Wajib: Jangan menggabungkan | Batasan: Gambar yang dimuat lambat di paruh bawah harus dimuat dengan prioritas normal saat memasuki area pandang; prioritas rendah secara ketat dicadangkan untuk konten paruh atas yang tersembunyi. |
Pemuatan spekulatif | Memuat elemen atau aset halaman berikutnya secara umum. | Lakukan: Gunakan Speculation Rules API (skrip berbasis JSON) untuk melakukan pengambilan data atau pra-render halaman yang kemungkinan akan Anda kunjungi berikutnya. | Perbedaan: Model dasar merekomendasikan pemuatan awal aset dasar. Panduan ini memperkenalkan aturan spekulasi modern (aturan daftar dan dokumen). |
Batasan pemuatan spekulatif | Pengambilan data spekulatif standar. | Jangan gunakan aturan spekulasi pada aplikasi satu halaman (SPA). Jangan berspekulasi URL yang memicu perubahan status (misalnya, | Batasan: Memblokir secara eksplisit aturan spekulasi untuk router SPA dan tindakan yang mengubah status untuk mencegah sesi atau tindakan yang tidak disengaja dipicu oleh permintaan browser latar belakang. |
Thread utama dan INP | Pecah tugas yang panjang dan batasi frekuensi peristiwa. | Lakukan: Terapkan aturan 50 md: setiap eksekusi skrip yang lebih lama dari 50 md harus menghasilkan thread utama. Gunakan | Batasan: Melarang secara eksplisit hanya mengandalkan |
Visibilitas konten CSS | Minifikasi gaya standar. | Lakukan: Pasangkan | Batasan: Melarang penggunaan |
Tabel menunjukkan bahwa model dasar memahami cara meningkatkan performa, tetapi modern-web-guidance menyaring rekomendasi luas tersebut menjadi aturan yang ketat.
Di bagian "Interaksi pemuatan lambat & prioritas pengambilan", model dasar mengenali bahwa loading="lazy" adalah praktik yang baik, tetapi skill memberikan informasi penting: jangan pernah menggabungkan fetchpriority="low" dengan atribut loading="lazy". Penegakan ini berguna saat Anda membuat kode dengan agen AI.
Setelah agen memahami aturan modern-web-guidance yang ketat, minta agen untuk membuat draf kode untuk kedua pendekatan guna melihat perbedaan dalam penerapannya.
Tinjau rencana yang direkomendasikan agen:
▾ 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. Membandingkan penerapan tanpa panduan dan dengan panduan
Berikut adalah contoh output agen dari pengujian perbandingan dengan Gemini dan modern-web-guidance untuk aplikasi toko buku ini.
Hasil Anda mungkin terlihat berbeda, jadi gunakan strategi ini, bukan langkah-langkah yang kaku. Gunakan rencana ini untuk melihat perubahan yang terjadi saat Anda mengaktifkan modern-web-guidance untuk aplikasi toko buku di komputer. Setelah Anda selesai menjalankan pengujian perbandingan sendiri, tanyakan kepada agen Anda pendekatan mana yang paling sesuai untuk penyiapan spesifik Anda.
Anda dapat melacak performa aplikasi dengan Lighthouse atau DevTools untuk Agen guna melihat peningkatan di dunia nyata saat Anda melakukan update.
1. Interaksi pengambilan prioritas & pemuatan lambat
Mengoptimalkan gambar di luar layar untuk menghindari perebutan bandwidth thread utama.
Plan A (model dasar)
Terapkan loading="lazy" standar ke semua gambar di luar layar. (Suboptimal: Memuat aset di luar layar secara lambat, tetapi membiarkan aset di atas layar non-LCP yang terlihat bersaing dengan gambar LCP.)
<img src="https://..." alt="..." class="pick-small-img" loading="lazy">
Plan B (Modern Web Guidance)
Targetkan elemen di atas area tampilan yang awalnya tidak terlihat dengan fetchpriority="low", dan pastikan gambar yang dimuat lambat standar tetap berada pada prioritas default. (Opsi terbaik: Turunkan promosi aset tersembunyi yang memblokir jalur rendering penting tanpa memperlambat waktu pemuatan saat men-scroll.)
<img src="https://..." fetchpriority="low" width="96" height="144" alt="..." class="pick-small-img" loading="lazy">
2. Pemuatan spekulatif
Mempercepat pemuatan halaman di masa mendatang dengan melakukan pengambilan data awal dokumen atau aset halaman berikutnya.
Plan A (model dasar)
Pendekatan ini menggunakan elemen . (Kurang optimal: Transisi subhalaman masih memiliki jeda sekitar 1 detik.)
<link rel="prefetch" href="about.html">
<link rel="prefetch" href="contact.html">
Plan B (Modern Web Guidance)
Menggunakan Speculation Rules API. (Opsi terbaik: Aturan Spekulasi memungkinkan Anda melakukan pengambilan data dan pra-rendering dengan kueri yang cocok untuk mengurangi waktu navigasi yang dirasakan.)
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
3. Batasan pemuatan spekulatif
Cegah konflik keamanan, performa, atau status dengan memblokir secara eksplisit pengambilan data awal halaman tertentu, misalnya, /logout atau /basket.html.
Plan A (model dasar)
Pendekatan ini mengharuskan developer mengelola secara manual URL mana yang akan disertakan. (Kurang Optimal: Pendekatan ini berisiko karena menciptakan risiko keamanan yang lebih tinggi dari tindakan latar belakang yang tidak disengaja.)
Plan B (Modern Web Guidance)
Pendekatan ini mengecualikan jalur administratif, stateful, atau jalur belanja secara deklaratif. (Opsi terbaik: Pengecualian terprogram mencegah browser menjalankan tindakan latar belakang yang tidak diinginkan.)
<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. Thread utama dan Interaction to Next Paint (INP)
Prioritaskan ketersediaan thread utama untuk input pengguna guna mempertahankan responsivitas yang tinggi.
Plan A (model dasar):
Tunda komputasi berat menggunakan loop callback sinkron. (Suboptimal: Anda mungkin mengalami Interaction to Next Paint (INP) yang tinggi jika halaman memiliki thread utama yang sibuk.)
function renderBigCatalog(items) {
items.forEach(item => {
renderItem(item);
});
}
Plan B (Modern Web Guidance):
Agar thread utama tetap responsif, gunakan scheduler.yield() untuk memberikan prioritas ke thread utama. (Opsi terbaik: Metode scheduler.yield() membantu menjaga agar input tetap responsif tanpa kekurangan tugas.)
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
Kelola penghitungan tata letak di luar layar dengan menunda operasi rendering elemen di luar layar.
Plan A (model dasar)
Perkecil paket stylesheet. (Suboptimal: Overhead rendering standar pada paint awal.)
.book-item {
display: flex;
margin: 1rem;
}
Plan B (Modern Web Guidance)
Lewati proses menggambar elemen di luar layar hingga elemen tersebut mendekati batas area tampilan. (Opsi terbaik: Mencegah overhead rendering seluler di halaman besar. Alat modern-web-guidance memastikan content-visibility hanya diterapkan pada elemen di luar layar dan memasangkannya dengan contain-intrinsic-size. Tanpa konteks ini, model dasar mungkin menerapkannya secara global, yang dapat menyebabkan pergeseran tata letak yang signifikan selama men-scroll.)
.book-item {
display: flex;
margin: 1rem;
content-visibility: auto;
contain-intrinsic-size: auto 350px;
}
7. Terapkan dan verifikasi
Setelah menganalisis perbedaan dan mengidentifikasi Rencana B sebagai pendekatan yang dioptimalkan, Anda dapat menerapkannya ke project. Sekarang Anda dapat melihat pengaruh aturan Panduan Web Modern ini terhadap skor Lighthouse di dunia nyata.
Agen menerapkan fetchpriority bawaan, menyiapkan Speculation Rules API, dan menambahkan penundaan microtask. Saat laporan Lighthouse akhir dibuat, skor seluler meningkat dari 61/100.
Anda telah memodernisasi kode lama secara resmi.
8. Melakukan iterasi terhadap prioritas
Pendekatan ini mengevaluasi aplikasi Anda saat Anda menerapkan modern-web-guidance dan menilai cara aplikasi tersebut mengikuti praktik terbaik pengembangan web modern. Saat Anda melanjutkan, bereksperimenlah dengan berbagai konfigurasi:
- Menambahkan fitur baru: Merekomendasikan header mengambang yang tersembunyi saat men-scroll untuk memaksimalkan ruang layar.
- Bereksperimen dengan berbagai target Dasar Pengukuran: Ubah status Dasar Pengukuran dalam project untuk mengamati efeknya.
- Berfokus pada disiplin ilmu tertentu dan amati bagaimana pilihan yang berbeda memengaruhi codebase Anda.
Iterasi membantu Anda mengatasi kompleksitas aplikasi besar atau lama; perbaiki, uji, bangun, dan ulangi.
9. Langkah berikutnya
Untuk mengetahui informasi selengkapnya tentang penggunaan Panduan Web Modern, lihat dokumentasi perintah Panduan Web Modern dan DevTools untuk Agen.
Jika Anda memiliki pertanyaan atau masukan untuk Panduan Web Modern, ajukan masalah di repositori GitHub.