Cara Mengoptimasi Gambar Theme
Di postingan sebelumnya sudah cukup banyak saya bahas tentang cara meningkatkan performa atau kecepatan loading sebuah blog khususnya wordpress, baik dengan http compression mod_deflate dan mod_gzip, zlib compression, minimize sql queries, optimasi file css, database cache, widget cache dan lain-lain.
Cara lain untuk meningkatkan kecepatan loading yaitu kita harus mengoptimalkan penggunaan gambar terutama untuk gambar theme. Penggunaan gambar pada theme akan membuat tampilan blog menjadi sangat menarik. Tapi anda harus bijak dalam menggunakannya, seperti ukuran besarnya file gambar, skala gambar, jumlah gambar dan lain-lain.
Untuk mengoptimalkannya anda bisa mengompress ulang gambar-gambar yang anda pakai menggunakan program pengolah gambar seperti Adobe Photoshop. Dan jangan lupa selalu gunakan metode Save for web untuk mendapatkan hasil ukuran file yang sekecil mungkin.
Untuk mendapatkan hasil kompresan dengan ukuran yang kecil tapi tampilan gambar tetap oke (tidak pecah), anda bisa menggunakan berbagai variasi format gambar yang ada, bisa dengan format jpg (high, medium atau low), png (PNG-8 128 dithered) atau gif bisa dengan 32 dithered sampai 128 dithered. Untuk mendapatkan hasil yang lebih kecil lagi, anda bisa membuat variasi dengan pilihan color yang berbeda dari 2 color sampai 256 color.
Setelah itu upload kembali gambar hasil kompresi tersebut ke folder image yang ada di theme yang digunakan. Selanjutnya test hasilnya menggunakan Firebug (Analize performance). Jangan lupa bersihkan dulu cookies/cache pada browser Firefox yang digunakan. Lihat hasilnya di bagian Optimize images. Jika hasilnya seperti gambar di bawah ini berarti penggunaan gambar yang ada sudah optimal.
Jika hasilnya seperti gambar di bawah ini, sudah ada ceklist hijau tapi masih ada tanda plus atau seperti yang tengah dengan logo segitiga kuning atau malah seperti gambar yang kanan dengan logo peringatan berwarna merah, berarti penggunaan image atau gambar belum optimal.
Cara mengoptimalkannya, klik tanda plus di sebelah kiri Optimize images untuk melihat gambar mana saja yang masih perlu dioptimalkan, kemudian klik link Save as, simpan gambar tersebut dengan nama sesuai nama gambar yang ingin dioptimalkan tersebut. Selanjutnya upload ulang gambar-gambar tersebut ke folder image pada theme.
Cara lain untuk mengoptimalkan penggunaan gambar yaitu dengan memakai metode image sprite, yaitu menggabungkan beberapa image/gambar menjadi satu file kemudian panggil gambar tersebut dengan CSS Sprite (Combine images into CSS sprites). Dengan cara ini akan mengurangi jumlah http request dan Parallelize downloads across hostnames.
Untuk meminimalkan Parallelize downloads across hostnames atau menggunakan gambar dalam jumlah yang cukup banyak dalam satu host/domain baik yang ada di postingan ataupun theme, anda bisa menggunakan subdomain sebagai CDN (Content delivery network) untuk menaruh gambar-gambar static tersebut. Caranya? mungkin postingan berikut ini bisa sedikit membantu : Cara Membuat CDN Dengan Subdomain.
Cara lain dalam menggunakan gambar pada area tertentu seperti background, header, sidebar, footer dll kita bisa menggunakan metode repeat image. Dengan menggunakan gambar yang cukup kecil anda bisa tetap mempercantik tampilan blog tanpa mengurangi kecepatan loading. Postingan berikut ini mungkin bisa sedikit membantu cara menggunakan metode repeat image untuk gambar background “Cara Mengganti Background Theme WordPress“.
aduhh awaknya bingung memulainya………setelah di coba ternyata gampang, coba aja lihat blog saya www.jualcdtutorial.com setelah sukses membangun web itu saya mencoba membuat web toko online www.jualtutorial.com makasih gan ilmunya
Reply
dicoba Om,,moga berhasil ok
Reply
nice info bozzzzzz………………………………………………………..
Reply
dipantengin dolo nih… buat belajar…
Reply
Mas cara menggunakan CSS Sprite gimana ya ?
Reply
wah nice info mas, oh ya saya pernah dengar atau pernah baca di web mana gitu, kalau kita punya header gambar yang ukurannya besar katanya bisa di kompress atau gambarnya menjadi terpecah kecil-kecil sehingga mempercepat loading gambar headernya. gimana caranya ya gan? coba deh lihat blog saya. www.suryapost.com kan headernya gede banget, bisa bikin loading lelet. please bantu ya gan?
Reply
Panduannya lengkap, dicoba dulu untuk praktek, terima kasih.
Reply