Random Post Fast Loading ~ Pinguin Techno

Seperti yang kita ketahui bahwa widget Random post mampu menampilkan artikel blog kita secara acak dan bergantian pada saat widget tersebut kita load (bekerja), dimana Script widget tersebut akan menampilkan beberapa artikel/postingan blog kita sesuai dengan pengaturan yang kita terapkan pada Script widget tersebut dengan cara mengatur nilai yang akan di tampilkan, sebagai contoh maxResults = 7; script tersebut akan menampilkan artikel/postingan acak sebanyak (7) artikel.
Akan tetapi mau tidak mau Saya harus mengatakan bahwa widget random post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak:

<script src='/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts'></script>

Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post termasuk juga widget artikel terkait tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil (diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).

Mengacak Indeks Permulaan

Saya menyadari terdapat sebuah peluang untuk menciptakan widget random post yang lebih ringan dan cepat dimuat. Dibandingkan memuat semua posting dan memilah beberapa posting secara acak untuk ditampilkan, akan lebih baik jika kita mengacak nilai start-index pada feed sehingga posting yang dimuat bisa dimulai dari urutan sembarang:

function randomPosts(json) {
    // Ubah JSON menjadi HTML...
}

var startIndex = Math.round(Math.random() * 9999); // Membuat angka acak
document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');

Ada satu masalah kecil yang mungkin akan mengganggu. Jika angka acak yang tercipta nilainya lebih besar dari total posting blog Anda saat ini, maka widget random post ini tidak akan bekerja. Oleh karena itu kita harus membatasi angka acak yang tercipta, yaitu tidak boleh kurang dari 1 dan tidak boleh lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.
Untuk mendapatkan jumlah posting secara keseluruhan kita bisa mengambilnya melalui objek json.feed.openSearch$totalResults.$t:

// Konfigurasi
var homePage = 'http://nama_blog.blogspot.com',
    maxResults = 7;

// Fungsi untuk menggenerasikan angka acak dengan batasan minimal dan maksimal
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Mendapatkan indeks pemulai yang aman untuk memanggil feed utama
function createRandomPostsStartIndex(json) {
    // Buat angka acak dengan nilai tidak boleh kurang dari `1` dan tidak boleh lebih dari `total posting - posting yang ingin ditampilkan`
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // Tampilkan pesan log
    console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');

Muat ulang widget Anda berkali-kali. Seharusnya Anda akan melihat pesan log indeks pemanggilan posting yang berubah-ubah seperti ini:

Showing log message to indicate random number for feed start index purpose

Kita akan menggunakan angka acak itu sebagai angka pemulai pada parameter start-index seperti ini:

function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

Pada bagian akhir URL feed terdapat parameter callback=randomPosts. randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah JSON Blogger menjadi widget:

function randomPosts(json) {
    var link, ct = document.getElementById('random-post-container'),
        entry = json.feed.entry,
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}

Sentuhan akhir, acak urutan posting yang ditampilkan menggunakan fungsi pengacak array sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:

// Fungsi untuk mengacak array
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}

// Widget
function randomPosts(json) {
    var link, ct = document.getElementById('random-post-container'),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}

Hasil Akhir Tanpa Thumbnail Dan Css

<div id='random-post-container'>Memuat...</div>

<script type="text/javascript">
//<![CDATA[
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
 maxResults = 7,
 containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
 var i = arr.length, j, temp;
 if (i === 0) return false;
 while (--i) {
  j = Math.floor(Math.random() * (i + 1));
  temp = arr[i];
  arr[i] = arr[j]; 
  arr[j] = temp;
 }
 return arr;
}

// Get a random start index
function createRandomPostsStartIndex(json) {
 var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
 if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); 
 document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
 var link, ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
   link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
  }
  skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
 }
 ct.innerHTML = skeleton + '</ul>';
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

Dengan Thumbnail Dan Deskripsi

<div id='random-post-container'>Memuat...</div>

<script type="text/javascript">
//<![CDATA[
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
 maxResults = 7,
 summaryLength = 170,
 noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
 containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
 var i = arr.length, j, temp;
 if (i === 0) return false;
 while (--i) {
  j = Math.floor(Math.random() * (i + 1));
  temp = arr[i];
  arr[i] = arr[j]; 
  arr[j] = temp;
 }
 return arr;
}

// Get a random start index
function createRandomPostsStartIndex(json) {
 var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
 if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); 
 document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
 var link, summary, img,
  ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
  img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
  for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
   link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
  }
  skeleton += '<li>';
  skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
  skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
  skeleton += '<span>' + summary + '</span>';
  skeleton += '<span class="clear"></span></li>';
 }
 ct.innerHTML = skeleton + '</ul>';
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

Hasil Akhir Dengan Sedikit Sentuhan Css Tanpa Thumbnail Dan Deskripsi

<style type='text/css'>
#random-post-container {
    width: auto;
    margin-left: 15px;
}

#random-post-container ul {
    margin: 7px 0 0;
    padding: 0;
}

