Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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.

Free Resource

Download our Introduction to API Performance Testing and learn why testing your API is just as important as testing your website, and how to start today.

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;
        parse(data);
    }

    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.

Find scaling and performance issues before your customers do with our Introduction to High-Capacity Load Testing guide.

Topics:
javascript ,responsive web ,performance

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}