Lightpanda: El navegador de 64MB que es 60 veces MÁS RÁPIDO que Chrome
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00Este es LightPanda, un navegador headless diseñado para agentes de IA escrito desde cero en Zig, así que no usa WebKit ni Chromium, lo que lo hace hasta nueve veces más rápido y consume 16 veces menos memoria que Chrome headless.
00:00:12Incluso expone el protocolo de desarrollo de Chrome para poder usarlo con Puppeteer o Playwright, pero no renderiza píxeles ni admite APIs web comunes como service workers, IndexedDB y CORS.
00:00:22Entonces, ¿por qué se usa en OpenClaw y en el navegador para agentes Cells? Suscríbete y averigüémoslo.
00:00:30LightPanda fue lanzado alrededor de 2024 por Pierre, Francis y Kate, mucho antes de que existiera Claude Code y más o menos cuando ChatGPT empezó a ganar popularidad.
00:00:41Comenzó como una herramienta de web scraping y automatización, pero poco después de que los agentes explotaran en popularidad, se enfocaron en agentes de IA y lograron obtener una ronda de financiación.
00:00:51¿Pero fue esto solo un cambio de marca rápido debido a la popularidad de la IA o es realmente bueno para los agentes?
00:00:56Vamos a probar esto construyendo nuestro propio agente usando el SDK de Claude con una herramienta personalizada WebFetch, y usaremos Chrome y LightPanda como motores de navegación web para comparar las diferencias y ver cuál es mejor y por qué.
00:01:09Aunque LightPanda tiene un servidor MCP y su propio servicio en la nube, intentaremos hacer las cosas lo más localmente posible.
00:01:16Y repasaremos un ejemplo básico de cómo usar LightPanda antes de pasar a crear la herramienta WebFetch.
00:01:22Aquí tengo un script que básicamente obtiene un montón de enlaces de Wikipedia.
00:01:27Y funciona de la siguiente manera: primero crea un servidor LightPanda y luego se conecta a ese servidor usando Puppeteer.
00:01:32Tenemos algo de código aquí para comprobar cuánto tiempo llevará el proceso, irá a Wikipedia, revisará todos los enlaces en la sección de referencias y los imprimirá.
00:01:40Si quieres visualizarlo, la sección de referencias está aquí abajo en la página del navegador web.
00:01:44Y como puedes ver, el primer enlace de referencia es este de Device Atlas, que coincide con el de aquí abajo.
00:01:50Así que LightPanda encontró todos los enlaces en 344 milisegundos.
00:01:53Y si probamos lo mismo con Chrome, tarda 392 milisegundos.
00:01:58Así que no hay tanta diferencia, pero las cosas cambian drásticamente cuando tienes varias páginas que quieres extraer.
00:02:04Aquí hay un script similar con una diferencia importante.
00:02:07En lugar de obtener enlaces de una página de Wikipedia, estamos haciendo 100.
00:02:11Si vamos a la definición, podemos ver todas las páginas de las que va a obtener información desde el navegador web: HTTPS, JavaScript, Mongo, Python y muchas más.
00:02:19Así que, si probamos eso con LightPanda, todo el proceso termina en 18 segundos.
00:02:23Y si probamos lo mismo con Chrome, tarda unos 30 segundos.
00:02:26Y en algunos casos, cuando lo ejecuté, tardó 60 segundos.
00:02:29Pero veamos cómo varía el rendimiento si se ejecuta a través de un agente.
00:02:32Aquí tengo un agente muy básico que utiliza el SDK de Claude y hay una herramienta WebFetch por aquí que ejecuta este prompt.
00:02:39Resume la diferencia entre Array Map, Filter y Reduce en JavaScript y va a estos enlaces específicos en MDN para encontrar información sobre ellos.
00:02:48Debajo tenemos nuestro bucle de agentes y aquí, debido a que solo hay una herramienta, existe una sentencia if para verificar si se está usando esa herramienta específica.
00:02:54Pero si tuviéramos más herramientas, ese sería el caso.
00:02:56Y aquí es donde se utiliza la función WebFetch cada vez que hay una llamada a una herramienta.
00:03:00Debajo de eso, tenemos algunas métricas y una función aquí para calcular la memoria del navegador.
00:03:04Este proyecto va a utilizar LightPanda y Chrome usando el protocolo Chrome DevTools.
00:03:09Así que lo ejecutaremos en un puerto y Puppeteer se conectará a ese puerto antes de ejecutar el agente.
00:03:14Podemos iniciar el servidor usando "LightPanda serve" y luego ejecutar nuestro agente, que obtiene las tres URLs de MDN y le da la información a Claude.
00:03:22Aquí nos da una respuesta explicándonos la diferencia entre Map, Filter y Reduce, además de devolver las métricas.
00:03:29Ahora probemos eso con Chrome, asegurándonos de eliminar cualquier caché predeterminado que tenga, ya que LightPanda no es un navegador completo y no tiene el mismo nivel de caché que Chrome.
00:03:38Así que es justo eliminarlo de Chrome.
00:03:40Y luego ejecutaremos lo mismo en Chrome, que también obtiene las URLs de MDN y también nos da una respuesta de Claude.
00:03:46Pero aquí es donde las cosas son drásticamente diferentes.
00:03:48Si ponemos los resultados uno al lado del otro, LightPanda aquí y Chrome allá, ambos hacen tres búsquedas.
00:03:54Pero podemos ver que el tiempo de búsqueda de LightPanda fue mucho más rápido, casi el doble que el de Chrome.
00:03:59El tiempo real es el mismo.
00:04:01Pero mira esto: la memoria del navegador para LightPanda es de solo 66 megabytes, mientras que para Chrome es de 829.
00:04:07Es más de 10 veces menos que LightPanda, y la memoria del agente también es un poco más pequeña para LightPanda, pero el motor del navegador no cambiaría mucho este valor.
00:04:17Sinceramente, nunca deberías volver a usar Chrome para navegación headless.
00:04:20Quiero decir, ¿por qué lo harías? LightPanda es hasta 21 veces más pequeño que Chrome, es más rápido y utiliza mucha menos memoria.
00:04:28Pero hay un escenario en el que quizás quieras usar Chrome en lugar de LightPanda.
00:04:33Si cambiamos el prompt de la pregunta sobre JavaScript por "consígueme cinco propiedades de Airbnb en Tokio", ejecutar eso con Chrome nos da los resultados esperados.
00:04:42Pero si intentas lo mismo con LightPanda, vemos que no es capaz de obtener los listados de Airbnb.
00:04:47Y esto se debe a que Airbnb es una aplicación de una sola página (SPA), mientras que LightPanda sí tiene un motor V8 para ejecutar JavaScript.
00:04:54Esto es solo para la ejecución a nivel de lenguaje.
00:04:57Es decir, async await, closures, promesas y cosas por el estilo.
00:05:00Pero para algo más complejo como esta aplicación de una sola página para Airbnb, LightPanda tiene dificultades para renderizarla y obtener toda la información relevante.
00:05:07Así que, aparte de no poder renderizar SPA correctamente, lo cual podrían cambiar en el futuro, no lo sé.
00:05:13LightPanda es una gran herramienta o una buena adición para incluir en un agente personalizado que necesite realizar búsquedas o extracciones web.
00:05:20Y mientras estamos en el tema de la navegación web con un agente, si alguna vez has querido que Claude Code controle tu sesión de Chrome activa de forma segura...
00:05:27...con tus datos de inicio de sesión y todo lo demás, entonces echa un vistazo a este video sobre depuración remota usando el servidor MCP de Chrome.