Mengoptimalkan Javascript dan CSS Pada Template

Mengoptimalkan Javascript dan CSS Pada Template - Teringat pengalaman saya pada template-template Wordpress yang pernah saya modifikasi. Cukup banyak sehingga memiliki beberapa kesimpulan bahwa cepat atau lambatnya kinerja suatu template sangat ditentukan oleh banyak faktor, termasuk yang internal. Ya, kalau soal jaringan yang lelet itu sih eksternal faktor.

Bila dibuat presentasi kasar, dari hasil utak-atik template selama ini, kontribusi faktor-faktor internal tersebut tidaklah sama. Perhitungan kasarnya kira-kira seperti ini : external javascript dan external css memberikan kontribusi terbesar yaitu 40%. Menyusul kemudian external picture sebesar 25%, faktor external font sebesar 10%, faktor internal picture sebesar 10%, internal css sebesar 5%, internal html sebesar 5% dan internal font sebesar 5%. Jadi penggunaan javascript dan css perlu mendapat perhatian pertama. Lalu bagaimana cara mengoptimalkan pemakaian javascript dan css? Mari kita bahas.

Untuk meminimalisir ukuran template, orang sering menggunakan external link atau mapping jika memerlukan javascript. Maka kita mengenal link seperti ini untuk jquery :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Saat tulisan ini dibuat, versi terbaru dari Jquery adalah 2.1.4. Anda boleh meng-update-nya kalau mau. Dan biasanya update Jquery tidak menimbulkan dampak apapun yang negatif.

Menggunakan external link seperti di atas memang bisa menghemat ukuran template, tetapi responnya menjadi lambat karena menunggu link tersebut selesai dirender baru homepage terbuka. Dan akan semakin lambat bila kita menggunakan bebebara buah link semacam itu. Dan solusinya sederhana, tempatkan saja javascript tersebut langsung pada template kita, jangan mengambilnya dari external link. Biarkan saja ukuran template kita menjadi lebih besar tetapi jadi jauh lebih cepat.

Cara menempatkan javascript tersebut langsung pada template adalah sebagai berikut :

1.  Blok link berwarna merah ini  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

2.  Buka menggunakan internet browser. Saya merekomendasikan Google Chrome.

Akan tampil script seperti ini :

 /*! jQuery v2.1.4 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m="2.1.4",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};... (Saya tidak menampilkan seluruhnya karena sangat panjang. 

 3. Di atas </head> pada template anda, buat script kecil seperti ini :

<script type='text/javascript'> //<![CDATA[/* tempat javascript diletakkan *///]]></script>

4.  Copy seluruh script yang tampil dibrowser dan pastekan pada tempat seperti penjelasan di atas. Maka hasil akhirnya akan seperti ini :

<script type='text/javascript'> //<![CDATA[/*! jQuery v2.1.4 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m="2.1.4",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};... (Saya tidak menampilkan seluruhnya karena sangat panjang.)//]]></script>

5.  Lakukan untuk seluruh javascript atau jquaery yang menggunakan external link. 
6. Lakukan pula untuk seluruh external css. Dan setelah anda Save Template maka silahkan dicoba. Sudahkah template anda menjadi lebih cepat sekarang?

Perhatian! Sebelum sobat melakukan optimalisasi pada template, lakukan backup terlebih dahulu. Bila ada masalah setelah dilakukan optimalisasi, maka akan mudah memperbaikinya.

Terima kasih atas kunjungan sobat pada blog saya ini. Jika sobat ingin blog-nya saya tengok-tengok, jangan ragu untuk memberikan link-nya pada kolom komentar. 

Demikianlah artikel dari Kontakmedia yang berjudul Mengoptimalkan Javascript dan CSS Pada Template, semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.