Het prestatiepaneel in Chrome DevTools helpt ontwikkelaars al ruim vijftien jaar hun runtime-prestaties in een of andere vorm te meten en optimaliseren. Beginnend met een paneel genaamd 'Tijdlijn' , evolueerde het naar het Prestatiepaneel dat je vandaag de dag kent.
In die tijd lanceerde Chrome andere krachtige prestatieproducten en -functies. Lighthouse werd met name in 2016 gelanceerd om optimalisatiemogelijkheden gemakkelijker te helpen herkennen. Het experimentele Performance Insights-panel werd in 2022 uitgebracht om nieuwe manieren te testen om prestatie-inzichten naar boven te halen.
Het Prestatiepaneel staat boordevol gegevens en functies waarmee ontwikkelaars diep in de problemen met het laden van pagina's en runtime-prestaties kunnen duiken. Maar laten we even reëel zijn en erkennen dat het een uitdaging kan zijn om het te gebruiken en moeilijk om de grootste kansen te identificeren om de paginaprestaties te verbeteren. Bovendien is de kracht van andere tools die helpen bij het oplossen van ruis en het snel isoleren van kansen (zoals Lighthouse) losgekoppeld van het Prestatiepaneel.
In onze zoektocht om het voor ontwikkelaars gemakkelijker te maken prestatieproblemen te identificeren en te reproduceren, gaan we functies en lessen van Lighthouse en het Performance Insights-paneel overbrengen en deze integreren in het bestaande Prestatiepaneel. We concentreren ons ook op de UX en bruikbaarheid om de effectiviteit van het prestatiepaneel als hulpmiddel voor het optimaliseren van webprestaties te verbeteren.
Wat is het resultaat? Eén paneel – eenvoudiger en krachtiger dan ooit – voor alle prestatiegegevens en inzichten.
Actie ondernemen op de webprestaties, eenvoudiger gemaakt
Uw feedback bevestigt dat de hoge informatiedichtheid uitdagingen op het gebied van bruikbaarheid met zich meebrengt. We ontwikkelen actief oplossingen en functies om u te helpen. Belangrijke optimalisatietrajecten, zoals het verbeteren van Core Web Vitals, krijgen eersteklas behandeling. We zijn van plan functies zoals annotaties te introduceren, zodat u bevindingen kunt markeren en lessen kunt delen met uw collega's. Door correlaties in de gegevens aan het licht te brengen, wordt het vermogen om een complex systeem te begrijpen verbeterd, en krijgt u meer manieren om te onthullen hoe de gegevens met elkaar verbonden zijn, zoals netwerkverzoeken en hoofdactiviteit.
We zullen nieuwe functies leveren terwijl we deze ontwikkelen, en om de paar maanden delen we een update van de nieuwe mogelijkheden die het paneel biedt. Hou je vast! Je zult binnenkort nieuwe functies zien!
De kracht van Lighthouse, in het paneel Prestaties
We hebben gezien hoe ontwikkelaars zowel de Lighthouse- als de Performance-panelen gebruiken, en het wisselen van context tussen de twee is een uitdaging. Bovendien kan het nodig zijn om actie te ondernemen op basis van Lighthouse-bevindingen naar het Prestatiepaneel te gaan om meer aanvullende context te krijgen. Dit veroorzaakt wrijving, omdat het voorgeschreven overzicht van de prestaties van een pagina losstaat van gedetailleerde prestatiegegevens.
We gaan de prestatieanalyse van Lighthouse diepgaand integreren via het Prestatiepaneel. Met deze integratie zal Lighthouse een licht werpen op de belangrijkste mogelijkheden om de paginaprestaties binnen het Prestatiepaneel zelf te verbeteren, vergezeld van alle details die nodig zijn om actie te ondernemen op de mogelijkheid.
Nadat alle prestatiefunctionaliteit naar het Prestatiepaneel is verplaatst, wordt het onafhankelijke Lighthouse-paneel in DevTools overbodig en verdwijnt het. Deze paneelzonsondergang zal pas in de tweede helft van 2025 plaatsvinden. Het is belangrijk om nadrukkelijk te stellen dat Lighthouse niet zal verdwijnen .
Vuurtoren is hier om te blijven
De Lighthouse npm-module en het Lighthouse-rapport in PageSpeed Insights (inclusief de PSI API ) worden niet buiten gebruik gesteld. We blijven toegewijd aan de beschikbaarheid en kwaliteit van Lighthouse als een open source-tool die kan worden gebruikt in de voorkeursomgeving van een ontwikkelaar om de prestaties van pagina's te evalueren.
Deze integratie dient voor ons als een manier om zowel het Performance Panel als de mogelijkheden van Lighthouse naar een hoger niveau te tillen voor ontwikkelaars die proberen te redeneren over het laden, het reactievermogen en de stabiliteit van de inhoud.
Het experimentele deelvenster Prestatie-inzichten wordt beëindigd
Het Performance Insights-paneel werd gelanceerd als experiment om te zien hoe we drie belangrijke pijnpunten beter konden aanpakken : de informatiedichtheid van het Performance-paneel verminderen, case-driven analyse ondersteunen en de leercurve verkorten die gepaard gaat met het gebruik van het Performance-paneel.
We hebben veel van het experiment geleerd dankzij feedback van ontwikkelaars. We hebben gevalideerd dat het gebruik van case-driven analyse (bijvoorbeeld 'Ik wil LCP optimaliseren' of 'Ik wil pagina's optimaliseren om responsiever te zijn') uiterst waardevol is, en dat functies zoals de Layout Shifts Track het diagnosticeren en verbeteren van statistieken mogelijk maken veel eenvoudiger.
Ontwikkelaars vonden het Performance Insights-paneel ook toegankelijker dan het Performance-paneel, wat bevestigt dat de verminderde informatiedichtheid aantrekkelijk is. Deze verminderde dichtheid bracht in veel gevallen echter kosten met zich mee, waardoor ontwikkelaars naar het Prestatiepaneel moesten gaan om de gedetailleerde gegevens te verkrijgen die nodig waren om actie te ondernemen.
Onze lessen (en veel functies uit het experimentele Performance Insights-paneel) zullen worden geïntegreerd in het Performance-paneel. Functies zoals use-case-driven analyse en verbeteringen aan de informatiedichtheid, samen met Lighthouse-integratie, zullen ons helpen inzichten over paginaprestaties bruikbaarder te maken dan ooit tevoren.
Het Performance Insights-experiment wordt later in 2024 verwijderd.
Waar u feedback kunt geven
Wanneer we nieuwe functies uitbrengen, verwelkomen we feedback. Als u ideeën heeft over hoe u de toegevoegde functies kunt verbeteren, of als uw bestaande stroom door het paneel onnodig wordt verstoord , willen we dat graag van u horen . Wij willen horen wat werkt, wat niet, en wat volgens u beter kan. Bedankt!