Speed up website page loading (part 1 - Tools)

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 :-)