Over a million developers have joined DZone.

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.

Evolve your approach to Application Performance Monitoring by adopting five best practices that are outlined and explored in this e-book, brought to you in partnership with BMC.

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.

Learn tips and best practices for optimizing your capacity management strategy with the Market Guide for Capacity Management, brought to you in partnership with BMC.

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 best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

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

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

{{ parent.tldr }}

{{ parent.urlSource.name }}