13 Cara Mempercepat Loading Blogger
Log In

13 Cara Mempercepat Loading Blogger

Monday, December 2, 2019, 9:19 PM

Sebelum memulai tutorialnya, silahkan backup terlebih dahulu templatenya untuk menghindari kesalahan yang tidak di-inginkan.

Setelah 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
Formulir Kontak.
Statistik blog
Widget Tayangan Slide
Blog arsip
Widget Wikipedia
Widget newsreel
Pencarian disediakan oleh blogger
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.

Untuk 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 Saya 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.


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 formulirfunction >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 tombolfunction 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 Jqueryfunction 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 tutorial.idnews.co ini.. yaudah cukup sekian artikel mengenai 13 Cara Mempercepat Loading Blogger ini, semoga bermanfaat.
Baca Juga
Sign out

TerPopuler