Cara mengatasi combine images using CSS sprites

Banyak sekali faktor yang mempengaruhi performa sebuah blog diantaranya adalah images. Jika Anda melakukan cek pagespeed website Anda di gtmertix.com biasanya akan muncul salah satu faktor performa kecepatan website yaitu Combine images using CSS sprites. Meskipun mendapatkan prioritas “medium”  namun mengkombinasikan images (gambar) dengan CSS ini merupakan hal yang penting agar website lebih cepat terload.

Combine images using CSS sprites

Untuk melakukan combinasi images dengan CSS, kita dapat menggunakan  free tools SpriteMe ini. Namun sebelum itu ada baiknya Anda tes terlebih dahulu website Anda di gtmetrix.com untuk mengetahui skor performa blog Anda. Langkah-langkahnya yaitu:

1. Buka gtmetrix.com
2. Ketikkan blog Anda pada kolom “Enter URL to Analyze” kemudian klik tombol Analyze
3. Silahkan tunggu beberapa saat.
4. Setelah proses analisa selesai, maka akan muncul skor performa  blog Anda mulai dari PageSpeed Score, YSlow score, Page load time, total page size dan Request.
5. Fokuskan pandangan Anda pada nilai angka yang tertera di PageSpeed Score saja. Berapa nilai skor blog Anda sebelum di perbaiki faktor Combine images using CSS sprites.

Setelah Anda mengetahui skor pagespeed blog Anda di gtmetrix.com, langkah selanjutnya yaitu menginstal tools SpriteMe pada  toolbar browser Anda. Langkah-langkahnya yaitu:

1. Buka situs spriteme.org ini
2. Klik dan seret SpriteMe (yang ada di bawah Installation) ke Toolbar browse Anda.

Bingung, tidak tau dimana toolbar browser? Silahkan lihat video tutorial dibawah. Jika perlu download videonya menggunakan IDM v6.23 build 17 yang dirilis 24 Juli 2015 kemarin 🙂

Combine images using CSS sprites wordpress

Ok… kita teruskan. Langkah selanjutnya  yaitu:

1. Buka website Anda
2. Setelah website terbuka, klik SpriteMe yang ada di toolbar browser Anda dan tunggu sebentar
3. Pada Suggested Sprites, klik Make Sprite
4. Save as di komputer gambar yang dihasilkan dari SpriteMe, biasanya file gambar bernama spriteme1.png
5. Upload file gambar spriteme1.png ke hosting blog Anda lalu copy linknya kemudian paste di notepad agar tidak lupa. Contoh link spriteme1.png  hasil upload milik saya : http://cahborneo.com/wp-content/uploads/2015/07/spriteme1.png
6. Kembali buka blog Anda lalu klik Export CSS, maka akan terbuka halaman  SpriteMe Export CSS.

Pada halaman SpriteMe Export CSS ini Anda akan melihat kode CSS yang harus Anda tambahkan ke file yang akan dikombinasikan dengan file gambar. Pada kasus ini saya mencontohkan file yang akan di kombinasikan yaitu file css yang terdapat pada folder plugin Live News. File-file yang perlu di kombinasikan gambarnya (Combine images using CSS sprites) yaitu file-file yang ada dibawah Suggested Sprites.  Jadi jika yang muncul di Suggested Sprites hanya 2 link saja maka hanya dua link itu yang harus dikominasikan, namun jika lebih Anda tinggal sesuaikan saja. Disini ada 2 file yang harus di kombinasikan (lihat gambar hasil Export CSS dibawah ini)

Dalam kasus ini, file CSS yang harus dikombinasikan (Combine images using CSS sprites) yaitu file front-style.css dengan file gambar spriteme1.png yang linknya telah Anda simpan di notepad pada langkah sebelumnya.

Dari gambar diatas, file gambar yang harus diganti (Combine images using CSS sprites) dalam file front-style.css yaitu kode yang diberi tanda garis panjang, diganti dengan kode yang ada dibawahnya dan ditambah background-position.

Selanjutnya login ke blog wordpress Anda untuk memasang dan mengedit kode css sesuai dengan perintah SpriteMe Export CSS yang Anda dapatkan. Tutorial ini saya sesuaikan dengan kasus saya, Anda tinggal menyesuaikan.

1. Pada gambar diatas, front-style.css berada pada root /plugins/live-news/css/ sehingga saya harus membuka Plugins > Editor kemudian saya pilih plugin live-news/css/front-style.css untuk mengedit file css plugin live news.
2. Untuk mempermudah penggantian kode, saya memanfaatkan searching (tekan Ctrl +F) dan menuliskan #dc-ln-clock dan #dc-ln-close
3. Hasilnya:

[su_row][su_column size=”1/2″]
Sebelum
#dc-ln-clock{
position: absolute;
left: 0;
bottom: 0;
width: 80px;
background: url(‘/../img/clock.png’) repeat-x;
height: 40px;
line-height: 40px;
text-align: center;
color: #111;
font-size: 28px;
font-weight: 700;
}
[/su_column] [su_column size=”1/2″]
Sesudah
#dc-ln-clock{
position: absolute;
left: 0;
bottom: 0;
width: 80px;
background: url(‘http://cahborneo.com/wp-content/uploads/2015/07/spriteme1.png’) repeat-x;
background-position: 0px -10px;
height: 40px;
line-height: 40px;
text-align: center;
color: #111;
font-size: 28px;
font-weight: 700;
}[/su_column] [/su_row]
dan yang satunya
[su_row][su_column size=”1/2″]
Sebelum
#dc-ln-close{
background: url(‘/../img/close-button.png’) repeat-x;
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
width: 80px;
background-color: #fff;
height: 40px;
line-height: 40px;
text-align: center;
}
[/su_column] [su_column size=”1/2″]
Sesudah
#dc-ln-close{
background: url(‘http://cahborneo.com/wp-content/uploads/2015/07/spriteme1.png’) repeat-x;
background-position: 0px -70px;
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
width: 80px;
background-color: #fff;
height: 40px;
line-height: 40px;
text-align: center;
}
[/su_column] [/su_row]
 

File-file css yang harus di kombinasikan dengan gambar (Combine images using CSS sprites) tidak mesti harus file css dan gambar yang ada dalam folder plugins, namun semua file yang muncul dalam danftar Suggested sprites. Dan kebetulan pada blog ini yang muncul dalam daftar Suggested Sprites. Jadi silahan disesuaikan.. diatas hanya contoh langkah-langkahnya saja.

Tutorial combine images using CSS sprites wordpress