Blog Tips – Tingkatkan Page Speed Dengan Mengoptimize Image (Part 2)

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

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

spriteme

  • Seterusnya, klik buttonexport 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?

Comments

  1. syahrilhafiz says

    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 :)

    • shraqs says

      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.

  2. iza says

    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.

    • shraqs says

      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.

Leave a Reply

Your email address will not be published. Required fields are marked *

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=""> <strike> <strong>

Current ye@r *