Fungsi dan Tujuan
Internalisasi css dan javascript bertujuan untuk menghilangkan blokir/penundaan rendering halaman yang disebabkan oleh bundling css dan javascript external tersebut. Fungsinya ialah memisahkan file css dari sumber dayanya untuk mempercepat loading situs.
Makara poin pertama yang harus kita ingat ialah 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 menyerupai 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 ialah 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", kunjungi https://www.seocentro.com/tools/seo/seo-analyzer.html kemudian submit link situs anda pada kolom URL menyerupai pola dibawah ini;
 |
| Cek Bundling CSS dan Javascript |
[ads-post]
Perlu di ingat bahwa tidak semua bundling javascript yang ada pada pada daftar, sanggup di internalisasi contohnya bundling widget blogger "https://www.blogger.com/static/v1/widgets/id/widgets.js", bundling ini hanya simpulan dengan mengganti isyarat <head> dengan <head> dan isyarat epilog </head> dengan </head><!--<head/>--> lalu mengganti isyarat penutup </body> dengan <!--</body>--></body> sedangkan bundling yang sanggup di internalisasi ialah bundling "css dan javascript" menyerupai ajax, google fonts, font awesome, dll menyerupai 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 menyerupai 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 isyarat <head> dan </head> sedangkan untuk javascript umumnya ditempatkan didalam tag body, sesudah isyarat <body> atau diatas isyarat 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 duduk masalah speed (Render-blocking JavaScript dan css) yang disebabkan oleh bundling no asynchronous.