Internalisasi CSS Dan Javacript – Apa yang dimaksud dengan internalisasi css dan javascript? Yang dimaksud dengan internalisasi css maupun javascript yakni menyebabkan file css atau javascript dari penyimpanan external ke internal, sebuah template umumnya tidak terlepas dari bundling css maupun bundling javascript dari penyimpanan external, bundling yang paling umum kita temui dalam sebuah template misalnya; bundling google fonts, bundling font awesome dan bundling-bundling lainnya ibarat script share buttons, slider dan banyak lagi. Diantara bundling-bundling tersebut sebagian mungkin ada yang mendukung asynchronously css atau javascript dan sebagian lagi tidak mendukung asynchronously file “css dan javascript” external.
 Apa yang dimaksud dengan internalisasi css dan javascript Trik gres tahun ini : Internalisasi CSS Dan Javascript
Internalisasi css dan javascript

Fungsi dan Tujuan

Internalisasi css dan javascript bertujuan untuk menghilangkan blokir/penundaan rendering halaman yang disebabkan oleh bundling css dan javascript external tersebut. Fungsinya yakni memisahkan file css dari sumber dayanya untuk mempercepat loading situs.

Makara poin pertama yang harus kita ingat yakni internalisasi css dan javascript external hanya dilakukan pada bundling “css dan javasript” yang tidak mendukung asynchronously saja sedangkan bundling css dan javascript yang mendukung async=’async’ tidak perlu dilakukan internalisasi. Dan untuk mengetahui apakah bundling css atau javascript mendukung asynchronously kita perlu menambahkan async=’async’ kedalam bundling tersebut.

Contoh;

<script src=’url-file-external‘ type=’text/javascript’/>

Kemudian tambahkan async=’async’ sehingga menjadi ibarat berikut

<script async=’async’ src=’url-file-external‘ type=’text/javascript’/>

Jika sehabis ditambahkan async=’async’ kedalam bundling external tidak ada perubahan dalam artian tidak ada widget, fitur atau tampilan yang rusak, maka script tersebut mendukung asynchronously, tapi jikalau sehabis ditambahkan async=’async’ ternyata ada fitur-fitur yang rusak maka script tersebut tidak mendukung async=’async’ dan solusinya yakni dilakukan internalisasi javascript semoga tidak menghambat rendering halaman.

Khusus untuk bundling css saya telah menerbit 2 artikel untuk mengatasinya jikalau kau belum mebacanya silahkan lihat [Asynchronously CSS dengan WebFontConfig] dan [Load Css External Dengan Javascript], tapi jikalau kau menentukan untuk melaksanakan internalisasi css external juga boleh-boleh saja, ikuti langkah-langkah-nya berikut ini.

Pertama Cek bundling css dan javascript dengan Tool SEO Analyzer ibarat pola dibawah ini;

Pilih Tab [Speed] lalu gulir kebawah, klik pada belahan folder Blocking Javascript untuk melihat daftar bundle css dan javascript yang memblokir rendering halaman, disana kau mungkin akan melihat banyak bundling javascript.

Perlu diingat bahwa tidak semua bundling javascript ayang ada pada pada daftar sanggup di internalisasi contohnya bundling widget blogger “https://www.blogger.com/static/v1/widgets/id/widgets.js“, bundling ini hanya tamat dengan mengganti instruksi <head> dengan &lt;head&gt; dan instruksi epilog </head> dengan &lt;/head&gt;&lt;!–<head/>–&gt; lalu mengganti instruksi penutup </body> dengan &lt;!–</body>–&gt;&lt;/body&gt; sedangkan bundling yang sanggup di internalisasi yakni bundling “css dan javascript” ibarat ajax, google fonts, font awesome, dll ibarat pola berikut;

  • <script src=’https://cdn.jsdelivr.net/g/jquery.easing@1.3/jquery.easing.1.3.min.js’ type=’text/javascript’/>
  • <script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js’ type=’text/javascript’/>
  • <link href=’https://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/>
  • <link href=’https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css’ rel=’stylesheet’/>

Untuk melaksanakan internalisasi (dijelaskan secara teori) buka url script/css external misalnya; https://fonts.googleapis.com/css?family=Oswald dan copy semua isi “css” yang ada pada url tersebut dan masukkan ke dalam template (html situs web) untuk menggantikan bundle tersebut. Jika diharapkan kau juga sanggup melaksanakan minify bundle css dan javascript dengan tool Css & Js Minifer sebelum melaksanakan internalisasi.

File atau isi dari bundle css fonts googleapis dan font awesome dibungkus dengan tag atau kode;

<style type=’text/css’><!–
File css here…
–></style>

Dan file java script (isi dari bundle javascript) dibungkus dengan tag script ibarat pola dibawah ini;

<script type=’text/javascript’>
//<![CDATA[
File js here…
//]]>
</script>

Penempatan css dan javascript internal

Css umumnya ditempatkan diantara instruksi <head> dan </head> sedangkan untuk javascript umumnya ditempatkan didalam tag body, sehabis instruksi <body> atau diatas instruksi epilog </body>, jikalau membingungkan posisi css dan javascript sanggup ditempatkan diposisi bundle (menggantikan bundle), hapus baris bundle example: <script src=’URL’ type=’text/javascript’/> dan ganti dengan file css/script “isi bundle” yang telah disiapkan untuk internalisasi.

Demikian “Internalisasi CSS Dan Javacript” semoga ini membantu anda dalam mengatasi dilema speed (Render-blocking JavaScript dan css) yang disebabkan oleh bundling no asynchronous.