Optimizing Your Website

Optimizing Loading, Scripting, and Rendering Times

If your website loads slowly, use the timeline view in the Instrument navigator to see why. You can see immediately if the delay is caused by a server-side script that is not responding promptly, a large resource that takes a long time to load, or a script that takes a long time to execute prior to requesting another resource. You can also use the timeline view to scan for resources that are not loading at all, such as missing style sheets or requested resources that have been misspelled.

To see how long it takes to load a website, including the time spent evaluating scripts and rendering, click the gray record circle button toward the top-right corner of the Instrument navigator. When the circle turns red to indicate that recording has started, press Command-R to reload the website. Wait until the site has loaded, then click the red circle button to stop recording.

At the top of the content browser, Safari lists the network requests, CSS layout calculations and rendering processes, and JavaScript events involved in loading and displaying the website when they occur chronologically. They appear as a series of blue-, purple-, and yellow-colored bars, as shown in Figure 4-1.

When the Network Requests timeline is selected, the bottom portion of the content browser displays each individual file requested from the webpage. The horizontal bar graph shows you when each resource was requested, the latency of the server, and the download time for each resource. Hover over any bar to see additional details in a tooltip.

The vertical dashed blue line indicates when the DOM is available to Safari, and is equivalent to the DOMContentLoaded JavaScript event. The red line indicates when all resources have loaded, and is equivalent to the load JavaScript event.

Click the record button or press Command-R again to record a new timeline.

To see an alternate timeline view showing network latency, resource size, load time, HTTP request type, and status, click the Columns button on the right edge of Web Inspector. This brings up the network timeline view, as shown in Figure 4-2. Drag the divider between any two columns to make a column wider or narrower, and click any column header to sort that column. Sorting by Transferred, for example, will show you the largest resources coming over the wire. Sorting by Latency will show you the files that took the longest for the remote host to serve.

Click the go-to arrow next to an item in the Name column to preview the file’s contents, and to see the request and response headers, as illustrated in Figure 4-3. Click the Back arrow to return to the timeline view.

Just as you can see great detail about every resource that has loaded, you can see great detail about every CSS rendering process and every JavaScript event. Click on Layout & Rendering or JavaScript & Events in the Timelines pane to display a table of each paint and event that has been captured.

Optimizing JavaScript

Underneath the Timelines pane in the Instrument navigator is the Profiles pane. This pane allows you to see where execution time is being spent in your JavaScript. Use the Profiles pane to find bottlenecks in your scripts and optimize their performance.

To use the Profiles pane, you must start profiling, either manually or by including a console.profile() call in your script. To start profiling manually, click the record button (gray circle) in the top right of the Profiles pane. The record button turns red. To stop the profile, click the record button again. No profile is displayed until you stop profiling, either manually or through a call to console.profileEnd(). Each time you begin and end profiling, another profile is captured.

The JavaScript profiler is fully compatible with the Firebug functions console.profile() and console.profileEnd(), but in Safari you can optionally specify a title in console.profileEnd() to stop a specific profile if multiple profiles are being recorded.

Once you have captured one or more profiles, they are listed on the left side of Web Inspector. Manual profiles are named sequentially (JavaScript Profile 1, JavaScript Profile 2, and so on). Profiles created by calls to console.profile() are named with the title of the profile provided in the script. If multiple profiles are captured under the same name, a disclosure triangle reveals multiple runs within the profile.

The time spent in each function executed during the profile is displayed, as well as the number of times each function is called, as shown in Figure 4-4. The time is displayed as a percentage of total time.

Clicking a profile name displays the functions that were executed during the profile, the time spent in each function, and the number of times each function was called. The time spent is broken down into three categories: Self, the total time spent in the function itself; Total, the total time spent in the function and any subordinate functions it calls in turn; and Average, the average time spent in the function itself during each call (the Self time divided by the number of calls).

If a function is declared with a name, the function name is displayed. If a function is created programmatically by an eval() statement or inline <script> </script> tagset, it is labeled (program) in the profile. Other unnamed functions, for example a function defined within a variable declaration, are labeled (anonymous function).

Where applicable, the source URL and line number of the function declaration is shown in gray to the right of the function name. The source URL is a link. Clicking it opens the source in the content browser, scrolled to the line number where the function is declared.