Setting up Page Loading Heatmaps

Page loading heatmaps can help visualize the time taken by specific section of the page to load. Page loading heatmaps shall be setup for specific pages whose speed issues you seek to diagnose:


Setting up Visualization for loading time of DOM Elements:

To visualize any specific part of the page in Page Loading heatmap, you need to:

  • Add a User Timing call for that section (as detailed here)
  • Map the custom speed measure with adequate DOM element through following declaration in the Tezify tracking snippet:

    
    window.wto.elementsAssociation = {'custom speed marker name' : 'DOM element ID'}
    
    The mapping establishes a link between the custom speed marker name and ID of the DOM element. One or more such mappings can be added to window.wto.elementsAssociation.

    Again, if you want to setup element association for a certain page, you can add a condition as below:

    
    if (window.location.pathname.indexOf("part of your page's url" >= 0)
        window.wto.elementsAssociation = {'custom speed marker name' : 'DOM element ID'}
    



Example Tracking Setup:

Imagine that we want to track the time taken by flight search calendar to load on a travel aggregator site’s homepage. And we want to visualize this time on a Page Loading Heatmap. To set this up, we first need to add the User Timing API call at the right location in our page’s HTML:


performance.mark(‘fltSearchCalendarLoaded’)

Now, lets assume that the ID of the flight search calendar DOM element is ‘divFltSearchCalendar’. So, the mapping between this DOM element and our performance marker will be as following:


window.wto.elementsAssociation = {‘fltSearchCalendarLoaded’ : ‘divFltSearchCalendar’}

The above dictionary assignment statement needs to appear within the Tezify tracker snippet for that page. Resulting from this mapping, the page loading speedmap shall display the time captured for ‘fltSearchCalendarLoaded’ atop the DOM element ‘divFltSearchCalendar’.