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 : Cari kode dibawah ini: <b:skin><![CDATA[Silakan ganti dengan kode dibawah ini: <style type="text/css"> <!-- /*<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: <head>Cari juga kode dibawah ini: </head>Silakan ganti dengan kode dibawah ini: </head><!--<head/>-->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 <!--</body>--></body>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("header-wrapper""><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("header-wrapper""><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. 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 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 #BOOM New Member Joined: Jun 11, 2016 Messages: 7 Likes Received: 2 Trophy Points: 3 Livelinknya gan waduh #BOOM, Apr 22, 2017 #4 KangAndre Member Joined: Jan 25, 2014 Messages: 10,244 Likes Received: 2,714 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 #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. KangAndre Member Joined: Jan 25, 2014 Messages: 10,244 Likes Received: 2,714 Trophy Points: 413 Nggak masalah... Thread ini emang perlu dirapikan agar enak baca-nya... KangAndre, Apr 22, 2017 #7 #BOOM likes this. 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 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 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 Rswd Member Joined: Dec 11, 2017 Messages: 115 Likes Received: 4 Trophy Points: 18 Puyeng juga nih wkwkwkwkwkwk Rswd, Feb 4, 2018 #11 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 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 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 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - Cara mempercepat loading [ASK]Bagaimana caranya migrasi database Access ke Sql Server? Yandiahmadgandasaputra, Sep 16, 2020, in forum: HTML & Website Design Replies: 0 Views: 4,738 Yandiahmadgandasaputra Sep 16, 2020 Cara Mudah Membuat Website Sederhana dengan WordPress lalakana, Jul 10, 2020, in forum: HTML & Website Design Replies: 0 Views: 5,276 lalakana Jul 10, 2020 Cara cepat Jadi Desainer Gagal Goenawan2211, Mar 9, 2020, in forum: HTML & Website Design Replies: 1 Views: 5,969 iron dumbbell Mar 10, 2020 Bagaimana Cara Membandingkan HTML Online bukesinet, Nov 2, 2018, in forum: HTML & Website Design Replies: 1 Views: 3,977 Blackboo Dec 18, 2018 Bahaya Melakukan Operasi Hernia Dan Cara Mengatasinya Pejuang Herbal, Aug 8, 2018, in forum: HTML & Website Design Replies: 0 Views: 2,986 Pejuang Herbal Aug 8, 2018 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
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
Maaf mas andre td tapatalk sy ngebug, aduhhh Td mau sy komen dithread di forum sebelah. Skli lagi maaf mas andre hehee
Kalau untuk wordpress gimna gan ? Apakah ada solusi? ini contoh website saya : windownesia.co.id Karena loading juga pengaruh di skor SEO ya