Mengkompress Widget Alexarank

Blog Blogging kali ini ingin berbagi tips-trik tentang cara mengkompress widget Alexarank untuk sedikit mempercepat loading blog yang kita miliki. Pemasangan widget Alexarank ini merupakan salah satu syarat untuk dapat kita mengetahui sejauh mana peringkat Alexa sebuah situs atau blog. Namun tahukah anda bilamana pemasangan widget ini berpotensi untuk memperlambat proses loading sebuah situs atau blog ?

Nah, berikut ini akan sedikit saya beber permasalahan yang sebenarnya. Kombinasi script widget Alexarank yang merupakan default dari Alexa.com adalah seperti contoh di bawah ini :

<a href="http://www.alexa.com/siteinfo/newtemplate667.blogspot.com"><script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=newtemplate667.blogspot.com'></script></a>

Perhatikan rangkaian script yang saya cetak tebal di atas ......., Apa isinya ....... ? Isi script tersebut adalah seperti yang terurai di bawah ini.

function AlexaSiteStatsWidget(){
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var jsUrlRegex = /http:\/\/xslt.alexa.com\/site_stats\/js\/(.)\/(.).*(?:[\?&]|&amp;)url=([^\?&]*)/i;
    var jsAmznIdRegex = /http:\/\/xslt.alexa.com\/site_stats\/js\/.*[\?&]amzn_id=([^\?&]*)/i;
    var imageSrcPrefix = "http://xsltcache.alexa.com/site_stats/gif/";
    var detailURLPrefix = "http://www.alexa.com/data/details/main";

    this.replaceScripts = function replaceScripts(){
        var scriptElements = document.getElementsByTagName("script");
        var thisScript = scriptElements[scriptElements.length - 1];
        var scriptSource = thisScript.src;
        if(scriptSource != null){
            var urlMatched = scriptSource.match(jsUrlRegex);
            var decodedURL = decodeURIComponent(urlMatched[3]);
            if(urlMatched != null){
                var associatedMatched = scriptSource.match(jsAmznIdRegex);
                var base64EncodedURL = encode64(decodedURL);
                var imageURL = imageSrcPrefix + urlMatched[1] + "/" + urlMatched[2] + "/" +
                           base64EncodedURL + "/s.gif";
                var img = new Image();
                var fullURL = getFullURL(decodedURL);
                img.src = imageURL;
                img.setAttribute('border', '0');
                if(urlMatched[1] == "s")
                    img.alt = "Alexa Certified Traffic Ranking for " + decodedURL;
                else
                    img.alt = "Alexa Certified Site Stats for " + decodedURL;
                var newLink=document.createElement('a');
                var detailURL = detailURLPrefix;
                if(associatedMatched != null)
                    detailURL = detailURL + "?amzn_id=" + associatedMatched[1] + "&url=" + fullURL;
                else
                    detailURL = detailURL + "?url=" + fullURL;
                newLink.setAttribute('href', detailURL);
                newLink.className='AlexaSiteStatsWidget';
                newLink.appendChild(img);
                thisScript.parentNode.insertBefore(newLink,thisScript);
            }
        }
    }
  
    function getFullURL(inputURL){
        if(inputURL.substring(0,5).toLowerCase() != "http:")
            return "http://" + inputURL;
        else return inputURL;
    }

    function encode64(input) {
       var output = "";
       var chr1, chr2, chr3;
       var enc1, enc2, enc3, enc4;
       var i = 0;

       do {
          chr1 = input.charCodeAt(i++);
          chr2 = input.charCodeAt(i++);
          chr3 = input.charCodeAt(i++);

          enc1 = chr1 >> 2;
          enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
          enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
          enc4 = chr3 & 63;

          if (isNaN(chr2)) {
             enc3 = enc4 = 64;
          } else if (isNaN(chr3)) {
             enc4 = 64;
          }

          output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) +
          keyStr.charAt(enc3) + keyStr.charAt(enc4);
       } while (i < input.length);
      
       return output;
    }
}

new AlexaSiteStatsWidget().replaceScripts();

Cukup panjang bukan ? Dan rangkaian kombinasi script tersebut berpotensi memperlambat proses loading sebuah situs atau blog. Bila anda kurang percaya, anda dapat melakukan check langsung dengan mempergunakan situs Google PageSpeed Insight.

Nah bagaimana cara menanggulanginya ? Cukup mudah sobat, ikuti cara saya di bawah ini dengan cermat dan jangan ada satupun yang tertinggal.

Pertama-tama anda harus memasang widget Alexarank ini terlebih dahulu, kemudian dekatkan kursor di atas gambar widget Alexa tersebut, klik kanan, ambil gambarnya dan simpan (atau host di tempat lain). Adapun contoh gambar widget Alexarank tersebut adalah :

http://xsltcache.alexa.com/site_stats/gif/s/a/Z2FtcGFuZzk3LmJsb2dzcG90LmNvbQ==/s.gif

Selanjutnya, copy rangkaian script di bawah ini :

<a href="http://www.alexa.com/siteinfo/fh86.blogspot.com" rel="nofollow" target="_blank"><img alt="Alexa Rank" src="http://xsltcache.alexa.com/site_stats/gif/s/a/aHR0cDovL2ZoODYuYmxvZ3Nwb3QuY29t/s.gif" /></a>

Ganti tulisan yang berwarna biru dengan alamat url situs atau blog anda sendiri, dan tulisan yang berwarna merah ganti dengan alamat url gambar widget Alexarank yang telah anda simpan tadi.

Masukkan rangkaian script yang baru tersebut ke tempat widget Alexarank tersebut pertama kali berada, simpan kembali widget anda tersebut. Lihat hasilnya.

Get free daily email updates!

Follow us!

Anda sedang membaca artikel tentang Mengkompress Widget Alexarank dan anda bisa menemukan artikel Mengkompress Widget Alexarank ini dengan url http://fh86.blogspot.com/2015/05/mengkompress-widget-alexarank.html. Anda boleh menyebarluaskan atau mengcopy artikel Mengkompress Widget Alexarank ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.