13 Cara Mempercepat Loading Blogger

13 Cara Mempercepat Loading Blogger

Setlelah browsing" dan mencari cara mempercepat loading blogger, saya menemukan banyak artikel yang membahas tentang kecepatan pemuatan halaman di blog dan web mereka.

Namun disini Aurealisa ingin memiliki artikel yg paling "umum" yang ditulis ulang untuk platform blogger yang akan saya gunakan untuk membangun situs web dan blog tentang masalah kecepatan pemuatan halaman dan semua akan saya tulis dalam artikel ini!

Hapus css dan js default dari blogger

Secara default, setiap template blogger menyertakan file css dan js. Dengan css akan ada 2 file css_bundle.css dan authorization.css. Dengan js akan menjadi file widget.js yang digunakan untuk utilitas yang disediakan blogger seperti
  1. Formulir Kontak.
  2. Statistik blog
  3. Widget Tayangan Slide
  4. Blog arsip
  5. Widget Wikipedia
  6. Widget newsreel
  7. Pencarian disediakan oleh blogger
  8. Tampilan gambar lightbox

Ada juga file plusone.js untuk fungsi untuk Google+.

Jika anda tidak memerlukan widget yg ada diatas, anda dapat menghapusnya untuk mempercepat pemuatan halaman.

Menghapus css secara Default

Jika anda menggunakan widget tata letak v3 untuk menghapus file css_bundle.css, cukup tambahkan b:css='false' kedalam tag <html...

Kode akan terlihat seperti berikut
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3'...>

Untuk menghapus file authorization.css silahkan ganti tag <head>...</head> dengan
&lt;head&gt;
...
&lt;/head&gt;&lt;!--<head/>--&gt;

Jika menggunakan widget tata letak versi yang lebih lama


Untuk menghapus kedua file, cukup ganti tag <head>...</head> dg
&lt;head&gt;
...
&lt;/head&gt;&lt;!--<head/>--&gt;

Menghapus js secara default

Jika anda menggunakan widget tata letak v3, untuk menghapus file tsb, tambahkan saja b:js='false' ke tag <html... Kode akan terlihat seperti ini
<html b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3'...>

Namun, ketika anda menyimpan template dan kembali ke tata letak ,itu akan menjadi blank atau tidak dapat diedit gitu.

Metode lain: Jika anda tidak menyukai cara di atas, anda dapat mengubah tag penutup </body> menjadi
&lt;!--</body>--&gt; &lt;/body&gt;

Jika menggunakan widget tata letak versi versi lama


Ganti tag penutup </body> kedalam
&lt;!--</body>--&gt; &lt;/body&gt;

Hanya hapus file plusone.js, anda dpt memasukkan kode berikut sebelum tag penutup </body>
&lt;!--<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>--&gt;

Mengenai bagian js ini, Aurealisa menyebutkan bahwa utilitas tidak akan berfungsi ketika menghapus file widget.js. Tentang bagian css default, beberapa template saat menghapus akan memengaruhi banyak widget serta tata letak, X ini sepenuhnya tergantung pada css anda masing masing.

Menerapkan untuk Gambar

Gambar adalah faktor yang sangat mempengaruhi kecepatan pemuatan halaman, jika anda menggunakan platform blogger, anda harus mengunggah foto saat menulis artikel, hindari menggunakan gambar dari sumber lain karena ketika anda mengunggah foto melalui blogger, foto dapat diedit. ukuran dan thumbnail bebas.