#random-post-container li {
    list-style: none;
    margin: 0 0 2px;
    background-color: #e5e5e5;
    padding: 0 7px 0 7px;
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    border-bottom: 1px dotted #ccc;
}

#random-post-container a {
    text-decoration: none;
}

#random-post-container a:hover {
    text-decoration: underline;
}

#random-post-container strong {
    font: normal bold 13px/1.4 Arial,Sans-Serif;
}
</style>

<div id='random-post-container'>Memuat...</div>
<script type='text/javascript'>
    //<![CDATA[
    /* Performa Widget Random Post
     * By Anarchyta
     * http://bit.ly/anarchyta
     * http://plus.google.com/118396814444756975267/posts
     */

    var homePage = 'http://nama_blog.blogspot.com',
        maxResults = 7,
        containerId = 'random-post-container';
    // Function to generate random number limited from `min` to `max`
    // Used to create a valid and safe random feed `start-index`

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    // Function to shuffle arrays
    // Used to randomize order of the generated JSON feed

    function shuffleArray(arr) {
        var i = arr.length,
            j, temp;
        if (i === 0) return false;
        while (--i) {
            j = Math.floor(Math.random() * (i + 1));
            temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
        return arr;
    }
    // Get a random start index

    function createRandomPostsStartIndex(json) {
        var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
        // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
        document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
    }
    // Widget's main function

    function randomPosts(json) {
        var link, ct = document.getElementById(containerId),
            entry = shuffleArray(json.feed.entry),
            skeleton = "<strong>Random Post</strong><ul>";
        for (var i = 0, len = entry.length; i < len; i++) {
            for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
                link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
            }
            skeleton += '<li>&#10070; <a href="' + link + '">' + entry[i].title.$t + '</a></li>';
        }
        ct.innerHTML = skeleton + '</ul>';
    }
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt><div id="itempager" style="position:relative;"><a title="Dharla Ferdana" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.dhf.web.id" target="_blank">&#9658;DH-F</a></div>');
    //]]>
</script>

Menggunakan Thumbnail Dan Deskripsi

<style type='text/css'>
#random-post-container {
    margin-bottom: 5px;
    background-color: #333;
    border: 4px solid #ddd;
    width: 400px;
    // Style by: www.dhf.web.id/;
}

#random-post-container a {
    text-decoration: none;
    color: #fff;
}

#random-post-container a:hover {
    text-decoration: underline;
}

#random-post-container ul {
    padding: 0 7px;
}

#random-post-container li {
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;
    padding: 5px 7px;
    color: #aaa;
    list-style: none;
    overflow: hidden;
}

#random-post-container img {
    display: block;
    float: left;
    margin: 2px 7px 5px 0;
    padding: 4px 4px;
    background-color: #222;
    border: 1px solid #111;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 0 #444;
    -moz-box-shadow: 0 1px 0 #444;
    box-shadow: 0 1px 0 #444;
}

#random-post-container a {
    font-weight: bold;
    font-size: 110%;
}

#random-post-container .clear {
    display: block;
    clear: both;
}
</style>

<div id='random-post-container'>Memuat...</div>

<script type='text/javascript'>
    //<![CDATA[
    /* Performa Widget Random Post
     * By Anarchyta
     * http://bit.ly/anarchyta
     * http://plus.google.com/118396814444756975267/posts
     */

    // Feed configuration
    var homePage = 'http://nama_blog.blogspot.com',
        maxResults = 5,
        summaryLength = 150,
        noImageUrl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSvL5LuUbl8gyifz_AOaSc8oWrh5zt0Hv1MwrcqHFeSspDAKAoKIwJHFQ_r5M_9KF2skh11wnV3mbXrWeNJmz7G0GXhqy2Jzv7TWa5MUhtV7tMt1DvaTK742zPNTNIv1YFfRz1eidU3x89/s1600/dHF-logo1.png',
        containerId = 'random-post-container';

    // Function to generate random number limited from `min` to `max`
    // Used to create a valid and safe random feed `start-index`

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Function to shuffle arrays
    // Used to randomize order of the generated JSON feed

    function shuffleArray(arr) {
        var i = arr.length,
            j, temp;
        if (i === 0) return false;
        while (--i) {
            j = Math.floor(Math.random() * (i + 1));
            temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
        return arr;
    }

    // Get a random start index

    function createRandomPostsStartIndex(json) {
        var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
        if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
        document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
    }

    // Widget's main function

    function randomPosts(json) {
        var link, summary, img,
            ct = document.getElementById(containerId),
            entry = shuffleArray(json.feed.entry),
            skeleton = "<ul>";
        for (var i = 0, len = entry.length; i < len; i++) {
            summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
            img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
            for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
                link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
            }
            skeleton += '<li>';
            skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
            skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
            skeleton += '<span>' + summary + '</span>';
            skeleton += '<span class="clear"></span></li>';
        }
        ct.innerHTML = skeleton + '</ul>';
    }

    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt><div id="itempager" style="position:relative;"><a title="Dharla Ferdana" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:18px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.dhf.web.id" target="_blank">&#9658;DH-F</a></div>');
    //]]>
</script>