Berbicara Tentang Optimasi Kecepatan Muat Halaman

Tabel Konten
  1. JavaScript Packer vs. Minifier 
  2. Memperkecil Permintaan HTTP 
  3. Menggabungkan Semua File Eksternal Sejenis 
  4. Meletakkan JavaScript di atas </body> 
  5. Merasa Blog/Situs Anda Sudah Cukup Cepat? 

Beberapa orang berpendapat bahwa kompresi JavaScript, CSS, gambar atau bahkan HTML bisa mempercepat proses muat halaman sebuah situs. Tapi Saya tidak pernah setuju dengan itu 100%. Ada begitu banyak hal yang harus menjadi pertimbangan lebih lanjut dibandingkan sekedar memfokuskan perhatian Anda terhadap perhitungan besar kecilnya ukuran file. Kebanyakan alat kompresi hanya akan memperkecil ukuran berkas tidak lebih dari 20%:

Hasil Kompresi CSS
Hasil Kompresi CSS – CSSDrive

Dan lagipula, kompresi yang dilakukan hanya berada pada seputar peringkasan variabel dan pembuangan karakter spasi yang tidak diperlukan. Itu sama sekali tidak mempercepat proses muat halaman sepenuhnya, itu hanya akan mempercepat proses pengunduhan file secara sepihak. Dalam hal ini adalah CSS/JavaScript yang notabene hanyalah file berupa teks, sehingga mengunduh teks yang dikompresi dengan teks yang tidak dikompresi tidak akan memberikan begitu banyak perbedaan. Kecepatan muat halaman situs tidak semata-mata dipengaruhi oleh faktor ukuran file, tapi juga oleh validasi, permintaan HTTP dan juga ketepatan pendeklarasian kode tugas yang akan memberikan timbal balik berupa kemudahan peramban dalam membaca dokumen Anda.

JavaScript Packer vs. Minifier 

Mana yang lebih cepat dimuat, antara JavaScript yang dikompres dengan teknik Packer dan teknik Minifier? Seharusnya Packer lebih cepat karena mereka akan mengompres kode jauh lebih banyak dibandingkan Minifier.

Mohon pertimbangkan sekali lagi. Packer memang akan memperkecil ukuran JavaScript jauh lebih banyak dibandingkan Minifier, tapi imbasnya adalah peramban harus memberikan waktu tambahan untuk menyusun kembali kode-kode yang sudah dipecah meskipun kenyataannya ukuran mereka sudah diperkecil. Packer (dan Obfuscator) akan membuat JavaScript lebih lama dimuat bukan karena ukuran file yang besar, namun karena membuat waktu membaca peramban menjadi lebih lama. Saat kita mengompres JavaScript dengan Packer atau Obfuscator, kita seperti sedang memberikan teka-teki sandi perintah terlebih dahulu untuk dijawab oleh peramban sebelum pada akhirnya mereka berhasil menjawabnya dan menjalankan tugasnya. Lebih baik gunakan Minifier dibandingkan Packer jika memang ingin mengurangi ukuran file JavaScript:

Menggunakan Base62 menambahkan langkah tambahan sebelum JavaScript dapat dimanfaatkan oleh klien. Untuk jenis perpustakaan jQuery langkah ini dapat mengambil ekstra waktu 100 - 500ms pada klien, tergantung pada banyak faktor. Sekarang kita dapat membandingkan pengurangan "waktu untuk mengunduh script" dan "waktu tambahan yang dibutuhkan untuk mengeksekusi script". Ini (packer/teknik base62) dapat mengurangi waktu pengunduhan sebanyak 50ms tetapi mengambil ekstra 100ms hanya untuk memprosesnya (menyusun kembali kode yang sudah terpecah-pecah) - Sumber

Lalu bagaimana dengan alasan perlindungan kode? Bukankah Packer dan Obfuscator jauh lebih melindungi kode dibandingkan Minifier? Ini semua adalah pilihan. Pada dasarnya setiap teknik kompresi masih tetap bisa menjaga agar file bisa dibaca oleh peramban. Ambil keputusan yang sekiranya memiliki kerugian terkecil berdasarkan tujuan.

Memperkecil Permintaan HTTP 

Semakin banyak permintaan HTTP (HTTP Requests) yang terjadi, maka akan semakin lambat halaman termuat. Permintaan HTTP pada dasarnya hanyalah tentang seberapa banyak peramban menghubungi server untuk memanggil data. Cara mengecek permintaan yang terjadi sebenarnya sangat mudah. Perhatikan saja status bar pada peramban Anda saat halaman sedang dimuat:

Melihat Proses Transfer Data Melalui Status Bar
Melihat proses transfer data melalui bar status

Dari situ Anda bisa melihat mana data yang cepat diakses dan mana yang lebih lama diakses berdasarkan kecepatan perubahan status. Jika Anda sudah menemukan apa yang membuat situs Anda menjadi lambat, Anda bisa segera mengambil keputusan terhadap file yang berhubungan dengan itu. Apakah akan membuangnya atau mengubah pengurutan permintaan yang lebih lambat menuju ke level yang lebih rendah (tidak dinomorsatukan). Misalnya, dengan cara meletakkan file yang lebih lama termuat di sebelah bawah.

Usahakan untuk mengurangi permintaan HTTP dari situs pihak ke tiga sebanyak mungkin. Katakanlah kita memiliki sebuah blog yang dilengkapi dengan widget Facebook Like, Twitter Feed, Chatbox dan Disqus dalam satu halaman yang sama. Ditambah lagi foto-foto artikel dan gambar latar belakang yang diunggah di Photobucket, kode CSS yang disimpan di GitHub dan JavaScript yang disimpan di Google Code. Kita bisa mengatakan itu semua sebagai komponen permintaan situs pihak ke tiga, karena kita telah menyisipkan berbagai URL file yang disimpan di ruang penyimpanan lain ke dalam blog kita. Meskipun mereka semua hanya berupa file-file kecil yang umumnya berupa teks, namun saat Anda membuka halaman blog dimana file-file yang disertakan di dalamnya masih merupakan milik situs lain, itu tetap saja akan memiliki arti yang sama seperti halnya Anda sedang membuka semua situs tersebut secara bersamaan!

Menggabungkan Semua File Eksternal Sejenis 

Menggabungkan semua file sejenis ke dalam sebuah file besar bisa menjadi solusi termudah untuk mengurangi permintaan HTTP. Artinya bahwa kita akan mengubah sesuatu yang tadinya seperti ini:

<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>

menjadi seperti ini:

<link rel="stylesheet" href="style-123.css">
<script src="script-123.js"></script>

Ini berlaku juga untuk JavaScript dan CSS internal. Meskipun mereka tidak memiliki hubungan dengan permintaan HTTP, namun mengurangi jumlah tag <style> dan <script> di dalam dokumen juga bisa mempermudah peramban dalam membaca dokumen (memperpendak jarak baca dan mengurangi pengulangan baca file dengan tipe yang sama):

<script>
function abc() {
   document.write('abc');
}
</script>
<script>
function def() {
   alert('def');
}
</script>
<script>
function ghi() {
   var c = confirm('ghi?');
   if(c) window.open('http://nama_blog.com');
}
</script>
<script>
$(function() {
    // DOM ready 1 ...
});
$(function() {
    // DOM ready 2 ...
});
$(function() {
    // DOM ready 3 ...
});
</script>
<script>
abc();
def();
ghi();
</script>
<style>#lorem {width:200px}</style>
<style>#ipsum {color:red}</style>
<style>#dolor {border:1px solid blue}</style>

Ubah semua susunan kode di atas menjadi seperti ini:

<style>
#lorem {width:200px}
#ipsum {color:red}
#dolor {border:1px solid blue}
</style>
<script>
function abc() {
   document.write('abc');
}
function def() {
   alert('def');
}
function ghi() {
   var c = confirm('ghi?');
   if(c) window.open('http://nama_blog.com');
}
$(function() {
    // DOM ready 1 ...
    // DOM ready 2 ...
    // DOM ready 3 ...
});
</script>
<script>
abc();
def();
ghi();
</script>

Meletakkan JavaScript di atas </body> 

