Ini Cara mempercepat loading blog hingga skor 100

Discussion in 'HTML & Website Design' started by Espedia, Apr 8, 2017.

Tags:
  1. Espedia

    Espedia Member

    Joined:
    Apr 6, 2017
    Messages:
    20
    Likes Received:
    3
    Trophy Points:
    8
    pada kesempatan kali ini saya akan berbagi tutorial Cara mempercepat loading blog sampai skor 100/100 mungkin bisa berguna - KECEPATAN akses memuat blog termasuk salah satu dari teknik seo yang tidak andan lupakan.
    Ini adalah sebuah cara yang sudah saya terapkan di blog, dan hasil nya oun sangatlah memuas kan berikut ss nya :
    [​IMG]

    Cari kode dibawah ini:
    <b:skin><![CDATA[Silakan ganti dengan kode dibawah ini:
    &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin> <style type='text/css'> /*<![CDATA[*/Cari juga kode dibawah ini:
    ]]></b:skin>Silakan ganti dengan kode dibawah ini
    /*]]>*/ </style>Tambahan, cari kode dibawah ini:
    <head>Silakan ganti dengan kode dibawah ini:
    &lt;head&gt;Cari juga kode dibawah ini:
    </head>Silakan ganti dengan kode dibawah ini:
    &lt;/head&gt;&lt;!--<head/>--&gt;Simpan template.

    2. Menyembunyikan Javascript Widget Blogger dan Google PlusSama CSS bawaan blogger kurang lebih nya seperti ini:
    <script type="text/javascript" src="//www,blogger.com/static/v1/widgets/916259663-widgets.js"></script>
    <script type="text/javascript" src="//apis,google.com/js/plusone.js"></script>Javascript widget blogger dan google plus ini tidaka akan bisa dicari dieditor Html blogger, Tapi kalau anda view source (ctrl+u) maka akan terlihat kodenya tepat diatas kode:
    </body>kode js(Javascript) external ini merupakan masalah dalam loading blog anda. karena js ini sangat berat di muat dan tentunya menyebabkan render blocking javascript pada PageSpeed Insights.

    Ini cara mengatasinya.
    Cari kode berikut:
    </body>Silakan ganti dengan kode dibawah ini
    &lt;!--</body>--&gt;&lt;/body&gt;Simpan template.

    3. Asingkron Loading CSS Eksternal Terkadang di dalam sebuah template blog anda terdapat sebuah css eksternal yang harus dipanggil seperti misalnya jenis css: font yang sangat penting untuk blog, kita tidak bisa menghilangkannya atau menyembunyikannya baik font untuk tampilan tulisan ataupun font icon seperti font awesome karena akan berpengaruh terhadap tampilan blog anda. Serta disisi lain, CSS font ini merupakan CSS eksternal yang harus dipanggil dan tentunya menyebabkan masalah render blocking css pada PageSpeed Insight, berikut solusi cara mengatasinya yaitu dengan menggunakan script yang bisa menload css eksternal blog anda seperti google font, dan font awesome secara asingkron sehingga tidak membebani loading blog.

    Silakan simpan kode berikut diatas kode </head> :
    <script>
    //<![CDATA[
    function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
    loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
    //]]>
    </script>Anda bisa menganti link css eksternalnya diatas yang saya warnai dengan css di blog anda, apabila terdapat lebih dari satu css yang mau diload secara asingkron tinggal tambahkan lagi kode ini loadCSS (" <!--kode css external--> ");

    maka menjadi seperti ini:

    <script>
    //<![CDATA[
    function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
    loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
    loadCSS("//fonts.googleapis.com/css?family=Open+Sans+Condensed:700");
    loadCSS("//www,blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css");
    //]]>
    </script>4. Asingkron Loading Javascript Eksternal dan Mengabung Javascript EksternalJavascript sangatlah menyumbang loading blog kita, sebenarnya banyak cara untuk membuat blog anda tetap ringan meskipun banyak javascript. Ya saran saya sebisa mungkin dikurangi penggunaan javascript yang tidak penting, akan tetapi kalau tinggal yang penting tapi masih berat loadingnya dan terdapat masalah render blocking js maka bisa dicoba cara mudah dibawah ini.
    Untuk Javascript Eksternal, misal kodenya:
    <script type="text/javascript" src="//cdn,rawgit.com/masarifid/file/gh-pages/allin.js"></script>Maka cukup tambahkan async="async"sehingga kodenya menjadi seperti ini:
    <script type="text/javascript" async="async" src="//cdn,rawgit.com/masarifid/file/gh-pages/allin.js"></script>Bisa anda terapkan untuk semua javascript eksternal kecuali tidak untuk "jquery" (ada caranya nanti berbeda), selain itu letakan juga kode javascript eksternal dibagian bawah sendiri atau diatas kode </body>

    Dan cara untuk Javascript Internal, karena blog anda pastinya memiliki banyak sekali javascript internal walaupun tidak begitu memberatkan, Tetapi agar loading blog dapat lebih ringan saya sarankan untuk mengabungnya menjadi satu saja. Contoh:

    JS 1:
    <script type='text/javascript'>
    //<![CDATA[
    $("img").each(function(){$(this).attr("data-src",$(this).attr("src"));$(this).attr("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=")});
    function init(){var e=document.getElementsByTagName("img");for(var t=0;t<e.length;t++){if(e[t].getAttribute("data-src")){e[t].setAttribute("src",e[t].getAttribute("data-src"))}}}window.onload=init;
    //]]>
    </script>JS 2:
    <script>
    //<![CDATA[
    function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var appended=!1,bookmark2=document.createElement("div");bookmark2.id="backtotop",bookmark2.innerHTML='<span class="ani-dur ani-name" onclick="return false;" onmousedown="resetScroller(&quot;header-wrapper&quot;);"><i class="fa fa-chevron-circle-up fa-3x"></i></span>',onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>600?appended||(document.body.appendChild(bookmark2),appended=!0):appended&&(document.body.removeChild(bookmark2),appended=!1)};var scrollY=0,distance=40,speed=24;
    //]]>
    </script>Maka bisa anda gabung menjadi satu, mejadi seperti ini:
    <script>
    //<![CDATA[
    $("img").each(function(){$(this).attr("data-src",$(this).attr("src"));$(this).attr("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=")});
    function init(){var e=document.getElementsByTagName("img");for(var t=0;t<e.length;t++){if(e[t].getAttribute("data-src")){e[t].setAttribute("src",e[t].getAttribute("data-src"))}}}window.onload=init;
    function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var appended=!1,bookmark2=document.createElement("div");bookmark2.id="backtotop",bookmark2.innerHTML='<span class="ani-dur ani-name" onclick="return false;" onmousedown="resetScroller(&quot;header-wrapper&quot;);"><i class="fa fa-chevron-circle-up fa-3x"></i></span>',onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>600?appended||(document.body.appendChild(bookmark2),appended=!0):appended&&(document.body.removeChild(bookmark2),appended=!1)};var scrollY=0,distance=40,speed=24;
    //]]>
    </script>Setiap kelompok js internal ada pemisah dengan menggunakan ; agar tidak tercampur fungsinya. Saya sarankan diletakan diatas kode </body>

    5. Cara Mengatasi Render Blocking Jquery Library.
    Javascript dari jquery library ini teryata juga menjadi masalah render blocking js pada PageSpeed Insights, hal ini tentunya akan membuat blog anda berat di muat.

    Berikut cara mengatasi javascript jquery library:
    <script type="text/javascript" src="/ajax.googleapis.com/ajax/libs/jquery/3.0,0/jquery.min.js"></script>Maka cukup tambahkan async="true" sehingga kodenya menjadi seperti ini:
    <script type="text/javascript" async="true" src="//ajax.googleapis.com/ajax/libs/jquery/3.0,0/jquery.min.js"></script>6. Menganti Gambar Pada CSS dengan Base64.
    Dalam kode css pada Html template anda pasti ada yang menggunakan url gambar, baik digunakan untuk background maupun icon.
    Dengan menggunakan url tersebut akan menambah permintaan http blog anda sehingga waktu loadnya menjadi agak lama.
    Ini solusinya, dengan mengubah link gambar pada css dengan base64, misal:
    #nav {
    font: bold normal 11px Arial, sans-serif;
    background: #333 url(hxxp://2,bp.blogspot.com/-lqUfhYdJt_U/U7gGFr_ojMI/AAAAAAAAAW0/yz6DrC0_A80/s1600/hiasan.png) no-repeat bottom center;
    margin: 0 auto;
    padding: 0 0;
    text-transform: uppercase;
    height: 36px;}Maka saya ganti menjadi base64 menjadi berikut:
    #nav {
    font: bold normal 11px Arial, sans-serif;
    background: #333 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7EAAAACCAYAAACOlVsfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAGDSURBVFhH7di9S0JhFMfx50JrtAmFexBBFGq6hk1B/4BJ0OjQJjUUWfSKonJJIhDKxJauiEtLEGINgUpDWZQVqeUShuXLo3LvPT3+Ec+9DWf4cfbv9jlEkEqA06BBvAwk8QkkXpQHwvnqrCv5sWMLtA7HvXBg9sO+BcerQcgSgJBVBNHsk0MjK9/HxoXKicHRig3OwemQE2I4bg2irG2EdZaM85AddkFtwg1d8zK0TEvQxHFrQFlbylrXJ9yNun3zpbt49NRdkxqwkQBYlwA8ZzhuDRKges6h7Yl22tuOr3awn410VJEAiAKOZ4OgAHJAUGlYkOmFoCg51vuWrXezON4NaE5Qy/dEfnwgSuGZwFsBx7NB8ZXAO2t8l++jyYyh6k+NNrdSVmU3bYO99CSOYwPftQm8qTF19XLmx3kVKU3fVGpTGarYcxTs2TrbL06DBgQBqwFge48CRKxuUEfE6gd1RKw+WEfE6ol0RKxuWEfE6op1RKy2aEfE6gd1ROz/QPof/xJz8oYz+iAAAAAASUVORK5CYII=') no-repeat bottom center;
    margin: 0 auto;
    padding: 0 0;
    text-transform: uppercase;
    height: 36px;}Apabila, jika anda tidak mau repot" mengubahnya, saya sarankan hanya menghapus http: menjadi seperti yang diwarnai ini.
    #nav {
    font: bold normal 11px Arial, sans-serif;
    background: #333 url(//2.bp.blogspot.com/-lqUfhYdJt_U/U7gGFr_ojMI/AAAAAAAAAW0/yz6DrC0_A80/s1600/hiasan.png) no-repeat bottom center;
    margin: 0 auto;
    padding: 0 0;
    text-transform: uppercase;
    height: 36px;}Anda bisa bandingkan loadnya cepat mana..?? http atau base64:
    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7EAAAACCAYAAACOlVsfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAGDSURBVFhH7di9S0JhFMfx50JrtAmFexBBFGq6hk1B/4BJ0OjQJjUUWfSKonJJIhDKxJauiEtLEGINgUpDWZQVqeUShuXLo3LvPT3+Ec+9DWf4cfbv9jlEkEqA06BBvAwk8QkkXpQHwvnqrCv5sWMLtA7HvXBg9sO+BcerQcgSgJBVBNHsk0MjK9/HxoXKicHRig3OwemQE2I4bg2irG2EdZaM85AddkFtwg1d8zK0TEvQxHFrQFlbylrXJ9yNun3zpbt49NRdkxqwkQBYlwA8ZzhuDRKges6h7Yl22tuOr3awn410VJEAiAKOZ4OgAHJAUGlYkOmFoCg51vuWrXezON4NaE5Qy/dEfnwgSuGZwFsBx7NB8ZXAO2t8l++jyYyh6k+NNrdSVmU3bYO99CSOYwPftQm8qTF19XLmx3kVKU3fVGpTGarYcxTs2TrbL06DBgQBqwFge48CRKxuUEfE6gd1RKw+WEfE6ol0RKxuWEfE6op1RKy2aEfE6gd1ROz/QPof/xJz8oYz+iAAAAAASUVORK5CYII=Silakan buka http//dopiaza,org/tools/datauri/index.php lalu pilih yang Retrieve file from a URL disini anda tinggal mengopy saja url gambarnya maka otomatis menjadi bentuk base64, copy deh base64nya ganti url gambar yang ada pada css dengan gambar base64. Ada penambahan ' ' jika menggunakan base64 bisa dilihat pada kode diatas (ini-link-gambar.jpg) menjadi ('data:image/png;base64......').

    7. Agar loading blog bisa lebih maksimal, Gambar-gambar diblog baik yang ada diwidget maupun postingan merupakan faktor dari penyebab loading blog anda berat, berikut triknya agar blog anda tetap ringan walaupun menggunakan banyak gambar.

    Silakan simpan kode dibawah ini diatas kode </body>
    <script type='text/javascript'>
    //<![CDATA[
    for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl.getAttribute("src")&&(imgEl.setAttribute("data-src",imgEl.getAttribute("src")),imgEl.removeAttribute("src"),imgEl.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));console.log(document.body.innerHTML);
    var imgDefer=document.getElementsByTagName("img");for(var i=0;i<imgDefer.length;i++){if(imgDefer.getAttribute("data-src")){imgDefer.setAttribute("src",imgDefer.getAttribute("data-src"))}};
    //]]>
    </script>Fungsi kode diatas adalah menambahkan gambar tipuan yang hanya berukuran beberapa byte pada gambar yang ada diblog anda. Gambar tipuan tersebut diletakan di src="" dan gambar asli ditaruh pada data-src="" dimana browser nantinya mengira gambar aslinya adalah gambar tipuan, dan gambar asli baru diload setelah semua diload. Jadi loading blog jauh lebih ringan.

    8. Mengompress Gambar Yang Ada di Blog Anda
    Ini penting, saya menyarankan anda mengompress setiap gambar yang ada diblog anda baik diwidget yang berupa baner iklan, ataupun gambar yang ada dipostingan. Dengan mengompress gambar kita bisa mendapatkan gambar dengan kualitas gambar yang sama tetapi dengan ukuran yang lebih kecil. Tentunya hal ini dapat meringankan loading blog anda.
    Kalau saya sendiri biasa menggunakan kraken.io/web-interface ada dua mode disana yaitu lossy (kompresi tinggi dengan sedikit menurunkan kualitas gambar) dan lossless (kompresi ringan tanpa menurunkan kualitas gambar) yang tinggi kompresinya tentunya ukuran gambar akan menjadi lebih kecil dan lebih ringan ketika diload.

    9. Mengompress Template Blog Yang Anda Gunakan
    Dalam sebuah template pasti ada baris kosong hal ini yang membuat proses pembacaan blog menjadi lebih lama, anda bisa mengompress template blog anda untuk merapatkan barisan.
    Berikut caranya:
    - Silakan buka template blog anda di editor template blog, copy semua kodenya.
    - Buka htmlcompressor.com/compressor/
    - Silakan pastekan kode template anda pada tab source, lalu klik tombol berwarna hijau compress. Dan bila ada munculan untuk mengubah code type menjadi blogger/xml silakan diklik change saja.
    - Maka akan keluar kode yang sudah dicompress, silakan dicopy, dan pastekan di editor template blogger anda. Simpan template.

    Semoga tutor ini berhasil kamu terapkan di blogmu juga, kurang paham ayo diskusikan.

    Sumber: https://blogespedia.blogspot.com
     
    Espedia, Apr 8, 2017
    #1
    ngeblogasyikk likes this.
  2. Yudith Hentreisa

    Yudith Hentreisa New Member

    Joined:
    Apr 9, 2017
    Messages:
    3
    Likes Received:
    1
    Trophy Points:
    3
    wah terimakasih infonya gan.. punya ane cuma sampe 90+++ %
     
    Yudith Hentreisa, Apr 9, 2017
    #2
  3. gerijogja

    gerijogja Member

    Joined:
    Mar 19, 2017
    Messages:
    136
    Likes Received:
    8
    Trophy Points:
    18
    kalau pakai wordpress lbh enak lagi, tinggal instal pluggin cache aja.
     
    gerijogja, Apr 22, 2017
    #3
  4. #BOOM

    #BOOM New Member

    Joined:
    Jun 11, 2016
    Messages:
    7
    Likes Received:
    2
    Trophy Points:
    3
    Livelinknya gan :) waduh
     
    #BOOM, Apr 22, 2017
    #4
  5. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,254
    Likes Received:
    2,716
    Trophy Points:
    413
    link live = url/anchor text yang dapat diklik :)

    https://www.bersosial.com >> link live
    https: // www. bersosial.com / bersosial.com >> bukan link live, hanya teks biasa
     
    KangAndre, Apr 22, 2017
    #5
  6. #BOOM

    #BOOM New Member

    Joined:
    Jun 11, 2016
    Messages:
    7
    Likes Received:
    2
    Trophy Points:
    3
    Maaf mas andre td tapatalk sy ngebug, aduhhh
    Td mau sy komen dithread di forum sebelah. Skli lagi maaf mas andre hehee
     
    #BOOM, Apr 22, 2017
    #6
    KangAndre likes this.
  7. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,254
    Likes Received:
    2,716
    Trophy Points:
    413
    Nggak masalah...
    Thread ini emang perlu dirapikan agar enak baca-nya...
     
    KangAndre, Apr 22, 2017
    #7
    #BOOM likes this.
  8. graficurl

    graficurl Member

    Joined:
    Mar 9, 2017
    Messages:
    90
    Likes Received:
    2
    Trophy Points:
    8
    Kalau untuk wordpress gimna gan ? Apakah ada solusi?
    ini contoh website saya : windownesia.co.id
    Karena loading juga pengaruh di skor SEO ya
     
    graficurl, Apr 22, 2017
    #8
  9. faylaafcharina

    faylaafcharina Member

    Joined:
    Mar 17, 2015
    Messages:
    173
    Likes Received:
    13
    Trophy Points:
    18
    gdubrakkk.... pingsan ane gan , pas selesai baca tulisan HTML
     
    faylaafcharina, Sep 1, 2017
    #9
  10. anggigi190

    anggigi190 Member

    Joined:
    Sep 1, 2017
    Messages:
    43
    Likes Received:
    1
    Trophy Points:
    8
    keren amet ya ampe 100 gitu, ada sample blog nya enggak gan?
     
    anggigi190, Sep 1, 2017
    #10
  11. Rswd

    Rswd Member

    Joined:
    Dec 11, 2017
    Messages:
    115
    Likes Received:
    4
    Trophy Points:
    18
    Puyeng juga nih wkwkwkwkwkwk
     
    Rswd, Feb 4, 2018
    #11
  12. Muhammad Tamyiz

    Muhammad Tamyiz Member

    Joined:
    Jun 6, 2017
    Messages:
    31
    Likes Received:
    11
    Trophy Points:
    8
    Lumayan gan, setelah praktek bisa lebih enteng
     
    Muhammad Tamyiz, Feb 5, 2018
    #12
  13. Acep Husen

    Acep Husen Member

    Joined:
    Apr 8, 2018
    Messages:
    20
    Likes Received:
    2
    Trophy Points:
    8
    saya pusing liat kode programnya hahaha btw nice share untuk digunakan di blogger[dot]com
     
    Acep Husen, May 3, 2018
    #13
  14. Adang Hudayana

    Adang Hudayana Member

    Joined:
    Mar 22, 2018
    Messages:
    102
    Likes Received:
    8
    Trophy Points:
    18
    bikin pusing , yakin itu bisa buat load web jadi cepet , ?
     
    Adang Hudayana, May 19, 2018
    #14
