10 Tips Mempercepat Loading Halaman Web AndaBy Syakir Rahman On 13/06/2014 Web DesignApa 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.1. Hindari Redirect(Pengalihan) pada halaman UtamaMisal 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 browserBeberapa 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 RequestSetiap 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 & JavascriptMengkompresi 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.com5. Tingkatkan kecepatan respons serverIni 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 browserDengan 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 :

ExpiresActive OnExpiresDefault "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"

Header set Cache-Control "max-age=2592000, public"

Header set Cache-Control "max-age=604800, public"

Header set Cache-Control "max-age=216000, private"

Header set Cache-Control "max-age=216000, public, must-revalidate"

Header set Cache-Control "max-age=1, private, must-revalidate"

Header unset ETag

FileETag NoneJika anda menggunakan wordpress anda bisa menggunakan plugin WP super cache.7. Optimalkan gambarMengoptimalkan 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.net8. Optimalkan Penggunaan CSSBeberapa cara penggunaan CSS pada halaman web adalah sebagai berikut :1. Me-render css eksternal menggunakan tag 2. Memasukkan css langsung pada halaman dengan tag kode css3. Memasukkan css langsung pada tag tertentu dengan cara .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 .9. Optimalkan Penggunaan JavascriptPenggunaan javascript pada halaman web hanya dapat dilakukan dengan 2 cara :1. Merender javascript eksternal dengan menggunakan tag 2. Memasukkan kode Javascript langsung pada halaman dengan tag Kode java scriptSama 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 sampaipemuatan/pengundugan filejsnya selesai jika penempatan javascriptnya berada diatas (diantara tag ). 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 ).10. Hindari pemakaian Javacript atau CSS pihak ketigaTips 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!.Referensi :https://developers.google.com/speed/pagespeed/~Muhammad Syakirurohman~Bagikan ke: Press This Facebook Twitter1 Google Pinterest Pocket Print Email Related Post

7 Situs Terbaik untuk Belajar Koding Website(HTML, CSS & PHP)

Cara Mengubah Style Scrollbar Blog/Web pada Chrome, Opera & IE

8 Gaya Web Design yang Akan Menjadi Tren 2015

10 Tips Web Design Untuk Kebergunaan(Usability) Website

Mengenal Twitter Bootstrap (Framework CSS)

15 Tips & Rekomendasi Template High CTR Untuk Adsense/PPC

16 Koleksi Icon Sets Flat Sosial Media untuk Website anda

Mengenal apa itu CSS dan bagaimana menggunakannya

43 Contoh Flat Web Design Keren Untuk Landing Page

Cara Membuat Website WordPress Secara Lokal di Komputer Anda4 Comments1. Bali Web design says:25/12/2014 at 7:41 amini content yang cari2 dari kemarin,ThankReply Syakir Rahman says:25/12/2014 at 8:23 amSama-samaReply2. Si Geeniuss says:20/01/2015 at 10:51 pmUntuk poin Maksimalkan pemanfaatan cache browser. Bagi pengguna blogspot bagaimana mas Syakir? adakah tutorialnya.. terimakasihReply Syakir Rahman says:21/01/2015 at 8:23 amKalo blogspot gak ada, kalo gak salah udah di set otomatis sama google..ReplyLeave a Reply Top of FormYour email address will not be published. Required fields are marked *Name * Email * Website CommentYou may use these HTML tags and attributes: Bottom of FormTop of FormNotify me of follow-up comments by email.Notify me of new posts by email.Bottom of FormShareTop of FormSearch for: Bottom of FormTop Komentator Bulan iniSaya menghargai orang yang berkomentar di blog ini. Jadi, jangan sungkan untuk berkomentar :)1. Situsaya (19)2. Amry Martin (5)3. kizeh (5)4. Prisma Try Laksana (3)5. Arlicious (2)6. Afien (1)7. Bambang (1)8. cek SKTP (1)9. dykrullah (1)10. Ilham Bahrul Muhit (1)Populer Hari Ini Free Responsive Blogger Template - First Rikays V2 Cara Membuat Form Validation dengan HTML5 Cara Membuat Popup/Modal dengan CSS3 Murni (Tanpa Javascript/Jquery) Mengenal Elemen & Komponen yang Ada Pada Blog/Website 7 Situs Terbaik untuk Belajar Koding Website(HTML, CSS & PHP) 43 Contoh Flat Web Design Keren Untuk Landing Page Apa itu Framework? 5 Cara Membuat Tabel HTML menjadi Lebih Menarik Mengenal Apa itu Javascript, Fungsi dan Contoh Penggunaannya 15 Rekomendasi Plugin Wordpress Terbaik Untuk Blog Anda Ikuti Update Artikel !!Top of FormJangan Ketinggalan update artikel menarik & bermanfaat di blog ini. Terima pemberitahuan posting terbaru dengan memasukkan email anda :Google juga ngasih tau Cara MengatasiRender-Blocking JavaScript itu sebagai berikut:Ubah kode JavaScriptnya dari yang semula:MENJADI begini:/* Isi File JavaScript di Sini */Contohnya, dari semula begini: