Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Resources Tab
This tab gives you a view into the amount of time and the amount of data transfer required to load all the resources that comprise your web page. The initial view is the "Time" graph (see Figure 10).
)
Figure 10 Time Graph
This view shows a timeline of the file resources that were requested and downloaded by Safari in order to render your web page, resources such as the HTML page, the JavaScipt and CSS files, and all the image files required to render the content of your web page.
At the top of the Time Graph is a breakdown of how much time was spent loading the different types of resources and the total amount of time spent retrieving all the elements. Resources are color-coded by the kind of web resource they are.
Beneath the summary, the retrieved resources are initially listed by "response time," meaning the point in time when the resource began to be downloaded by the web browser. This sort order does not take into account latency.
What is latency? Because each of these resources must be loaded over the network, there is always a lag between when the request began and when the server responded with the requested data. This time difference is called "latency."
Latency can be the result of network traffic congestion (i.e., it takes a long time for your request to get to the server or for the server response to come back) or web server utilization (i.e., the server is too busy to respond with the requested content).
Looking at the Time Graph lets you quickly identify resources that have a high latency or took a long time to load.
Each row in the time graph shows the resource that was requested and a horizontal "streak" representing the request latency and download time. The streaks are color-coded using the same colors in the summary at the top of the Time Graph.
The transparent portion at the beginning of the streak shows the latency, and the solid portion of the streak shows how much time was spent downloading the resource. The full length of the streak shows how much time elapsed from when the request was initiated to when the resource was completely downloaded.
If you want to know the exact latency and download time, hover your cursor over the streak, and the exact amount of latency and download time will be displayed in the streak.
Clicking on any resource on the left side of the Time Graph will display the content of that resource in the Resources pane, whether it's HTML, JavaScript, CSS, or an image file.
In addition to the resource content, you can inspect the request and response headers. These headers transfer additional information from the web browser (request headers) and from the web server (response headers). Sometimes the values in these headers can or should make a difference in how your web page behaves.
The Resources pane gives you visibility into these normally unseen bits of information being exchanged by your web browser and web server.
To return to the Time Graph, click the "Time" icon.
At the bottom of the Resources pane, you'll see the familiar toolbar ribbon, but with some different tool options. The "Undock" and "Console" buttons are in the first two positions.
The third icon is a checkbox that lets you disable Resource Tracking, effectively turning off the Resources tab's features, in case you aren't interested in the information provided by the Resources pane.
The fourth icon lets you toggle between "small resources" list and "large resources" list. Switching to the small resources view lets you see more rows of resources by making them narrower.
The final option on the toolbar ribbon in the Resources pane is a drop-down that lets you choose the sort order of the displayed resources. You can choose to display them in order by Start Time, Response Time, End Time, Duration, or Latency, depending on which of these time elements is more important to you.
In addition to the Time Graph, the Resources pane lets you see resource size information by clicking on the Size icon (see Figure 11).
)
Figure 11 Size Graph
The Size Graph has all the same features as the Time Graph, so by learning to use the Time Graph you already know how to use the Size Graph.