Mengatasi Render Blocking CSS dan Javascript

Oleh Unknown

Sabtu, 31 Mei 2014

Bagikan :

Tweet

Mengatasi Render Blocking CSS dan Javascript - Masalah ini biasanya akan muncul di PageSpeed Insights, sebuah alat dari Google untuk mengecek seberapa kecepatan blog yang mempunyai dua versi penilaian, yaitu versi desktop dan versi mobile. Untuk penilaiannya, sama dengan di GTmetrix, yaitu menggunakan presentase (%). Dan di PageSpeed Insights ini, anda bisa melihat dan mengetahui apa saja masalah-masalah yang ada di dalam blog anda yang bisa menyebabkan beban pada blog anda, termasuk render blocking itu sendiri. Sebelumnya, apa itu render blocking? Sebelum membahas apa itu render blocking, silahkan lihat screenshots yang saya ambil berikut.

Masalah Render Blocking JavaScript seperti yang terlihat di atas dengan keterangan Butuh Perbaikan.

Masalah Render Blocking JavaScript yang sudah teratasi dan nilai kecepatan blog bertambah.

Render Blocking artinya pemuatan. Jadi, jika javascript membuat blocking, itu berarti javacript-nya menahan halaman dari loading. Google sendiri menganjurkan untuk menghapus javascript yang dapat mengganggu dalam pemuatan konten halaman web anda. Secara khusus, jika Google melihat bahwa halaman web anda tidak memuat baik untuk perangkat tertentu, misalnya iPad, mereka tidak akan menyertakan web anda dalam hasil karena Google tidak ingin mengirim si penggguna untuk memperlambat halaman atau halaman menyebabkan pengguna menunggu cukup lama untuk konten tersebut. Dan ini biasanya disebabkan oleh render blocking itu sendiri.

Tapi, seringkali ini diabaikan oleh banyak orang. Padahal, jika kita mengetahui makna masalahnya, pasti masalah tersebut bukan masalah sepele.

Mengatasi Render Blocking Javascript

Dan penyebab render blocking pada javascript ini biasanya berasal dari jQuery yang merupakan file javacript yang digunakan oeh sebagian besar halaman web. File javascript ini memang lumayan besar, bakan ini mungkin menjadi file terbesar dalam halaman web anda saat sedang loading memuat halaman anda, di mana harus didownload dulu oleh browser.

Baik, untuk cara mengatasinya, silahkan tambahkan atribut async='async' pada jQuery-nya. Misal, pada mulanya jQuery-nya seperti ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Setelah ditambahkan atribut async, akan menjadi seperti ini.

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

Atribut tersebut lumayan untuk memperingan beban blog anda dan render blocking dari jQuery ini juga bisa teratasi. Tapi, perlu diingat. Mungkin setelah menambahkan atribut async pada jQuey-nya, ada beberapa javascript yang berada di atas </head> tidak bekerja dengan baik. Maka dari itu, pindahkan javascript tersebut di atas </body>.

Mengatasi Render Blocking CSS

Sekarang, kita beranjak ke masalah render blocking pada CSS. Ini biasanya terdapat CSS yang tidak terbuka atau berbentuk eksternal. Seperti misalnya,

<link href='https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

CSS tersebut belum terbuka. Masih tersimpan di dalam link. Ini bisa saja menyebabkan render blocking pada CSS-nya. Solusinya, silahkan masukkan CSS yang ada di dalam link CSS tersebut. Copy linknya yang berawalan http tersebut dan taruh di address bar. Anda akan menemukan CSS yang tersimpan dalam link tersebut. Dan letakkan CSS di atas ]]></b:skin> atau </style>

Contoh kedua, yaitu pada link Google Font. Misal seperti ini.

<link href='http://fonts.googleapis.com/css?family=Tahoma' rel='stylesheet' type='text/css'/>

Link di atas bisa menyebabkan render blocking. Maka dari itu, silahkan inline-kan CSS di dalamnya dan taruh pada CSS yang ada di Edit HTML. Sama dengan yang sebelumnya, silahkan copy linknya dan taruh di address bar, lalu enter. Silahkan copy CSS nya dan taruh di bagian atas sendiri dari CSS yang lain. Ditaruh di atas karena ini merupakan link Google Font, agar browser bisa cepat dan langsung mengetahui font apa yang digunakan dalam blog kita. Misalnya seperti ini.

Blogger Template Style
Name        : ..........
Author      : ..........
Url         : ..........
----------------------------------------------- */

@font-face {
  font-family: 'Tahoma';
  font-style: normal;
  font-weight: 400;
  src: local('Tahoma'), url(http://themes.googleusercontent.com/licensed/font?kit=SR1FNt_uUWzf7Ux9q0xdEg) format('woff');
}

....................
....................

CSS-CSS yang lain

....................
....................

]]></b:skin>

Sebenarnya, tidak hanya itu saja yang menjadi masalah render blocking pada CSS. Tapi, minimal itu sedikit contoh dari saya. Jika anda ingin mengetahuinya lebih jauh, silahkan cek kecepatan loading blog anda di PageSpeed Insights. Anda akan tau apa saja masalah yang terdapat dalam blog anda, yang menyebabkan kecepatan blog anda tidak maksimal. Perlu kita ketahui, CSS atau javascript yang disimpan di Google Drive pun juga memungkinkan adanya render blocking. Untuk itu, silahkan cek sendiri di sana. Dan untuk blog ini pun juga masih terdapat beberapa masalah di sana.

Sekian trik kali ini. Semoga bermanfaat.

Referensi : http://www.kompiajaib.com/2014/02/mengatasi-render-blocking-javascript.html

Tag : Blogging, Internet