Dipublikasikan: 10 November 2026
Di era baru pengembangan web agentic ini, developer web berharap agen coding mereka ahli dalam membangun web. Meskipun model coding tercanggih saat ini cukup mumpuni dan biasanya dapat menghasilkan sesuatu yang berfungsi, jika Anda meminta pakar developer web untuk meninjau kode yang dihasilkan AI, mereka hampir selalu dapat menemukan cara untuk membuat kode tersebut lebih cepat, lebih mudah diakses, atau lebih aman.
Chrome berinvestasi besar-besaran dalam masa depan pengembangan web agentic, dan untuk mengatasi tantangan ini, kami memperkenalkan pratinjau awal Modern Web Guidance di Google I/O pada bulan Mei. Modern Web Guidance adalah serangkaian keterampilan yang menyematkan keahlian platform web, praktik terbaik, dan data kompatibilitas browser langsung ke agen coding Anda.
Hari ini, dengan senang hati kami mengumumkan rilis stabil Modern Web Guidance versi 1.0, yang mencakup:
- Alur kerja modernisasi baru yang memindai codebase yang ada untuk membantu agen Anda menemukan peluang modernisasi yang aman.
- Database panduan yang diperluas menargetkan ratusan kesenjangan pengetahuan AI yang terverifikasi dengan solusi lintas browser yang divalidasi oleh pakar.
- Peninjauan pakar manusia yang lebih mendalam untuk setiap panduan, termasuk persetujuan dari pimpinan teknis area konten dan peninjauan aksesibilitas khusus pada panduan yang ditampilkan kepada pengguna.
- Cakupan evaluasi penuh di semua panduan kami dengan dasbor evaluasi publik yang menunjukkan peningkatan terukur dibandingkan dengan agen tanpa Modern Web Guidance.
Dengan versi 1.0, kami juga dengan senang hati mengumumkan bahwa Modern Web Guidance menjadi upaya lintas browser, dengan Firefox dan Edge bergabung dengan Chrome untuk mendukung, meningkatkan kompatibilitas lintas browser, dan berkontribusi pada project ini. Berdasarkan pekerjaan bersama kami dengan Baseline, sasaran kami adalah memastikan bahwa siapa pun yang melakukan coding dengan agen dapat memanfaatkan sepenuhnya kecanggihan dan kemampuan platform web modern.
Apa pun model atau infrastruktur pengelola agen yang Anda gunakan, jika Anda membangun untuk web, Modern Web Guidance termasuk dalam Agentic Workflows Anda.
Untuk menginstal Modern Web Guidance, jalankan perintah ini dari direktori project Anda:
npx modern-web-guidance@latest install
Atau, jika Anda sudah menginstal versi sebelumnya, Anda dapat mengupdate ke versi 1.0 dengan menjalankan:
npx modern-web-guidance@latest update
Untuk petunjuk penginstalan tambahan atau untuk mempelajari lebih lanjut, lihat dokumentasi Modern Web Guidance, atau tonton video ini untuk ringkasan singkat:
Alasan developer dan bisnis harus menggunakan Modern Web Guidance
Tidak dapat disangkal bahwa agen coding telah membantu developer menulis kode lebih cepat dari sebelumnya. Namun, di dunia tempat semua orang menggunakan agen coding, kecepatan tidak lagi menjadi keunggulan kompetitif.
Saat ini, membedakan faktor-faktor mendasar seperti kegunaan dan kualitas pengalaman menjadi semakin penting. Berikut beberapa cara Modern Web Guidance dapat membantu:
Memperkuat praktik terbaik yang sering diabaikan model
Meskipun model coding frontier memiliki pemahaman yang baik tentang banyak praktik terbaik, evaluasi kami menunjukkan bahwa masih ada sejumlah area penting yang belum dikuasai, seperti:
- Aksesibilitas: Fokus keyboard dan pengelolaan inert, dukungan gerakan yang dikurangi, dan validasi formulir yang mudah diakses.
- Pengalaman pengguna: Gestur geser dan sentuh, transisi dialog dan popover, serta penerapan tema terang/gelap.
- Performa: Penjadwalan tugas thread utama, isolasi rendering di luar layar, dan pencegahan pergeseran tata letak.
- Keamanan: Pembersihan HTML yang aman, Kebijakan Keamanan Konten yang ketat, dan pengelolaan kredensial kunci sandi.
Praktik terbaik aksesibilitas sangat penting untuk diterapkan dengan benar karena kesalahan seperti ARIA yang buruk dapat membuat halaman menjadi kurang mudah diakses dibandingkan tanpa ARIA sama sekali. Untuk versi 1.0, panduan yang ditampilkan kepada pengguna telah ditinjau dan diuji dengan teknologi pendukung sungguhan oleh pakar aksesibilitas yang mengandalkannya setiap hari.
Menggunakan fitur web terbaik untuk tugas
Model AI sangat baik dalam mencari tahu cara membuat sesuatu berfungsi dengan JavaScript, tetapi dalam banyak kasus, ada fitur HTML atau CSS yang dapat melakukan hal yang sama dengan kode yang jauh lebih sedikit. Dan karena ditangani oleh browser, elemen ini biasanya berperforma lebih baik dan dilengkapi dengan fitur aksesibilitas. Contoh:
- Fitur untuk menganimasikan popover dan dialog
- Fitur untuk meningkatkan interaksi berbasis scroll dan geser
- API yang lebih baik untuk transisi halaman yang lancar dan mulus
Fitur baru juga dapat meningkatkan pengalaman situs dengan cara yang penting bagi pengguna. Contoh:
- Kunci sandi dan WebAuthn: Untuk pengalaman login yang lebih cepat dan aman
- Isi Otomatis: Untuk meningkatkan alur checkout (terutama di perangkat seluler) yang sering gagal saat menggunakan kontrol formulir kustom berbasis JavaScript
Modern Web Guidance dirancang untuk merekomendasikan fitur terbaik untuk tugas tersebut, berdasarkan persyaratan dukungan browser Anda. Panduannya memiliki data kompatibilitas browser dan Baseline yang disematkan, sehingga dapat menyesuaikan rekomendasinya dengan kebutuhan project Anda.
Memindai codebase Anda dan menemukan peluang untuk modernisasi
Sebagian besar pengembangan web tidak terjadi dalam project baru. Hal ini terjadi di codebase yang sudah ada dan telah mengumpulkan solusi yang sudah usang, dependensi yang tidak perlu, dan polyfill yang tidak lagi diperlukan selama bertahun-tahun.
Versi 1.0 menambahkan alur kerja modernisasi baru yang dapat menganalisis HTML, CSS, JavaScript, dan package.json yang ada untuk menemukan peluang upgrade yang aman, lalu memandu agen Anda melakukan perubahan.
/modern-web-guidance Modernize the code in this directory
Dalam rilis pertama ini, alur kerja modernisasi menggunakan analisis statis untuk memeriksa serangkaian pola yang terbatas. Kami memilih untuk memulai dengan cakupan sempit yang memberikan hasil yang dapat diprediksi, lalu memperluasnya dari sana. Seiring waktu, kami berencana untuk mencakup lebih banyak area, termasuk audit agentic, yang memungkinkan agen Anda melakukan penalaran langsung terhadap kode Anda, bukan hanya mencocokkan pola yang diketahui.
Dapatkan info terbaru seiring berkembangnya platform web
Platform web adalah target yang terus berubah. Fitur baru dikirimkan di browser setiap pencapaian, dan fitur yang ada yang mungkin tidak dapat Anda gunakan sebelumnya menjadi Baseline dengan setiap rilis browser baru.
Karena Modern Web Guidance dibuat berdasarkan data kompatibilitas Baseline, dan rekomendasinya dikelola oleh engineer browser, pakar standar web, dan spesialis aksesibilitas, rekomendasi ini berkembang seiring dengan platform itu sendiri, dan kini project Anda juga dapat berkembang.
Pelajari fitur web baru dan praktik terbaik
Meskipun Modern Web Guidance utamanya dibuat sebagai alat untuk agen, kami mendengar dari banyak developer bahwa mereka menganggap panduan ini cukup berguna sebagai referensi pembelajaran.
Bahkan di era coding agentic ini, membangun keahlian domain masih tetap penting. Modern Web Guidance dapat membantu Anda melakukannya: baik dengan membaca panduannya sendiri, atau menggunakan CLI untuk menelusuri kasus penggunaan dan menemukan teknik baru yang mungkin relevan dengan project Anda.
Menyambungkan Modern Web Guidance dengan Chrome DevTools untuk agen
Dalam pengembangan web agentic, penulisan kode hanyalah salah satu bagian dari alur kerja. Anda juga perlu menjalankan kode tersebut untuk memastikan kode berfungsi seperti yang diharapkan. Oleh karena itu, sebaiknya developer menggunakan Modern Web Guidance bersama dengan Chrome DevTools untuk agen.
- Modern Web Guidance memberi agen Anda keahlian awal yang diperlukan untuk menulis kode sesuai praktik terbaik modern.
- Chrome DevTools untuk agen memberi agen Anda visibilitas runtime sehingga dapat memverifikasi, men-debug, dan mengoptimalkan kode tersebut di berbagai kemampuan perangkat, preferensi pengguna, dan kondisi jaringan.
Bersama-sama, hal ini membantu agen Anda menemukan solusi yang lebih baik dalam giliran yang lebih sedikit. Berikut adalah beberapa contoh cara menggunakan alat ini secara bersamaan untuk memaksimalkan efektivitas:
Optimalkan hingga Anda mencapai target performa
Modern Web Guidance dapat mengajari agen Anda cara memecah tugas JavaScript yang berjalan lama dan memblokir thread utama secara efektif, tetapi tidak dapat menguji kode Anda untuk melihat berapa lama tugas JavaScript tersebut benar-benar memblokir thread utama.
Dengan Chrome DevTools untuk agen, Anda dapat menjalankan pelacakan performa pada CPU low-end yang disimulasikan untuk melihat apakah ada masalah atau tidak, lalu menggunakan saran performa dari Modern Web Guidance untuk melakukan iterasi hingga kode Anda tidak pernah memblokir thread utama selama lebih dari 50 milidetik (sehingga tidak berkontribusi pada INP yang buruk).
Menguji dan menyempurnakan animasi Anda
Modern Web Guidance dapat menunjukkan kepada agen Anda cara menganimasikan fitur seperti dialog modal, tooltip, dan menu popover dengan benar dan berperforma tinggi, tetapi meskipun dengan panduan ini, Anda tetap perlu memverifikasi bahwa animasi tersebut benar-benar berfungsi dan terlihat bagus saat digunakan dalam konteks aplikasi lengkap Anda.
Chrome DevTools untuk agen dapat menjalankan kode Anda, berinteraksi dengan halaman, dan merekam layar animasi yang sedang berjalan. Kemudian, model ini dapat mempelajari rekaman tersebut untuk memastikan bahwa animasi berjalan dan sesuai dengan gaya serta nuansa situs lainnya.
Anda juga dapat menggunakan Chrome DevTools untuk agen guna memverifikasi bahwa saat prefers-reduced-motion ditetapkan, komponen akan mematuhi preferensi pengguna.
Men-cache tampilan tanpa kebocoran memori
Modern Web Guidance dapat mengajari agen Anda cara membuat transisi SPA terasa instan dengan merender dan meng-cache tampilan dalam memori, sekaligus menyembunyikannya dengan benar dari hierarki aksesibilitas.
Namun, saat melakukannya, penting untuk memastikan Anda membersihkan tampilan yang tidak digunakan dengan benar agar tidak terjadi kebocoran memori jika pengguna tetap berada di halaman tersebut dalam waktu lama. Chrome DevTools untuk agen memiliki alat proses debug memori, sehingga agen Anda dapat memastikan penggunaan memori tidak meningkat tanpa batas.
Untuk melihat lebih dekat cara menggunakan Modern Web Guidance dan Chrome DevTools untuk agen secara bersamaan, tonton video ini:
Kisah sukses
Tim engineering di seluruh dunia sudah menggunakan Modern Web Guidance dan Chrome DevTools untuk agen guna meningkatkan kualitas kode, mempercepat pengiriman, dan menghilangkan bottleneck proses debug manual:
Pensionbazaar dan Policybazaar
Pensionbazaar, platform perencanaan pensiun baru yang diluncurkan oleh perusahaan fintech India, Paisabazaar, memadukan Modern Web Guidance dengan Chrome DevTools untuk agen guna membangun dan memverifikasi halaman baru, sehingga mempersingkat waktu penyelesaian sebesar lebih dari 90% (dari sekitar empat hari menjadi beberapa jam) dan mengurangi bug UI di layar baru sebesar lebih dari 90%. Platform saudaranya, Policybazaar, salah satu platform asuransi terkemuka di India dengan lebih dari 97 juta pelanggan terdaftar, menggunakan Chrome DevTools untuk agen guna mengotomatiskan audit performa di sekitar 30 halaman landing dengan traffic tinggi, sehingga mengurangi upaya audit manual sebesar 92%:
"Untuk Pensionbazaar, prioritas kami adalah membangun kode berkualitas sejak awal untuk menghindari utang teknis di kemudian hari. Modern Web Guidance mengarahkan agen coding kami untuk mengadopsi standar web modern dan praktik terbaik performa, sekaligus tetap mematuhi target kompatibilitas browser spesifik kami. Hal ini membuat peninjauan kode frontend kami jauh lebih mudah dan cepat, sehingga pada akhirnya meningkatkan waktu penyelesaian pengembangan kami."
—Aman Soni, Engineering Manager, Policybazaar
WeTV
WeTV, platform streaming video internasional Tencent, menambahkan agen coding AI ke pipeline CI/CD-nya yang menggunakan Chrome DevTools untuk agen guna mendiagnosis regresi performa dan Modern Web Guidance untuk memperbaikinya menggunakan fitur platform web modern. Agen ini kini otomatis mendiagnosis dan menyelesaikan 90% pemeriksaan performa yang gagal, sehingga memangkas waktu proses debug dan penyelesaian sebesar 87% (dari empat jam menjadi 30 menit, termasuk evaluasi manual):
"Hasilnya sangat efektif dalam hal kecepatan dan kualitas. Insight diagnostik yang diberikan oleh Chrome DevTools untuk agen dan Modern Web Guidance memberi kami referensi yang andal untuk memperbaiki masalah tata letak yang kompleks. Kami melakukan verifikasi ketat setelah setiap perbaikan, dan rasio keberhasilan serta stabilitas saat ini telah meningkatkan keyakinan kami dalam merilis."
—Yangjie Zheng, Head of Engineering, WeTV (Tencent)
note inc.
note inc., salah satu platform kreator dan media terbesar di Jepang dengan lebih dari 90 juta pengguna aktif bulanan, menggunakan Modern Web Guidance bersama dengan sistem desain internalnya sebagai bagian dari upaya berkelanjutan untuk memodernisasi frontend Next.js-nya. Dalam evaluasi 180 kali pengujian pada codebase produksinya, Modern Web Guidance meningkatkan tingkat kelulusan pada pemeriksaan web modern dari 61% menjadi 94% dengan mengarahkan agen untuk menggunakan fitur HTML dan CSS native, bukan JavaScript kustom untuk animasi scroll, tooltip, dan akordeon. Hal ini juga meningkatkan prioritas gambar LCP yang tepat sebesar 28% di 431 PR yang digabungkan:
"Misi kami di note adalah 'Mulai, dan Terus Berkreasi', jadi platform kami harus tetap cepat dan dapat diakses oleh setiap kreator dan pembaca. Seiring makin banyaknya kode yang ditulis dengan agen coding AI, Modern Web Guidance membantu agen tersebut menggunakan solusi modern berbasis standar, alih-alih kembali ke pola JavaScript lama. Lighthouse juga menunjukkan detail yang mudah terlewatkan, seperti prioritas pemuatan gambar dan aksesibilitas formulir. Digabungkan dengan sistem desain kami, hal ini memungkinkan kami terus meningkatkan kualitas Note sekaligus menjaga konsistensi UI kami."
—Takehiko Itabashi, VP of Technology, note inc.
MetaMask
MetaMask, platform keuangan self-custodial dengan lebih dari 100 juta download di sekitar 190 negara, menjalankan Modern Web Guidance sebagai bot peninjauan otomatis pada setiap permintaan pull ke ekstensi browser open source-nya, yang dikonfigurasi hanya dengan perintah tiga baris. Dalam lima minggu pertamanya, bot ini meninjau sekitar 480 permintaan pull dan mengomentari 64 di antaranya, sehingga engineer memperbaiki 43 temuan (sebagian besar masalah aksesibilitas, semantik HTML, dan formulir yang tidak terdeteksi oleh linter) dengan waktu median 15 menit dari komentar hingga perbaikan:
"Ulasannya sangat membantu. Mereka telah membantu menampilkan dan membuat engineer kami terbiasa dengan API modern seperti Interest invoker dan Popover API. Hal ini tidak meningkatkan waktu peninjauan PR, bahkan mungkin menguranginya. Masalah yang ditemukan MWG biasanya memerlukan peninjau manual yang memahami teknik web modern ini."
—Francis Nepomuceno, UX Engineer, MetaMask
Dukungan ekosistem dan komunitas
Modern Web Guidance dimulai sebagai inisiatif dalam Chrome, tetapi pencapaian versi 1.0 ini merupakan upaya kolaboratif dengan banyak pakar di seluruh komunitas web.
Terima kasih kepada tech lead area konten yang mengawasi setiap area platform web, partner browser kami di Firefox dan Edge, pakar standar web dan aksesibilitas independen yang menulis dan menguji panduan, serta semua kontributor open source di GitHub yang membantu membentuk rilis ini.
Jika Anda melihat kesenjangan dalam hal yang diketahui agen coding tentang web, atau ingin membantu meningkatkan kualitas panduan yang ada, lihat panduan kontribusi untuk terlibat.
Mulai menggunakan Modern Web Guidance
Untuk menambahkan Modern Web Guidance ke project Anda, jalankan penginstal CLI dari direktori project Anda:
npx modern-web-guidance@latest install
Atau, jika Anda sudah menginstal versi sebelumnya, Anda dapat mengupdate ke versi 1.0 dengan menjalankan:
npx modern-web-guidance@latest update
Selain CLI, Anda dapat menginstal dan mengupdate Modern Web Guidance langsung melalui marketplace plugin agen coding paling populer, termasuk Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code, dan Grok Build.
Untuk mempelajari lebih lanjut, lihat referensi berikut: