Sepertimana yang telah saya janjikan sebelum ini melalui post pertama siri Blog Tips – Tingkatkan Page Speed Dengan Mengoptimize Gravatar (Part 1), kini siri kedua saya releasekan. Untuk siri kedua ini saya masih lagi menekankan aspek HTTP request terhadap image yang terdapat di blog wordpress seperti di bahagian header, background image, dan sebagainya iaitu cara untuk meningkatkan Page Speed Dengan Mengoptimize Image (Part 2).
Secara mudahnya, makin banyak image yang terdapat di blog anda makin besarlah beban yang terpaksa ditanggung oleh server load dalam proses mendapatkan request setiap kali pelawat melawat blog anda, lebih – lebih lagi sekiranya image yang anda gunakan tidak dioptimize sebaik mungkin. Tips yang bakal saya kongsikan ini tidak melibatkan sebarang kos sebaliknya lebih kepada teknikal. Jadi, saya tidak akan menyentuh isu yang berkaitan dengan penggunaan CDN (Content Delivery Network), third party image hosting mahupun cloud hosting.
Cara – Cara Tingkatkan Page Speed Dengan Mengoptimize Image
1. Optimize Image Dengan Free Online Tools
Sekiranya anda menggunakan banyak image di blog, saya syorkan agar anda menggunakan aplikasi percuma seperti Yahoo Smush.it atau Online Image Optimizer. Penggunaan aplikasi ini adalah cukup mudah dan kesan yang diberikan terhadap image anda adalah cukup besar. Apa yang dilakukan oleh aplikasi ini ialah ia mampu mengoptimumkan saiz image (mengecilkan saiz image) anda tanpa menjejaskan kualiti dan kesannya, loading page akan lebih cepat.
Sekiranya anda mahukan sesuatu yang lebih pantas, dapatkan WP Smush.it plugin. Segala image yang dimuat naik ke blog akan dioptimize secara automatik.
Pilihan ketiga, anda boleh gunakan software seperti Photoshop atau GIMP (open source) untuk melakukan proses secara manual. Kebanyakan designer menyarankan agar image yang ingin digunakan di blog dioptimize terlebih dahulu dan quality levelnya dikurangkan sehingga 75% daripada image asal.
2. CSS Sprites
AMARAN : Pastikan anda membuat backup sebelum mengaplikasikan kaedah ini.
SpriteMe
Sekiranya anda biasa menggunakan plugin YSlow (Firefox dan Chrome) untuk menguji tahap kelajuan page load blog, anda mungkin perasan di bahagian “Make fewer HTTP requests” yang mungkin menyatakan sesuatu seperti ini ;
“This page has 8 external stylesheets. Try combining them into one.”
“This page has 11 external background images. Try combining them with CSS sprites.”
Cuba anda bayangkan kesan yang mungkin diperolehi sekiranya 8 external stylesheet dan 11 external background image ini dapat digabungkan menjadi satu HTTP request berbanding 19 HTTP request.
Untuk menjayakannya, kita perlukan aplikasi percuma iaitu SpriteMe. Pastikan anda mengikuti demonya terlebih dahulu tentang cara – cara pemasangan dan penggunaannya. Sekiranya semua berjalan lancar,
- Di Homepage blog anda, klik Spriteme tab dan satu window pop up akan keluar di bahagian kanan page anda.
- Klik button “make sprite” di bahagian “Suggested Sprites“.
- Download image yang telah di sprite (.png), dan uploadkan ke blog anda.
spriteme
- Seterusnya, klik button “export CSS” dan copy & paste semua CSS kod yang diberikan ke style.css blog anda.
- Seperkara lagi, jangan lupa untuk menukarkan sprite image link yang anda download dari “http://www.jaredhirsch.com” ke link di mana anda uploadkan image tersebut.
- Setelah selesai semua proses ini, pastikan anda melakukan “clear cache“.
Kesimpulan
Walau apa cara dan berapa lama sekalipun anda ambil dalam usaha meningkatkan page speed / page load blog anda, saya tetap mengesyorkan agar anda menggunakan W3 Total Cache Plugin yang mampu melakukan segala – galanya untuk blog anda. Personally, saya akui tidak ada plugin yang mampu menandingi kemampuan plugin tersebut.
BTW, berapa Grade yang anda perolehi di YSlow dan Score Page Speed yang anda perolehi sekarang?
nice tips bro,,akan cuba optimize kan image sikit masa lagi…pening image selalu broken..
hatiputera recently posted…BEST KE SAMSUNG GALAXY S3
baru siap install wp-smush.it…tak perlu usik apa-apa kan,,,just activate jer ke
Activate je bro. Pastu tiap kali upload image, semua akan di smush secara auto.
Camana bleh slalu broken tu? Selalu tukar theme ke?
sedang mengoptima segalanya sekarang sebab guna thesis
dulu time guna default themes wordpress, Twenty Ten memang aku ambil kisah semua ni, sekarang slow2 sebab susah nak tweak :)
Aku punya baru sekarang puas hati lepas macam2 aku buat. :)
Ok jugak tips nih, leh test kat trial WP kitaorang, walaupun masih melekat kat blogspot… itu pun pakai cheat image slow loader, ada perubahan sikit je pada bandwith. Anyway bz dengan integration Template HTML5 dengan Concrete 5, lama jugak tak blogwalk kat MW.. Gud info, pasti try…
irsah recently posted…Page Rank Turun atau Statik – Adakah Penalti Google: Siri 1 dari 8
Rasa jeles plak tengok designer main ngan HTML5, dulu2 malas belajar,.. rasa cam menyesal pun ada ckit. :)
Ini pun saya buat base on try n error.
Tak per.. u tunggu jer.. open source project untuk CMS banyak sangat sekarang nih… FREE pulak tuh. Cuma kena cari yang sesuai dengan environment kita. But not all CMS compatible dengan plug in macam post nih.. Update details nanti.. Now anyone boleh jadi designer hehehe
irsah recently posted…Page Rank Turun atau Statik – Adakah Penalti Google: Siri 1 dari 8
Nak kena belajar la nih.. Adoi! Otak pun dah makin slow sekarang. Maklumler processor lama. :) BTW, kalau ada ilmu yang baik bagus jugak tu, dapat tau basic pun dah kita bagus. :) I’ll wait for it.
sprite tu agk ssh gak la..huuhu
Kalau tak banyak image tak perlu buat bro. Karang tak pasal2 haru biru dibuatnya. :)
oh tidak..stakt ni sprite ni lom sentuh ag..byk kene modify nya..huhu
Jebeng Otai™ recently posted…Kopitiam Ekonomi
Aku memang takkan buat CSS sprite sebab gambar dah banyak dikurangkan. Takat guna Smush.it pun dah banyak membantu.
baru hari ini nak mencuba smush.it
Smush it memang terbaik. Disyorkan.
saya tidak boleh menggunakan W3 Total Cache Plugin, saat plugin ini di install paparan blog saya menjadi rosak. apa mungkin ini kerana ada plugin yang konflik.
velli, md. recently posted…Alertpay Berganti Nama Menjadi Payza
Cara terbaik ialah dengan deactivate terlebih dahulu semua plugin yg lain. Setelah selesai install & activate W3 Total Cache, Activate satu persatu plugin yang lain & lihat hasilnya. Kebiasaannya, banyak isu berkaitan dengan CSS & JS.
Cuba Disable bahagian Minify di General Setting terlebih dahulu.
Terima kasih sarannya, saya sudah cuba dan ternyata berhasil. Tapi terpaksa saya harus melaksanakan satu plugin yang konflik dengan W3 Total Cache.
Berita baik! :)
Sampai sekarang saya masih belum fully customize W3 Total Chache Plugin. Asik tersekat je…
Cikgu Hairul recently posted…Bicara Soal Hati
Ni mesti isu CSS @ JS kan.
Assalam..
Walaupun tak gunakan WP, nak komen jugak….(degil)
GIMP ada tapi jarang guna. Biasanya paling mudah dan cepat guna paint untuk resize gambar.
Yslow tu ada juga tengok (dalam GTMetrik) tapi tak padai nak cari jalan penyelesaian la, boleh tengok je la.
W’salam
Sy suka guna GIMP sebab nak kurangkan kadar pixel image. Kalau guna original image memang besar. At least kalau dpt kurangkan 20% – 30% image pixel plus smush it plak sekitar 10% dah kira bagus dah :)
Tapi, kalau blogspot tak menjadi masalah sangat.. utk hosting sendiri nih terpaksalah berjimat cermat.