Cara Mempercepat Loading Blog

Loading speed atau kecepatan loading blog adalah parameter penting dari suatu blog. Pengunjung akan lebih suka dengan blog yang loadingnya cepat, apalagi dengan koneksi internet ~~Indonesia~~ yang lambat. Kalau loading blog kamu terlalu lama, bisa-bisa pengunjung sudah bosan nunggu dan nggak jadi berkunjung ke blog kamu.

Secara umum, kecepatan blog itu dipengaruhi oleh: banyaknya elemen blog (gambar, widget, dll), banyaknya file eksternal (css atau javascript eksternal), dan ukuran dari masing-masing file tersebut.

Jadi, kalau ingin blog kamu loadingnya cepet, saya rasa tips-tipsnya adalah:

1. Optimalkan Gambar

Jika blog kamu menampilkan gambar sebagai aksesoris/ilustrasi posting/atau yang lain, sebaiknya mengoptimalkan gambar supaya tidak memperberat waktu. Mengoptimalkan gambar berarti kita: memperkecil SIZE gambar sambil mempertahankan kualitas gambar.

Untuk memperkecil ukuran gambar ini bisa dilakukan dengan beberapa trik.

Crop gambar untuk membuang bagian yang tidak perlu
Pastikan gambar memiliki ekstensi yang tepat
Jika gambarmu adalah gambar panorama, maka gunakan ekstensi .jpeg. Jika gambarmu adalah gambar line drawing atau logo, pakailah .png karena .png memiliki kompresi lebih baik dari .gif. Jika gambarmu berupa animasi, pakailah .gif karena ukurannya sangat kecil dan simple dengan spacer transparan 1-pixel.
Lakukan kompresi pada file tersebut agar ukurannya mengecil sampai batas optimal, namun kualitas tetep terjaga. Untuk melakukan kompresi ini bisa dengan software atau tools online.

Kalau mau lihat contoh tools image compression/image optimizer bisa melihat postingan DailyTechPost di sini, dan kalau mau lihat contoh tool online-nya bisa langsung ke WebResizer di sini.

Setelah melakukan kompresi, maka size gambar akan menjadi sekecil mungkin, dan siap di-upload ke blog. :D
Spesifikasikan ukuran gambar di kode HTML-nya.

Hal ini bisa dilakukan dengan memperhatikan kode HTML untuk gambarnya dengan mencari kode di bawah ini:

?

1
<img src="URL Image" height="100" width="100" />

Dengan menuliskan width dan height yang pasti, maka gambar akan di-load dengan lebih cepat. Namun ingat bahwa ukuran yang ditulis haruslah ukuran sebenarnya. Jika gambar kamu berukuran 500 x 500px, maka jangan menuliskan width="100" height="100" karena hal ini justru memperberat loading blog.

2. Manajemen CSS dan Javascript

Nah, ini agak sedikit ribet karena kita harus mengutak-atik template HTML blog kita. Namun hasilnya lumayan dalam mempercepat waktu loading blog.

Pertama, yang harus dilakukan adalah menghemat ukuran CSS/Javascript dengan membuang spasi/enter/indent/komentar yang tidak perlu. Jadi, kode CSS yang semula adalah:

.post {
   padding:0 5px 20px 10px;
}
.post-header {
   font-size:11px;
}
.post h3 {
   color:#008C00;
   font-family:"Trebuchet MS",Arial,sans-serif;
   font-size:1.7em;
   text-align:left;
   line-height:1;
   margin:0 0 5px;
}

...harus diubah menjadi...

