Dikesempatan ini saya mau memberikan beberapa tips agar web atau blog menjadi ringan seperti blog UTAMA SAYA INI.
Adapun yang saya terapkan adalah sebagai berikut:
1. MINIMALKAN HTTP REQUESTS
80% Waktu respon sebuah web atau pun blog dihabiskan pada front-end,kebanyakan untuk mendownload semua komponen yang akan ditampilkan dihalaman anda contohnya:
Gambar,Flash,Javacript,CSS,PHP,HTML..dsb.
Dengan mengurangi jumlah komponen yang harus didownload browser,anda mengurangi jumlah HTTP Request yang diperlukan web atau blog anda salah satunya menyederhanakan
desain halaman anda.Selain itu anda bisa juga mencoba metode berikut ini :
- Menggabungkan file,misalnya menyatukan semua CSS anda ke dalam sebuah singel stylesheet.dengan demikian setiap proses HTTP hanya perlu merequest 1 CSS saja.
- Tekhnik CSS Sprites,Yaitu menggabungkan semua background-image anda kedalam sebuah singele image yang penggunaanya didefinisikan melalui proferty CSS background-image dan backgroun position.
2. OPTIMASI CSS SPRITES
Kalian bisa juga mengoptimasi CSS sprites agar ukurannya lebih kecil.Salah satunya dengan menyusun image didalamnya secara horizontal.
Kemudian kalian juga bisa menggabungkan warna-warna yang sama dalam satu CSS spirite untuk menjaga perhitungan warna tetap rendah,idealnya dibawah 256 warna agar bisa pas dengan format PNG 8.
Terakhir jangan tinggalkan gap yang terlalu lebar antara image-image di CSS sprite kalian agar bisa lebih mobile friendly.Hal ini akan mengurangi memori yang diperlukan sebuah
user agent untuk melakukan dekompresi gambar kedalam pixel.
Coba bayangkan jika gambar 100 X 100 sama dengan 10 ribu pixel,maka 1000 X 1000 sama dengan 1 juta pixel.
3. OPTIMASI GAMBAR
Setelah anda mendesainer membuat gambar selesai untuk halaman web atau blog kalian,ada beberapa hal yang bisa kita lakukan sebelum mengirim gambar tersebut ke server,
melalui FTP antara lain caranya:
- Konversi GIF ke PNG (PNG 8) dan lihatlah ukuran filenya apakah bisa dihemat,biasanya sih bisa kalau ingin praktis kalian bisa coba DISINI.
- Bisa juga kalian coba tool optimasi seperti PNG CRUSH KLIK DISINI...
4. HINDARI SCALE GAMBAR DI HTML
Jangan upload gambar yang lebih besar dari yang anda butuhkan meskipun kalian bisa mengatur atributnya lewat HTML.
5. USAHAKAN FAVICON.ICON KECIL
Fhoto atau gambar favicon.ico pasti letaknya di root server kalian,meskipun kecil dan seringkali diabaikan ternyata favicon.ico bisa juga mengganggu
urutan download.Contohnya di IE (Internet Explorer).Ketika user agent kalian meminta komponen tambahan pada proses loading,Favicon akan di download dulu sebelum komponen tambahan tersebut.
Untuk meredam efek negative penggunaan favicon,pastikan ukuran dibawah 1k kalau perlu optimasi dulu.
6. DEFINISIKAN STYLESHEETS PADA HEAD SCRIPT KALIAN
Memindahkan stylesheet agar didefinisikan pada bagian HEAD dari script kalian bisa membuat halaman web atau blog kalian lebih cepat ditampilkan.
Sebab hal ini memungkinkan user agent melakukan render halaman secara pararel.Ketika browser menampilkan halaman secara pararel maka header,navigation,bar,logo dsb
semuanya akan berperan sebagai respon yang bisa menjaga agar user mau menunggu halaman kalian tampil sepenuhnya.
Strategi ini pas diterapkan untuk halaman dengan bvanyak konten dan untuk user dengan koneksi internet yang agak lambat.
7. LETAKKAN JAVASCRIPT DIBAGIAN BAWAH SCRIPT KALIAN
Masalah yang disebabkan oleh javascript adalah mereka memblock download secara paralel,makanya ketika sebuah javascript sedang didownload,browser tidak akan
mendownload konten yang lain maka pindahkan saja javascript kalian ke bagian bawah halaman kalau nyatanya javascript kalian kurang responsif.
8. LETAK JAVASCRIPT DAN CSS TERPISAH DARI SCRIPT KALIAN
Javascript dan CSS yang diletakkan jadi satu (Inline) dengan script HTML akan didownload berulang kali setiap dokumen HTML akan ditampilkan.
dengan cara ini jumlah HTML request memang bisa dikurangi namun ukuran dokumen HTML kalian akan bertambah,dilain pihak jika javascript dan CSS ditaruh pada file
yang terpisah dari dokumen HTML kalian akan menambah jumlah request HTML kalian.
Namun file external yang berisi javascript atau CSS ini bisa di cache oleh browser sehinggga tidak perlu didownload lagi.
9. HINDARI PEMAKAIAN CSS EXPRESSIONS
CSS expression adalah salah satu cara yang ampuh (namun berbahaya)agar property CSS bisa ditampilkan dengan dinamis.
Bukan hanya ketika halaman di-render atau di rezise saja tapi juga ketika halaman di scroll dan ketika user menggeser mouse,menggeser mouse menghasilkan
lebih dari 10.000 kali evaluasi makanya jika property CSS kalian memang harus ditampilkan secara dinamais daripada dengan CSS expression gunakan saja Event Handler.
10.OPTIMASI JAVASCRIPT DAN CSS KALIAN
Proses optimasi javascript dan CSS berhubungan dengan praktek penghapusan karakter,code,coment,spasi,baris baru,tab margin,dsb yang tidak diperlukan oleh
javascript atau CSS kalian.
Tujuannnya agar ukuran filenya bisa jadi lebih kecil,hal ini bisa meningkatkan waktu respon sebab ukuran file yang harus didownload jadi berkurang.
Untuk melakukan optimasi kalian bisa mempergunakan SOFTWARE INI..
Buat menunjukkan letak-letak optimasi yang memungkinkan pada javascript kalian,dan YUI COMPRESSOR KLIK DISINI..
untuk CSS kalian.
Nah sekian dulu yang bisa aku share ke teman-teman semua agar web ataupun blog kita bisa lebih cepat waktu loadingnya dan kita juga tidak bisa mengesampingkan sinyal internet tentunya.
