The CPU utilization line is the CPU utilization of just the browser process that is running the test (same as you would see in task manager) on a fixed scale from 0-100% (sampled in 0.1 sec intervals). See this comment from Pat Meenan for more information. It displays how much CPU the current webpage is using at any point in time. 4 - CPU UtilisationĪ simple graph showing the CPU utilisation of the browser process running on the device. The thinner the timeline, the quicker the page loads for a user. Ideally you want to make sure this timeline covers as little time as possible, as this indicates better overall performance. From discovery (wait), through to request being made, and finally to asset being download. From this you can see the lifecycle of a request made by the browser. The timeline shows the time along the horizontal (x) axis verses each request made on the vertical (y) axis. Note the request number on the far left, as well as the yellow lock if the request is being made over a secure connection (HTTPS). 2 - Request listĪ list of assets the browser has discovered on the page and the order in which they were requested. It shows you the time between when the browser first discovered the resource on the page, up to when the request for the resource was made by the browser to the server. The “wait” visualisation is a new addition to WPT. Generally, all else being equal, HTTP/2 will perform better so it is going to be hard to compare your dev work to the production system without having the same serving architecture. With the dev server, the browser can only make 6 requests at a time and has to wait for each to complete before issuing more. With http/2 the browser can issue all of the requests to the server in one go and the server will send them back in the order the browser prioritized them (mostly). Looks like the production site is using HTTP/2 and the dev site is not which is why you see radically different request behavior. The darker color is the period where the resource is actually downloading. The lighter time is the time from when the browser sends the request out on the wire until the first byte comes back. The dark shade is the point at which the resource is actually downloading. The light shade signifies the point at which the browser has made the request for the resource. Miscellaneous events (wait, JavaScript execution)Įach resource has 2 colours, a light shade and a dark shade.The type of resource being requested (e.g.Information about the connection status (DNS lookup, connection established, SSL negotiation). ![]() The key shows three types of information: ![]() Here’s the basic layout of the waterfall chart user interface: 1 - Key If you are interested in learning about the Connection View that sits directly below the Waterfall View, then check out my post ‘How to read a WebPageTest Connection View chart’. If you find it useful, or think I’ve forgotten anything, please let me know. So I decided to pull together many bits of information into a single blog post I can refer to at a later date. I often find myself looking at WebPageTest (WPT) waterfall charts, but as I seem to have the memory of a chimpanzee (not a goldfish, that’s a myth), I tend to forget some of the details and what they all mean.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |