Lightpanda: O navegador de 64MB que é 60x MAIS RÁPIDO que o Chrome
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Este é o LightPanda, um navegador headless projetado para agentes de IA, escrito do zero em Zig, sem WebKit ou Chromium, o que o torna até nove vezes mais rápido e usa 16 vezes menos memória que o Chrome headless.
00:00:12Ele até expõe o Chrome Developer Protocol para que possa ser usado com Puppeteer ou Playwright, mas não renderiza pixels nem oferece suporte a APIs da web comuns, como service workers, IndexedDB e CORS.
00:00:22Então, por que ele é usado no OpenClaw e no navegador de agentes Cells? Inscreva-se e vamos descobrir.
00:00:30O LightPanda foi lançado por volta de 2024 por Pierre, Francis e Kate, muito antes de o Claude Code existir e na época em que o ChatGPT começou a ficar popular.
00:00:41Começou como uma ferramenta de web scraping e automação, mas logo após a popularidade dos agentes explodir, eles se concentraram em agentes de IA e conseguiram uma rodada de financiamento com isso.
00:00:51Mas será que foi apenas um rebranding rápido por causa da popularidade da IA ou ele é realmente bom para agentes?
00:00:56Vamos testar isso construindo nosso próprio agente usando o SDK do Claude com uma ferramenta WebFetch personalizada, e vamos usar o Chrome e o LightPanda como mecanismos de navegação para comparar as diferenças e ver qual é melhor e por quê.
00:01:09Embora o LightPanda tenha um servidor MCP e seu próprio serviço em nuvem, tentaremos fazer as coisas da forma mais local possível.
00:01:16E vamos passar por um exemplo básico de como usar o LightPanda antes de expandir para criar a ferramenta WebFetch.
00:01:22Então, aqui está um script que tenho que essencialmente busca vários links da Wikipedia.
00:01:27E a forma como funciona é que ele primeiro cria um servidor LightPanda e, em seguida, conecta-se a esse servidor usando o Puppeteer.
00:01:32Temos um código aqui para verificar quanto tempo o processo levará, e ele irá para a Wikipedia, percorrerá todos os links na seção de referências e os exibirá.
00:01:40Se você quiser visualizar isso, a seção de referências está aqui embaixo, na página do navegador.
00:01:44E como você pode ver, o primeiro link de referência é este da Device Atlas, que corresponde ao que está aqui embaixo.
00:01:50Então, o LightPanda encontrou todos os links em 344 milissegundos.
00:01:53E se tentarmos a mesma coisa com o Chrome, leva 392 milissegundos.
00:01:58Portanto, não há tanta diferença assim, mas as coisas mudam drasticamente quando você tem várias páginas para processar.
00:02:04Então, aqui está um script semelhante com uma grande diferença.
00:02:07Em vez de obter links de uma página da Wikipedia, estamos fazendo 100.
00:02:11Portanto, se formos à definição, podemos ver todas as páginas das quais ele buscará no navegador: HTTPS, JavaScript, Mongo, Python e muito mais.
00:02:19Então, se tentarmos isso com o LightPanda, tudo é feito em 18 segundos.
00:02:23E se tentarmos a mesma coisa para o Chrome, leva cerca de 30 segundos.
00:02:26E em alguns casos, quando executei isso, levou 60 segundos.
00:02:29Mas vamos ver como o desempenho difere se estiver rodando através de um agente.
00:02:32Aqui eu tenho um agente bem básico usando o SDK do Claude, e há uma ferramenta webfetch aqui que executa este prompt.
00:02:39Ele resume a diferença entre ArrayMap, Filter e Reduce em JavaScript e acessa esses links específicos no MDN para encontrar informações sobre eles.
00:02:48Abaixo temos nosso loop de agente e aqui, como há apenas uma ferramenta, há a instrução if para verificar se essa ferramenta específica está sendo usada.
00:02:54Mas se tivéssemos mais ferramentas, esse seria o caso.
00:02:56E aqui está a função webfetch sendo usada sempre que há uma chamada de ferramenta.
00:03:00Agora, abaixo disso, temos algumas métricas e uma função aqui para calcular a memória do navegador.
00:03:04Este projeto usará o LightPanda e o Chrome usando o protocolo Chrome DevTools.
00:03:09Então, vamos executá-lo em uma porta e o Puppeteer se conectará a essa porta antes de rodar o agente.
00:03:14Podemos iniciar o servidor usando "LightPanda serve" e então podemos rodar nosso agente, que busca as três URLs do MDN e fornece as informações ao Claude.
00:03:22E aqui ele nos dá uma resposta explicando a diferença entre Map, Filter e Reduce, além de retornar as métricas.
00:03:29Agora vamos tentar isso com o Chrome, certificando-nos de nos livrar de qualquer cache padrão que ele tenha, já que o LightPanda não é um navegador completo e não tem o mesmo nível de cache que o Chrome.
00:03:38Então, é justo removê-lo do Chrome.
00:03:40E então vamos executar a mesma coisa no Chrome, que também busca as URLs do MDN e também nos dá uma resposta do Claude.
00:03:46Mas aqui é onde as coisas são drasticamente diferentes.
00:03:48Então, se colocarmos os resultados lado a lado, LightPanda aqui e Chrome aqui, ambos fazem três buscas.
00:03:54Mas podemos ver que o tempo de busca do LightPanda foi muito mais rápido, quase duas vezes mais rápido que o do Chrome.
00:03:59O tempo decorrido (wall time) é o mesmo.
00:04:01Mas veja aqui, a memória do navegador para o LightPanda é de apenas 66 megabytes, enquanto para o Chrome é de 829.
00:04:07Portanto, mais de 10 vezes maior que a do LightPanda, e a memória do agente também é um pouco menor para o LightPanda, mas o mecanismo do navegador não mudaria muito esse valor.
00:04:17Honestamente, você nunca deveria usar o Chrome novamente para navegação headless.
00:04:20Quero dizer, por que você faria isso? O LightPanda é até 21 vezes menor que o Chrome, é mais rápido e usa muito menos memória.
00:04:28Mas há um cenário em que você pode querer usar o Chrome em vez do LightPanda.
00:04:33Então, se mudarmos o prompt da pergunta sobre JavaScript para "me busque cinco propriedades no Airbnb em Tóquio", executá-lo com o Chrome nos dá os resultados esperados.
00:04:42Mas se você tentar o mesmo com o LightPanda, vemos que ele não consegue obter as listagens do Airbnb.
00:04:47E isso ocorre porque o Airbnb é uma aplicação de página única (SPA), enquanto o LightPanda tem um mecanismo V8 para executar JavaScript.
00:04:54Isso é apenas para execução em nível de linguagem.
00:04:57Portanto, async await, closures, promises e coisas do tipo.
00:05:00Mas para algo mais complexo como esta aplicação de página única do Airbnb, o LightPanda tem dificuldade em renderizar e obter todas as informações relevantes.
00:05:07Então, além de não conseguir renderizar SPAs corretamente, o que eles podem mudar no futuro, não sei.
00:05:13O LightPanda é uma ótima ferramenta ou adição para incluir em um agente personalizado que precise fazer qualquer busca ou coleta na web.
00:05:20E enquanto estamos no assunto de navegação web com um agente, se você já quis que o Claude Code controlasse sua sessão real do Chrome em execução com segurança,
00:05:27ou seja, com seus detalhes de login e tudo mais, confira este vídeo sobre depuração remota usando o servidor Chrome MCP.