Di samping untuk mempercepat pemuatan halaman, anda dapat menggunakan plugin lazy load image dengan memasukkan kode berikut sebelum tag penutup </body>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$(".post img").lazyload({placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",effect:"fadeIn",threshold:"0"})})
//]]></script>

Gambar tidak harus dimuat dari awal tetapi akan dimuat saat menggulir mouse kebawah/berikutnya.

Untk itu adalah faktor kualitas gambar. Sebelum mengunggah foto, anda harus mengompresnya untuk membuatnya lebih optimal. Anda dapat menggunakan https://tinypng.com untuk mengompres gambar sebelum mengunggah. Format permintaan unggahan adalah .png, jadi format .gif harus diminimalkan karena banyak gambar gif akan menyebabkan kelambatan saat membaca artikel.

Penggunaan Berlebihan

Saya telah mengunjungi beberapa blog, sehingga banyak blogger belum mengoptimalkan bagian ini, beberapa pengguna telah menggunakan 2 jquery, 2 font yang sangat indah, dan juga mengunduh terlalu banyak font dari google tanpa menggunakannya.

Saran Aurealisa disini adalah anda harus menguasai apa yang perlu digunakan. Lakukan dg menggunakan versi terbaru untuk mendapatkan dukungan yang lebih baik. Disarankan untuk memilih penyedia layanan CDN untuk meminimalkan kelambatan saat memutuskan (lihat https://cdnjs.com)

Jika anda memiliki kondisi seperti ini, anda dapat membeli hosting berkecepatan tinggi untuk menyimpan file. Atau menggunakan Github sebagai tempat hosting utama. Anda harus fokus pada menyimpan file css, js pada host untuk menghindari mengunduh terlalu banyak sumber daya dari berbagai sumber karena ketika mereka sedang down / masalah, mereka akan banyak mempengaruhi situs anda.

Anda harus menggunakan 1 hingga 2 font untuk situs web / blog dan menghapus maksimum font panggilan tanpa menggunakannya.

Gunakan Cloudflare

Jika anda telah membeli domain, anda dapat menggunakan DNS perantara https://www.cloudflare.com/ untuk meningkatkan keamanan dan meningkatkan kecepatan situs web.

Cloudflare memiliki jaringan CDN besar, serta kompresi kode dan membangun utilitas skrip roket, yang akan membantu memuat situs web Anda lebih cepat.

Masalah css dan js

Ini adalah masalah yang tidak bisa dikatakan atau dikatakan. Pertama, anda perlu menguasai kode css dan js. Jika ada css atau js yang tidak terpakai itu dapat dihapus atau dihilangkan sja biar mengurangi ukuran halaman, kek gw dulu asal copas :v tapi skrng iya masih kok.

Batasi pengunduhan umpan

Blogger menyediakan API untuk mengambil data untuk melayani kebutuhan pengguna melalui pengunduhan umpan. Namun, terlalu banyak mengunduh umpan akan meningkatkan latensi dan membuat situs blog menjadi sangat lamban. Jadi, anda harus membatasi penggunaan dan trik yang terkait dengan mengunduh umpan untuk mendapatkan data, jadi fokuskan pada utilitas yang menggunakan HTML dan CSS

Kompres Kode

Ketika anda telah menyelesaikan kode css atau js diatas, anda harus mengompresnya untuk mengurangi ukuran halaman.
Untuk mengakses kompresi css https://cssminifier.com
Untuk mengompres akses js https://javascript-minifier.com

Menghapus komentar blogger

Komentar Blogger memiliki iframe yang dimuat dari server blogger. Saat memeriksa kecepatan, ini adalah faktor utama yang memperlambat kecepatan pemuatan halaman. Jadi saya memutuskan untuk tidak menggunakan sistem komentar blogger lagi dan sebagai gantinya menggunakan plugin komentar Disqus ini.

Untuk mematikannya, anda dapat melakukan hal sprti berikut ini atau membaca artikel yg pernah saya tulis pada Lazy Load Komentar Blogger.

Kalau anda tertatik menggunakan komentar facebook, anda dapat menyesuaikan lebih banyak hal, dapat mengoptimalkan memuat js sdk (akan disajikan di bawah), terlebih lagi, anda bisa lebih banyak online di Facebook daripada hanya diem trs nungguin notif dari email, jadi pastikan untuk menerima pemberitahuan komentar dan umpan balik ini lebih cepat.

Iframe

Saat mengunggah video dari sumber lain sering membuat halaman berjalan sangat lambat. Solusinya adalah menunda iframe sampai halaman selesai di muat

Misalnya, anda menyematkan video dari youtube dengan kode berikut
<iframe width="560" height="315" src="https://www.youtube.com/embed/dOVsGQdKJcU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Anda hanya perlu mengubahnya menjadi
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/dOVsGQdKJcU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Dan mempublikasikan artikel

Selanjutnya anda akan mengakses halaman pengeditan template dan tempel kode berikut sebelum tag penutup </body>
<script type='text/javascript'>//<![CDATA[
function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i = 0; i < vidDefer.length; i++) {
        if (vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
        }
    }
}
window.onload = init;
//]]></script>

Sebenarnya, dalam proses memuat halaman, beberapa js tidak harus langsung memuat, Aurealisa dapat menunda mengunduhnya dengan menggunakan beberapa metode dasar javascript sebagai berikut:

1. Gunakan gulir()
function function_name() {
   // your code
}

$(window).scroll(function() {
    if ($(window).scrollTop() > XXX) {
       function_name();
    }
});

Jika anda ingin memuat js dari kode sumber ke-3 memiliki formulir
function >function_name() {
     var t = document.createElement("script");
     t.src = "https://yourcode.js";
     document.body.appendChild(t);
}

$(window).scroll(function() {
    if ($(window).scrollTop() > XXX) {
       function_name();
    }
});

2. Gunakan getBoundingClientRect()
Sebagai contoh, saya ingin memuat SDK Facebook, maka anda perlu menentukan div dengan id tertentu (di sini saya mendapatkan div dengan id fb-plugin), ketika mouse menyentuh div itu, js baru akan memuat. Kode memiliki formulir
function loadSDK() {
    var t = document.createElement("script");
    t.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=2383081468639557&autoLogAppEvents=1", document.body.appendChild(t)
}
window.onscroll = function() {
    document.getElementById("fb-plugin").getBoundingClientRect().top < window.innerHeight && (loadSDK(), window.onscroll = null)
};

3. Menggunakan tombol
Ini cukup bagus gan, klik mulai mengunduh js! Cobalah dengan komentar facebook

Kode demo dengan tombol
<button id='showcmt' onClick='showComments();'>Komentar</button>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' numposts='5' width='100%'/>

Buat fungsi untuk memuat Facebook SDK ketika ada yg untuk mengklik tombol
function showComments() {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=2383081468639557&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

4. Gunakan onload
function your_function() {
 // Your code
}
window.onload = your_function;

atau dengan Jquery
function your_function() {
 // Your code
}

$(window).on('load', function() {
  your_function()  
});

Dengan demikian, ketika halaman dimuat (js, css, gambar, atau lainya), kode di your_function akan dieksekusi. Metode ini sangat bagus ketika anda mengunduh js yg agak berat (seperti sdk facebook, google analytics, dll)

Kesimpulan

Pengalaman pengguna yang perlu diperhatikan oleh setiap webmaster, ketika menjumpai situs web dengan pemuatan yang lambat, itu akan membuat mereka meninggalkan situs anda (F). Jadi selain konten, anda juga perlu mempertimbangkan masalah mengoptimalkan waktu membuka halaman.

Cara di atas adalah pengalaman yang saya pelajari dalam proses meningkatkan kinerja halaman blog Aurealisa ini.. yaudah cukup sekian artikel mengenai 13 Cara Mempercepat Loading Blogger ini, semoga bermanfaat.

Add your comment Hide comment