Optimasi JavaScript (2) : Memanggil Script Secara Eksternal dan Menempatkannya di Footer
Seperti halnya CSS (cascading stylesheet), javascript pun dapat kita optimasi dengan cara yang serupa. Perlu diingat, bahwasanya kedua file tersebut mempunyai struktur yang sama, yakni berupa teks. Oleh karena itu teknik optimasinya pun hampir sama, seperti mengkompres, menghapus karakter yang tidak berguna, menggabungkan, dan lain sebagainya. Berikut ini akan dijelaskan berbagai macam teknik optimasi javascript untuk WordPress khususnya, dan website pada umumnya.
1. Tempatkan javascript secara eksternal (di luar file html)
Makna dari eksternal adalah javascript tersebut dipanggil dalam bentuk sebuah file yang diletakkan di luar file html. Terdapat dua cara pemanggilan javascript di dalam sebuah file html, yaitu dengan cara internal dan dengan cara eksternal
Cara internal adalah kode-kode javacript dieksekusi langsung di dalam file html. Contohnya pemanggilan javascript secara inline adalah sebagai berikut:
<html>
<head>
<title>RISOFTE</title>
<link rel="stylesheet" type="text/css" href="http://namadomain.com/nama-stylesheet.css" />
<script type="text/javascript">
(function($) {
// Compliant with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
o = $.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: false,
auto: null,
hoverPause: false,
speed: 200,
easing: null,
vertical: false,
circular: true,
visible: 3,
start: 0,
scroll: 1,
beforeStart: null,
afterEnd: null
}, o || {});
</script>
</head>
<body>
<p>
Konten / isi / kalimat / paragraf / whatever you wrote.
</p>
</body>
</html>
Penjelasan: Kode-kode javascript dipanggil atau disertakan di dalam file html.
Cara eksternal adalah javascript dipanggil dalam bentuk file berekstensi .js yang bersumber dari luar file html tersebut. Contohnya:
<html>
<head>
<title>RISOFTE</title>
<link rel="stylesheet" type="text/css" href="css/example.css" />
<script type="text/javascript" src="http://namadomain.com/nama-script.js"></script>
</head>
<body>
<p>
Konten / isi / kalimat / paragraf / whatever you wrote.
</p>
</body>
</html>
Keterangan: Javascript dipanggil dalam bentuk file yang terpisah dari file html.
Salah satu keuntungan pemanggilan javascript secara inline adalah tidak adanya HTTP request dalam pemanggilannya, karena javascript langsung dapat dieksekusi tanpa memanggilnya terlebih dahulu dari luar. Namun kerugiannya adalah file html yang diunduh (download) oleh peramban akan semakin besar disebabkan adanya kode-kode javascript di dalamnya. Apalah artinya hemat satu buah http request jika harus dibayar dengan waktu yang lebih lama dalam mendownloadnya?! Oleh karena itu pemanggilan javascript secara internal tidak direkomendasikan. Pemanggilan javascript secara internal hanya direkomendasikan bila jumlah karakter dari kode javascript tersebut sedikit, dengan asumsi kode-kode tersebut dapat dikompress bersamaan dengan file HTML, sehingga besarnya file HTML tidak begitu mempengaruhi kecepatan download.
Berbeda halnya dengan secara internal, pemanggilan javascript secara eksternal dapat menghemat waktu unduh file html yang dihasilkan oleh server. Adapun mengenai adanya satu buah HTTP request di dalamnya, maka hal tersebut tak perlu dirisaukan secara mendalam, karena javascript akan lebih cepat terunduh dengan memanfaatkan cache peramban. Ya, salah satu keunggulan peramban di zaman sekarang adalah bahwa mereka mampu untuk menyimpan sementara file-file yang sebelumnya telah terunduh. Dengan demikian jika kita mengunduh file yang sama, maka peramban pun dapat langsung menyediakannya tanpa harus mengunduhnya berulang-ulang.
Catatan: Jika dalam optimasi CSS disarankan menggunakan alamat domain/subdomain yang berbeda untuk mengupload file CSS, maka untuk file javascript, hal ini tidak direkomendasikan. Sebabnya adalah javascript dapat menghambat pemanggilan (request) file lain secara paralel? ↓.
Jika dalam dalam kasus CSS browser mampu untuk mendownload 4 buah file secara bersamaan yang diletakkan dalam domain/subdomain yang sama, maka untuk javascript, hal itu tidaklah berlaku, karena peramban hanya akan mendownlod file yang lain SETELAH berhasil mengunduh javascript. Itulah mengapa javascript sering disebut sebagai biang kerok penghambat performa suatu web/blog.
2. Tempatkan atau pindahkan javascript ke bagain footer (bawah theme)
Jika kita perhatikan kebanyakan theme WordPress yang mempunyai javascript, mereka menempatkan atau memanggil javascript di bagian header. Silahkan cek theme anda, dan perhatikanlah kode pemanggilan tersebut di header. Header terletak sebelum tag <body>
< !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head profile="http://gmpg.org/xfn/11"> <!-- awal header --> <!-- Kode pemanggilan javascript --> <script type="text/javascript" src="http://namadomain.com/nama-script.js"></script> <!-- Kode pemanggilan javascript --> <!-- akhir header --> </head> <body></body></html>
Salah satu alasan mengapa javascript ditempatkan di bagian header adalah agar javascript dapat lebih cepat terekspresi di bagain awal proses render halaman. Namun dalam hal ini timbul berbagai persoalan yang biasa kita alami saat berkunjung ke website/ blog yang mempunyai javascript di templatenya, antara lain:
- Disebabkan javascript dipanggil di bagian awal, maka peramban akan terlebih dahulu mengunduh file javascript. Hal ini akan memakan waktu yang cukup lama, disebabkan kebanyakan javascript mempunyai ukuran file yang besar.
- Proses pemanggilan javascript akan menghambat proses unduh file yang lain, walaupun itu secara paralel. Apa itu download secara paralel? ↓
- Saat koneksi internet sedang lambat-lambatnya, biasanya proses unduh javascript memakan waktu yang sangat lama, sehingga proses render halaman pun menjadi terhambat. Tentunya kita sepakat jika menemui keadaan seperti itu kita pasti akan langsung menutup website/blog tersebut, bukan?
Solusi dari permasalahan-permasalahan di atas yaitu dengan menempatkan atau memindahkan javascript ke bagian bawah. Alasannya hanya satu, yakni agar proses render halaman (konten) dapat lebih dipercepat. Peramban akan menampilkan konten terlebih dahulu, sehingga pengunjung tidak perlu berlama-lama menunggu proses unduh javascript selesai.
Perlu diperhatikan, bahwa tidak semua javascript bisa kita tempatkan di bagian bawah. Beberapa javascript yang berfungsi untuk menampilkan, atau menyisipkan sesuatu objek pada bagian posting atau sidebar tidak bisa kita pindahkan, karena hal tersebut malah mengacaukan fungsinya.
Oleh developer yahoo, disebutkan bahwa javascript yang bermasalah ketika kita memindahkannya ke bagian bawah adalah javascript yang menggunakan fungsi “document.write” untuk menyisipkan sesuatu pada postingan ataupun sidebar. Beberapa javascript yang berfungsi untuk “penghias” maupun animasi dapat kita pindahkan ke bagaian bawah. Contohnya: Jcarousel dan accordion.
Untuk memindahkan javascript ke bawah bisa dilakukan secara manual ataupun menggunakan plugin.
Saat memindahkan javascript ke footer, perhatikanlah baik-baik urutan kodenya. Pastikan semua kode telah tersusun dengan benar, setelah itu pindahkan dengan cut-paste (potong-tempel) kode tersebut ke bagian footer sebelum tag </body>
Memindah javascript pun bisa kita lakukan dengan bantuan plugin JavaScript to Footer. Plugin ini akan mengubah tempat peletakkan javascript (yang secara otomatis disisipkan oleh beberapa plugin ke bagian header). Dengan memasang plugin ini, maka secara otomatis javascript yang tadinya disisipkan di bagian header (oleh beberapa plugin) akan terpindahkan ke bagian footer. Beberapa kelemahan plugin ini adalah ia tidak bisa untuk mendeteksi javascript mana saja yang tidak boleh dipindah dan boleh dipindah. Berdasarkan pengalaman saya, plugin ini dapat mematikan fungsi commentluv dan juga beberapa plugin yang lain.
Untuk lebih amannya, memang disarankan untuk memindahkan javascript secara manual, dengan cut-paste. Dan sebaiknya lakukan ini di localhost sebelum diaplikasikan ke web secara online. Memang, hal yang terbaik untuk melakukan segala sesuatunya adalah dengan coba-coba, dan terus mencoba. Itulah jurus terjitu yang pernah ada.
…Masih terus bersambung, Insya Allah…
Kesimpulan
Salah satu teknik optimasi javascript yang bisa kita lakukan adalah dengan cara (1) menempatkan atau memanggil javascript tersebut secara eksternal. Pemanggilan secara internal hanya direkomendasikan bila kode javascript tersebut berjumlah sedikit (pendek). Dengan cara eksternal, kita akan lebih cepat mengakses halaman sebuah web karena terbantu oleh cache peramban. Teknik yang lain adalah dengan cara (2) memindahkan javascript ke bagian footer (bawah). Cara ini terbukti efektif untuk mempercepat tampilan halaman khususnya konten web/blog, sehingga pembaca tidak perlu berlama-lama menunggu peramban mengunduh javascript bila script tersebut terletak di bagian header.
Referensi
- High Performance Web Sites: Rule 6 – Move Scripts to the Bottom
- High Performance Web Sites: Rule 8 – Make JavaScript and CSS External
Download paralel adalah proses yang dapat dilakukan oleh browser dalam mengunduh beberapa file yang ditempatkan pada alamat domain yang sama dalam waktu bersamaan. Kebanyakan browser hanya dapat mengunduh sebanyak 2 hingga 4 buah file. Jika dalam halaman tersebut terdapat 8 buah file yang kesemuanya ditempatkan pada alamat domain yang sama, maka browser pertama-tama akan mengunduh file pertama hingga keempat dalam waktu bersamaan. Setelah itu browser akan mengunduh file kelima hingga kedelapan. Begitulah seterusnya.
Namun jika kedelapan file tersebut diupload ke dua alamat domain/subdomain yang berbeda, maka browser dapat mengunduh semua gambar dalam waktu bersamaan. Contohnya:
- File ke-1 beralamat di http://rismaka.com/upload/gambar1.jpg
- File ke-2 beralamat di http://rismaka.com/upload/gambar2.jpg
- File ke-3 beralamat di http://rismaka.com/upload/stylesheet1.css
- File ke-4 beralamat di http://rismaka.com/upload/stylesheet2.css
- File ke-5 beralamat di http://static.rismaka.com/upload/gambar3.jpg
- File ke-6 beralamat di http://static.rismaka.com/upload/gambar4.jpg
- File ke-7 beralamat di http://static.rismaka.com/upload/stylesheet3.css
- File ke-8 beralamat di http://static.rismaka.com/upload/stylesheet4.css
Pada contoh di atas, peramban akan mengunduh seluruh file dalam waktu yang bersamaan, karena file ke-5 hingga ke-8 beralamat pada domain/subdomain yang berbeda.
This entry was writen by rismaka, The Admin, A part time blogger, Biochemist, and Energy Consultant in PT. BKA. More profile on Contact.
ini dia neh javascript d footer :)
thanks pencerahannya …
berarti harus milih2 mana aja yak harus di pindahkan ..
klo script berupa tracking code dr google, atau yahoo, gmn tuch ?!!? layak kah di pindahkan ke footer ?!!?
Script tracking semisal google analytics, mybloglog, sebaiknya memang ditaruh di footer. Karena disamping kurang bermanfaat bagi pengunjung, script tersebut tidak mempunyai pengaruh apa-apa jika dipindahkan, karena cara kerja script tersebut bukan di blog kita, tapi di server sumbernya (google atau yahoo).
Kecepatan mesin pengeksekusi javaSkrip pada tiap-tiap browser juga berpengaruh kan? Si Google Chrome (yang pake V8 untuk eksekusi javaSkrip) diklaim lebih cepat daripada yang lainnya. Gak tau juga tapi.
Begitu kah? Wah, mantabs sekali analisamu brar :)
1) saya setuju dengan saudara @abrari, setiap peramban memiliki spesifikasi unik masing-masing … seperti opera yang terlebih dahulu mengunduh seluruh halaman beserta file terkait baru kemudian menyajikannya ke pengguna … di sini kita lihat urutan unduh menjadi tidak berarti *hiks, berusaha memakai kata-kata b.i yang benar*
2) mengenai pemanggilan file js dari server luar itu ide yang sangat bagus … untuk yang memiliki beberapa blog/sub-domain dalam satu domain utama dapat memakai satu saja … tetapi apakah dengan cara tersebut juga masih bisa kita pakai teknik kompresi mas?
1. Hahahah… bahasanya itu lho, dani iswara banget :lol:
Gpp mas, saya juga akhirnya ketularan mas dani tuh dalam bercakap, eh salah, dalam berbahasa indonesia yang baik dan benar sesuai dengan ejaan yang disempurnakan yang biasa disingkat dengan EYD dengan menggunakan KBBI atau kamus besar bahasa indonesia. Halah… panjang betul kalimatnya :D .
BTW saya baru tahu ternyata kalau opera mempunyai tabiat buruk macam itu. Kalau seperti itu bukannya halaman akan ditampilkan lebih lama mas? Secara opera akan mendownload semua file terlebih dahulu, selanjutnya
terserah andaia akan menyajikannya kepada penggunadengan menu-menu spesial pake telor. Bukankah hal tersebut dapat memperlambatpenuaan diniwaktu bagi peramban yang bermerk opera itu dalam berimprovisasi kepada para penggunanya yang mayoritas tidak mengetahui bagaimana cara kerja sang peramban tersebut?Apa-kah ka-li-mat ter-se-but di a-tas da-pat di-pa-ha-mi de-ngan ba-ik? :lol: :lol: :lol: :lol: :lol: :lol: :lol: :ngakak: :ngakak: :ngakak:
2. Mengkompres javascript bisa dilakukan sekalipun javascript tersebut dipanggil dari luar server. Tentunya dengan alat kompresi andalan saya, Mod_gzip :) . Tunggu saja di postingan terakhir yang paling ekstrem :D
tetapi secara keseluruhan mengenai waktu tampilnya halaman suatu situs, maka opera juga termasuk cepat … mungkin untuk beberapa file peramban ini memiliki batas waktu menunggu, kalau ternyata lewat batasan maka akan dilewati terlebih dahulu … saya seringkali memakai opera untuk membuka halaman situs yang sulit terbuka oleh peramban lainnya …
saya mau nunggu tipsnya mengenai penerapan gzip untuk js itu … *secara saya masih tetap erorrojing always … saya curiga ada bentrok dengan salah satu plugin yang saya pakai … saya mau lihat dulu cara mas Adi* :D
Kalau mengenai cara kerja masing-masing browser saya belum tahu persisnya bagaimana. Hiks..
Ditunggu aja ya mas, tapi bakalan lama lho. Saya lagi males nulis soalnya :D
saya malah mau mencoba mengggabungkan gzip dan minify. siapa tahu makin gress. hahahahahahaha
kekekekkkkk … saya dah coba gabung gzip dengan minify … hasilnya malah gak karuan bang … :D
mungkin dari sisi perambannya gak waras …
plugin yang disebutkan di atas berpengaruh tidak mas terhadap plugin clean archive reloaded
Saya belum mencobanya bung. Waktu itu saya udah lepas hampir sebagian besar plugin yg terpasang, jadi tidak tahu bedanya.
dari sumber2 yang saya tahu, untuk pararel download bisa di lakukan dengan metode nyentrik. yakni dengan cara
document.write("<script src .... />"); document.write("<script src .... />");atau dengan metode DOM.
Itu jaminan bisa bang? Saya malah ga tahu. Mungkin bisa dijelaskan? :)
dari penjelasan yang saya baca, document.write itu akan di eksekusi paralel, dimana hal ini akan menyebabkan pararel download. script doc.write pertama akan di eksekusi dan mendownload script1.js, namun hal ini tidak akan membuat blocking download, melainkan pararel. tapi sebaiknya antara script1.js dan script2.js tidak terdapat dependensi agar tidak menyebabkan error jika kita stop paksa load halamannya.
Wah, kalau yang ini saya belum paham. hehe. Thanks penjelasannya, nanti saya pelajari lagi deh.
ada juga yang model DOM
blogspot mindah scripnya kebawah bagaimana mas, tp nanti tetap diatas di tampilannya
Itu hanya memindah tempat pemanggilannya saja mas. Perintahnya sendiri tetap di atas, jadi akan tetap terekspresi di bagian atas.
[...] </head>, namun saya lebih memilih untuk memanggilnya di bagian footer. Hal ini terkait dengan optimasi javascript agar proses rendering halaman konten jauh lebih cepat tersaji dibandingkan dengan jika kita memanggil JQuery pada bagian [...]
sippps buangetts. ini yg lagi dicari. bener tu kalo di simpen sebelum kelihatan LEMOT nyaaaa. halaman berat BGT.
Beberapa kali aye di omelin: kooooq blognya BERAT BANGETt!!!, padahal kagak ada apa22, eh lg ngunduh dulu s js itu.
NUHUN bin Thankksss
Jujur aja ya.. Saya gak ngerti tuh ttg javascrift ini. hehe
Informatif dan sangat menarik sekali, terima kasih telah berbagi ilmunya.
wah blog yg sangat membantu
mksh y mas
ehm btw mampir k blog saya y mas
saya lagi update game dengan karakter sby boediono mkash
gratisanalafiko.blogspot.com
Mas Rismaka..
tolong dibahas donk cara pemanggilan js secara pararel di blogspot..
Makasih sebelumnya^^
Saya ga paham maksud dari memanggil js secara paralel itu bagaimana.. mungkin bisa dijelaskan?
wah infonya mangstab om. Sangat berguna buat blogger pemula seperti ane. Trimakasih buanyak.