Defer loading css js

Cara defer loading javascript atau menunda pemanggilan javascript di blogger
Berfungsi untuk :

1. Mempercepat loading blog website / meningkatkan kecepatan loading website blog.
2. Mengurangi ukuran halaman website.
3. Meningkatkan score pagespeed google.
4. Meningkatkan konten yang terlihat.
5. Mempermudah edit template di mobile phone / hape.

Menunda javascript berarti benar-benar memuat atau mem-parsing javascript itu hanya dimulai setelah konten halaman dimuat (Artinya tidak akan memengaruhi kecepatan halaman atau jalur render kritis).
Menggunakan acara "onload", kami menyebutnya javascript eksternal Javascript eksternal tidak akan dimuat sebelum konten halaman dimuat Javascript eksternal kemudian akan berjalan dan mempengaruhi halaman

Penjelasan

Menunda javascript adalah salah satu masalah di web yang dapat membuat Anda ingin menarik rambut Anda mencoba mencari solusi.
Banyak orang mengatakan "gunakan saja penundaan" atau "gunakan saja async" atau yang lain mengatakan "letakkan saja javascript Anda di bagian bawah halaman" tetapi tidak ada yang memecahkan masalah yang sebenarnya memungkinkan halaman web untuk memuat penuh dan kemudian (dan hanya kemudian) memuat JS eksternal. Mereka juga tidak akan membuat Anda melewati peringatan "Tunda pemuatan javascript" yang Anda dapatkan dari alat kecepatan halaman Google. Solusi ini akan.
Tutorial defer loading javascript :

1. Buka template XML anda.
2. Cari Tag <title></title> atau bagian paling atas sebelum tag <script></script> pertama (Before load).
3. Lalu masukkan kode ini :

   Options (^{Choose 1}):
   • title tag: taruh dibawahnya
   • script tag pertama: diatasnya

Native jika EDIT HTML dari blogger langsung.

<script>String.prototype.CSS=function(){var e=document.createElement("link");e.rel="stylesheet",e.href=this;var t=document.getElementsByTagName("head")[0];window.addEventListener?window.addEventListener("load",function(){t.parentNode.insertBefore(e,t)},!1):window.attachEvent?window.attachEvent("onload",function(){t.parentNode.insertBefore(e,t)}):window.onload=t.parentNode.insertBefore(e,t)},core={js:function(e,t){var n=document.body||document.head,o=document.createElement("script");o.type="text/javascript",o.src=e,o.onreadystatechange=t,o.onload=t,n.appendChild(o)}};</script>

Entities format jika EDIT XML manual dari kode editor, dsb.

<script>String.prototype.CSS=function(){var e=document.createElement("link");e.rel="stylesheet",e.href=this;var t=document.getElementsByTagName("head")[0];window.addEventListener?window.addEventListener("load",function(){t.parentNode.insertBefore(e,t)},!1):window.attachEvent?window.attachEvent("onload",function(){t.parentNode.insertBefore(e,t)}):window.onload=t.parentNode.insertBefore(e,t)},core={js:function(e,t){var n=document.body||document.head,o=document.createElement("script");o.type="text/javascript",o.src=e,o.onreadystatechange=t,o.onload=t,n.appendChild(o)}};</script>

Kode diatas fungsi untuk memanggil CSS dan JS secara Dynamic Asynchronous, dan dapat membuat loading style yang perfect dan timing yang pas. karena sudah dilengkapi kode listener khusus.
Script diatas juga merupakan extender dari Stringclass Constructor Bawahan Browser (khususnya browser modern).

Cara penggunaan

'LINK-CSS.css'.CSS(); //untuk memanggil CSS
core.js('LINK-JS.js', function(){/*callback optional*/}); //untuk memanggil JS/javascript

Contoh

core.js('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js', function(){/*callback optional*/});

'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css'.CSS();

Tugas anda sekarang adalah memisahkan setiap css yang berada di inner style ke dalam file CSS filename.css lalu upload ke hosting atau cdn kalian. Coba baca Cara membuat repository github untuk store file css, js, dan lain" dan memiliki CDN milik sendiri.

Hasil

Pagespeed Google.

• defer loading css js perfectly

Share this post