.post {padding:0 5px 20px 10px;}
.post-header {font-size:11px;}
.post h3 {color:#008C00;font-family:"Trebuchet MS",Arial,sans-serif;font-size:1.7em;text-align:left;line-height:1;margin:0 0 5px;}

Untuk melakukan ini bisa dengan manual (delete spasi, enter, indent, dan komentar di halaman Edit HTML di Design. Namun, cara ini melelahkan.

Cara mudah adalah dengan kompresor online, misalnya kompresor YUI yang bisa meng-kompres CSS dan Javascript. Langsung aja copy-paste kode yang ingin kamu kompres, lalu copy-paste hasilnya ke template blog.

Setelah CSS dan Javascript kamu rapi, yang kedua adalah masalah peletakannya di dalam template. CSS harus diletakkan diantara tag <head>...</head> pada template agar halaman bisa "muncul" lebih cepat (sambil menunggu load yang lain). Hal ini bisa mempengaruhi kenyamanan pengunjung karena pengunjung merasa mendapat feedback visual yang membuatnya mau menunggu (meskipun masih ada elemen yang belum di-load).

Sedangkan Javascript, secara teori, harus diletakkan di bawah karena loading script bisa menyebabkan parallel download block. Saat browser me-load gambar, contohnya, maka browser masih bisa mendownload gambar lain sambil menunggu gambar pertama selesai. Berbeda dengan script, browser akan menunggu sampai script selesai di-download sebelum melakukan loading elemen lain.

Singkatnya, kalau script kamu letakkan di atas, tentu saja akan menghambat load elemen lain :)

Namun peletakan Js ini harus hati-hati. Pastikan Javascriptnya diletakkan sebelum fungsinya di-eksekusi :D

3. Rangkum file eksternal (css, javascript) menjadi satu file saja

Terkadang blog kita memanggil referensi file CSS dan Javascript dari luar, yang ditandai dengan kode ini di template blog:

CSS:

1 2	`<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"` `rel="stylesheet"` `type="text/css"></link>` `<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css'` `rel='stylesheet'` `type='text/css'/>`

Javascript:

1	`<script src='http://vikachew09.googlecode.com/files/SyntaxHighlighterAll.js'` `type='text/javascript'/>`

Nah, kadang, ada beberapa file CSS/Js eksternal yang memiliki fungsi yang sama, namun terpisah di file-file yang berbeda. Untuk mempercepat loading blog, kita bisa menyatukan file-file tersebut dalam satu file, lalu mengganti referensinya menjadi satu kali referensi saja.

Caranya mudah. Pertama copy-paste kode CSS/Javascript menjadi satu file di Notepad kamu. Lalu save as menurut typenya (.css atau .js). Jangan lupa untuk melakukan kompresi kode dengan mengikuti tips nomor 2 di atas.

Setelah memiliki satu file css dan js yang terkompresi, maka langkah berikutnya adalah meng-upload ke internet. Salah satu cara mudah untuk mengupload kode CSS atau Javascript adalah dengan memanfaatkan code.google.com.

Untuk mengikuti tutorial membuat akun di code.google.com bisa menuju ke tutorial blog tetangga ini di sini.

Setelah daftar di code.google.com dan meng-upload CSS dan Js di sana, maka kita bisa mendapatkan link referensinya (seperti dijelaskan pada tutorial di link di atas). Lalu, kita hanya perlu mengubah kode template Blogger dengan referensi baru ini.

Dengan begitu, file-file CSS dan Js yang banyak di blog akan bisa diminimalisir dan loading blog akan lebih cepat. Tapi kamu harus jeli dalam memilih dan memilah kode mana yang harus dijadikan satu atau dipisah.

Jika ingin, kamu bahkan bisa membuat semua kode CSS/Javascript menjadi eksternal. CSS/Js yang inline di template akan selalu di-download ketika halaman di-load, sedangkan CSS/Js eksternal akan di-cache oleh browser sehingga mengurangi ukuran HTML dokumen/page sehingga loading page akan lebih cepat. Namun cara ini tidak saya rekomendasikan karena akan mempersulit kita jika ingin melakukan perubahan pada blog. Jadi, buatlah file eksternal pada CSS/Js yang sekiranya tidak akan kamu rubah-rubah dalam waktu dekat. :D

4. Perhatikan penggunaan widget/multimedia

Widget adalah aksesoris buat blog kamu yang disediakan oleh (kebanyakan) pihak ketiga selain platform blogging yang dipakai. Beberapa widget populer misalnya Shoutbox, glitter text, Facebook badge, dll.

Sedangkan multimedia adalah file-file musik dan video yang dipasang di blog untuk menambah keramaian blog. :D

Nah, pemakaian widget dan multimedia ini memang bisa membuat pengunjung nyaman dan membuat tampilan lebih bagus. Tetapi kita harus pintar-pintar memilih yang benar-benar diperlukan/tidak karena widget dan multimedia juga menimbulkan page delay karena banyaknya HTTP request yang dilakukan untuk mendapatkan widget tersebut.

5. Perhatikan tampilan halaman utama

Di halaman utama blog, kadangkala kita diberi pilihan untuk menampilkan jumlah posting dalam jumlah tertentu. Semakin banyak posting yang ditampilkan di halaman utama blog, maka semakin banyak waktu yang diperlukan untuk me-load halaman ini.

Selain jumlah posting, panjang tiap posting juga berpengaruh. Jika postingan terlalu panjang, maka mungkin kamu bisa mempertimbangkan untuk menambahkan "Read More" di blog kamu. Di Blogger sendiri ada fasilitas yang bernama Jump Break yang fungsinya sama dengan readmore. Untuk lebih tahu tentang Jump Break ini silakan baca artikel Blogger di sini.

"Jump Break"

Penempatan area posting juga berpengaruh. Jika kamu memakai template blog yang memiliki kolom (2-column atau 3-column), letak postingan yang paling baik adalah di sebelah kiri dan sidebarnya ada di sebelah kanan. Dengan begini, maka postingan kamu akan lebih cepat di-load daripada sidebarnya.

Akhir kata

Dari beberapa tips di atas, kita bisa memaksimalkan loading time blog kita dengan cara-cara mudah. Sering-seringlah menganalisa keadaan blog untuk tahu loading speednya dengan memanfaatkan tools-tools gratis yang ada di internet.

Salah satu tools yang bagus menurut saya adalah di websiteoptimization.

Di situ ada kecepatan total loading blog, dan ada kecepatan per elemen blog. Asyiknya lagi, ada analisis dan rekomendasi untuk kamu jika ingin memperbaiki kecepatan loading blog. Dengan rekomendasi ini kita bisa tahu keadaan loading blog kita dan tahu bagian mana yang harus dioptimalkan.

Selamat mencoba dan happy blogging!

gambar diedit dari: livorsi.com