Ini memiliki arti bahwa kita meletakkan JavaScript sejauh mungkin dari sebelah atas dokumen. Hal ini disarankan untuk mencegah keterlambatan pemuatan kerangka HTML di bawahnya karena lambatnya proses muat JavaScript di atasnya. Dengan meletakkan JavaScript di bawah, maka setidaknya kita telah mengizinkan peramban untuk merayapi kerangka halaman terlebih dahulu sebelum kemudian sampai pada masa untuk memuat dan membaca JavaScript. Posisikan juga CSS lebih awal dibandingkan JavaScript sehingga pembentukan tubuh halaman akan dieksekusi terlebih dahulu dibandingkan pengerjaan JavaScript.

Tapi tunggu dulu! Meletakkan JavaScript di bagian bawah juga tidak sepenuhnya benar. Beberapa faktor bisa membuat mereka tidak bekerja. Selengkapnya bisa di baca di sini

Merasa Blog/Situs Anda Sudah Cukup Cepat? 

Jangan senang dulu. Mungkin itu karena Anda telah mengunjungi situs web Anda berkali-kali, yang juga berarti bahwa cache dari situs Anda masih tersimpan di dalam komputer. Sekarang coba Anda hapus semua cache yang ada kemudian muat ulang halaman situs Anda kembali:

Menghapus Cache
Menghapus Cache

Saat cache sudah terhapus, maka Anda akan merasakan kecepatan situs Anda yang sesungguhnya seperti halnya saat pengunjung Anda membuka situs Anda.

Tentunya akan terasa sedikit lebih lambat. Itu juga merupakan kesimpulan sederhana mengenai pertanyaan bodoh tentang mengapa saat kita pertama kali mengunjungi sebuah situs terasa begitu berat, namun saat kita telah menjadi langganan mereka, semuanya berubah menjadi lebih cepat.

Pembicaraan optimasi ini sepertinya lebih banyak berputar di sekitar JavaScript dan CSS saja. Ya, karena Saya pikir pembicaraan selain itu masih bisa dipahami seperti apa adanya. Saya hanya ingin menuliskan sesuatu yang seringkali menjadi sumber kesalahpahaman. Punya tambahan?

