Trik Dan Tips Internalisasi Css Dan Javascript
Internalisasi CSS Dan Javacript - Apa yang dimaksud dengan internalisasi css dan javascript? Yang dimaksud dengan internalisasi css maupun...
https://tutorialcarapintar.blogspot.com/2019/02/trik-dan-tips-internalisasi-css-dan.html?hl=in
Internalisasi CSS Dan Javacript - Apa yang dimaksud dengan internalisasi css dan javascript? Yang dimaksud dengan internalisasi css maupun javascript yakni mengakibatkan 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.
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;
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 pecahan 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 final dengan mengganti arahan <head> dengan <head> dan arahan epilog </head> dengan </head><!--<head/>--> lalu mengganti arahan penutup </body> dengan <!--</body>--></body> sedangkan bundling yang sanggup di internalisasi yakni bundling "css dan javascript" ibarat ajax, google fonts, font awesome, dll ibarat pola berikut;
File atau isi dari bundle css fonts googleapis dan font awesome dibungkus dengan tag atau kode;
Css umumnya ditempatkan diantara arahan <head> dan </head> sedangkan untuk javascript umumnya ditempatkan didalam tag body, sesudah arahan <body> atau diatas arahan 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 problem speed (Render-blocking JavaScript dan css) yang disebabkan oleh bundling no asynchronous.
 |
| Internalisasi css dan javascript |
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 sesudah 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 sesudah ditambahkan async='async' ternyata ada fitur-fitur yang rusak maka script tersebut tidak mendukung async='async' dan solusinya yakni dilakukan internalisasi javascript supaya 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;
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 final dengan mengganti arahan <head> dengan <head> dan arahan epilog </head> dengan </head><!--<head/>--> lalu mengganti arahan penutup </body> dengan <!--</body>--></body> 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'/>
File atau isi dari bundle css fonts googleapis dan font awesome dibungkus dengan tag atau kode;
<style type='text/css'><!--Dan file java script (isi dari bundle javascript) dibungkus dengan tag script ibarat pola dibawah ini;
File css here...
--></style>
<script type='text/javascript'>Penempatan css dan javascript internal
//<![CDATA[
File js here...
//]]>
</script>
Css umumnya ditempatkan diantara arahan <head> dan </head> sedangkan untuk javascript umumnya ditempatkan didalam tag body, sesudah arahan <body> atau diatas arahan 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 problem speed (Render-blocking JavaScript dan css) yang disebabkan oleh bundling no asynchronous.
