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.

1932453cheetah780x390

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

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”.

<script async src=”path ke file js”></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~

32 Comments

  1. ini content yang cari2 dari kemarin,

    Thank

  2. Untuk poin Maksimalkan pemanfaatan cache browser. Bagi pengguna blogspot bagaimana mas Syakir? adakah tutorialnya.. terimakasih

  3. mungkin lebih mudah mengganti template ke template yang memang responsiv y gan?

  4. tanks banget lo gan

  5. Makasih mas tipsnya, saya coba dan mulai mendingan

  6. makasi infonya gan, untung dpt artikel ini, jd tau knpa blog saya blkngan ini melambat

  7. bagaimana kalau blogspot tapi bukan template bawaan blogspot? soalnya di suruh optimalkan terus oleh pagspid itu hehe

  8. saat ini sy masih menggunakan shared hoting 🙂 ya jadinya masih lola gitu loadingnya hehe

  9. kalau tutorial cara pekerjaannya bagaimana tentang mempercepat laman.karena saya pemula.mksh

  10. makasih gan ingonya semoga bermanfaat
    http://www.mp3cupid.com
    download mp3 terbaru

  11. Thx gan. Cukup membantu!

    Kalau butuh jasa advertising

    please visit http://adbrand.co/

  12. makasih gan, bermanfaat banget

    kunjungi balik gan blog ane http://update.ahloo.com/

  13. Sangat berguna gan. Kebetulan situs ane lemot banget, langsung dicoba dah.. Nice shared

  14. wah makasih banget ni ilmunya

  15. kalau aku sih menghapus dari cache saja dapat membantu meningkatkan kecepatan berselancar,.. tergantung Spek komputer juga kali ya gan yang punya pengaruh lainnya

  16. Nice Post

  17. Bagus sekali saran-saranya mas Syakir. Menurutku tips #7 itu yang sering diabaikan oleh para webmaster, padahal ukuran gambar biasanya bisa 2x lipat lebih berat dari ukuran text halaman. Kalau dianalisa menggunakan GTMetrix, tips #7 itu prioritasnya high.

    Ngomong-ngomong, beberapa hari yang lalu, aku baru saja menyelesaikan panduan mempercepat loading website, kurang lebih tidak jauh berbeda dengan artikel mas ini. Kalau mas Syakir lagi ada waktu senggang, mungkin bisa mampir juga ke link berikut 🙂 http://penasihathosting.com/mempercepat-loading-website/

  18. Artikelnya sangat bagus, point 7 yang ingin saya perjelas disini. karena setiap saya upload artikel selalu menggunakan ukuran gambar yang besar..perlu saya coba ini bang..

    Salam

  19. Wow..benar sangat bermanfaat artikel ini buat saya mas syakir,saya newbie untuk SEO,selama ini saya otodidak dengan website dan SEO,artikel ini jadi menambah pengetahuan saya mengenai SEO.

    Kalau tidak keberatan mohon intip website saya mas syakir san diego hills

    Terima kasih banyak.

    Nb:mohon saran balik mas

  20. selama ini saya otodidak dengan website dan SEO,artikel ini jadi menambah pengetahuan saya mengenai SEO.

  21. Masih harus belajar banyak biar web cepat diakses, tapi yang paling sulit itu dibagian kompres HTML dan kawan2nya.
    Thank infonya ya. setidaknya saya masih bisa nambah ilmu dan bisa uji coba juga. semoga berhasil.

  22. sebenarnya masih agak bingung belajar tentang hal ini, tapi pelan pelan saja biar paham… saya uji coba di blog saya dulu mas gan

  23. izin untuk di coba ya… MAS/BRO
    maklum masih GAPTEK

  24. terimkasih tips, semoga bisa diterapkan

  25. makasih mas syakir ilmunya , sering-seringlah posting artikel yang terus bermanfaat

  26. pas banget ni gan, akhirnya ketemu juga tutorialnya

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *