10 Tips Mempercepat Loading Halaman Web

Anda
By Syakir Rahman On 13/06/2014 Web Design

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.

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!.
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 Anda

4 Comments

1.

Bali Web design says:

25/12/2014 at 7:41 am
ini content yang cari2 dari kemarin,
Thank
Reply

Syakir Rahman says:

25/12/2014 at 8:23 am
Sama-sama
Reply

2.

Si Geeniuss says:
20/01/2015 at 10:51 pm
Untuk poin Maksimalkan pemanfaatan cache browser. Bagi pengguna blogspot
bagaimana mas Syakir? adakah tutorialnya.. terimakasih
Reply

Syakir Rahman says:

21/01/2015 at 8:23 am

Kalo blogspot gak ada, kalo gak salah udah di set otomatis sama google..
Reply

Leave a Reply
Your email address will not be published. Required fields are marked *
Name *

Email *

Website

Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title="">

<acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime="">

<em> <i> <q cite=""> <s> <strike> <strong>

Notify me of follow-up comments by email.

Notify me of new posts by email.

Share

Search for:

Top Komentator Bulan ini

Saya 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 !!

Jangan Ketinggalan update artikel menarik & bermanfaat di blog ini. Terima pemberitahuan
posting terbaru dengan memasukkan email anda :
Google juga ngasih tau Cara Mengatasi Render-Blocking JavaScript itu sebagai berikut:
Ubah kode JavaScriptnya dari yang semula:
<script type="text/javascript" src="kode.js"></script>
MENJADI begini:

<script type="text/javascript">
/* Isi File JavaScript di Sini */
</script>
Contohnya, dari semula begini:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.
js></script>
Diubah menjadi:
<script type="text/javascript">
/*! jQuery v1.8.3 jquery.com | jquery.org/license */
(function(e,t){function _(e) ... dan seterusnya dst... hingga (window);

</script>
Cara mengetahui isi kodenya: copas link http://........... min.js di address bar, akan muncul
deretan kode js nan panjang bingits.

O
Se,ain itu, saran Google lainnya di Page Speed adalah Optimize CSS Delivery, yaitu mengubah
kode CSS agar blog lebih fast loading. Caranya, masih dari Google, adalah sebagai berikut:
Conrohnya, kode CSS yang tadinya seperti ini:
<link rel="stylesheet" href="http://..... small.css">
Isi small css-nya dibuka dulu (copas link http://..... small.css di address bar) dan akan muncul,
misalnya, kode seperti ini:
.blue {color: blue;}
Diubah Menjadi begini:
<style>
.blue{color:blue;}
</style>
Tutorial Mengatasi Remove Render-Blocking JavaScript dan Optimize CSS Delivery ini CB
posting sekadar menyimpan salah satu dokumentasi tips mempercepat loading blog, biar gak
buka Panduan Google terus jika butuh.
Banyak template yang dimodif, di antaranya dengan cara di atas, sehingga loading time-nya
lebih baik alias lebih fast loading. (http://contohblognih.blogspot.com).*