Using JavaScript to Measure Responsive Web Performance

//Using JavaScript to Measure Responsive Web Performance

When beginning a responsive web project, 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.

Things to Consider When Optimizing Responsive Web Performance

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[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column row_column_index="0_1" type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][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.

Responsive Web Testing Strategy

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Uzi joined Perfecto Mobile seven years ago after a fifteen year career as a software developer and manager at IDF, Netrialty, Comverse and Sundisk. Over the past seven years, Uzi has helped grow Perfecto by managing expanding R&D teams and leading sales engineering teams. His fields of expertise include agile methodologies, mobile application testing, automation tools, and defining customer projects and on-boarding.

Leave A Comment