Loading...
Similar Threads - Cara mempercepat loading
  1. Yandiahmadgandasaputra

    [ASK]Bagaimana caranya migrasi database Access ke Sql Server?

    Yandiahmadgandasaputra, Sep 16, 2020, in forum: HTML & Website Design
    Replies:
    0
    Views:
    4,910
    Yandiahmadgandasaputra
    Sep 16, 2020
  2. lalakana

    Cara Mudah Membuat Website Sederhana dengan WordPress

    lalakana, Jul 10, 2020, in forum: HTML & Website Design
    Replies:
    0
    Views:
    5,503
    lalakana
    Jul 10, 2020
  3. Goenawan2211

    Cara cepat Jadi Desainer Gagal

    Goenawan2211, Mar 9, 2020, in forum: HTML & Website Design
    Replies:
    1
    Views:
    6,099
    iron dumbbell
    Mar 10, 2020
  4. bukesinet

    Bagaimana Cara Membandingkan HTML Online

    bukesinet, Nov 2, 2018, in forum: HTML & Website Design
    Replies:
    1
    Views:
    4,098
    Blackboo
    Dec 18, 2018
  5. Pejuang Herbal

    Bahaya Melakukan Operasi Hernia Dan Cara Mengatasinya

    Pejuang Herbal, Aug 8, 2018, in forum: HTML & Website Design
    Replies:
    0
    Views:
    3,149
    Pejuang Herbal
    Aug 8, 2018

Share This Page