Using JavaScript to Measure Responsive Web Performance

DZone 's Guide to

Using JavaScript to Measure Responsive Web Performance

Performance is huge when building responsive web-sites, Javascript is a good way to measure your response time.

· Performance Zone ·
Free Resource

When building responsive websites, developers and testers have to be hyper-aware of page performance for the following reasons:

  • The same code should be executed on web and mobile and most of the time mobile devices are connected to slower networks (3G, 4G, bad reception) and need to work across different screen sizes.
  • Responsive websites contain more objects and not all the objects should be downloaded to all clients. For example, a website contains two icons, one for a big screen (desktop browser) and a smaller icon for mobile devices. A common glitch here is that each client gets both of the images (big and small).

This posts shows how to get the right details about the page load times and objects sent to the different clients, and provides test code you can use.

Website Object Timers

The following javascript measures the time it takes to render and display the relevant website objects for the specific device.

 var a = window.performance.timing 

The result of running the command "PerformanceTiming" will return the different timers for all the objects displayed on a site.

 PerformanceTiming { navigationStart: 1460488206719, unloadEventStart: 0, 
   unloadEventEnd: 0, redirectStart: 0, redirectEnd: 0, 
     fetchStart: 1460488206719, domainLookupStart: 1460488206719, 
       domainLookupEnd: 1460488206719, connectStart: 1460488206719, 
         connectEnd: 1460488206719 } 

The following code organizes the objects loaded on a web page according to object load time:

 public webNavigationTime(String page,Map data)
        _page = page;

    private void parse( Map data)
        _navStart = data.get("navigationStart");
        _loadEventEnd = data.get("loadEventEnd");
        _connectEnd = data.get("connectEnd");
        _responseStart = data.get("responseStart");
        _responseEnd = data.get("responseEnd");
        _domInteractive = data.get("domInteractive");

   public int LoadTime()
        long t  =_loadEventEnd - _navStart;
       return (int)t;

    public int networkStetingTime()
        long t  =_connectEnd - _navStart;
        return (int)t;
    public int htmlTime()
        long t  =_responseEnd - _responseStart;
        return (int)t;
    public int renderingTime()
        long t  =_loadEventEnd - _domInteractive;
        return (int)t;

Measuring Object Size and Type

The following javaScript retrieves all the page elements according to size and type:

var perfEntries = performance.getEntries(); 
for (i = 0; i < performance.getEntries().length; i++) 
 var rc =  rc+ ('Name: ' + perfEntries[i].name    +
                ' EntryType: ' + perfEntries[i].initiatorType + 
                          ' Duration: '   + perfEntries[i].duration +'###' ); 

After retrieving all the elements, you can use the following javascript to analyze the image sizes.

As part of the analysis, you can examine the display size vs. real size and understand if the image is the right size for the device or if it requires adjustments for optimal rendering and load time.

for (var i = 0; i < document.getElementsByTagName('img').length; i++) 
  var rc = rc+'';"
    rc=  rc+ '$name:'+ document.getElementsByTagName('img')[i].src;"
    rc=  rc+ '$hight:'+ document.getElementsByTagName('img')[i].height;"
    rc = rc + '$naturalHeight:'+document.getElementsByTagName('img')[i].naturalHeight;"
    rc = rc +'$width:'+document.getElementsByTagName('img')[i].width;"
    rc = rc + '$naturalWidth:'+document.getElementsByTagName('img')[i].naturalWidth+'###';"
return rc;

This code will retrieve all of your DOM elements. Note that for some screen sizes some of the elements won't display.

As part of your test, you should validate that all objects are downloaded to the client and display correctly. From a digital experience perspective, it's important to measure this kind of website performance and continuously make adjustments as your responsive website evolves.

javascript, performance, responsive web

Published at DZone with permission of Shane O'Neill . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}