Trik Dan Tips Cara Load Css Eksternal Tanpa Menunda Rendering

Cara Load CSS Eksternal Tanpa Menunda Rendering - Umumnya sebuah situs web / blog tidak terlepas dari stylesheet css external. Namun terka...

A+ A-
Cara Load CSS Eksternal Tanpa Menunda Rendering - Umumnya sebuah situs web / blog tidak terlepas dari stylesheet css external. Namun terkadang pada website blogger, penggunaan css external sanggup menjadikan render-blocking (penundaan pemuatan halaman) sebelum css external simpulan dimuat sehingga loading situs web menjadi lambat.

Menghapus stylesheet css external tentunya bukan sebuah solusi yang benar lantaran situs web justru sangat membutuhkan css external untuk keindahan desain nya. Nah kini aku akan membagikan cara memasang stylesheet css external ke dalam html situs web tanpa menjadikan pemblokiran render halaman terhadap situs tersebut.
Cara Load CSS Eksternal Tanpa Menunda Rendering Trik dan Tips Cara Load CSS Eksternal Tanpa Menunda Rendering
Fix render-blocking css from your site with loadcss.js
Stylesheet css external yang paling sering dipakai adalah fonts googleapis untuk style teks dan font awesome untuk pemasangan icon-icon penting pada situs web. Default instruksi dari keduanya yakni sebagai berikut;
  • <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 stylesheet css tersebut tetap sanggup dipakai tanpa mengganggu render halaman situs web blogger, sebaiknya jangan memakai instruksi default menyerupai diatas. Sedikit modifikasi dengan pemberian javascript akan lebih baik untuk mengatasi render-blocking terhadap halaman paruh atas situs. Berikut trik me-load css external dengan 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>
Memanggil (load css external) dengan javascript diatas akan memisahkan file css dari sumber nya sehingga situs web akan terhindar dari render-blocking page dan loading situs menjadi lebih singkat atau cepat. Jika pada situs web blogger memakai dua (2) css external contohnya //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 menyerupai 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 LoadCSS.JS
  1. Support dibanyak browser menyerupai Google Chrome, Mozilla, IE, UC dan lain-lain
  2. Mengatasi blokir render halaman paruh atas, dan
  3. Mempercepat loading (pemuatan) website
Sebelumnya aku juga telah mempublikasikan teknik menghindari render-blocking yang disebabkan oleh javascript dan css eksternal dengan metode preload dan onload, namun metode proload css tersebut masih kurang optimal lantaran tidak support di browser mozilla dan script load css external ini jauh lebih baik untuk menggantikan-nya.

Penempatan (Pemasangan) Script Load CSS

Jika instruksi 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 kau sanggup menggabungkan javascript load css tersebut dengan javascript internal yang sudah ada.

Buang instruksi pembungkus javascript yaitu "<script type='text/javascript'>" dan "</script>" menyerupai yang telah aku terapkan pada situs ini. Silahkan lihat teladan gambar dibawah ini;
Cara Load CSS Eksternal Tanpa Menunda Rendering Trik dan Tips Cara Load CSS Eksternal Tanpa Menunda Rendering
Cara memasang LoadCSS.Js
Jika telah memasang script loadCss.js maka instruksi default stylesheet css external tidak diharapkan lagi, silahkan hapus instruksi default stylesheet css dari html situs web anda lalu pertinjau situs dan uji dengan tool google page speed insights.

Saya fikir kini aku tidak diharapkan lagi disini lantaran solusi mengatasi render-blocking css external sudah anda temukan dan sudah waktu nya untuk memperbaiki performa situs web anda menjadi lebih baik dengan code loadcss.js diatas. Jangan lupa follow situs ini untuk mendapat update trik-trik blogging, javascript dan css menarik lain-nya. Semoga ini sanggup bermanfaat dan membantu mengatasi permasalahan css external situs web kesayangan kamu. Sampai jumpa kembali di tutorial berikutnya and good luck for you.

Related

Optimasi SEO 1383391988311973631

Technology

Hot in week

Recent

Comments

item