K A N G A M E T

Loading

Selamat Datang di Blog ini . 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 mengakibatkan render blocking ( penundaan pemuatan laman ) dimana lamanya proses pemuatan laman karena CSS eksternal menurut luar situs nir kunjung menanggapi mengakibatkan proses loading blog sebagai lama .

Menghapus style sheet CSS tentunya bukan solusi yg sempurna lantaran laman blog akan kehilangan keindahannya . Pada postingan kali ini Blog ini memperlihatkan sebuah tips bagaimana cara agar CSS eksternal yg berada dalam HTML blog anda nir mengalami pemblokiran render . Sederhana saja sih yakni menahan pemuatan CSS yang dianggap kurang berpengaruh

Cara meload CSS tanpa menunda rendering

Stylesheet CSS eksternal yang paling tak jarang dipakai adalah font menurut google apis buat estetika teks

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 ini 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

Baca juga : Cara upload css js kegithub

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

No Comments

Leave a Comment