July 7, 2009 — optimasi javascript yang dapat dilakukan adalah dengan menempatkan atau memanggil javascript tersebut secara eksternal dan memindahkan javascript ke footer. Kompres javascript juga bisa... Optimasi JavaScript (2) : Memanggil Script Secara Eksternal dan Menempatkannya di Footer diposting oleh rismaka pada July 7, 2009. Berikut ulasan selengkapnya.
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.
Pingback: Cara Praktis Memanggil JQuery di WordPress | Rismaka’s Weblog