In this edition of our WPO Use Case series I discuss another very important use case. Load Time Optimization is most likely the most vital use case from an end user perspective. At the same time it is also highly important from a business perspective as studies by ShopZilla or Google and Bing show that load times have immediate effects on user behavior. The higher the load, the less end users are interested in interacting with the page. Load time therefore has a direct relationship to user acceptance and also business goals.

The goal of optimizing load times is to show relevant information as soon as possible and also ensure that the user can interact with the page. These two characteristics should be differentiated as they have a different effect on the end user. If content is not visible the user simply does not see the content and cannot do anything. Alternatively, the content might be visible but long-running JavaScript is blocking the user from interacting with the page. A web page must be optimized to allow users to both see content fast and also provide good interactivity.

Analyzing Loading Behavior
The most commonly used means to analyze loading behavior is the waterfall chat. A waterfall chart shows the sequence of downloads on a web page. This is a great help when you want to optimize the download behavior. You can easily detect typical problems like resources blocking the download of one another, whether they are downloaded from low bandwidth connections or simply huge files. This information really helps to analyze typical network problem patterns.

Waterfall chart in dynaTrace Ajax Edition showing massive resource download

However, sometimes the situation is more complex and requires more information. A typical example is script executions during page download. A browser has to first download a script and then execute JavaScript code before it can then continue to download and build the rest of the page. If these scripts are placed on top of the page, they immediately impact the load time from an end user perspective. A waterfall chart will show the gap between a script download and the download of subsequent files. While you know that script execution is responsible for the delay in downloads you still need to figure out what is taking so long to execute. Here the timeline view dynaTrace Ajax Edition is extremely useful as it shows which script has been executed and also supports an immediate drill-down into the JavaScript execution so you can optimize the code.

Drill down into JavaScript finding code slowing down page load time

Page Visibility
Another important point to know is when important content is visible on the page. This is not necessarily the first impression time. First impression time only tells us when the page is rendered the first time. This, however, does not mean that all relevant content is visible. So we might want to analyze when all relevant content is visible to the end user. There are a couple of ways to do this. The most visually-appealing way is to use webpagetest.org. The video is built from snapshots taken during rendering, which are the easiest way to understand when all relevant parts have been rendered. If you then want to dive deeper you can use the optionally recorded dynaTrace session to analyze the behavior in detail.

Detecting the first rendering after all content was loaded

In case you need to automate this testing – for example in a CI environment – you can use the export feature of a tool like dynaTrace Ajax Edition. Simply copy the content of the PurePath view and paste it into an xml file (see snipped below). Then you can easily parse the file for the first drawing event after the last element that needed to be loaded and you have the exact timing when the page was loaded and visible.

<activitypath time_chart="" start_time_s="19.39" duration_ms="91.03" js_ms="91.03" cpu_time_ms="93.60"
  size="1018" activity_kind="JavaScript" details="load event on &lt;window&gt;"apis="" stats="-"/>
<activitypath time_chart="" start_time_s="19.48" duration_ms="7.18" js_ms="7.18" cpu_time_ms="0.00" size="277"
  activity_kind="JavaScript" details="load event on &lt;window&gt;" apis="" stats="-"/>
...</span>

Conclusion
Optimizing load times is the first and therefore most important step to get end user experience right. The goal is to optimize the loading behavior and the initial JavaScript execution to ensure users see what they expect and can interact with the page. For optimization we have a wide variety of tools available ranging from waterfall charts to visual snapshots to automatically captured performance data.

Related reading:

1. Web Performance Optimization Use Cases – Part 2 Optimization In the last post I discussed benchmarking as the first...
2. Web Performance Optimization Use Cases – Part 1 Benchmarking Web Performance Optimization (WPO) constitutes of a set of activities...
3. Web Performance Optimization Use Cases – Part 3 Automation In the first and second post of this series I...
4. Best Practices on Web Performance Optimization (WPO) Over the last couple of years performance of web applications...

• Web Performance Optimization Use Cases
• Web Performance Optimization Use Cases
• Web Performance Optimization Use Cases - Part 3