Cara mengatasi CSS render blocking

by

helmy

Selamat Datang di Blog Orang IT . Sebuah website atau blog umumnya tidak bisa terlepas dari script eksternal dari CSS untuk mempercantik tampilan halaman , namun khusus bagi website yang dihosting oleh blogger sering kali banyaknya CSS yang berasal dari luar situs / eksternal mengalami keterlambatan pemuatan entah karena situs tempat menyimpan CSS gagal merespond atau karena permintaan yang terlalu lama tidak ditanggapi server
Kejadian ini menyebabkan render blocking ( penundaan pemuatan halaman ) dimana lamanya proses pemuatan halaman karena CSS eksternal dari luar situs tidak kunjung menanggapi menyebabkan proses loading blog menjadi lama .
Menghapus style sheet CSS tentunya bukan solusi yang tepat karena halaman blog akan kehilangan keindahannya . Pada postingan kali ini Blog Orang IT membagikan sebuah tips bagaimana cara agar CSS eksternal yang berada dalam HTML blog anda tidak mengalami pemblokiran render . Sederhana saja sih yakni menunda pemuatan CSS yang dianggap kurang berpengaruh
Cara meload CSS tanpa menunda rendering
Stylesheet CSS eksternal yang paling sering digunakan adalah font dari google apis untuk keindahan teks dan font awesome untuk pemasangan font-font lain yang digunakan pada beberapa tempat seperti label ataupun links
Default format keduanya kurang lebih seperti ini :

<link href=’https://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/>

<link href=’//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css’ rel=’stylesheet’/>

Agar kedua script diatas dapat digunakan tanpa mengganggu render blocking pada halaman blog jangan gunakan format script default yang diload satu persatu , sedikit modifikasi dapat membantu mempercepat loading halaman paruh atas situs sesuai anjuran googleblog , kita modifikasi dengan memasukkan nya kedalam javascript

<script type=’text/javascript’>
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(“//your.css.stylesheet_here“);
</script>

Menggunakan fungsi javascript untuk meload CSS eksternal berarti memisahkan beberapa file css dari sumbernya sehingga render situs terhindar dari render blocking dan penundaan pemuatan halaman karena server lama tidak meresponds.
Jika pada situs web blogger menggunakan dua (2) css external misalnya //fonts.googleapis.com dan //netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css maka tidak perlu memasang 2 javascript utuh, cukup tambahakan loadCSS(“//your.css.stylesheet_here”); sehingga script akan terlihat seperti dibawah ini;

<script type=’text/javascript’>

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(“//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css”);loadCSS(“https://fonts.googleapis.com/css?family=Oswald:400,600”);
</script>
Kelebihan meload CSS dalam javascript :
  • Disupport oleh banyak browser seperti chrome , firefox , internet explorer , opera dan masih banyak lagi
  • Mempercepat load halaman paruh atas dimana tempat pengunjung pertama kali melihat tampilan blog anda
  • Mempercepat loading blogs
Dimana letak pemasangan script load CSS ?
Jika kode css external default biasanya terletak pada area (antara <head>…dan…</head>) maka load css dengan javascript diletakkan di area body (antara <body>…dan…</body>. Mungkin pada template situs anda sudah terdapat kumpulan javascript internal maka anda bisa menggabungkan javascript load css tersebut dengan javascript internal yang sudah ada.
Buang kode pembungkus javascript yaitu “<script type=’text/javascript’>” dan “</script>” seperti yang telah Blog Orang IT terapkan pada situs ini.
Jika anda sudah memasang script load CSS js maka script yang lama tidak dibutuhkan lagi silahkan dihapus saja kemudian cek dengan layanan google page speed insight seharusnya beberapa CSS yang sebelumnya dianggap mengalami penundaan sudah hilang
Demikian postingan mengenai cara mengatasi masalah render blocking karena CSS eksternal semoga bermanfaat jika dirasa ada masalah lain jangan sungkan memberikan komentar , sekian dan terimakasih telah mengunjungi Blog www.helmykkediri.id silahkan datang lagi untuk melihat update artikel terbaru kami

Related Post