Optimasi JavaScript (1) : Pendahuluan
This entry was writen by Rismaka, The Admin, Biochemist (sometimes) and Data Management Staff of PT. Ex-WF. [Contact: rismaka[at]rismaka.net]
Setelah sekian lama tak terupdate, kini saatnya kita kembali ke tema seputar optimasi website pada umumnya dan wordpress khususnya. Dan topik yang akan dibahas kali ini adalah tentang cara mengoptimasi javascript. Tujuan dari optimasi ini tak lain adalah untuk meningkatkan performa atau kecepatan loading website atau blog. Kita sudah membahas ini berkali-kali, dan sudah berulang kali saya (siapa saya??!!) para web developer sangat menganjurkan pemilik web/blog agar mengoptimasi web/blog mereka terkait masalah kecepatan web dan juga kenyamanan pengunjung.
Apa itu JavaScript?
JavaScript adalah salah suatu bahasa program yang biasa digunakan untuk membuat halaman web lebih interaktif dan lebih atraktif. Menurut wikipedia:
JavaScript is a scripting language used to enable programmatic access to objects within other applications. It is primarily used in the form of client-side JavaScript for the development of dynamic websites. JavaScript is a dialect of the ECMAScript standard and is characterized as a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but to be easier for non-programmers to work with.
Dalam dunia web designer, javascript biasanya digunakan sebagai fitur tambahan atau “penghias” web, yaitu agar tampilan website ataupun blog dapat lebih bagus, baik itu dari segi animasi, visual, maupun kebergunaan. Dalam dunia periklanan, javascript juga digunakan untuk menampilkan iklan-iklan yang sesuai kata kunci (keyword) seperti contohnya google adsense.
Jika kita menyimpan (save) suatu halaman web dengan lengkap (web page complete), biasanya kita menemukan sebuah file yang berekstensi .js. File itulah yang disebut javascript. Pada blog wordpress pun juga demikian. Biasanya beberapa theme / template wordpress mempunyai fitur yang membutuhkan javascript di dalamnya. Javascript biasanya dipanggil di bagian header dengan kode sebagai berikut:
1 | <script type="text/javascript" src="http://namadomain.com/nama_script.js"></script> |
Penggunaan JavaScript, Masih Perlukah?
Perlu tidaknya suatu web/blog menggunakan javascript tergantung dari kebergunaan javascript itu sendiri. Jika suatu web/blog ditujukan sebagai lahan pencari uang dengan bisnis PPC (paid per click) semisal adsense, adbrite, kliksaya, kumpulblogger, dan lain-lain, maka tidak bisa tidak javascript harus ada, karena itu merupakan kebutuhan primer yang tidak bisa tergantikan. Begitu pula jika suatu web/blog menggunakan template yang mendukung ajax (ajax compatibility) dalam aplikasinya, maka penggunaan javascript merupakan suatu keharusan.
Penggunaan javascript sebagai pemantau statistik kunjungan web, seperti google analytics, plugin statpress, wp-stats, dan lain sebagainya, juga merupakan kebutuhan yang dirasa penting bagi pemilik website/blog, walaupun dari sisi pengunjung/pembaca hal tersebut bukanlah sesuatu yang penting. Bisa dikatakan penggunaan javascript dalam hal ini adalah kebutuhan sekunder.
Lain halnya jika suatu web/blog menggunakan javascript sebagai penghias saja. Seperti misalnya penggunaan jcarousel sebagai animasi, ataupun pemasangan javascript untuk menampilkan “recent readers” seperti mybloglog, blogcatalog, follow this blog-nya google, ataupun game sudoku. Penggunaan javascript dalam hal ini merupakan kebutuhan tersier, dan seyogyanya untuk disingkirkan karena akan memperlambat kecepatan loading web/blog saja. Kecuali jika anda cukup egois untuk menyingkirkannya…
Pentingnya Optimasi JavaScript
Dibandingkan dengan komponen web yang lain seperti file html, stylesheet (CSS), gambar, icon, dan lain-lain, JavaScript merupakan komponen yang paling lama untuk divisualisasikan. Dan parahnya, jika dalam suatu halaman web terdapat javascript di bagian atas dari komponen tertentu (katakanlah=komponen A), maka komponen A itu tidak akan tertampilkan sebelum browser selesai memanggil file javascript tersebut. Hal inilah yang menyebabkan suatu halaman web/blog biasanya loadingnya lambat/lama.
Hal lainnya adalah biasanya javascript mempunyai ukuran file yang besar. File besar = lama waktu downloadnya = menurunkan performa. Disamping itu pula, hampir kebanyakan theme/template yang mendukung javascript, mempunyai banyak file javascript yang dipanggil secara tersendiri (terpisah), hal itu akan menyebabkan bertambahnya jumlah HTTP request, yang tentunya akan semakin menambah beban persoalan. Silahkan baca kembali artikel berjudul HTTP request sebagai faktor utama penentu performa web.
Saya ingin mengatakan, bahwa kunci utama optimasi javascript ini adalah MENIADAKAN javascript itu sendiri. Itulah cara ekstrem-nya. Namun semua itu tergantung dari kebergunaannya bagi pengelola web/blog maupun bagi pengunjung. Jika kebutuhan kita akan javascript merupakan kebutuhan tersier, akan lebih bijaksana jika kita menyingkirkan semua javascript itu. Namun jka kebutuhan kita merupakan kebutuhan sekunder ataupun primer, ada baiknya jika kita menerapkan beberapa tips optimasi yang akan saya ulas pada pembahasan berikutnya. Sengaja saya membagi pembahasan mengenai javascript ini menjadi tiga artikel, karena setiap optimasi yang akan dilakukan membutuhkan penjabaran yang cukup lengkap.
Optimasi JavaScript Secara Umum
Pada dasarnya optimasi untuk javascript tidak berbeda jauh dengan optimasi untuk file Cascading StyleSheets (CSS), karena keduanya bersumber pada simbol atau karakter yang sama, yakni “huruf“, “angka“, dan “white space (ruang kosong), sehingga optimasinya pun tak jauh-jauh dari: kompress karakter, kompress ukuran file, kombinasi, letak kode pemanggilan, sumber (source) file yang akan dipanggil, dan lain-lain. Hal utama yang membedakan javascript dari CSS adalah karena javascript itu spesial. Ia tidak bisa dikompress dan dikombinasikan begitu saja. Ia pun tak bisa dipanggil dengan letak kode yang sembarang. Semua harus ada aturannya.
Bersambung insya Allah…
Referensi:
http://en.wikipedia.org/wiki/JavaScript
http://www.boutell.com/newfaq/definitions/javascript.html
Artikel yang berhubungan:
- Optimasi JavaScript (2) : Memanggil Script Secara Eksternal dan Menempatkannya di Footer
- Cascading StyleSheet (CSS) dan 8 Tips Optimasinya
- 6 Tips Optimasi Gambar Untuk Web
- Sebuah Pendahuluan: Lima langkah Membuat Situs Gratis
- HTTP Request, Faktor Paling Utama Penentu Performa Web
- Mempercepat Loading WordPress dengan HTTP Compression
Berlangganan Artikel
Dengan berlangganan, anda akan dikirim artikel terbaru blog ini secara lengkap. Masukkan alamat email anda, kemudian tekan tombol subscribe:
sunflo (18)
Bayu (4)
technoh... (4)
Randy H... (3)
Aldy (2)
Tapi javascript membuat web menjadi lebih hidup dan atraktif :D. Yup betul, kadang ngekompres javascript malah jadi rusak fungsinya, beda ama CSS.
Ditunggu kelanjutannya boss, dah gak sabar nih pengen memperdalam bahasa javascript
Oke, ditunggu aja ya…
Udah coba YUI Compressor belum? Saya sudah mencobanya dan selama ini tidak pernah menemukan masalah. Menurut saya, YUI Compressor ini adalah salah satu javascript compressor terbaik dan masih saya gunakan sampai saat ini.
Udah nyoba minify javascript bang?
saat ini sedang mencoba menggunakannya.
Aku menggunakan java script seperlunya aja deh
ga usah dipake untuk alert message, bahkan chatbox ditempatku aja ku hilangkan
Dind, kalau boleh tau alert message itu seperti apa ya? Emang ada ya?
. Kalau mau pasang twitter mending pakai plugin twitter tools aja, lebih simpel.
Chatbox memang ga penting, begitu juga dengan plurk dan twitter
Malah plurk dan twitter sama sekali ga penting… aku sih nyob a- nyoba aja…
alert message tuh kayak kalo masuk blog ada tulisan selamat datang…
alert message kalo kita buka blog ntar ada tulisan selamat datang blabla bla
maksudnya kode ini bro
Malah bikin kaget pengunjung tuh
Menjemukan tepatnya. hahahaha….
Owh.. iya saya tahu. Pernah saya berkunjung ke salah satu blog yg menerapkan script macam itu. Hasilnya adalah “menyebalkan” hahahah
entah apa alasan mereka membuat seperti itu. tapi yah, masih bisa di maklumi lah. menurut saya, mereka bukan seorang web dev, jadi kemungkinan mereka belum tahu esensi-esensi penting dalam pengembangan web.
kalau dibandingkan dengan php, javascript itu seperti ini:
Javascript – client side programming (diproses di browser)
PHP – server side programming (dieksekusi di server)
untuk sekarang PHP dan Javascript saling melengkapi, jadi kalau salah satunya ditiadakan, bukan tidak mungkin suatu aplikasi web akan timpang
hmm… hilang salah satu di antaranya sih gak papa. masih ada scripting languange yang lain..
*menunggu sambungannya …
hahaha*
sangat menarik kalau bicara soal javascript …
saya lebih memandang kegunaannya (usable) daripada hal lainnya … karena js merupakan jembatan penyeberangan untuk mengaplikasikan suatu perintah/fungsi khusus yang memang tidak dapat digantikan oleh kode html biasa …
seberapa besar kerugian dari akibat pemakaian js seharusnya dibayar setimpal oleh kegunaannya …
seandainya saja dalam dunia internet, khususnya browser dan koneksitas, tidak ada kendala maka seharusnya implementasi dari penggunaan javascript bebas dilakukan …
Untuk hal2 seperti itu, saya lebih menyarankan untuk tidak menggunakan library, karena semua fungsinya sudah terdapat pada satu lib tersebut. sebaiknya web developernya harus menghilangkan perbagian dari script tersebut, yah walau jelas ini akan menyita waktu yang sangat banyak dari pada membuat dari awal. Saran saya, script javascriptnya lebih baik di buat sendiri.
javascript memang tergantung kebutuhan …
)
jika memang itu dibutuhkan, pasanglah sesuai kebutuhan saja, atau lebih enaknya pasang javascript di footer (bisa nggak yak
Bisa kok wan, justru itu yang akan dibahas nanti, memindahkan javascript ke footer
Numpang komen disini ya, ada kok plugin buat mindahin javascript ke footer di wordpress.
Ini linknya http://wordpress.org/extend/plugins/footer-javascript/
Hehe…
Yup, terima kasih atas sarannya Gie
Script Bikinan Orang Jawa ini memang harus digunakan secara tepat……..salah2 malah pengunjung pada lari gara2 kebanyakan PopUp apalagi dengan sifatnya yang jalan di client membuat loadingnya lebih lama
Javascript bukanlah buatan orang jawa, yah ini hanya sebuah penamaan. dulunya javascript masih bernama livescript. CMIIW
Kalo butuh harus ada ya memang hrus ada kalo gak ya mending dihindari Javascriptnya
Kenapa cuma dua blog saja mas? Yg M Surya mana? biasanya bertiga..
pakai banyak javascript tp ringan bagaimana ya, kayak di blogspot biasanya hanya disuruh pasang di bagian belakang biar lebih ringan
Di bagian belakang maksudnya itu bagian bawah ya mas? Iya benar, salah satu bentuk optimasi ini adalah dengan memindah javascript ke bagian footer (kaki), dengan begitu proses render halaman kontent dapat berlangsung lebih cepat tanpa adanya javascript yg menghambat di bagian atas. Pembahasan ini nanti akan dituangkan pada artikel selanjutnya. Tunggu saja
cara bikin JS gimana sih?? hehe maklum bukan webmaster
Cara buat JS?? Joko Susilo?? Wah hanya Allah yang bisa mas
lama banget neh sambungannya … dah gak sabar sayanya … ada yang mau ditanyakan soal optimasi javascript nih …
Hahahah… sabar mas.. Saya juga lagi bingung nih gimana nulisnya. Mungkin saya-nya saja yang terlalu perfeksionis orangnya. Saya tidak bisa menulis dengan kalimat yang belum bisa dipahami oleh orang awam. Hasilnya adalah pusing sendiri, karena harus memikirkan kata-kata dan kalimat yang tepat
(Dan juga saya lagi sibuk ngurus theme yang baru)
FYI, dari kemarin saya coba menulis, hasilnya masih mentok di beberapa paragraf saja.. hiks…
Wah, jadi penasaran nih artikel lanjutannya.
Nantikan saja kelanjutannya
saya optimasi JavaScript pakai YUI kompresor, terus saya letakkan tag script di bagian footer.
eh apa bener memanggil framework javascript seperti jQuery sebaiknya langsung dari code.google.com? soalnya setelah baca2 artikel cara itu bisa meningkatkan kecepatan download paralel
YUI kompresor bagus tuh mas. Kalau saya biasa pakai gzip dan minify.
Mengenai pemakaian framework tsb saya kurang tahu persisinya. Yang saya ketahui developer dari yahoo sendiri menyebutkan bahwa setiap javascript dapat menghambat download paralel, dengan kata lain sebelum sebuah javascript terpanggil, browser tidak dapat mendownload file-file lainnya (sekalipun file tsb paralel dg script tsb). Tapi entahlah kalau sekarang sudah bisa. Saya kurang mengikuti juga perkembangan yang ada.
dari yang saya baca di jQuery.com, memang sebaiknya langsung dari code.google.com, apalagi google menerapkan shared cache di web nya. CMIIW
Owh begitu ya.. Tapi berdasarkan pengalaman, saat saya mencobanya, malah lambat bang. Mungkin karena saat itu server google lagi lemot. Biasanya lemotnya itu di jam-jam malam.
Saya pribadi lebih suka dengan menguploadnya di server sendiri, karena seimbang kecepatannya.
hmm… sepertinya memang googlenya yang lambat. apalagi google menangani bermacam2 layanan. hmm… wajar sih klo lambat. tapi bukankah download sudah menjadi paralel?
Yang paling penting dalam pemrograman (dan juga paling susah dan menyebalkan (karena itulah ilkom diperlukan
)) tentu saja optimasi algoritmanya. Teknik mengurangi kompleksitas algoritma, efisiensi variabel, memori, pointer, serta hal-hal membingungkan lainnya.
Walaupun file javaskripnya pendek, kecil, atau servernya ngebut, kalo algoritmanya “naif” (begitu istilah untuk algoritma yang kacau dan asal jadi) maka sang browser juga akan kebingungan untuk merepresentasikannya (mengeksekusinya).
Ane sendiri juga gak mudeng
Btw, boleh juga tuh peniadaan javaskrip. Biar kembali lagi ke internet zaman batu
Sama brar, ane juga ga mudheng dg apa yang ente omongin
Terlalu teknis IT.
*baca2 komen di atas*
dulu aku juga pake twitter tools, tapi karna ada alasan khusus, jadi dicabut deh..
kalo diliat dari sepinya widgetku, keknya blogku ga pake banyak javascript ya. keknya ini mah..
trus, mau nanya, agak ga nyambung nih yak,
pernah bahas AJAX ga?
aku punya masalah di situ soalnya.
coba mampir kemari dah bentaran:
wordpress.org/support/topic/278108
kalo bisa bantu, bilang2 yak
Kalau boleh tau kenapa twitter tools nya dicabut mas?
Mengenai blogmu, sepertinya perlu dilihat source code-nya. Walaupun theme yang kita pakai tidak ada javascriptnya, tapi beberapa plugin suka menyisipkan javascript di bagian header. Jadi perlu diperiksa lagi source code blogmu.
AJAX itu bukannya club sepakbola
Saya copy paste aja ya pertanyaanmu di forum itu:
Ada yang bisa bantu mas Phy ga ya???
bukannya wp 2.7 sudah support threaded comment? ngapain pakai plugin lagi yah? Untuk model ajax tersebut, katanya harus punya koment ID.
Solusinya menurut saya begini, buka comments.php. Tapi berhubung comments.php isinya tidak bisa sama, contohnya saya menggunakan list untuk menampilkan komentar, sedangkan mas phiy pakai div. jadi saya tidak bisa spesifik menjelaskannya. harus lihat kode comments.php nya.
[...] pada bagian header. Hal ini dapat menghambat performa atau kecepatan loading blog. Lihat kembali kerugian yang disebabkan oleh penggunaan javascript. Yah, walaupun perbedaannya tidak signifikan, namun tetap saja dalam hal performa, faktor sekecil [...]
Iya, memang paralel. Tapi yang telah dijelaskan oleh developer yahoo sendiri, bahwa javascript akan menghambat download paralel utk file yang lain. Jadi bisa dikatakan, kalau javascriptnya belum terpanggil, maka file yang lain tidak akan terdownload.
bukannya tergantung browsernya? pada dasarnya kan browser mengunduh file 2 atau 4 file sekaligus. bukan begitu? Udah pernah mencobanya belum bro. bisa di test pakai firebug FX