Pagespeed script addition, what does it do?

javascript mod-pagespeed
user429620 picture user429620 · Oct 13, 2015 · Viewed 12.3k times · Source

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');

Answer

Jud picture Jud · Oct 13, 2015

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.

Related questions

How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More
How to check whether a string contains a substring in JavaScript?

Usually I would expect a String.contains() method, but there doesn't seem to be one. What is a reasonable way to check for this?

Read More