20 Tips Meningkatkan Kecepatan Loading Website atau Blog

WartaIPTEK.com - Pada kesempatan kali ini kita akan mengulas secara garis besar dari aspek-aspek optimasi kecepatan loading website atau blog. Pasalnya kita telah sepakat bahwa kecepatan loading website atau blog memiliki pengaruh besar pada nilai bounce rate. 

Poin-poin dalam panduan ini didasarkan pada aturan Yahoo dan Google mengenai standar kecepatan loading sebuah website atau blog. Semoga bermanfaat ;-)

Minimalkan HTTP Request

80% waktu respon sebuah website dihabiskan untuk mengunduh komponen-komponen yang akan ditampilkan di halaman Anda. Misalnya gambar, Javascript, CSS, HTML, dlsb. Dengan mengurangi jumlah komponen, Anda bisa mengurangi jumlah HTTP request yang harus dilakukan browser.

Teknik CSS Sprite

Yaitu menggabungkan semua image ikonik ke dalam sebuah single image yang penggunaannya nanti didefinisikan melalui property CSS seperti background image dan background position.

Optimasi Gambar

Setelah desainer selesai membuat gambar untuk halaman Anda, ada beberapa hal yang bisa Anda lakukan sebelum mengirimkan gambar tersebut ke server. Misalnya konversi ke PNG (PNG8) dulu untuk mengetahui apakah ukurannya bisa dihemat.

Kecilkan Ukuran Favicon

