Lightpanda: Browser 64MB yang 60x LEBIH CEPAT daripada Chrome
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Ini adalah LightPanda, peramban headless yang dirancang untuk agen AI yang ditulis dari nol menggunakan Zig, jadi tanpa WebKit atau Chromium, yang membuatnya sembilan kali lebih cepat dan menggunakan memori 16 kali lebih sedikit daripada Chrome headless.
00:00:12Peramban ini bahkan mengekspos Chrome Developer Protocol sehingga bisa digunakan dengan Puppeteer atau Playwright, tetapi tidak merender piksel apa pun atau mendukung API web umum seperti service worker, IndexedDB, dan CORS.
00:00:22Jadi mengapa alat ini digunakan di OpenClaw dan peramban agen cells? Klik subscribe dan mari kita cari tahu.
00:00:30LightPanda dirilis sekitar tahun 2024 oleh Pierre, Francis, dan Kate jauh sebelum Claude Code ada dan sekitar waktu ChatGPT mulai populer.
00:00:41Alat ini awalnya merupakan alat web scraping dan otomatisasi, tetapi segera setelah popularitas agen meledak, mereka berfokus pada agen AI dan berhasil mendapatkan pendanaan.
00:00:51Tapi apakah ini hanya rebranding cepat karena popularitas AI atau apakah alat ini memang bagus untuk agen?
00:00:56Kita akan mengujinya dengan membuat agen kita sendiri menggunakan Claude SDK dengan alat WebFetch kustom, dan kita akan menggunakan Chrome serta LightPanda sebagai mesin penelusuran web untuk membandingkan perbedaan guna melihat mana yang lebih baik dan mengapa.
00:01:09Meskipun LightPanda memiliki server MCP dan layanan cloud sendiri, kita akan mencoba melakukan semuanya selokal mungkin.
00:01:16Dan kita akan membahas contoh dasar tentang cara menggunakan LightPanda terlebih dahulu sebelum mengembangkan alat WebFetch.
00:01:22Jadi, ini skrip yang saya miliki yang pada dasarnya mengambil sekumpulan tautan dari Wikipedia.
00:01:27Dan cara kerjanya adalah skrip ini akan membuat server LightPanda terlebih dahulu, lalu terhubung ke server tersebut menggunakan Puppeteer.
00:01:32Kita punya kode di sini untuk memeriksa berapa lama prosesnya, dan kode ini akan membuka Wikipedia lalu menelusuri semua tautan di bagian referensi dan mencetaknya.
00:01:40Jika Anda ingin membayangkannya, bagian referensi ada di bawah sini untuk halaman peramban web tersebut.
00:01:44Dan seperti yang Anda lihat, tautan referensi pertama adalah Device Atlas ini, yang cocok dengan yang di bawah sini.
00:01:50Jadi, LightPanda menemukan semua tautan dalam 344 milidetik.
00:01:53Dan jika kita mencoba hal yang sama dengan Chrome, butuh waktu 392 milidetik.
00:01:58Jadi tidak ada banyak perbedaan, tetapi segalanya berubah drastis ketika Anda memiliki banyak halaman yang ingin di-scrape.
00:02:04Jadi inilah skrip serupa dengan satu perbedaan utama.
00:02:07Daripada mengambil tautan dari satu halaman Wikipedia, kita melakukannya untuk 100 halaman.
00:02:11Jadi jika kita melihat definisinya, kita bisa melihat semua halaman yang akan diambil dari peramban web ke HTTPS, JavaScript, Mongo, Python, dan banyak lagi.
00:02:19Jadi jika kita mencoba itu dengan LightPanda, semuanya selesai dalam 18 detik.
00:02:23Dan jika kita mencoba hal yang sama untuk Chrome, butuh waktu sekitar 30 detik.
00:02:26Dan dalam beberapa kasus, saat saya menjalankan ini, butuh waktu 60 detik.
00:02:29Tapi mari kita lihat bagaimana kinerjanya berbeda jika dijalankan melalui agen.
00:02:32Jadi di sini saya memiliki agen yang sangat dasar menggunakan Claude SDK dan ada alat webfetch di sini yang menjalankan perintah ini.
00:02:39Jadi alat ini merangkum perbedaan antara ArrayMap, Filter, dan Reduce di JavaScript dan membuka tautan spesifik di MDN untuk mencari informasi tentang hal-hal tersebut.
00:02:48Di bawah, kita memiliki loop agen kita dan di sini, karena hanya ada satu alat, ada pernyataan if untuk memeriksa apakah alat tertentu itu sedang digunakan.
00:02:54Tetapi jika kita memiliki lebih banyak alat, itu akan terjadi.
00:02:56Dan inilah fungsi webfetch yang digunakan setiap kali ada panggilan alat.
00:03:00Sekarang, di bawah itu, kita memiliki beberapa metrik dan fungsi di sini untuk menghitung memori peramban.
00:03:04Proyek ini akan menggunakan LightPanda dan Chrome menggunakan protokol Chrome DevTools.
00:03:09Jadi kita akan menjalankannya pada port dan Puppeteer akan terhubung ke port tersebut sebelum menjalankan agen.
00:03:14Kita bisa memulai server menggunakan LightPanda serve, lalu kita bisa menjalankan agen kita, yang mengambil tiga URL dari MDN, lalu memberikan informasi tersebut ke Claude.
00:03:22Dan di sini agen memberikan respons yang memberi tahu kita perbedaan antara Map, Filter, dan Reduce, serta mengembalikan metriknya.
00:03:29Sekarang mari kita coba itu dengan Chrome, pastikan untuk menyingkirkan caching default apa pun yang dimilikinya karena LightPanda bukan peramban penuh dan tidak memiliki tingkat caching yang sama dengan Chrome.
00:03:38Jadi adil rasanya jika menghapusnya dari Chrome.
00:03:40Dan kemudian kita akan menjalankan hal yang sama di Chrome, yang juga mengambil URL dari MDN dan juga memberi kita jawaban dari Claude.
00:03:46Tapi di sinilah segalanya sangat berbeda.
00:03:48Jadi jika kita meletakkan hasilnya berdampingan, LightPanda di sini dan Chrome di sini, keduanya melakukan tiga pengambilan data.
00:03:54Tetapi kita bisa melihat waktu pengambilan data untuk LightPanda jauh lebih cepat, hampir dua kali lebih cepat daripada Chrome.
00:03:59Waktu wall time-nya sama.
00:04:01Tapi lihat di sini, memori peramban untuk LightPanda hanya 66 megabita, sedangkan untuk Chrome, mencapai 829.
00:04:07Jadi lebih dari 10 kali lipat LightPanda dan juga memori agen sedikit lebih kecil untuk LightPanda, tetapi mesin peramban tidak akan terlalu mengubah nilai ini.
00:04:17Sejujurnya, Anda sebaiknya jangan pernah menggunakan Chrome lagi untuk peramban headless.
00:04:20Maksud saya, kenapa harus? LightPanda hingga 21 kali lebih kecil daripada Chrome, lebih cepat, dan menggunakan jauh lebih sedikit memori.
00:04:28Tapi ada satu skenario di mana Anda mungkin ingin menggunakan Chrome alih-alih LightPanda.
00:04:33Jadi jika kita mengubah perintah dari pertanyaan JavaScript tadi menjadi carikan saya lima properti dari Airbnb di Tokyo, menjalankannya dengan Chrome memberi kita hasil yang diharapkan.
00:04:42Tetapi jika Anda mencoba hal yang sama dengan LightPanda, kita melihat alat ini tidak dapat memperoleh daftar properti dari Airbnb.
00:04:47Dan ini karena Airbnb adalah aplikasi satu halaman (SPA), sedangkan LightPanda memang memiliki mesin V8 untuk menjalankan JavaScript.
00:04:54Ini hanya untuk eksekusi tingkat bahasa.
00:04:57Jadi async await, closure, promise, dan hal-hal semacam itu.
00:05:00Tapi untuk sesuatu yang lebih kompleks seperti aplikasi satu halaman untuk Airbnb ini, LightPanda memang kesulitan untuk merender ini dan mendapatkan semua informasi yang relevan.
00:05:07Jadi selain tidak dapat merender SPA dengan benar, yang mungkin akan mereka ubah di masa mendatang, saya tidak tahu.
00:05:13LightPanda adalah alat yang hebat atau tambahan untuk ditambahkan ke agen kustom yang perlu melakukan pencarian web atau pengambilan data web apa pun.
00:05:20Dan sementara kita membahas tentang penelusuran web dengan agen, jika Anda pernah ingin Claude Code mengontrol sesi Chrome Anda yang sedang berjalan dengan aman.
00:05:27Jadi dengan detail login Anda dan semuanya, lihat video tentang remote debugging menggunakan server MCP Chrome ini.