Cara Mengatasi Render Blocking CSS dan Jquery

joesep 2018-01-16 689

Cara Mengatasi Render Blocking CSS dan Jquery - Oke kali ini saya akan membagi tips cara membuka blokir CSS dan Jquery yang dapat penundaan halaman anda pada saat rendering. Oke mungkin banyak dari para blogger saat mengecek kecepatan website di PageSpeed Insights performa web merah atau dibawah 50% sehingga butuh pengoptimalan. pengoptimalan pada CSS dan Jquery yang memblokir perenderan bisa kita lakukan dengan memasukan kode css external ke line internal dan untuk JavaScript atau kode jquery bisa kita tambahkan kode sync, jika file CSS anda sedikit lebih baik dibuat inline atau dibuat satu halaman tanpa include file begitu juga dengan kode javascript.

 

 

Pengoptimalan pada CSS

 

Optimalkan pengiriman CSS, saran dari PageSpeed Insight seperti ini muncul karena ada CSS eksternal yang memblokir perenderan. Saran saya kalau memang file CSS nya sedikit, lebih baik sobat jadikan inline. Jika di template sobat terdapat CSS eksterna. Contohnya, untuk fonts googleapis linknya mirip seperti ini.

 

 

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' 
rel='stylesheet' type='text/css'/>

 

 

Silahkan tambahkan script berikut kedalam template sobat. Berikut ini contoh penggunaan scriptnya, script berikut saya contohkan untuk Font Awesome 3.2.0.

 

 

<script type='text/javascript'>
//
var cb=function(){var e=document.createElement('link');
e.rel='stylesheet',e.href='//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css';
var t=document.getElementsByTagName('head')[0];
t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb);
//]]>script>

 

Pengoptimalan pada Jquery/Javascript 

 

Untuk mengatasi render blocking JavaScript dan CSS ini bisa menambahkan atribut HTML async='async' pada JavaScriptnya. Tapi atribut async='async' hanya berfungsi pada Script eksternal atau script yang ada atribut src=''. Berikut ini contoh penerapan menggunakan atribut asynchronous.

 


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

 

Atau bisa menggunakan script berikut untuk JS eksternal, silahkan pilih salah satu. Perbedaan dari kedua script dibawah adalah, script pertama akan mengambil script ekternal setelah semua laman dimuat, sedangkan script kedua, script eksternal dimuat secara bersamaan dengan laman. 

 


<script type='text/javascript'> //
function parPudi() {
var element = document.createElement("script");                      
element.src = "http://DISINI_URL_SCRIPT_EKSTERNAL.js;
 document.body.appendChild(element);
 }
 if (window.addEventListener)
 window.addEventListener("load", parPudi, false);
 else if (window.attachEvent)
 window.attachEvent("onload", parPudi);
 else window.onload = parPudi;
//]]>

 

Atau anda bisa gunakan script ini. script ini dimuat secara bersamaan dengan laman.

 


<script type='text/javascript'>
//
var cb=function(){var e=document.createElement('script');e.src='DISINI_URL_SCRIPT_EKSTERNAL.js';
var t=document.getElementsByTagName('body')[0];
t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb);
//]]>script>

 

 

oh iyah, perlu anda ketahui jika anda menggukanakan  atribut asynchronous lebih baik di cek dulu blog atau websitenya apakah bekerja, karena dengan menambahkan atribut asynchronous kemungkina ada kode javascript yang tidak bekerja. kalau tidak bekerja lebih baik pakai kode di atas.

 

Oke terimakasih sekian tutorial kali ini semoga berhasil.

Rekomendasi Artikel


Terbaru dari Webmaster



Search


Top Stories


  1. Membuat Perulangan Segitiga Bintang Dengan PHP

    on 2018-01-12

  2. Membatasi Jumlah Karakter dengan PHP

    on 2018-01-23

  3. Kenapa Telinga Gatal dan Berair

    on 2018-04-13

  4. Membuat Tanggal dan Zona Waktu Sederhana dengan PHP

    Admin on 2017-11-26

  5. Membuat Paragraf Otomatis dengan Script PHP

    on 2018-01-26

Other Post


Top Videos


  1. FILM Horor Terbaru "SABRINA THE DOLL 2" Full Movie 2018

    Andri03 on 2018-08-01

  2. Sandiaga Uno Resmi Mundur dari Ketua Tim Pemenangan Partai Gerindra

    joesep on 2018-07-31

  3. Founder SB1M dan Pemilik Distro BLOOP ini BANGKIT dari BANGKRUT 16x dan HUTANG 11M | Christina Lie

    joesep on 2019-06-04

  4. vivo Z1 Pro VS OPPO A9 2020 | Duel HP 3 Jutaan Terbaik 2019!

    joesep on 2019-09-26

  5. Aplikasi Kasir Point of Sale Restoran / Kafe Berbasis WEB

    joesep on 2018-08-15

close