Pastikan Favicon anda berukuran di bawah 1K. Favicon adalah file gambar favicon.ico yang letaknya di root server. Meskipun kecil dan terabaikan, favicon ternyata bisa mengganggu urutan download anda. Yaitu ketika user meminta komponen tambahan. Favicon akan diunduh dulu sebelum komponen tambahan tersebut. Gunakan imagemagick (http://imagemagick.org) untuk optimasi.

Hindari Scale Gambar di HTML

Jika anda butuh sebuah gambar dengan atribut <img width="100" height="100"> maka lebih baik edit gambar Anda berukuran 100 x 100 pixel dulu daripada memaksa user agent untuk melakukan scale dari gambar berukuran 500 x 500 pixel.

CSS Dipanggil di Bagian Header, Javascript di Bagian Footer

CSS di bagian header akan memungkinkan user-agent melakukan render halaman secara paralel. Sedangkan Javascript di bagian footer akan menghindarkannya dari pemblokiran download secara paralel. Sebab begitulah sifat kedua komponen ini. CSS bersifat preload, sedangkan Javascript bersifat postload.

Javascript dan CSS yang Terpisah dari Dokumen HTML Anda

Agar manfaat dari komponen preload dan postload bisa Anda dapatkan, maka masing-masing javascript dan CSS harus diletakkan dalam file-file yang terpisah dari dokumen HTML Anda.

Optimasi Javascript & CSS

Yaitu dengan menghapus karakter, kode, komentar, spasi, baris, tab margin yang tidak diperlukan pada javascript dan CSS Anda. Gunakan software seperti JSMIN untuk membantu upaya optimasi javascript, dan YUI Compressor untuk CSS.

GZIP komponen

Kompres komponen-komponen Anda untuk mengurangi beban HTTP request pada server. Salah satu metode kompresi paling efektif saat ini adalah GZIP. Anda bisa mengurangi ukuran sebuah file sampai dengan 70% pada GZIP.

Ukuran Komponen Maksimal 25 kb

Batasan ini berkaitan dengan fakta bahwa smartphone pada umumnya tidak akan melakukan cache terhadap komponen yang lebih besar dari 25 KB.

Kemas Komponen ke Dalam Multipart Document

Cara kerjanya sama dengan download all attachment pada email. Browser akan diberi pilihan untuk download satu atau semua dokumen dalam satu HTTP request.

Kurangi jumlah elemen DOM

Gunakan ekstensi Firebug untuk mengetahui jumlah elemen DOM website Anda. Jika angkanya di atas 700, artinya banyak yang bisa diperbaiki di sini. Misalnya penggunaan <div> dan nested table untuk membereskan layout padahal masih banyak cara yang lebih semantic seperti yang bisa ditunjukkan oleh YUI CSS Utilities *(http://developer. yahoo, com/yui/).

Minimalkan DOM pada Javascript dan CSS Expression

Fungsi yang sifatnya cross platform seperti DOM pada Javascript atau Javascript pada CSS (CSS Expression) akan mambuat komponen inangnya sangat lambat jika diproses. Maka hindari praktek-praktek seperti ini. Subtitusi dengan teknik lain, misalnya event handler

Kembangkon Event Handler yang Lebih Canggih

Penting bagi programmer untuk memanfaatkan event delegation. Misalnya jika Anda punya 10 button di dalam div; dengan event delegation, Anda bisa memasang 1 saja event handler untuk melayani semua permintaan, daripada 1 handler untuk setiap button.

Mengurangi DNS Lookup

Domain Name System (DNS) bekerja dengan memetakan hostname ke alamat IP (DNS Lookup). Proses ini berlangsung selama 20-120 milidetik. Pada saat itu, browser dalam keadaan stall sampai proses DNS lookup selesai. Makanya, kurangi jumlah hostname yang harus dipetakan resolver DNS.

Memisahkan Komponen pada Hostname yang Berbeda

Anda bisa memisahkan komponen Anda pada hostname yang berbeda. Contohnya dokumen HTML di www.abc.com, sedangkan komponen gambar di subdomain seperti images.abc.com. Dengan demikian, Anda memungkinkan browser untuk melakukan download secara paralel.

Minimalkan Ukuran Cookies

Cookies digunakan untuk berbagai alasan seperti otentikasi (username, password) dan personalisasi (favicon, CSS sprite). Maka penting sekali untuk menjaga ukuran cookies sekecil mungkin agar tidak terlampau banyak file yang harus diuuduh browser.

Menyimpan Komponen pada Domain Khusus Bebas Cookies

Praktek nyata domain bebas cookies contohnya adalah yimg.com milik Yahoo dan ytimg.com milik YouTube. Tujuannya untuk mencegah browser mengunduh cookies secara berulang kali. Terutama bagi yang sudah terlanjur memprogram websitenya agar mengambil komponen di direktori root.

Mengatur Expires Header

Browser menyimpan cache dan cookies untuk mengurangi jumlah HTTP request ketika website Anda ditampilkan untuk kedua kalinya. Dengan Expires Header, Anda bisa memberitahu browser berapa lama sebuah komponen harus di-cache. Misalnya 2 jam ke depan seperti Expire Header berikut. Expires Header disetting di dalam. htaccess Anda.

#Expire Header

<FilesMatch "\.(ico|jpg|png|gif|js|css)$">

ExpiresDefault "access plus 2 hours"

</FilesMatch>

Nonaktlfkan ETag (Entity Tag) Anda

Menghapus ETag dapat mengurangi ukuran dari headar HTTP. Tambahkan baris berikut pada fila htaccess Anda untuk menghapus ETag: FileE-Tag none

Gunakan Content Delivery Network [CDN]

CDN akan membuat user website Anda dapat mengambil data pada server yang lokasinyo secara geografis lebih dekat pada jaringan mereka. Beberapa bisnis besar seperti Yahoo, Google telah mempunyai infrastruktur CDN sendiri. Anda mungkin bisa mulai dengan menggunakan penyedia CDN tertentu seperti akamal.com, edgecast.com, atau level3.com.

Referensi:

http://mebiso.com/tips-optimasi-script-untuk-meningkatkan-kecepatan-website-anda/

https://hilfans.staff.telkomuniversity.ac.id/meningkatkan-kecepatan-website/

Follow Warta Iptek di Google News

Maman Soleman

Aktif menulis sejak tahun 1986 di media massa. Menjadi announcer di Radio Fantasy 93,1 FM sejak tahun 1999. Menjadi Blogger sejak tahun 2010. Sekarang aktif sebagai Content Writer untuk beberapa Blog/Website.