Over time the loading speed of our homepage increased. I can’t say for sure when it started happening or if the problem has always been there.

We started noticing buttons on landing pages were inactive for a long time.

We then noticed a bad FOOC (Flash Of Original Content, e.g. when the page changes after rendering) on our AB tests. For our AB test we use VWO and it was taking seconds to pick a variation.

Those issues are not related with the server responding slowly but with the way the browser loads and parses external resources.

The best approach for performance tuning is to measure performance, find the current bottleneck, and fix it. I’m going to focus on tools to measure performance here.

Chrome network tab

We want to answer the question ‘When does our resource load?’. We can use the network tab on developer tools for this:

In this case, javascript gets downloaded after images are present on the page. On slow networks this can lead to severe delays.

On the right side you can see the timeline for each resource. The white rectangle shows us when the resource was queued, and the green/blue bar show us when the resource was loaded.

The script was queued almost at the same time as images but the request started after other resources.

Windows.performance.timing

If we want to know how long a particular piece of javascript code took to run since the request started or the DOM was loaded we can use

windows.performance.timing

it returns a PerformanceTiming object with information about the original request from the browser:

connectEnd: 1466496097504

connectStart: 1466496093419

domComplete: 1466496163233

domContentLoadedEventEnd: 1466496150725

domContentLoadedEventStart: 1466496150636

domInteractive: 1466496150636

domLoading: 1466496099490

domainLookupEnd: 1466496093419

domainLookupStart: 1466496088575

fetchStart: 1466496088508

loadEventEnd: 1466496163268

loadEventStart: 1466496163237

navigationStart: 1466496088508

redirectEnd: 0

redirectStart: 0

requestStart: 1466496097504

responseEnd: 1466496099836

responseStart: 1466496099443

secureConnectionStart: 1466496093562

unloadEventEnd: 0

unloadEventStart: 0

If you want to know how long your document.ready took since the request started you can use:

$(document).ready(function() {

console.log(‘Time since request start’, (Date.now() — window.performance.timing.requestStart) / 1000.0)

})

Chrome timeline

Timeline tab on developer tools visualises a timeline of events happening during the page load. Once opened refresh the page and it will automatically start capturing events.

On our website it shows:

I personally find it difficult to navigate it, especially to find which part of the timeline correspond to the code I want to optimise.

Chrome has two extra console commands that will help you navigate the timeline. Using

console.timestamp('myTimestamp')

and hitting refresh, you will be able to see when the timestamp command is invoked in the timeline:

It will help you to see where your code is executed in the timeline. You can invoke it, for instance, as a first statement in your $(document).ready to see how much code is executed before that.

If you instead want to see how long a section of code takes to run from the timeline you can use:

console.time('beforeDocumentReady');

// some code...

console.timeEnd('beforeDocumentReady');

and it will be shown in the ‘console section’ of the timeline:

Chrome Profile tab

If you want to profile specific parts of the code you can also use:

console.profile('profileMe');

// some code

console.profileEnd();

when you refresh the page with the developer tools open, the profile tab will include profiling information about the code executed between the two calls:

This is very useful to find points in your js code to optimise

Conclusion

We’ve seen different tools you can use to measure js performance bottlenecks on your website. In following articles we will see what kind of optimisation you can use to load your javascript and css faster.

Interested in making an Impact? Join the carwow-team!

Feeling social? Connect with us on Twitter and LinkedIn :-)