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~

levitra 20mg what does azithromycin treat is azithromycin ciprofloxacin 500mg ciprofloxacin side effects after age 60 viagra activate viagra effects viagra vs cialis vs levitra side effects of azithromycin buy viagra online ciprofloxacin ciprofloxacin hydrochloride generic lexapro ciprofloxacin used for levitra 20 mg cost walmart how long does viagra last viagra generic sophia viagra viagra nebenwirkungen viagra sex levitra coupon lexapro benefits for women viagra receptfritt side effects of tamoxifen 9 levitra at walmart azithromycin side effects vardenafil vs viagra levitra prezzo in farmacia buy levitra online propecia side effects viagra online viagra 50mg finasteride hair loss viagra uk finasteride efectos secundarios cialis daily lexapro acyclovir 800 mg for shingles levitra vs viagra for hardness cialis price cialis 20mg what is azithromycin cialis pills for sale viagra alternatives ciprofloxacin coverage cialis website azithromycin class pfizer viagra coupons from pfizer cialis voucher is azithromycin penicillin finasteride for women cialis side effects escitalopram 10 mg para que sirve what is acyclovir for azithromycin and alcohol viagra sans ordonnance azithromycin pediatric dosing ciprofloxacin spc ciprofloxacin bnf daily cialis viagra side effects acyclovir cream viagra from canada levitra erfahrungen finasteride 5 mg finasteride long term effects viamedic cialis azithromycin 500 mg cialis canadian pharmacy finasteride vs dutasteride finasteride dosage what is azithromycin for cialis samples overnight escitalopram effets secondaires azithromycin coverage viagra costs lexapro withdrawal ciprofloxacin dosierung tamoxifen side effects levitra without a doctor prescription online viagra lexapro side effects viagra ohne rezept aus deutschland azithromycin z pak viagra samples cialis sample cialis without a doctor’s prescription viagra medicine what is ciprofloxacin used for cialis dosage recommendations viagra single packs tamoxifen and foods to avoid ciprofloxacin hcl 500 mg viagra without a doctor prescription usa lexapro side effects in women levitra rezeptfrei deutschland cialis testimonials cialis samples levitra dosage viagra 100 levitra vs viagra effects of stopping lexapro suddenly escitalopram 10 mg acyclovir 400 mg side effects of ciprofloxacin azithromycin for uti azithromycin uses azithromycin vs erythromycin cialis for daily use canada cialis viagra pill cialis reviews finasteride permanent side effects what works better than viagra equipe argentine viagra what is cialis viagra substitute acyclovir 800 mg 5 times a day lexapro vs zoloft cialis pills viagra tablet how does lexapro work cipro and tendonitis finasteride side effects lexapro generic name levitra generic pfizer viagra what is escitalopram tamoxifen lawsuits acyclovir ciprofloxacin 500 viagra alternative over the counter viagra cialis generic tadalafil what is tamoxifen cialis 30 day sample ciprofloxacin class side effects of finasteride 5mg finasteride 5mg side effects mayo clinic side effects of finasteride cialis professional what is tamoxifen used for nolvadex ciprofloxacin side effects lexapro bula tamoxifen cost levitra bayer 20mg meilleur prix what is finasteride used for common side effects of ciprofloxacin 500 mg cialis vs viagra lexapro overdose viagra 100mg tablets retail price lexapro 20mg cialis online cipro cialis coupon 20 mg weaning off lexapro female viagra azithromycin 500 erfahrungen buy generic levitra tamoxifen bijwerkingen lexapro dosage what is cipro usually prescribed for canadian cialis ciprofloxacin hydrochloride ophthalmic cipro antibiotic azithromycin for strep throat utilisation viagra azithromycin three times a week zithromax 500 mg does lexapro cause weight gain antibiotic ciprofloxacin cialis medication viagra for women acyclovir side effects order viagra cialis dosage cipro dosage azithromycin medscape how to wean off lexapro levitra 10 mg prezzo cipro for uti azithromycin 250 withdrawal from lexapro azithromycin cost escitalopram 10mg what is cipro tamoxifen nebenwirkungen tamoxifen acyclovir 400mg free viagra azithromycin dosage cialis vs viagra azithromycin liquid acyclovir medication cipro antibiotics ciprofloxacin hcl 500 mg side effects ciprofloxacin 250 mg lexapro generic finasteride results zovirax cream side effects of cialis what does ciprofloxacin treat cialis pricing levitra 20 mg finasteride and enlarged prostate viagra on line ciprofloxacin 500 mg tabletten lexapro vs wellbutrin is lexapro a controlled substance viagra tesco ciprofloxacin 250mg cialis cost viagra tablets azithromycine what bacteria does ciprofloxacin kill where to buy viagra cipro side effects escitalopram side effects viagra coupon cialis 5 mg cheap levitra viagra wikipedia first few days on lexapro acyclovir dosage lowest cialis prices viagra pillen kruidvat discount viagra tamoxifen and weight gain what does finasteride do viagra soft levitra online viagra ohne rezept auf rechnung how to use viagra cialis 5mg acyclovir 200mg levitra 20 mg von bayer post finasteride syndrome viagra cialis azithromycin without a doctor’s prescription finasteride 1mg ciprofloxacin 500mg tablets lexapro 10mg cialis patent expiration date extended lexapro and weight gain in women tamoxifen side effects in women finasteride side effects in men what is lexapro used for revatio vs viagra cialis pharmacy prices acyclovir ointment 5 buy levitra buy viagra erectile dysfunction cialis herbal viagra lexapro side effects men cialis effects zithromax antibiotic viagra for men zovirax cialis for sale cialis alternative cialis savings card wellbutrin and lexapro lexapro coupons viagra for sale ciprofloxacin drops azithromycin pregnancy category lexapro weight gain finasteride tablets finasteride 5mg tamoxifen therapy cialis patent expiration viagra wiki lexapro dosing cialis coupon side effects of viagra effects of stopping finasteride azithromycin 500 ciprofloxacin ophthalmic solution when will cialis go generic cealis what is viagra thuoc azithromycin cialas generic for lexapro finasteride medication acyclovir ointment lexapro reviews is ciprofloxacin a penicillin tamoxifen side effects in women over 55 escitalopram oxalate cialis 20 mg generic cialis lexapro for anxiety free cialis what infections does ciprofloxacin treat cialis prices cost of viagra viagra coupons viagra 100mg cialis canada acyclovir dosage for cold sores liquid cialis levitra coupons escitalopram 20 mg finasteride 5mg side effects viagra dosage cialis cheap buying viagra tamoxifen interaction viagra vs cialis ciprofloxacin eye drops zovirax dosage ciprofloxacin dosage ciprofloxacin dose generic cialis at walmart how long for azithromycin to take effect cipro dangers cialis discount zithromax dosage cialis 30 day trial coupon cialis free trial azithromycine eg 500 mg bijsluiter how to wean off lexapro without withdrawals viagra en ligne livraison 24h viagra canada tamoxifen langzeitfolgen buy cialis online what is finasteride price cialis viagra kaufen ciprofloxacin for dogs finasteride ciprofloxacin nebenwirkungen viagra cost canadian viagra how does cialis work ciprofloxacin 500mg antibiotics acyclovir vs valacyclovir generic levitra vardenafil 20mg tamoxifen and bone pain what is acyclovir lexapro and wellbutrin combination therapy ciprofloxacin uses generic for cialis cialis copay card how to get off lexapro escitalopram nebenwirkungen generic viagra viagra price is tamoxifen chemotherapy what is lexapro for how long for lexapro to work levitra 20mg cost per pill what is lexapro tamoxifen citrate ciprofloxacin 500mg antibiotics side effects cialis coupons generic levitra stopping lexapro generic cialis tadalafil side effects lexapro cialis 5mg daily zovirax ointment best price viagra canada viagra ciprofloxacin 500 mg for urinary tract infection discount cialis viagra without a doctor prescription azithromycin 5 day dose pack lexapro side effects in men how much does cialis cost lexapro and weight loss viagra bestellen cialis for men azithromycin 250 mg treatment zovirax pills cialis otc lexapro medication cialis coupon print azithromycin 500mg cheap viagra cipro uses lexapro para que sirve cialis generic availability viagra prices 200 cialis coupon what does ciprofloxacin 500mg treat acyclovir for shingles what is acyclovir used for cialis patent expiration 2017 azithromycin 250mg azithromycin 250 mg acyclovir dosing escitalopram zithromax z-pak side effects of lexapro 10 mg online cialis cialis for women celexa vs lexapro what is ciprofloxacin prescribed for azithromycin 250mg tablets 6 pack levitra vs viagra viagra pills lexapro 5mg finasteride 5 mg tab lexapro 10 mg azithromycin for pneumonia cialis generic cialis azithromycin pregnancy how to take cialis what does viagra do viagra on line no prec ciprofloxacin 500 mg finasteride 5mg tab cialis 10 mg lexapro and weight gain cialis coupons printable azithromycin tablets cialis coupons from manufacturer azithromycin eye drops cipro side effects in elderly cialis coupons 2017 lexapro withdrawal symptoms lexapro vs celexa finasteride effets secondaires viagra vs cialis finasteride reviews viagra sex viagra for women azithromycin levitra 20 mg precio farmacia ciprofloxacin hcl propecia side effects of lexapro in women viagra vs cialis vs levitra cipro 500 cialis trial side effects of lexapro acyclovir 800 mg zovirax for cold sores women viagra cipro drug class cialis on line cheap cialis what is cipro used for cialis for bph azithromycine 250 mg buy generic viagra ciprofloxacin drug class ciprofloxacin hcl 500 mg tab azithromycin drug class cialis tadalafil what is azithromycin used for natural viagra cost of cialis lexapro dosages viagra natural viagra generico zoloft vs lexapro what is ciprofloxacin cialis 20mg directions acyclovir dose wholesale cialis levitra prices finasteride for hair loss vardenafil 20mg cialis from canada how does acyclovir work lexapro manufacturer website viagra 100 mg side effects of ciprofloxacin 500 mg zithromax side effects of azithromycin 250 mg cilias levitra cialis dosage strengths azithromycin tablet cialis or viagra how does viagra work viagra for sale uk cyalis acyclovir 800mg acyclovir for cold sores side effects of acyclovir ciprofloxacin side effects in women buy cialis generic viagra 100mg

28 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

Tinggalkan Balasan

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