Cara Mengatasi Render-Blocking Javascript DI PageSpeed Insights

Untuk keperluan PageSpeed Insights agar penggunaan script seperti javascript pada jQuery Library bisa kita sembunyikan penempatanya. namun saya tidak bisa mengatakan dengan mengatasi masalah ini bisa membuat speed halaman web/blog lebih cepat. karana pada dasarnya halaman akan membaca keseluruhan penggunaan script yang ada.
Pernahkah anda mengalami seperti ini.

Karena pada script jQuery kita tidak di set Asynchronous (Async). cara mengatasinya lihat pada script jQuery anda. tempatkan Attribute async pada script tersebut seperti ini

<script async src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>

untuk pengguna template XML agar bisa tersimpan - async='async'

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>

lihat penggunaan Attribute async
Cara lain dengan Javascript sebagai pemanggil url script.

<script type='text/javascript'>
(function() {
var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true; // set true untuk async jquery
    s.src = ('https:' == document.location.protocol ? 'https' : 'http') +
       '://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

untuk permasalahan yang mungkin terjadi pada beberapa kasus untuk template blogger bisa lihat tutorialnya pada asynchronous javascript pada blogger

Asynchronous Javascript Pada Blogger Tidak berjalan pada Firefox ?

Bagi para pengguna Template XML Blogger yang berniat untuk set javascript dari jQuery Library menjadi async (Asynchronous). mungkin ini di maksudkan Mengatasi Render-Blocking Javascript alhasil script jquery yang ada malah tidak berjalan pada peramban tertentu semisal firefox padahal kalau di buka pada browser Chrome/Opera berjalan lancar. lalu apa masalahnya ?
kemungkinan terjadi karena template Blogger anda valid HTML5. kok bisa ?
coba lihat pada template blogger anda temukan code <head>. tapi untuk kebutuhan agar valid HTML5 / hidden CSS Bundle Blogger biasanya kalian rubah menjadi <head> dan penutupnya menjadi </head>.
nah agar script jquery berjalan kembali cukup ganti code tadi menjadi <head> kembali tapi akan membuat template anda tidak valid HTML5 lagi bahkan Render-Blocking bertambah pada CSS Bundle BLogger.
Terus caranya agar Asynchronous Javascript Jquery tetap berjalan namun valid HTML5 juga bagaimana ?
Pertama lihat apakah anda sudah menempatkan script jquery librarynya. jika belum itulah penyebab utama kenapa script jquery lain tidak berjalan ^_^.
coba pasang script jquery librarynya yang sudah di set Async. (jika yang sudah ada abaikan)

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' async='async' type='text/javascript'></script>

bisa juga seperti ini
diskusikan jika ada masalah pada script ini.

<script type='text/javascript'>
(function() {
var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true; // set true untuk async jquery
    s.src = ('https:' == document.location.protocol ? 'https' : 'http') +
       '://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

Tempatkan code di atas biasanya penempatan sebelum penutup <head>.
contoh:

<head>

//Script Pasang di antara Tag Head

</head>

Sekarang memasuki kasus permasalahnnya.
Ask. "Saya sudah pasang jQuery di atas dan script jQuery yang sudah ada tidak berjalan pada firefox ?".
itu di karenakan karena tidak adanya fungsi callback script jQuery dimana penutup tag head yang sudah di rubah menjadi <head> menjadikan script librarynya tidak di ketahui penempatannya oleh Firefox.
cara mengatasinya.
script jQuery yang sudah ada tinggal tambahkan callback onload ceperti ini.

window.onload = function () {

//scipt jQuery anda
// seperti back to top atau apa sajalah yang berkaitan dengan jQuery

};

contoh penggunaanya misal script yang sudah ada pada bagian </body> seperti ini

<script type='text/javascript'>
//<![CDATA[
window.onload = function () {

    $('tagID 1, tagID 2').each(function() {
       //script lainnya
    });

    or

    function() {
      //script lainnya
    }

};//penutup onload
//]]>
</script>

Seharusnya dengan penambahan script di atas script jQuery anda akan berjalan lancar di semua Browser.
Tinggal kalian test saja bagaimana hasilnya dan buka pada beberapa peramban browser anda. apa sudah tidak ada masalah atau masih tidak berjalan.
cara lain mengatasi Render-Blocking Pada CSS atau Javascript saya buat pada artikel terpisah.
Cara Mengatasi Render-Blocking Javascript DI PageSpeed Insights
selebihnya kalian bisa diskusikan permasahannya

Mengganti Logo Header menggunakan image SVG

Seperti pada artikel menggunakan svg untuk penggabungan icon mengatakan tidak merekomendasikan mengganti logo header SVG dengan cara itu. Kenapa ? svg berbasis xml, setahu saya google index images lebih menyarankan url dalam tag <img src/> beserta atribut alt (ralat kalau admin salah mendefinisikan ^_^). meskipun saat ini Google sudah punya perangkat lunak yang berjalan untuk menangani SVG sebagai bitmap (konversi ke JPG) terlebih google pernah mengatakan "We index SVG content whether it is in a standalone file or embedded directly in HTML link". namun untuk embed SVG mentah langsung pada HTML saya masih meragukannya apa benar google bisa mengkonversi langsung dengan gambar utuh, tujuan pada artikel ini adalah untuk menghindari kasus-kasus seperti itu, dari pada ragu mending cari aman saja.
terus bagaimana menggunakan SVG untuk Logo header agar tetap terindex pada SEO images google ?

Image publishing guidelines.
Optimalisasi Gambar.

Biasanya ketika kita memasang SVG langsung pada HTML akan menggunakan baris code kurang lebih seperti ini.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

kalau hanya untuk menggunakan SVG pada icon-icon tertentu tidak jadi masalah. namun untuk logo header saya tidak menyarankan memasang langsung code tersebut.
alangkah baiknya Logo header tetap dalam bentuk <img src/> saja.
Rekomendasi penggunaan logo header dengan images.

cara 1 : format gambar bisa berupa svg/png/jpg/gif ataupun webp(Chrome, Opera, Android) ataupun JPEG XR (IE).

<img src="../images/logo.svg/png/jpg/gif" alt="logo Header Blog">

<img src="data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath ........  %3e%3c/path%3e%3c/g%3e%3c/svg%3e" alt="logo Header Blog">

Saya tidak menyarankan penggunaan background image CSS untuk mengganti logo header karena tidak semua Browser support.
kecuali kalian menggunakan bantuan javascript. apapun itu tetap tidak baik hal penting seperti logo header jika tetap memaksaan menggunakan background images. seperti yang saya bilang kita cari aman saja ^_*

.logo { 
  background-image: url("logo/image.svg");
  background-repeat: no-repeat;
  background-color:transparent;
}

/*
atau
===================================================
*/

.logo {
   background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath ........  %3e%3c/path%3e%3c/g%3e%3c/svg%3e");
   background-repeat:no-repeat;
   background-color:transparent;
}

Cara 2 : SVG Fallback - Guide
SVG Fallback Rekomendasi
ambil url logo dengan format PNG dan SVG dan letakan dimana logo anda akan di tampilkan

<img src="../images/logo.svg"
 data-fallback="../images/logo.png"
       alt="SVG Support Icon"/>

Simpan Javascript pada HTML biasanya di letakan di atas </body>
<script type="text/javscript">

function svgasimg() {
  return document.implementation.hasFeature(
    "http://www.w3.org/TR/SVG11/feature#Image", "1.1");
}

if (!svgasimg()){
  var e = document.getElementsByTagName("img");
  if (!e.length){
    e = document.getElementsByTagName("IMG");
  }
  for (var i=0, n=e.length; i<n; i++){
    var img = e[i],
        src = img.getAttribute("src");
    if (src.match(/svgz?$/)) {
      /* URL ends in svg or svgz */
      img.setAttribute("src", 
             img.getAttribute("data-fallback"));
    }
  }    
}

</script>

Hasil Code di atas seperti ini

Example

Kesimpulannya tautan url img lebih cepat terkonversi google dibanding jenis xml langsung pada html.

Segala kekurangan tentang tutorial mengganti logo header menggunakan gambar SVG bisa kalian pertimbangkan mana yang lebih baik. mungkin di antara pembaca ada yang lebih tahu dengan SEO images google.
di sini saya hanya membantu sedikit bagi yang awam cara menggunakan SVG pada logo header saja.

Compress gambar untuk mempercepat loading web atau blog

Salah satu tips untuk mempercepat muat halaman web/blog salah satunya adalah mengurangi loading Gambar atau memuat tampilnya sebuah gambar.
Di antara para blogger mungkin dengan menyisipkan sebuah gambar pada artikel akan membuat lebih menarik terutama artikel yang membutuhkan gambar itu menjadi kewajiban. tapi apa dengan menyisipkan gambar para pengunjung akan nyaman. apalagi ketika loading membuka gambar itu terasa lama, otomatis pengunjung akan kabur dan cari info di blog lain. (Pengalaman pribadi ^_^)
Untuk memperkecil ukuran gambar tersebut tanpa mengurangi dimensi/resolution gambar silahkan kalian kunjungi beberapa web berikut untuk compress images (bisa mengatur kualitas sesuai yang di butuhkan):

Jenis gambar (JPG,PNG,GIF) > Di sini

Rekomendasi opsi lain :

Jenis gambar PNG > Di sini
Jenis gambar JPG > Di sini
Jenis gambar GIF > Di sini

Penggunaan tool di atas cukup mudah tinggal drag and drop.
Semua tool sudah di uji untuk keperluan pada blog EdenCreative. Pengaruhnya untuk speed blog cukup baik, pengujian Speed Blog saya test pada PageSpeed Google Chrome

- Saya sarankan untuk setiap membuat gambar usahakan menggunakan dengan warna solid.(Opsional)
- Pengguna blogspot sekarang Sudah banyak template blogger AMP gratis.
(Untuk belajar mengoptimalkan Theme AMP saya akan buat artikel terpisah)