Cara Policybazaar mengurangi overhead audit sebesar 92% dan mempercepat pengiriman layar sebesar >90% menggunakan Chrome DevTools untuk agen dan Modern Web Guidance

Aman Soni

Swetha Gopalakrishnan

Dipublikasikan: 10 November 2026

Policybazaar adalah salah satu platform asuransi terkemuka di India, dengan lebih dari 97 juta pelanggan terdaftar. Sekitar 80% pelanggannya mengunjungi situs tersebut setiap bulan. Perusahaan induknya, PB Fintech, baru-baru ini meluncurkan Pensionbazaar, sebuah platform perencanaan pensiun menyeluruh, yang merupakan merek di bawah Paisabazaar Marketing & Consulting Private Limited.

Kedua tim sudah menggunakan agen coding, yang menulis kode dengan cepat, tetapi tidak dapat melihat apa yang dilakukan kode tersebut di browser. Agen sering kali menggunakan pola web yang sudah usang, dan tidak memiliki cara untuk memeriksa apakah layar dirender dengan benar, sehingga engineer masih harus memverifikasi semuanya secara manual.

Untuk mengatasinya, kedua perusahaan menggabungkan dua alat ke dalam Agentic Workflows mereka: Modern Web Guidance untuk mengajarkan standar web modern kepada model, dan Chrome DevTools untuk agen untuk memberi agen tersebut browser headless yang aktif untuk memeriksa dan memverifikasi pekerjaan mereka.

Berikut dampaknya:

Tantangan: Kode cepat, verifikasi lambat

Policybazaar dan Pensionbazaar mengalami dua hambatan berbeda yang tidak dapat dioptimalkan oleh alur kerja coding AI standar pada tingkat produksi.

Pensionbazaar: Layar baru dengan siklus QA yang panjang

Pensionbazaar membutuhkan puluhan layar baru yang kompleks, seperti kalkulator Retirement Freedom Score multilangkah, proyeksi biaya investasi yang dapat disesuaikan, dan laporan rekomendasi otomatis. Tim membangunnya dengan agen coding dan server MCP Figma, tetapi dua masalah membuat siklus QA tetap lama.

Pertama, agen melakukan coding tanpa mengetahui konteks yang jelas. Model dasar dapat membuat kode, tetapi tidak dapat melihat antarmuka yang dirender, membandingkan gaya yang dihitung dengan spesifikasi desain, mendeteksi pergeseran tata letak, atau membaca waterfall jaringan. Jadi, masalah terkait seperti UI terpotong dan pergeseran tata letak sampai ke QA manual.

Kedua, kode yang dihasilkan tidak mengikuti perkembangan terbaru. Tanpa pemahaman tentang platform web modern, agen menggunakan solusi yang sudah usang, menulis modal JavaScript yang berat, alih-alih menggunakan elemen <dialog> bawaan, menambahkan polyfill yang tidak perlu, dan mengabaikan petunjuk performa seperti fetchpriority.

Policybazaar: 30 halaman landing dan audit manual

Tim asuransi jiwa Policybazaar menjalankan sekitar 30 halaman landing untuk berbagai produk asuransi, dan setiap halaman dapat memiliki variasi untuk kampanye pemasaran yang berbeda. Secara keseluruhan, situs-situs tersebut menerima 200.000 hingga 300.000 pengunjung per hari, dan setiap halaman mendapatkan update desain dan logika bisnis bulanan. Tim harus menjaga skor Core Web Vitals tetap tinggi dan memastikan setiap varian tetap dapat diakses dan dirender dengan benar di setiap ukuran layar.

Sebelum otomatisasi, engineer mengaudit setiap halaman secara manual:

1. Jalankan PageSpeed Insights untuk mengumpulkan data pengguna di dunia nyata.
2. Evaluasi skor dan rekomendasi Core Web Vitals.
3. Periksa build pengembangan atau staging, diagnosis masalah di balik skor, dan terapkan perbaikan kode.

Prosesnya lambat, berulang, dan tidak dapat diskalakan. Hal ini menyisakan ruang untuk pengoptimalan yang terlewat, cakupan audit yang tidak konsisten, regresi performa yang tidak terdeteksi, dan rilis yang tertunda.

Sebelum mengubah alur kerja, tim menetapkan tiga sasaran: mengurangi waktu yang dihabiskan developer untuk audit performa hingga lebih dari 80% sekaligus membuat cakupan audit berkelanjutan, mempersingkat waktu penyelesaian QA dengan laporan terverifikasi, dan mengurangi bug UI yang muncul karena layar tidak sesuai dengan wireframe-nya.

Solusi: Loop kode untuk verifikasi

Pensionbazaar menutup kesenjangan antara menulis kode dan memeriksanya. Agen menulis kode, memulai instance browser yang bersih, mengaudit halaman secara terprogram untuk paritas visual, kerusakan tata letak, error konsol, dan performa, serta memperbaiki masalah yang ditemukan dengan intervensi manusia yang minimal. Agennya mendapatkan desain dari MCP Figma, sehingga dapat membandingkan halaman yang dirender dengan yang diinginkan desainer.

