L

Menerapkan CSS Sprites di WordPress Secara Otomatis


Bismillahirrohmanirrohim


Ilustrasi CSS Sprites

Gambar di atas adalah ilustrasi yang paling tepat menggambarkan apa itu CSS Sprites, yakni metode optimasi yang menggabungkan beberapa gambar menjadi satu gambar saja untuk meminimalisir jumlah request, gambar pada halaman ditampilkan dengan menggunakan CSS.

Meski protokol HTTP/2 sudah memiliki kemampuan Multiplexing yang mengambil semua elemen dalam sekali request, tapi tetap saja jika jumlah request itu dikurangi maka akan mempercepat load website kita lebih cepat lagi dengan HTTP/2.

Beberapa pembaca yang datang ke artikel ini biasanya karena mendapati hasil benchmark di GTMetrix menyarankan untuk mengkombinasi beberapa gambar dengan CSS Sprites.

Optimasi CSS Sprites ini mempengaruhi PageSpeed Score pada GTMetrix 😀

Tapi, bagaimana cara melakukannya ?

Bahkan dengan generator berbasis web app pun menurut saya masih ribet, apalagi jika melakukannya secara manual 😀

Selain harus membuat file *.png yang memuat seluruh gambar-gambar menjadi satu kesatuan, kita juga harus coding css untuk mengatur tata letak posisi gambar itu di halaman website kita, dan semua itu dilakukan secara manual !

Maka dari itu, disini saya akan share cara menerapkan CSS Sprites secara otomatis menggunakan plugin di WordPress Self Hosted.

Cara ini lebih mudah daripada menggunakan CSS Sprites Generator berbasis WebApp yang banyak tersedia saat ini, karena proses generate dilakukan secara internal dengan menggunakan plugin.

 

JCH Optimize

Ya, nama plugin-nya adalah JCH Optimize, ini plugin yang sangat bagus dalam hal optimasi, hanya saja fitur-fitur bagusnya adalah fitur pro yang mana kita harus bayar untuk menggunakannya.

Saya pribadi sih hanya menggunakan fitur-fitur gratisan dari JCH Optimize ini, salah satunya ya CSS Sprites Generator ini, letak konfigurasinya ada di Settings →JCH Optimize →Free Features.

WordPress Plugins: CSS Sprites Generator

Karena ini adalah plugin, tentu saja bekerja otomatis, kita hanya menentukan Script Build Direction saja apakah Vertical atau Hoziontal.

Coba Anda scroll down ke bawah dan lihat pada bagian footer blog ini, nah itu adalah contoh CSS Sprites yang Script Build Direction-nya adalah Vertical.

Kita juga bisa menentukan gambar apa saja yang ingin kita masukkan dan kecualikan secara manual, dan mengaktifkan opsi Wrap Images yang berfungsi memasukkan gambar pada kolom dan baris lainnya jika panjang gambar sudah mencapai 2000px.

Powered by Dewaweb


Protected by DMCA ! Protected by Premium Copyscape !

Hi, Bagaimana Menurut Anda ?


Jadilah Pembaca yang Baik dengan cara meninggalkan Komentar pada setiap Artikel Bermanfaat yang sudah dibaca (•‿•)


Komentar adalah salah satu Faktor Penyemangat bagi seorang Blogger, termasuk juga saya. Sebagai bukti bahwa saya tidak sendirian disini, mengingat ada banyak sekali Viewer (Pembaca) Artikel di Blog saya ini. Tolong, jangan pergi begitu saja.


Tinggalkan Komentar Anda disini meskipun hanya sekedar menyapa saya, mari kita bangun Forum Diskusi di Kolom Komentar pada setiap Artikel di Blog ini.


Oleh karena itu, saya sudah menyediakan Fasilitas Comment System terbaik saat ini yakni Disqus Comments System untuk membangun Komunitas Komentator yang lebih Advanced lagi, tidak diperlukan Account Disqus untuk bisa berkomentar disini, Anda cukup memasukkan Nama dan Email saja, tapi saya sarankan untuk memiliki Account Disqus jika Anda sering berkomentar di banyak Blog yang menggunakan Disqus Comment System.

Mungkin Anda juga menyukai


Disqus Comments

  • Klo pake kyk CDN Enabler gitu bisa gk, buat enable CDN nya, mengingat pake plugin ini bayar buat enable CDN nya?

    • Tidak bisa, karena plugin ini mencegah plugin CDN Re-write lainnya untuk mengubah URL file *.css dan *.js yang dioptimasi olehnya.

  • Lho, JCH Optimize juga ada yang sekali bayar, kok 😀

    https (titik dua) //www (dot) jch-optimize (dot) net/subscribe/levels.html#wordpress

    Disitu, yang sekali bayar harganya $99, seumur hidup Support sama Update, tapi itu cuman satu platform aja, gk bisa lebih.

    Trus, disitu juga ada versi Developers nya, yang lifetime harganya $219, udah dapet Unlimited Download ID, terus disitu juga bisa dapet akses JCH Optimize ke semua Platform, termasuk WordPress. Tinggal klik “View Developer’s Package” klo lebih lanjut.

    Mayan tuh yang Developer Package, hehe 😀

    • Terimakasih koreksinya, iya bener ternyata ada lisensi Lifetime-nya, menarik nih 😀



×
SSL Verified