Lightpanda : Le navigateur de 64 Mo qui est 60x PLUS RAPIDE que Chrome
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00Voici LightPanda, un navigateur headless conçu pour les agents IA, écrit de zéro en Zig. Il n'utilise ni WebKit ni Chromium, ce qui le rend jusqu'à neuf fois plus rapide et consomme 16 fois moins de mémoire que Chrome headless.
00:00:12Il expose même le protocole Chrome DevTools pour être utilisé avec Puppeteer ou Playwright, mais il ne rend aucun pixel et ne prend pas en charge les API web courantes comme les service workers, IndexedDB ou CORS.
00:00:22Alors, pourquoi est-il utilisé dans OpenClaw et le navigateur d'agents Cells ? Abonnez-vous et découvrons-le.
00:00:30LightPanda a été lancé vers 2024 par Pierre, Francis et Kate, bien avant que Claude Code n'existe et à l'époque où ChatGPT commençait à devenir populaire.
00:00:41Au départ, c'était un outil de scraping et d'automatisation web, mais peu après l'explosion en popularité des agents, ils se sont concentrés sur les agents IA et ont réussi à obtenir une levée de fonds.
00:00:51Mais était-ce juste un rebranding rapide dû à la popularité de l'IA, ou est-ce vraiment efficace pour les agents ?
00:00:56Nous allons tester cela en construisant notre propre agent en utilisant le SDK Claude avec un outil WebFetch personnalisé, et nous utiliserons Chrome et LightPanda comme moteurs de navigation pour comparer les différences, voir lequel est le meilleur et pourquoi.
00:01:09Bien que LightPanda possède un serveur MCP et son propre service cloud, nous essaierons de faire les choses le plus localement possible.
00:01:16Nous allons d'abord passer par un exemple simple de l'utilisation de LightPanda avant de nous lancer dans la création de l'outil WebFetch.
00:01:22Voici un script que j'ai qui récupère essentiellement un tas de liens depuis Wikipédia.
00:01:27La façon dont cela fonctionne est qu'il crée d'abord un serveur LightPanda, puis se connecte à ce serveur en utilisant Puppeteer.
00:01:32Nous avons du code ici pour vérifier combien de temps le processus prendra, et il ira sur Wikipédia, parcourra tous les liens de la section des références et les affichera.
00:01:40Si vous voulez visualiser cela, la section des références est en bas de la page web.
00:01:44Et comme vous pouvez le voir, le premier lien de référence est celui de Device Atlas, qui correspond à celui en bas ici.
00:01:50LightPanda a donc trouvé tous les liens en 344 millisecondes.
00:01:53Et si nous essayons la même chose avec Chrome, cela prend 392 millisecondes.
00:01:58Il n'y a donc pas une grande différence, mais les choses changent radicalement lorsque vous avez plusieurs pages à scraper.
00:02:04Voici un script similaire avec une différence majeure.
00:02:07Au lieu de récupérer les liens d'une seule page Wikipédia, nous en faisons 100.
00:02:11Si nous allons à la définition, nous pouvons voir toutes les pages qu'il va récupérer du navigateur web : HTTPS, JavaScript, Mongo, Python, et bien plus encore.
00:02:19Si nous essayons cela avec LightPanda, le tout est fait en 18 secondes.
00:02:23Et si nous essayons la même chose pour Chrome, cela prend environ 30 secondes.
00:02:26Et dans certains cas, quand je l'ai exécuté, cela a pris 60 secondes.
00:02:29Mais voyons comment les performances diffèrent si cela tourne via un agent.
00:02:32J'ai ici un agent très basique utilisant le SDK Claude, et il y a un outil WebFetch ici qui exécute ce prompt.
00:02:39Il résume donc la différence entre Array.map, filter et reduce en JavaScript et va sur ces liens spécifiques sur MDN pour trouver des informations à leur sujet.
00:02:48En dessous, nous avons notre boucle agentique, et ici, comme il n'y a qu'un seul outil, il y a une instruction 'if' pour vérifier si cet outil spécifique est utilisé.
00:02:54Mais si nous avions plus d'outils, ce serait le cas.
00:02:56Et voici la fonction WebFetch utilisée à chaque fois qu'il y a un appel d'outil.
00:03:00Maintenant, en dessous, nous avons des métriques et une fonction ici pour calculer la mémoire du navigateur.
00:03:04Ce projet va utiliser LightPanda et Chrome en utilisant le protocole Chrome DevTools.
00:03:09Nous allons donc l'exécuter sur un port, et Puppeteer se connectera à ce port avant d'exécuter l'agent.
00:03:14Nous pouvons démarrer le serveur en utilisant 'LightPanda serve', puis exécuter notre agent qui récupère les trois URL depuis MDN et donne les informations à Claude.
00:03:22Et il nous donne ici une réponse nous expliquant la différence entre Map, Filter et Reduce, tout en renvoyant les métriques.
00:03:29Essayons maintenant avec Chrome, en prenant soin de supprimer tout cache par défaut, puisque LightPanda n'est pas un navigateur complet et n'a pas le même niveau de mise en cache que Chrome.
00:03:38Il est donc juste de le supprimer de Chrome.
00:03:40Nous exécuterons ensuite la même chose dans Chrome, qui récupère aussi les URL depuis MDN et nous donne également une réponse de Claude.
00:03:46Mais c'est là que les choses sont radicalement différentes.
00:03:48Si nous mettons les résultats côte à côte, LightPanda ici et Chrome là, les deux effectuent trois récupérations.
00:03:54Mais nous pouvons voir que le temps de récupération pour LightPanda était bien plus rapide, presque deux fois plus que Chrome.
00:03:59Le temps total est le même.
00:04:01Mais regardez ici : la mémoire du navigateur pour LightPanda n'est que de 66 mégaoctets, alors que pour Chrome, elle est de 829.
00:04:07Donc plus de 10 fois plus pour LightPanda, et la mémoire de l'agent est aussi un peu plus petite pour LightPanda, mais le moteur de navigation ne changerait pas vraiment cette valeur.
00:04:17Honnêtement, vous ne devriez plus jamais utiliser Chrome pour la navigation headless.
00:04:20Je veux dire, pourquoi le feriez-vous ? LightPanda est jusqu'à 21 fois plus petit que Chrome, est plus rapide et utilise beaucoup moins de mémoire.
00:04:28Mais il y a un scénario où vous pourriez vouloir utiliser Chrome au lieu de LightPanda.
00:04:33Si nous changeons le prompt de la question sur JavaScript pour 'trouve-moi cinq propriétés sur Airbnb à Tokyo', l'exécuter avec Chrome nous donne les résultats attendus.
00:04:42Mais si vous essayez la même chose avec LightPanda, nous voyons qu'il n'est pas capable d'obtenir les annonces d'Airbnb.
00:04:47C'est parce qu'Airbnb est une application monopage (SPA), alors que LightPanda possède bien un moteur V8 pour exécuter le JavaScript.
00:04:54C'est juste pour l'exécution au niveau du langage.
00:04:57Donc pour les async/await, les closures, les promesses et ce genre de choses.
00:05:00Mais pour quelque chose de plus complexe comme cette application monopage pour Airbnb, LightPanda peine à la rendre et à obtenir toutes les informations pertinentes.
00:05:07Donc, mis à part le fait de ne pas pouvoir rendre correctement les SPA, ce qui pourrait changer à l'avenir, je ne sais pas.
00:05:13LightPanda est un excellent outil ou un ajout à intégrer dans un agent personnalisé qui doit effectuer des recherches web ou du web fetching.
00:05:20Et pendant que nous parlons de navigation web avec un agent, si vous avez déjà voulu que Claude Code contrôle votre session Chrome active en toute sécurité...
00:05:27Donc avec vos détails de connexion et tout le reste, alors regardez cette vidéo sur le débogage à distance en utilisant le serveur MCP Chrome.