Video berikut menunjukkan cara kerja loop ini. Agen membaca desain Figma untuk layar baru, menerapkannya, lalu menggunakan Chrome DevTools untuk agen guna memeriksa halaman yang dirender dan memperbaiki perbedaan yang ditemukan.

Langkah 1: Grounding agen dalam standar web modern

Tim Pensionbazaar ingin kode yang dihasilkan mengikuti praktik terbaik web modern, menggunakan fitur platform saat ini, dan tetap berfungsi di browser lama. Hal ini membosankan untuk diperiksa secara manual, dan agen tidak selalu mendapatkan informasi terbaru tentang platform. Modern Web Guidance menyelesaikan masalah ini. Ini adalah kemampuan agen, yang ditulis dan dikelola oleh pakar web dari Chrome dan komunitas web, yang mencakup lebih dari 200 kasus penggunaan. Alat ini mengarahkan agen ke API platform web modern serta ke praktik terbaik performa dan aksesibilitas yang sesuai dengan target Dasar Pengukuran Anda. Jika Anda tidak menetapkan target, target akan ditetapkan secara default ke Baseline Tersedia Luas.

Setelah menarik konteks dari file Figma, agen akan menggunakan Modern Web Guidance saat menulis kode. Bagi Pensionbazaar, hal ini mengubah kode dalam tiga cara:

• Elemen native menggantikan solusi JavaScript. Agen menggunakan elemen <dialog> bawaan dan Popover API untuk modal detail paket, serta CSS Grid dan Flexbox untuk kartu ringkasan keuangan.
• Agen menambahkan petunjuk performa yang biasanya diabaikan oleh model dasar. Hal ini mencakup fetchpriority="high" pada gambar LCP utama, loading="lazy" pada kartu paket di paruh bawah, dan anggaran eksekusi berbasis waktu dengan scheduler.yield() untuk melindungi Interaction to Next Paint (INP).
• Fitur modern tidak merusak browser lama. Pensionbazaar mendukung versi browser lama, yang ditentukan dalam Browserslist. Agen menggunakan fitur seperti pseudo-class CSS :user-invalid dan autoComplete="one-time-code" di kolom sandi sekali pakai (OTP). Browser lama akan mengabaikannya, dan fungsi inti akan tetap berfungsi.

Model dasarnya tidak jauh berbeda. Untuk performa, tim menemukan bahwa model tersebut sekitar 70% selaras dengan praktik terbaik. Laporan agen itu sendiri mencantumkan 12 aturan Modern Web Guidance yang menutup kesenjangan yang tersisa. Empat contoh:

Untuk Pensionbazaar, prioritas kami adalah membangun kode berkualitas sejak hari pertama untuk menghindari utang teknis di kemudian hari. Modern Web Guidance mengarahkan agen coding kami untuk menerapkan standar web modern dan praktik terbaik performa, sekaligus menghormati 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

Langkah 2: Berikan browser kepada agen

Chrome DevTools untuk agen adalah serangkaian alat, termasuk server MCP, CLI, dan keterampilan agen, yang memberi agen coding akses real-time ke data proses debug runtime, seperti log konsol, traffic jaringan, hierarki aksesibilitas, dan kemampuan DevTools lainnya.

Tim menginstal Chrome DevTools untuk agen sebagai plugin di agen coding mereka, Claude Code:

# Add the marketplace registry
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

# Install the plugin (MCP server and skills)
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Tim ingin setiap pengujian berjalan di instance browser yang bersih, sehingga ekstensi Chrome yang diinstal tidak dapat memengaruhi hasil dan data pribadi atau sensitif tidak dapat bocor. Untuk mendapatkannya, tambahkan --isolated ke array args dalam konfigurasi server MCP:

