Optimalkan Kecepatan Weblog atau Website Anda


Sudah sempurna kah blogKu? itu yang menjadi pertanyaan setelah sekian lama ngeblog di blogspot. Ada beberapa hal yang perlu di perhatikan agar browser Mozilla Firefox atau Internet Explorer bisa menampilkan weblog/website kita dengan cepat.

Mengoptimalkan Image: Selalu gunakan image yang di-save untuk format web, fasilitas ini ada di setiap program editing gambar seperti Adobe Photoshop, Gimp, ACDsee dan Micro_Off_Pic_Manager :). Mengapa? karena image yang di save dalam format web akan di atur sedemikian rupa oleh program editing gambar agar image yang ditampilkan mempunyai detail (detail=birghtness dan contrast) dan size dalam kondisi yang wajar.

bandingkan gambar berikut

https://i1.wp.com/indoupload.net/files/2486/picture/un4ninubuntu_pic_post/image_web_optimal1.gif
2 image dengan kontras yang berbeda

Image yang ada di dalam blog akan senantiasa di load oleh browser apapun, kecuali jika user menonaktifkan load image di browsernya (tapi mustahilkan, website yang dikunjungi tentu akan terlihat hambar a.k.a tanpa rasa jika tak ada sentuhan Image di dalamnya). Jika size image besar, maka proses load akan berjalan sangat lama dan dapat dipastikan pengunjung akan meng-cancel web Anda :) Salah satu alternatif untuk mengoptimalakan image yaitu dengan mengupload image yang akan Anda pasang di tools.dynamicdrive untuk di analisis-apakah image tersebut layak atau tidak. (nb. detail yang di tentukan oleh birghtness dan contrast juga mempengaruhi size sebuah file)

Penggunaan Format Image JPG, GIF, PNG. Pemilihan format yang tepat dalam sebuah image adalah salah satu faktor penting dalam konteks ini.
Format .JPEG atau .JPG dikhususkan untuk bidang fotografi yang mempunyai tampilan warna mendekati warna asli (realistis) dan tentunya dengan size file yang besar.
Format .GIF digunakan pada logo atau tombol yang mempunyai warna datar. Warna dalam format .Gif akan terlihat pecah / kabur jika image diperbesar, hal tersebut tidak menjadi masalah, karena file dalam format ini hanya di tampilkan dalam size/pixel yang rendah.

https://i0.wp.com/indoupload.net/files/2486/picture/un4ninubuntu_pic_post/image_web_optimal.gif
size image .GIF


Sedangkan untuk image dengan format PNG mempuyai karakteristik hampir sama dengan format GIF namun GIF tidak mensupport untuk semua warna.

Mengoptimalkan Kode CSS: Simple, satu kata saja untuk menjawab alinea ini, gunakan tools online untuk me-merge, menghapus properti yang tidak penting dan menghapus space dari kode css Anda. Gunakan tools dari http://www.cleancss.com. Cukup masukkan kode css anda atau masukkan URL blog/site anda, Tool ini akan menganalis kemudian mengeluarkan reportnya.

Gunakan Slash “/” saat membuka link: Saat user membuka link dari page “http://kendari-underground.blogspot.com/search/label/internet” server menginginkan URL yang lebih detail dari halaman terdalam dimana page tersebut berada.

https://i2.wp.com/indoupload.net/files/2486/picture/un4ninubuntu_pic_post/kendari-underground.gif

Jika Anda menggunakan slash (/) pada akhir URL anda ex. “http://kendari-underground.blogspot.com/search/label/internet/, server akan segera mengtahui page mana yang akan ditampilkan. Alhasil load website anda akan menjadi lebih cepat dan tentunya ehemmm jawab sendiri yach…

https://i2.wp.com/indoupload.net/files/2486/picture/un4ninubuntu_pic_post/kendari-underground2.gif

Gunakan Tag Height dan Widht : Mungkin sebagian orang sudah melupakan hal ini, yaitu menyisipkan tag Height dan Width pada kode image. Tag ini akan memberitahu browser mengenai besar image sebelum di load.

contoh tag hight dan width
width=”218″ height=”164″>

jika tidak mengunakan tag tersebut, maka browser akan meload image dengan ukuran default, jadi jika sizenya 500*400 dapat dibayangkan lama waktu yang dibutuhkan untuk meload gambar tersebut.

dan yang paling penting yaitu melakukan reduce pada HTTP : when opening a web page every object (images, scripts and the line) will require a round trip to the server. This latency can add several seconds to the load time of your site. Make sure to reduce the number of objects and to combine CSS files and scripts together. :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: