10 Tips Mempercepat Loading Halaman Web Anda

Apa yang anda rasakan ketika anda membuka sebuah situs yang loadingnya sangat lama, padahal koneksi internet anda cepat?. Tentu saja bete bukan. Bahkan mungkin anda membatalkan untuk mengaksesnya. Cepat tidaknya sebuah website sangat mempengaruhi mood pengunjung saat mengaksesnya. Tidak hanya itu, kecepatan loading juga merupakan salah satu parameter untuk menentukan bagus tidaknya optimasi SEO sebuah website. Oleh karena itu, mempercepat loading situs web anda sangat penting untuk anda lakukan.

Nah, dibawah ini saya akan memaparkan beberapa tips agar web anda cepat saat diakses.

Daftar Isi Postingan

1. Hindari Redirect(Pengalihan) pada halaman Utama

Misal halaman utama atau homepage suatu website adalah www.namawebsite.com, maka ketika mengaksesnya jangan sampai dialihkan ke halaman lain baik halaman internal maupun external. Hal ini dapat memakan waktu loading yang cukup lama. Apalagi jika halaman yang di tuju memiliki ukuran yang cukup besar.

2. Hindari Penggunaan konten yang memerlukan plugin pada browser

Beberapa konten website seperti Ebook, SWF memerlukan plugin tambahan pada browser agar bisa kita lihat. Sebaiknya, kurangi atau bahkan hindari penggunaan file tersebut yang langsung terembed pada halaman web. Akan lebih baik jika anda hanya menyediakan link filenya agar bisa langsung di download oleh pengunjung atau dilihat langsung secara full.

3. Kurangi HTTP Request

Setiap objek dalam sebuah halaman web seperti gambar, video, swf, css(yang dipisah), javascript(yang dipisah), dan file lainnya akan diakses dari server melalui file HTML. Setiap pengaksesan inilah yang disebut HTTP request. Nah, salah satu cara mempercepat loading halaman web adalah dengan mengurangi HTTP request. Hal ini akan meringankan kerja server. Jadi, artinya sebisa mungkin anda harus meminimalisir penggunaan objek-objek yang mengirim HTTP Request pada server.

4. Kompres HTML, CSS & Javascript

Mengkompresi kode html, css, dan javascript dapat mempercepat loading halaman web. Hal ini karena memperkecil ukuran file halaman web. Semakin padat kompresi, ukuran filenya juga akan semakin kecil. Untuk mengkompres ketiga kode itu, anda bisa menggunakan tools compressor yang ada di website ini : http://compressmycode.com

5. Tingkatkan kecepatan respons server

Ini sangat berhubungan dengan kinerja server dan hosting yang anda pakai untuk menjalankan web anda. Oleh karena itu, gunakan layanan hosting dengan server yang cepat. Kalau perlu, jangan gunakan shared hosting. Kecepatan respons server adalah hal yang paling berpengaruh dalam kecepatan loading web.

6. Maksimalkan pemanfaatan cache browser

Dengan memanfaatkan cache, sebuah halaman yang diload tidak harus sepenuhnya meminta request pada server. Berkat cache, beberapa request yang seharusnya dikirim ke server, dibatalkan karena telah dipenuhi dengan data cache. Namun, pemanfaatan cache ini hanya berlaku jika browser pengunjung pernah mengunjungi laman web dan data cache masih tersimpan.

Salah satu cara untuk menyimpan cache web anda pada browser pengunjung adalah dengan menggunakan file .htaccess yang berisi kode berikut :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 month”
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/html “access plus 1 month”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType application/x-javascript “access plus 14 days”
ExpiresByType image/x-icon “access plus 1 year”
</ifModule>

<ifModule mod_headers.c>
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|swf|svg)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
<filesMatch “.(css)$”>
Header set Cache-Control “max-age=604800, public”
</filesMatch>
<filesMatch “.(js)$”>
Header set Cache-Control “max-age=216000, private”
</filesMatch>
<filesMatch “.(xml|txt)$”>
Header set Cache-Control “max-age=216000, public, must-revalidate”
</filesMatch>
<filesMatch “.(html|htm|php)$”>
Header set Cache-Control “max-age=1, private, must-revalidate”
</filesMatch>
Header unset ETag
</ifModule>
FileETag None

Jika anda menggunakan wordpress anda bisa menggunakan plugin WP super cache.

7. Optimalkan gambar

Mengoptimalkan penggunaan gambar pada halaman web dapat mempercepat loading web. Nah, bagaimana caranya? Berikut ini adalah hal-hal yang dapat mengoptimalkan penggunaan gambar anda :
– Hindari penentuan ukuran gambar dengan menggunakan css. Artinya, jika pada halaman web anda menampilkan gambar ukuran 300 x 300, maka ukuran panjang dan lebar asli gambar anda seharusnya segitu. Bukan dengan ukuran 1000 x 1000, lalu dibuat 300 x 300 dengan menggunakan css.
– Kompres ukuran file gambar dengan tools seperti : www.imageoptimizer.net

8. Optimalkan Penggunaan CSS

Beberapa cara penggunaan CSS pada halaman web adalah sebagai berikut :
1. Me-render css eksternal menggunakan tag <link href=”path ke file css”/>
2. Memasukkan css langsung pada halaman dengan tag <style>kode css</style>
3. Memasukkan css langsung pada tag tertentu dengan cara <div style=”kode css”></div>.

Cara ketiga sebaiknya anda hindari karena itu dapat memperlambat loading web. Lalu, bagaimana dengan cara pertama dan kedua?. Ini tergantung pada banyaknya kode css yang digunakan. Jika kode css anda sedikit (misal tidak lebih dari 100 baris), akan lebih baik jika anda menggunakan cara kedua. Sedangkan kode css anda sangat banyak, anda lebih baik menggunakan cara pertama.

Namun, perlu diingat bahwa pemuatan css eksternal akan menghentikan pemuatan halaman web sementara sampai pemuatan/pengundugan file cssnya selesai. Oleh karena itu, usahakan ukurannya kecil dengan mengompressnya terlebih dahulu. Perlu diperhatikan juga, bahwa sebaiknya kode css ditempatkan di antara tag <head></head>.

9. Optimalkan Penggunaan Javascript

Penggunaan javascript pada halaman web hanya dapat dilakukan dengan 2 cara :
1. Merender javascript eksternal dengan menggunakan tag <script src=”path ke file js”></script>
2. Memasukkan kode Javascript langsung pada halaman dengan tag <script>Kode java script</script>

Sama seperti pada css, jika kode java scriptnya sedikit, maka gunakan cara kedua. Sebaliknya, gunakan cara pertama jika  kodenya sangat banyak. Seperti halnya css, pemuatan js eksternal juga dapat menghentikan pemuatan halaman web sampai pemuatan/pengundugan file jsnya selesai jika penempatan javascriptnya berada diatas (diantara tag <head></head>). Jadi usahakan juga file jsnya di kompres dulu.

Namun, berbeda dengan css, pemuatan file javascript ini dapat ditunda sampai pemuatan html halaman selesai semua. Caranya, dengan menggunakan atribut “async” pada tag “script”.

Atau, bisa juga menempatkan file/kode js dibawah halaman (diatas </body>).

10. Hindari pemakaian Javacript atau CSS pihak ketiga

Tips terakhir, hindari pemakaian javascript atau css pihak ketiga langsung dari servernya. Artinya, anda langsung menyisipkan pemanggilan kodenya pada server pihak ketiganya. Hal ini bisa memperlambat loading halaman web karena halaman harus merequest data pada server lain yang belum tentu cepat atau lambatnya.
Perlu diketahui juga bahwa tidak semua script pihak ketiga itu dapat dipercaya. Beberapa script terkadang mengandung program jahat atau virus yang justru dapat membahayakan website anda.

Yap, itulah 10 tips dari saya. Semoga bermanfaat!.

~Muhammad Syakirurohman~