Cara Mempercepat Loading Blog

Cara Mempercepat Loading Blog - Lamanya loading suatu blog bisa dipengaruhi oleh 3 hal, yaitu: Koneksi si pengunjung, kemampuan server, dan ukuran serta desain halaman yang dibuka oleh browser.

Untuk hal yang pertama yaitu koneksi pengunjung blog, sudah jelas itu di luar kemampuan kita, sedangkan untuk hal yang kedua masih tergantung apakah anda menggunakan hosting sendiri atau tidak....

Kalau anda tidak punya akses ke server alias pengguna jasa gratisan, maka pasrah saja jika server berulah. Tapi satu hal yang pasti bisa kita atasi adalah poin ketiga, karena itu sepenuhnya bisa kita atur.

Perlu dicatat bahwa saya sendiri tidak melakukan semua proses di bawah ini. Untuk menjawab komentar dan menulis artikel saja saya sudah kepayahan....jadi belum ada waktu untuk  mengutak-atik semua komponen dan membuat rancangan ulang setiap elemen. Jadi saya bagi apa yang saya tahu, dan bukan apa yang saya lakukan saja ya? Harap maklum .... ^_^

Adapun cara terbaik untuk mempercepat loading blog adalah dengan membuat blog yang seringan mungkin. Semakin banyak komponen, dan semakin besar ukuran setiap komponen penyusun halaman, maka akan semakin lama waktu muat dari blog anda.

Singkat kata blog dengan desain warna putih dan tulisan apa adanya akan terbuka dengan sangat mudah. Yang menjadi masalah adalah; sangat sedikit orang yang ingin membuat blog yang apa adanya seperti itu.

Rata-rata blogger menjadikan blognya sebagai sarana mengekspresikan diri mereka. Jadi mari kita melihat apakah ada hal-hal yang bisa dilakukan setidaknya untuk mengurangi waktu loading dari blog kita sambil tetap berekspresi ria di blog.

Sekali lagi perlu diingatkan bahwa tips di bawah ini dibuat dengan asumsi bahwa kecepatan koneksi pengguna, dan kemampuan server yang mengakomodir blog kita tidak bermasalah. Tips di bawah ini juga dibatasi untuk pemakai blogspot saja. Untuk pengguna blog atau website yang self hosted, tentu lebih banyak opsi yang bisa ditempuh....

#1 Cara Mempercepat Loading Blog Dengan Mengurangi HTTP Request

Cara pertama untuk mempercepat loading dari blog adalah dengan membuat komponen blog seminimal mungkin. Untuk setiap komponen yang ada browser akan melakukan request yang memakan waktu loading.

Seumpamanya seperti ini, anda membutuhkan 300 barang dari sebuah supermarket, sedangkan sekali jalan pembantu anda cuma bisa membawa 30 barang. Itu berarti pembantu anda harus bolak balik sebanyak 10 kali untuk membawa semua barang. Seandainya anda hanya memesan 100 barang saja.... pasti pembantu bisa menyelesaikan pesanan anda dalam waktu yang jauh lebih singkat.

#2 Cara Mempercepat Loading Blog Dengan Memperkecil Ukuran Gambar

Ukuran gambar yang dimaksud di sini bisa dalam pixel maupun dalam kb. Jadi anda bisa mempekecil persentase pixels gambar dan menguploadnya atau sekedar menurunkan kualitas gambar dengan ukuran dimensi yang tetap (gambar jadi agak blur sedikit). Kedua teknik ini akan mengurangi ukuran file gambar.

#3 Mempercepat Loading Blog Dengan Melakukan CSS Image Sprites

Teknik ini adalah menggabungkan beberapa gambar dalam satu gambar dan membagi satu gambar itu dalam banyak area. Jadi dalam satu gambar bisa disuntikkan banyak link, yang mana sebelumnya dalam satu gambar cuma bisa ada satu link.

Image Sprites bisa digunakan dalam background, ataupun navigasi yang menggunakan gambar berederet.Penggunaan image sprites bisa mengurangi http request yang ada pada gambar di atas, karena yang sebelumnya harus meloading banyak gambar sekarang hanya perlu mendownload satu gambar. Ukuran bobot gambar bisa saja tidak berkurang, tapi berkurangnya http request yang mempercepat waktu loading blog anda.

#4 Mempercepat waktu loading dengan menggabungkan beberapa file

Misalnya blog anda memakai beberapa file style sheet, jika anda bisa menggabungkan beberapa file tersebut dalam satu file style sheet, dengan demikian kita bisa mengurangi http request. Teknik ini juga berlaku untuk script. Anda bisa menggabungkan beberapa script dalam satu file.... sehingga browser hanya sekali saja meloading semua script.

#5 Mempercepat waktu loading dengan memastikan semua style sheet berada pada head section

Dengan melakukan ini anda bisa membuat browser melakukan render dengan sangat cepat untuk setiap pengaturan style setiap komponen di dalam halaman tersebut.  Pengaturan style pada body bisa membuat render lebih lambat, atau bahkan jika style sheet ditaruh di bagian bawah halaman, bisa berakibat errornya tampilan, karena browser memblokir proses render untuk mencegah penataan ulang elemen jika style berubah.

#6 Mempercepat waktu loading dengan menaruh script pada bagian akhir halaman blog.

Berbeda dengan style sheet, script justru akan lebih baik jika ditaruh di bagian akhir dari halaman. Kenapa? Karena browser akan memblokir proses loading dari elemen halaman lain jika script ditaruh di antara elemen. Dengan menaruh script pada bagian akhir halaman, maka semua komponen sudah selesai dimuat saat browser akan mulai melakukan script loading.

Yang menjadi masalah adalah tidak semua script bisa ditaruh pada bagian bawah dokumen. Script yang berfungsi untuk memanggil elemen halaman, harus ditaruh pada posisi yang diinginkan. Untuk itulah beberapa pengembang mulai menggunakan script asinkron, sehingga halaman bisa tetap melanjutkan proses loading tanpa harus menunggu tuntasnya script asinkron.

#7 Hindari CSS Expression

Apa yang dimaksud dengan CSS expression? CSS ini digunakan jika anda ingin membuat CSS yang dinamis. Misalnya membuat tampilan warna background berubah setiap jamnya. CSS expression ini bisa membuat browser menganalisa halaman berulang kali. Bayangkan saja, hanya dengan mengayunkan pointer mouse menyeberangi halaman, browser anda bisa menganalisa halaman hingga ribuan kali. Jadi sebaiknya hindari atau gunakan one time expression untuk mengurangi intensitas kalkulasi yang dilakukan browser anda.

#8 Anda bisa mempercepat waktu loading blog dengan menggunakan CSS dan Javascript eksternal

Tujuan utama dari menggunakan CSS dan javascript external dan bukannya inline adalah untuk memanfaatkan cache oleh browser. Dengan menggunakan eksternal css dan javascript, maka browser akan melakukan cache sehingga browser tidak perlu lagi melakukan loading saat pengunjung ingin membuka halaman ini berkali-kali.

Sebaliknya, jika anda menggunakan yang inline, maka browser harus memuatnya setiap anda membuka lagi script tersebut. Satu lagi yang perlu diperhatikan adalah kemampuan dari server yang anda tempati melakukan host script tersebut....cari yang bisa diandalkan.

#9 Kompresi CSS dan Javascript bisa mengurangi waktu loading dari blog anda....

Anda bisa melakukan kompresi pada style sheet ataupun pada script untuk mempercepat loading blog anda. Anda tidak perlu melakukan ini secara manual, karena saat ini sudah sangat banyak tools yang bisa anda pakai. Jika anda ingin melakukan kompresi pada CSS silahkan kunjungi http://www.csscompressor.com/. Dan jika anda ingin melakukan kompresi pada javascript bisa memakai alat dari http://javascriptcompressor.com/ . Selain itu pastikan tidak ada javascript yang identik, jika ada maka hapus salah satunya....

#10 loading blog bisa semakin cepat jika komponen yang berat dihapus

Pada saat anda memuat halaman blog anda coba perhatikan log proses yang ditampilkan di bagian bawah jendela browser. Biasanya di situ akan diperlihatkan komponen apa yang sedang berusaha dimuat oleh halaman blog anda. Jika ada komponen yang menurut anda terlalu lama, maka anda punya 2 pilihan; apakah menghapusnya atau menggantinya dengan elemen serupa dari sumber yang lain

Pastikan saat anda melakukan tes ini menggunakan komputer yang bebas dari cache, karena cache bisa mempengaruhi kecepatan muatnya, sehingga anda tidak mendapatkan hasil yang sebenarnya. Tes juga blog anda dari koneksi berbeda. Anda bisa pergi ke warnet-warnet untuk melakukan ini. Tujuannya adalah agar anda bisa melihat apakah gangguan itu benar-benar karena masalah dari server komponen, atau memang ada koneksi yang bermasalah jika harus memuat komponen tersebut

#11 Optimisasi Gambar Untuk Menambah Kecepatan Loading Blog

Untuk mengelola gambar sendiri ada beberapa hal tambahan yang harus menjadi perhatian anda....:

1. Hindari src gambar yang kosong seperti src="" ini akan sangat merugikan performa blog anda
2. Hindari penggunaan skala pada gambar. Misalnya anda ingin menampilkan gambar dengan ukuran 400x300 pixels, maka sebaiknya gambar itu memang dibuat dalam ukuran demikian. Jangan mengupload gambar dengan ukuran 1200 x 800 pixels kemudian anda atur dengan fungsi width dan height menjadi 400 x 300 pixels
3. Yang cukup sulit adalah memastikan gambar dan komponen statis lainnya bernilai di bawah 25kb. Saya juga selalu melanggar batas ini.... ^_^
4. Kalau gambarnya sama, maka pastikan URL juga sama persis. Jangan mengupload gambar yang sama berulangkali sehingga setiap gambar punya URL berbeda. Kalau gambar sudah diupload sekali itu sudah cukup. Silahkan ambil URL gambar tersebut untuk dipakai berkali-kali

#12 Hindari tanda kueri dari komponen statis.....

Yang dimaksud dengan tanda kueri itu adalah tanda "?" pada URL komponen. Jika anda menggunakan suatu komponen yang statis, maka sebaiknya URL juga bersifat statis.

Ok, rasanya itu saja dulu, kalau nanti teringat ada hal yang perlu ditambahkan artikel ini akan diupdate. Teman-teman yang mau berbagi tips yang bisa mempercepat loading blog juga dipersilahkan memberi masukan.... Terima kasih sebelumnya.