25 Komentar

  • Unknown

    Yeah Aku JUga begitu bang Udah Optimasi Jquery dengan cara menggabungkannya

  • Unknown

    @system of blog EEttss Hampir Lupa Aku Setuju banget sama Kompres2 itu Aku sendiri heran kenapa orang mengkompres Css And JS nya sedangkan aku mikir PunyaQ aja gak di kompress tetep gitu2 aja Meskipun di kompress juga tetep gitu2 aja perbedaanx itu gak terlalu menonjol, dan satu lagi kekurangan kompress bikin Ngoding Ribet kodenya berantakan kesana kemari :(

  • Taufik Nurrohman

    @system of blog Semakin dikompres akan semakin sulit untuk diperbaiki. Kode CSS dan JavaScript di blog ini juga Saya usahakan untuk tidak dikompres. Berhubung ternyata masih banyak juga yang suka ngintip-ngintip :p
    Saya paling cuma mengompres plugin atau JSON pendek yang bukan merupakan buatan sendiri. Sedangkan kode-kode yang Saya buat sendiri tidak Saya kompres. Masalahnya Saya tahu bahwa perbedaannya memang tidak tampak kalau untuk file berupa teks, antara yang dikompres dan yang tidak dikompres. Gambaran mudahnya: Makan sepiring nasi tetap sama kenyangnya dengan makan sepiring nasi ditambah sesendok nasi lagi.

    • budkalon

      Saya juga sering ngintip :p
      Boleh ya :D

    • Unknown

      Gambaran mudahnya: Makan sepiring nasi tetap sama kenyangnya dengan makan sepiring nasi ditambah sesendok nasi lagi.
      haha kata-katanya gookil mas. :p

    • Sekedus

      mungkin bisa menggunakan ini, menunda pemuatan script sampai di scroll:
      var fired = false;
      window.addEventListener("scroll", function(){
      if ((document.documentElement.scrollTop != 0 && fired === false) || (document.body.scrollTop != 0 && fired === false)) {
      (function() {
      // script disini
      })();
      fired = true;}}, true)

  • Beben Koben

    penjelasan yg sangat jelas.
    tapi aku tetep ora mudeung :D

    Makanya sedia alat compress dan uncompressnya dong (kayak aku)..xixixi

    Komplit tools aku mah lah :p

  • Bayu Handono

    @Beben Koben sama kagak ngerti, tapi saya sih murni ga pernah dikompres sama sekali :p

  • Arif Rahman

    @Taufik Nurrohman "Berhubung ternyata masih banyak juga yang suka ngintip-ngintip"
    saya merasa tersindir dengan kalimat ini :Ozz :'( :'(

  • Anonim

    Mas mengapa sie kalau saya ingin menggabungkan beberapa tag script menjadi satu tag script kok ndak ada hasilnya? :(

    Dan mengapa kalau saya host css external itu efeknya berbeda dengan saya menaruhnya internal mas? @@,

  • Taufik Nurrohman

    @The7Bloggers Banyak jenisnya. Untuk mengetahui kesalahannya lebih baik mulai belajar Web Console. Umumnya itu karena kesalahan pengurutan atau gagal memanggil script dari tempat penyimpanan. Cari caranya di Google.

  • Farid Wajdi Kardbri

    jadi klo make css eksternal sama aja gak make css eksternal? gitu yah? :yaya:

  • Taufik Nurrohman

    @Farid Wajdi Kardbri Baca komentarmu kok Saya malah jadi tambah bingung! Haha :D

  • Andy Nur

    wah, saya lama gk berkunjung ni.
    asli tmbah keren aja ni mas taufiq.
    saatx jalan2 dlu di blog ini :D

  • Bakteri

    Waduh..! guna nie..! :-bd apa lagi kalau masukin JQuery ama Javascript .atau css \o/

  • Yusril Ibnu Maulana

    keren..., infonya semua berguna !!!
    btw. gimana cara buat kode emotion diatas dan kode keluar ketika kita mengkliknya ??
    ===============================
    waduh..., lama lama pegel nih baca banyak postingan berguna disini...

    saya berimpian untuk membuat blog yang memberi tutorial yang lebih ditujukan css ..., padahal kemampuan edit css saya tidak terlalu hebat :( , hanya bisa membuat efek gradient / hover, @keyframes dsb...,
    dan untungnya saya masih banyak waktu untuk belajar css (melihat usia saya masih muda), dan artikel disini sangat membantu... dari jquery, css edit html dsb (yang bikin saya stress kalu gagal ~x( hehehe..) thanks yah, bila ada kesempatan waktu silahkan berkunjung ke blog saya yang baru dan artikelnya pun masih 1:9999999999 di banding artikel disini. mungkin disana anda dapat mengkoreksi penampilan, kecepatannya , dan isi dengan cara berkomentar. :-bd

    Plustutorial(dot)blogspot(dot)com
    thanks,

  • Surga Kenari

    mas Taufik sblmnya mohon maaf lahir batin :)

    mas saya mau nanya

    Blog saya ketika pakai firefox Size : 54KB

    sepertinya gak normal size blog saya ketimbang blog2 yg lain gak sampe 50KB (berat sekali)

    di banding punya blog mas Taufik cuma 18KB

    bisa kasih saya pencerahan gak mas biar sizenya gak lebih dari 20KB ?

    ada kesalahan dimana ya mas?

    thx before

    • Taufik Nurrohman

      Ukuran halaman sebenarnya terbilang cukup kecil. Yang menambah beban itu ada pada transfer feed posting (di drop down menu) yang terlalu banyak dan beberapa script eksternal Saya rasa. Kalau bisa kurangi juga nilai max-results pada widget posting acak di bagian ini:

      &max-results=1000&callback=randomposts
      • Surga Kenari

        di optimasi lg supaya sizenya gak lebih dari 20KB bisa mas?

        • Taufik Nurrohman

          Bisa. Tinggal nyari letak bebannya itu yang kadang bikin pusing.

  • Unknown

    saya mau tanya mas kalo kompres javascript syntax highlight gmn kan scriptnya banyak amit tuch , kalo dijadiin satu gmn caranya ??? maaf mas masih belajar buat blog

  • Unknown

    saya coba mengitu cara diatas dengan menggabungkan beberapa tag script menjadi satu tag script kok malah gakberfungsi mas ?

  • Sikkahoder

    setiap hari selalu saya baca tutorial di blogh ini.. satu kata buat pemosting... SENSASIONAL... WEBSITE TERBAIK DENGAN TUTORIAL PETUNJUKNYA...

Komentar telah ditutup.