hoe de prestaties van websites te meten met behulp van Google Chrome Developer Tools

dit artikel beschrijft hoe u de ontwikkeltools van Google Chrome kunt gebruiken om de prestaties van een website te meten en te monitoren.

met behulp van Chrome Developer Tools

de Google Chrome-webbrowser bevat Developer Tools, Een functie die webontwikkelaars helpt problemen met HTML, CSS en JavaScript te debuggen:

• druk op Ctrl + Shift + I.
• om toegang te krijgen tot ontwikkeltools op Apple Mac OS X, druk op Option + Command + I.

de volgende afbeelding toont ontwikkeltools geopend op de startpagina van Google:

op het tabblad Netwerk van het deelvenster ontwikkelaarstools toont Chrome alle verbindingen voor de huidige pagina. Om een specifieke pagina te testen, opent u Developer Tools en navigeert u naar de pagina die u wilt testen. Als alternatief, als u de huidige pagina wilt testen, vernieuw dan gewoon de pagina.

Chrome geeft informatie weer voor elke paginabron en zijn verzoek:

naam: de naam of URL van de gevraagde bron.

methode: de HTTP-methode (GET of POST).

Status: de HTTP-statuscode die door de server wordt geretourneerd.

Type: het MIME-type van de bron.

Initiator: de referer die naar de server wordt verzonden; Dit is meestal de URL van de pagina die u bekijkt.

grootte: De grootte van de bron zoals deze door de browser is ontvangen (als de pagina door de server is gecomprimeerd, is deze waarde kleiner dan de werkelijke bestandsgrootte).

tijd: de totale tijd om de bron op te halen, inclusief DNS-opzoek-en downloadtijd.

tijdlijn: de tijdlijn is een “waterval” time-lapse weergave van elk verzoek. Als u de muisaanwijzer boven een balk op de waterval plaatst, verschijnt er een tooltip met een gedetailleerd overzicht van de downloadtijd:

• blokkeren: dit omvat tijd voor de DNS lookup, SSL handshake, en het maken van een verbinding met de server.
• verzenden: Dit omvat de tijd om het verzoek met alle verzoekgegevens naar de server te sturen en om bevestiging van de server te ontvangen dat het verzoek is ontvangen.
• wachten: dit omvat de tijd voor de server om de inhoud te maken die moet worden geserveerd, en om te beginnen met het verzenden naar de browser.
• ontvangen: dit omvat de tijd die nodig is om de inhoud te downloaden.

de combinatie van wacht – en ontvangsttijden is de belangrijkste factor bij het bepalen van de snelheid van de locatie. De snelheid van de internetverbinding kan echter ook van invloed zijn op de prestaties, dus u moet altijd tijden vergelijken vanaf dezelfde locatie wanneer u de prestatiebenchmarks voor de site vaststelt.

onderaan het tabblad Netwerk vindt u een samenvatting van het proces voor het laden van pagina ‘ s. Deze samenvatting bevat het totale aantal aanvragen, de totale grootte van de hele pagina met inbegrip van de middelen, en een uitsplitsing van de tijd besteed aan het renderen van de pagina in de browser.

de eerste tijdwaarde is de totale tijd die wordt besteed aan het laden van alle inhoud op de pagina. Deze waarde omvat inhoud die door JavaScript is geladen nadat de pagina is gerenderd; als gevolg hiervan kan dit nummer veranderen als er verzoeken op de achtergrond optreden.

de twee tijdwaarden binnen de haakjes zijn gebeurtenissen die belangrijk zijn voor site optimalisatie:

• Laden: Deze gebeurtenis is het moment om de pagina te laden, inclusief alle JavaScript -, CSS-en afbeeldingsbestanden die zich in het originele HTML-document bevinden. Dit evenement duurt over het algemeen langer dan het domcontentloaded evenement.
• DOMContentLoaded: deze gebeurtenis vertegenwoordigt de waargenomen tijd door een gebruiker om de pagina te laden. Het is tijd om de pagina weer te geven zoals beschreven in het originele document voordat JavaScript extra bronnen aanvraagt. Deze tijd wordt opgeslagen wanneer de browser de domcontentloaded event in JavaScript start. (Een voorbeeld van een bron die buiten het DOM wordt gevraagd is Google Analytics.)