javascriptmod-pagespeed

Pagespeed script addition, what does it do?


I've enabled mod_pagespeed, and now get this extra javascript added around the place where my HTML logo is defined. I'm not sure what this code does and how I can disable it?

<a href="http://www.example.com/" id="logo"><script pagespeed_no_defer="">//<![CDATA[
(function(){var g=this,h=function(b,d){var a=b.split("."),c=g;a[0]in c||!c.execScript||c.execScript("var "+a[0]);for(var e;a.length&&(e=a.shift());)a.length||void 0===d?c[e]?c=c[e]:c=c[e]={}:c[e]=d};var l=function(b){var d=b.length;if(0<d){for(var a=Array(d),c=0;c<d;c++)a[c]=b[c];return a}return[]};var m=function(b){var d=window;if(d.addEventListener)d.addEventListener("load",b,!1);else if(d.attachEvent)d.attachEvent("onload",b);else{var a=d.onload;d.onload=function(){b.call(this);a&&a.call(this)}}};var n,p=function(b,d,a,c,e){this.f=b;this.h=d;this.i=a;this.c=e;this.e={height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth};this.g=c;this.b={};this.a=[];this.d={}},q=function(b,d){var a,c,e=d.getAttribute("pagespeed_url_hash");if(a=e&&!(e in b.d))if(0>=d.offsetWidth&&0>=d.offsetHeight)a=!1;else{c=d.getBoundingClientRect();var f=document.body;a=c.top+("pageYOffset"in window?window.pageYOffset:(document.documentElement||f.parentNode||f).scrollTop);c=c.left+("pageXOffset"in window?window.pageXOffset:(document.documentElement||f.parentNode||f).scrollLeft);f=a.toString()+","+c;b.b.hasOwnProperty(f)?a=!1:(b.b[f]=!0,a=a<=b.e.height&&c<=b.e.width)}a&&(b.a.push(e),b.d[e]=!0)};p.prototype.checkImageForCriticality=function(b){b.getBoundingClientRect&&q(this,b)};h("pagespeed.CriticalImages.checkImageForCriticality",function(b){n.checkImageForCriticality(b)});h("pagespeed.CriticalImages.checkCriticalImages",function(){r(n)});var r=function(b){b.b={};for(var d=["IMG","INPUT"],a=[],c=0;c<d.length;++c)a=a.concat(l(document.getElementsByTagName(d[c])));if(0!=a.length&&a[0].getBoundingClientRect){for(c=0;d=a[c];++c)q(b,d);a="oh="+b.i;b.c&&(a+="&n="+b.c);if(d=0!=b.a.length)for(a+="&ci="+encodeURIComponent(b.a[0]),c=1;c<b.a.length;++c){var e=","+encodeURIComponent(b.a[c]);131072>=a.length+e.length&&(a+=e)}b.g&&(e="&rd="+encodeURIComponent(JSON.stringify(s())),131072>=a.length+e.length&&(a+=e),d=!0);t=a;if(d){c=b.f;b=b.h;var f;if(window.XMLHttpRequest)f=new XMLHttpRequest;else if(window.ActiveXObject)try{f=new ActiveXObject("Msxml2.XMLHTTP")}catch(k){try{f=new ActiveXObject("Microsoft.XMLHTTP")}catch(u){}}f&&(f.open("POST",c+(-1==c.indexOf("?")?"?":"&")+"url="+encodeURIComponent(b)),f.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),f.send(a))}}},s=function(){var b={},d=document.getElementsByTagName("IMG");if(0==d.length)return{};var a=d[0];if(!("naturalWidth"in a&&"naturalHeight"in a))return{};for(var c=0;a=d[c];++c){var e=a.getAttribute("pagespeed_url_hash");e&&(!(e in b)&&0<a.width&&0<a.height&&0<a.naturalWidth&&0<a.naturalHeight||e in b&&a.width>=b[e].k&&a.height>=b[e].j)&&(b[e]={rw:a.width,rh:a.height,ow:a.naturalWidth,oh:a.naturalHeight})}return b},t="";h("pagespeed.CriticalImages.getBeaconData",function(){return t});h("pagespeed.CriticalImages.Run",function(b,d,a,c,e,f){var k=new p(b,d,a,e,f);n=k;c&&m(function(){window.setTimeout(function(){r(k)},0)})});})();pagespeed.CriticalImages.Run('/mod_pagespeed_beacon','http://www.example.com/slug','SLoDkQnME-',true,false,'gxYRJPh80JY');
//]]></script><img src="http://www.example.com/xlogo.png.pagespeed.ic.GAQP-mof5d.png" alt="Logo" pagespeed_url_hash="4083345942" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></a>

Here's a fiddle: http://jsfiddle.net/vdkdekuu/ and a beautified version:

(function() {
    var g = this,
        h = function(b, d) {
            var a = b.split("."),
                c = g;
            a[0] in c || !c.execScript || c.execScript("var " + a[0]);
            for (var e; a.length && (e = a.shift());) a.length || void 0 === d ? c[e] ? c = c[e] : c = c[e] = {} : c[e] = d
        };
    var l = function(b) {
        var d = b.length;
        if (0 < d) {
            for (var a = Array(d), c = 0; c < d; c++) a[c] = b[c];
            return a
        }
        return []
    };
    var m = function(b) {
        var d = window;
        if (d.addEventListener) d.addEventListener("load", b, !1);
        else if (d.attachEvent) d.attachEvent("onload", b);
        else {
            var a = d.onload;
            d.onload = function() {
                b.call(this);
                a && a.call(this)
            }
        }
    };
    var n, p = function(b, d, a, c, e) {
            this.f = b;
            this.h = d;
            this.i = a;
            this.c = e;
            this.e = {
                height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
                width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
            };
            this.g = c;
            this.b = {};
            this.a = [];
            this.d = {}
        },
        q = function(b, d) {
            var a, c, e = d.getAttribute("pagespeed_url_hash");
            if (a = e && !(e in b.d))
                if (0 >= d.offsetWidth && 0 >= d.offsetHeight) a = !1;
                else {
                    c = d.getBoundingClientRect();
                    var f = document.body;
                    a = c.top + ("pageYOffset" in window ? window.pageYOffset : (document.documentElement || f.parentNode || f).scrollTop);
                    c = c.left + ("pageXOffset" in window ? window.pageXOffset : (document.documentElement || f.parentNode || f).scrollLeft);
                    f = a.toString() + "," + c;
                    b.b.hasOwnProperty(f) ? a = !1 : (b.b[f] = !0, a = a <= b.e.height && c <= b.e.width)
                }
            a && (b.a.push(e), b.d[e] = !0)
        };
    p.prototype.checkImageForCriticality = function(b) {
        b.getBoundingClientRect && q(this, b)
    };
    h("pagespeed.CriticalImages.checkImageForCriticality", function(b) {
        n.checkImageForCriticality(b)
    });
    h("pagespeed.CriticalImages.checkCriticalImages", function() {
        r(n)
    });
    var r = function(b) {
            b.b = {};
            for (var d = ["IMG", "INPUT"], a = [], c = 0; c < d.length; ++c) a = a.concat(l(document.getElementsByTagName(d[c])));
            if (0 != a.length && a[0].getBoundingClientRect) {
                for (c = 0; d = a[c]; ++c) q(b, d);
                a = "oh=" + b.i;
                b.c && (a += "&n=" + b.c);
                if (d = 0 != b.a.length)
                    for (a += "&ci=" + encodeURIComponent(b.a[0]), c = 1; c < b.a.length; ++c) {
                        var e = "," + encodeURIComponent(b.a[c]);
                        131072 >= a.length + e.length && (a += e)
                    }
                b.g && (e = "&rd=" + encodeURIComponent(JSON.stringify(s())), 131072 >= a.length + e.length && (a += e), d = !0);
                t = a;
                if (d) {
                    c = b.f;
                    b = b.h;
                    var f;
                    if (window.XMLHttpRequest) f = new XMLHttpRequest;
                    else if (window.ActiveXObject) try {
                        f = new ActiveXObject("Msxml2.XMLHTTP")
                    } catch (k) {
                        try {
                            f = new ActiveXObject("Microsoft.XMLHTTP")
                        } catch (u) {}
                    }
                    f && (f.open("POST", c + (-1 == c.indexOf("?") ? "?" : "&") + "url=" + encodeURIComponent(b)), f.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"), f.send(a))
                }
            }
        },
        s = function() {
            var b = {},
                d = document.getElementsByTagName("IMG");
            if (0 == d.length) return {};
            var a = d[0];
            if (!("naturalWidth" in a && "naturalHeight" in a)) return {};
            for (var c = 0; a = d[c]; ++c) {
                var e = a.getAttribute("pagespeed_url_hash");
                e && (!(e in b) && 0 < a.width && 0 < a.height && 0 < a.naturalWidth && 0 < a.naturalHeight || e in b && a.width >= b[e].k && a.height >= b[e].j) && (b[e] = {
                    rw: a.width,
                    rh: a.height,
                    ow: a.naturalWidth,
                    oh: a.naturalHeight
                })
            }
            return b
        },
        t = "";
    h("pagespeed.CriticalImages.getBeaconData", function() {
        return t
    });
    h("pagespeed.CriticalImages.Run", function(b, d, a, c, e, f) {
        var k = new p(b, d, a, e, f);
        n = k;
        c && m(function() {
            window.setTimeout(function() {
                r(k)
            }, 0)
        })
    });
})();
pagespeed.CriticalImages.Run('/mod_pagespeed_beacon', 'http://www.example.com/slug', 'SLoDkQnME-', true, false, 'gxYRJPh80JY');

Solution

  • That particular JS snippet implements "critical image beaconing", which is a part of the lazyload_images filter. lazyload_images is a filter which can speed up your site by only loading images after they scroll into view. This keeps "below-the-fold" images (images which require vertical scrolling to see) from competing for the network with more critical resources. By default, when this filter is enabled, all images will be lazyloaded.

    The critical image beacon is an enhancement to the lazyload_images filter. It runs on the client's browser and determines which images are above-the-fold by default. It send this information back to the server, and on future requests, only below-the-fold images will be lazyloaded. This helps the above-the-fold content load as quickly as possible. If it's working correctly, after a few page views, mod_pagespeed will stop beaconing on every request, and reduce the amount of pages it instruments. You can disable this feature with the ModPagespeedCriticalImagesBeaconEnabled option.

    You can read more about beaconing in mod_pagespeed here, and about the lazyload_images here.