{
  "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}

Jika pengujian Anda memerlukan sesi browser yang sudah login, gunakan --autoConnect.

Langkah 3: Biarkan agen memeriksa dan memperbaiki pekerjaannya sendiri

Tim engineering mencantumkan pemeriksaan dalam petunjuk agen, baik sebagai perintah maupun sebagai keterampilan agen. Pada dasarnya, agen melakukan hal berikut:

• Memeriksa hierarki DOM dan CSS yang dihitung, lalu membandingkannya dengan desain Figma.
• Mengubah ukuran halaman ke area pandang seluler untuk menguji responsivitas.
• Merekam rekaman aktivitas performa untuk menemukan frame animasi panjang (LoAF) yang disebabkan oleh skrip, resource yang memblokir render, dan masalah performa lainnya.
• Menulis ulang kode untuk memperbaiki ketidakcocokan desain, masalah performa, dan pengecualian konsol sebelum ditinjau oleh engineer.

Tabel berikut menunjukkan alat Chrome DevTools untuk agen yang mendukung setiap pemeriksaan:

Saat menemukan masalah, seperti teks terpotong di layar kecil, flex wrap yang rusak, atau gambar yang tidak dioptimalkan yang menyebabkan pergeseran tata letak, agen akan menjalankan loop koreksi singkat:

1. Chrome DevTools untuk agen menangkap error yang tepat.
2. Agen menganalisis data dan menulis ulang CSS atau JavaScript yang bermasalah.
3. Agen memuat ulang halaman untuk mengonfirmasi perbaikan.

Di satu layar, agen merender halaman dan menemukan bahwa tata letak, spasi, dan gradien header tidak sesuai dengan desain. Tindakan ini memperbaiki file .scss yang relevan. Alat ini juga berinteraksi dengan halaman, seperti memperluas akordeon untuk memeriksa apakah status terbukanya sesuai dengan desain.

Langkah 4: Serahkan laporan yang telah diverifikasi kepada QA

Setelah verifikasi selesai, agen akan mengirimkan kode siap produksi beserta laporan audit untuk tim QA. Laporan ini berisi:

• Perbandingan visual dengan desain Figma yang menyoroti perbedaan piksel, yang dibuat dari screenshot, snapshot DOM, dan gaya yang dihitung.
• Screenshot halaman yang dirender pada berbagai ukuran layar.
• Core Web Vitals dan diagnostik performa dari performance_start_trace dan performance_analyze_insight, seperti Speed Index dan Total Blocking Time (TBT).
• Skor Lighthouse untuk SEO, praktik terbaik, dan aksesibilitas dari lighthouse_audit.
• Pemeriksaan lulus atau gagal untuk interaksi, seperti menciutkan baris dan tombol, ditambah error konsol dan perubahan status aplikasi, seperti mengedit baris, menghapus baris, dan status kosong.

Menerapkan pendekatan yang sama ke 30 halaman kampanye

Di platform utamanya, Policybazaar mengganti eksekusi PageSpeed Insights manual dengan audit yang dijalankan melalui Chrome DevTools untuk agen di Kiro. Sebelum halaman kampanye ditayangkan, engineer memicu audit terhadap URL staging untuk perangkat seluler dan desktop. Agen menjalankan audit performa dan Lighthouse, dan Chrome DevTools untuk agen otomatis mengambil data kolom Chrome User Experience Report (CrUX) di dunia nyata bersama dengan data lab. Tindakan ini sepenuhnya menggantikan langkah PageSpeed Insights.

Kemudian, agen akan melaporkan skor performa, bottleneck yang ditemukan, dan daftar prioritas peningkatan yang harus diperbaiki oleh engineer. Dalam satu audit pra-rilis, alat ini menandai panggilan API non-kritis yang diaktifkan satu demi satu selama pemuatan halaman dan bersaing dengan pekerjaan rendering penting. Tim memperbaiki masalah tersebut sebelum halaman ditayangkan.

Agen ini sekarang menyelesaikan 12 audit performa dalam waktu yang dibutuhkan engineer untuk menyelesaikan satu audit. Artinya, upaya manual berkurang sebesar 92%.

Performa web penting bagi kami untuk mempertahankan pengalaman pengguna yang baik, tetapi mengaudit secara manual, mengevaluasi waterfall dan rekaman aktivitas di puluhan halaman landing sangat membosankan dan menjadi bottleneck utama. Chrome DevTools untuk agen mengubah proses ini dan mengurangi waktu audit performa engineer kami sebesar 92%, sehingga mereka dapat berfokus pada tugas yang lebih kompleks.

Aman Soni, Engineering Manager, Policybazaar

Dampak

Modern Web Guidance dan Chrome DevTools untuk agen mengubah pengujian frontend di Policybazaar dan Pensionbazaar dari proses manual dan reaktif menjadi proses otomatis dan proaktif. Tabel berikut membandingkan alur kerja sebelum dan sesudah perubahan:

Pengurangan sebesar 92% ini melampaui sasaran tim yang sebesar lebih dari 80%. Regresi halaman landing terdeteksi sebelum mencapai staging atau QA. Di Pensionbazaar, kode yang masuk sudah diaudit dengan screenshot untuk beberapa area pandang, sehingga mengurangi proses bolak-balik antara desain, engineering, dan QA.

Poin-poin penting untuk tim Anda

• Grounding agen Anda dalam panduan yang kredibel. Panduan yang diseleksi seperti Modern Web Guidance mencegah agen menggunakan pola yang sudah usang dan menjaga kode Anda tetap berada dalam Target dasar pengukuran.
• Jangan biarkan agen menandai tugas frontend selesai sebelum memeriksa halaman yang dirender. Chrome DevTools untuk agen memungkinkan agen memeriksa tata letak, area pandang, dan rekaman aktivitas performa di browser sungguhan.
• Berikan kriteria keluar yang jelas pada loop. Tetapkan batas langkah serta kondisi lulus dan gagal yang eksplisit agar agen tidak melakukan loop dan membuang-buang token.
• Mulai dengan halaman berbasis template yang sering dikunjungi. Alur kerja loop tertutup paling menguntungkan jika kecepatan penyelesaian sangat penting.
• Jalankan audit di browser yang bersih. Gunakan --isolated agar ekstensi dan data yang di-cache tidak memengaruhi hasil atau mengekspos data pribadi.

Resource

• Modern Web Guidance
• Repositori sumber Modern Web Guidance
• Dokumentasi Chrome DevTools untuk agen
• Chrome DevTools untuk agen di GitHub