getButterfly Logo getButterfly code wrangling since 2005

This code will show you how to measure the loading time from the moment you click on a link until the linked page loads completely. I have used this function to measure the loading time of 5 pages within a sales funnel.

Step 1 is setting the link event listener:

$(document).on('click', '.link', function(event) {
    var time_then = new Date().getTime();

    localStorage.setItem('ip2timing', time_then);

Step 2 is getting the saved data and pinging a specific URL in order to save the values in a database:

var ip = document.getElementById('ip').innerHTML,
    time_then_concat = localStorage.getItem('ip2timing'),
    time_then = time_then_concat.split('|').pop(),
    ip_ex = time_then_concat.split('|'),
    ip_ex = ip_ex[0],
    time_now = new Date().getTime(),
    page_id = '7'; // get the ID using a data attribute, a Javascript variable, an AJAX call or a PHP variable
function ip2timing() {
    $.extend($, {
        Ping: function Ping(url, timeout) {
            timeout = timeout || 1500;
            var timer = null;
            return $.Deferred(function deferred(defer) {
                var img = new Image();
                img.onload = function() { success('onload'); };
                // onerror is also success, because this means the domain/IP is found, only the image not
                img.onerror = function() { success('onerror'); };

                var start = new Date();
                img.src = url += ('?cache=' + start);
                timer = window.setTimeout(function timer() { fail(); }, timeout);

                function cleanup() {
                    timer = img = null;

                function success(on) {
                    defer.resolve(true, url, new Date() - start, on);

                function fail() {
                    defer.reject(false, url, new Date() - start, 'timeout');

    // check if IP address is the same
    if(ip === ip_ex) {
        $.Ping('' + (time_now - time_then)/1000 + 
            '&page_id=' + page_id + 
            '&when=' + time_now)
            .done(function(success, url, time, on) {
            //console.log("ping done", arguments);
        }).fail(function (failure, url, time, on) {
            //console.log("ping fail", arguments);

window.addEventListener ? window.addEventListener('load', ip2timing, false) : window.attachEvent && window.attachEvent('onload', ip2timing);

Note that I am using the same Ping function from this article.

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a reply