CARA LOAD CSS EKSTERNAL TANPA MENUNDA RENDERING

Cara Load CSS Eksternal Tanpa Menunda Rendering - Umumnya sebuah situs web / blog tidak terlepas berdasarkan stylesheet css external. Namun terkadang pada website blogger, penggunaan css external bisa menyebabkan render-blocking (penundaan pemuatan laman) sebelum css external selesai dimuat sebagai akibatnya loading situs web menjadi lambat.
Menghapus stylesheet css external tentunya bukan sebuah solusi yg sahih karena situs web justru sangat membutuhkan css external buat estetika desain nya. Nah sekarang saya akan menunjukkan cara memasang stylesheet css external ke dalam html situs web tanpa mengakibatkan pemblokiran render laman terhadap situs tadi.

Stylesheet css external yang paling acapkali digunakan merupakan fonts googleapis buat style teks serta font awesome untuk pemasangan icon-icon penting dalam situs web. Default kode berdasarkan keduanya merupakan menjadi berikut;
Agar kedua stylesheet css tersebut permanen bisa dipakai tanpa mengganggu render laman situs web blogger, usahakan jangan menggunakan kode default seperti diatas. Sedikit modifikasi dengan donasi javascript akan lebih baik buat mengatasi render-blocking terhadap page paruh atas situs. Berikut trik me-load css external menggunakan javascript.
Memanggil (load css external) menggunakan javascript diatas akan memisahkan arsip css dari sumber nya sehingga situs web akan terhindar berdasarkan render-blocking halaman serta loading situs menjadi lebih singkat atau cepat. Apabila pada situs web blogger memakai 2 (dua) css external misalnya //fonts.googleapis.com serta //netdna.bootstrapcdn.com/font-awesome/tiga.dua.1/css/font-awesome.min.css maka nir perlu memasang 2 javascript utuh, cukup tambahakan loadCSS("//your.css.stylesheet_here"); sehingga script akan terlihat seperti dibawah ini;
Kelebihan LoadCSS.js

1. Support dibanyak browser seperti Google Chrome, Mozilla, IE, UC serta lain-lain
2. Mengatasi blokir render halaman paruh atas, dan
3. Mempercepat loading (pemuatan) website

Sebelumnya saya juga telah mempublikasikan teknik menghindari render-blocking yang disebabkan oleh javascript serta css eksternal dengan metode preload serta onload, namun metode proload css tersebut masih kurang optimal karena tidak support di browser mozilla serta script load css external ini jauh lebih baik untuk menggantikan-nya.
Penempatan (Pemasangan) Script Load CSS
Jika kode css external default umumnya terletak dalam area (antara ...dan...) maka load css menggunakan javascript diletakkan pada area body (antara ...serta...</body>. Mungkin dalam template situs anda telah masih ada perpaduan javascript internal maka engkau sanggup menggabungkan javascript load css tadi menggunakan javascript internal yg telah ada.
Buang kode pembungkus javascript yaitu "" serta "" seperti yang telah saya terapkan pada situs ini. Silahkan lihat contoh gambar dibawah ini;

Jika telah memasang script loadCss.js maka kode default stylesheet css external tidak dibutuhkan lagi, silahkan hapus kode default stylesheet css dari html situs web anda kemudian pertinjau situs serta uji dengan tool google laman speed insights.
Saya fikir sekarang saya tidak dibutuhkan lagi disini karena solusi mengatasi render-blocking css external sudah anda temukan serta sudah waktu nya untuk memperbaiki performa situs web anda menjadi lebih baik dengan code loadcss.js diatas. Jangan lupa follow situs ini untuk mendapatkan update trik-trik blogging, javascript serta css menarik lain-nya. Semoga ini dapat bermanfaat serta membantu mengatasi permasalahan css external situs web kesayangan kamu. Sampai jumpa kembali di tutorial berikutnya and good luck for you.