Optimalkan kecepatan situs web dengan CSS Sprite

Di awal artikel seri pengoptimalan situs web, Vietrick ingin memperkenalkan teknik CSS Sprite kepada Anda. Banyak website besar saat ini seperti Google, Facebook, TheGioiDiDong, Zing,.. semua menerapkan teknik ini untuk mempercepat loading website. Pada artikel ini, kita akan mempelajari lebih lanjut tentang teknik sprite CSS, kelebihan dan kekurangannya, serta cara menerapkannya dengan benar.

Apa itu CSS Sprite?

Mendefinisikan

Sprite CSS (atau CSS Image Sprites) adalah teknik untuk menggabungkan banyak gambar kecil menjadi satu gambar besar. Gambar kecil akan digunakan sebagai background untuk elemen dengan mengekstraksi dari gambar besar melalui CSS background-position.

Misalnya, situs web Anda perlu menggunakan 5 gambar ikon untuk laptop, desktop, ponsel, tablet, kamera. Anda dapat menggunakan teknik sprite CSS untuk menggabungkan 5 ikon ini menjadi satu gambar besar.

Gambar ketika digabungkan menjadi gambar besar dapat diatur secara horizontal atau vertikal, asalkan tidak tumpang tindih.

Format yang didukung oleh teknik CSS Sprite adalah format gambar yang didukung oleh properti background termasuk format svg.

Petunjuk untuk membuat Image Sprite

Untuk menggabungkan gambar ikon menjadi satu gambar besar, Anda dapat menggunakan alat pengeditan gambar seperti Photoshop untuk melakukan kolase foto atau menggunakan alat online yang tersedia di Internet.

Anda dapat pergi ke Google untuk mencari dengan kata kunci: “pembuat sprite gambar online“. Saya sering menggunakan toolkit online gratis di https://cssspritestool.com

Setelah membuat gambar Image Sprite, Anda perlu mengetahui posisi koordinat asli dan ukuran gambar kecil yang akan digunakan.

Petunjuk untuk menggunakan Image Sprite

Setelah membuat Gambar Sprite. Dengan jalur di:

https://coderja.com/wp-content/uploads/2023/06/Optimalkan-kecepatan-situs-web-dengan-CSS-Sprite.png

Kita dapat mengatur background untuk elemen ketika ukuran dan koordinat diketahui. Contoh dengan Gambar Sprite TGDD:

• Logo: ukuran 160×30 px, koordinat: 0 0.
• Kumpulan stiker industri dan perdagangan: ukuran 110×30 px, koordinat: 0px -54px;
• Ikon Kamera: ukuran 26×24 px, koordinat: -250px -50px;

.main-sprite {
background:url('https://coderja.com/wp-content/uploads/2023/06/Optimalkan-kecepatan-situs-web-dengan-CSS-Sprite.png');
background-repeat:no-repeat;
display: inline-block;
}
.logo {
background-position:0 0;
width:160px;
height:30px
}
.bcth {
background-position: 0px -54px;
width: 110px;
height: 30px;
}
.camera {
background-position: -250px -50px;
width: 26px;
height: 24px;
}

<div class="main-sprite logo"></div>
<div class="main-sprite bcth"></div>
<div class="main-sprite camera"></div>

Hasil menerapkan Gambar Sprite dari halaman TGDD:

Keuntungan CSS Sprite

Sebagaimana dijelaskan dengan jelas dalam definisi CSS Sprite, menggunakan teknik ini menawarkan dua keuntungan:

1. Kurangi jumlah permintaan: Menggabungkan beberapa gambar menjadi satu gambar jelas mengurangi jumlah permintaan yang dikirim ke server saat halaman dimuat. Dengan demikian membantu meningkatkan waktu muat halaman dan mengoptimalkan situs web Anda. Dalam contoh TheGioiDiDong, menerapkan teknik ini membantu mengurangi lebih banyak 40 permintaan ke server saat halaman dimuat.
2. Sinkronisasi Beban Sumber Daya: Menggabungkan thumbnail membantu menyinkronkan pemuatan sumber daya ini di seluruh situs Anda. Hilangkan masalah tanpa memuat atau lambat memuat gambar tertentu, sehingga membantu memberikan pengalaman pengguna yang konsisten.

Kekurangan CSS Sprite

Metode apa pun memiliki dua kelebihan dan kekurangan, begitu pula CSS Sprite. Meminimalkan jumlah permintaan adalah manfaat yang jelas dari teknik CSS Sprite. Namun, jika Anda memanfaatkan teknik ini, itu akan berdampak negatif pada kecepatan memuat halaman dan pengalaman pengguna.

Menggabungkan banyak gambar kecil menjadi satu gambar besar menyebabkan masalah Ukuran gambar yang digabungkan (sprited image) terlalu besar. Dari sana, ini memengaruhi kecepatan pemuatan halaman serta pengalaman pengguna.

Jelas bahwa Anda menggabungkan 2 foto dengan ukuran yang sama 5KB bersama-sama tidak akan mungkin untuk menghasilkan gambar keluaran 10KB. Biasanya, gambar yang digabungkan akan memiliki ukuran yang sedikit lebih besar.

Terapkan CSS Sprite dengan benar

Menerapkan CSS Sprite hanya untuk gambar ikon dengan kapasitas kecil. Pada dasarnya, metode optimasi dapat dibagi menjadi dua metode implementasi sebagai berikut:

Mengoptimalkan CSS Sprite berdasarkan ukuran

Ukuran gambar yang digabungkan tidak boleh terlalu besar, sebaiknya di bawah 80KB agar tidak mempengaruhi pengalaman pengguna. Jika situs Anda memiliki terlalu banyak gambar ikon, Anda dapat mempertimbangkan untuk memisahkan beberapa gambar sprite.

Dalam contoh Gambar Sprite TheGioiDiDong, ukuran gambar ini terbatas 50KB Sudahlah.

Mengoptimalkan CSS Sprite sesuai tujuan

Jika situs web Anda memiliki beberapa gambar ikon penting yang perlu ditampilkan di bagian atas halaman web, sedangkan sebagian besar ikon lainnya terletak di bagian bawah. Pada titik ini Anda harus mempertimbangkan untuk memisahkan ikon-ikon ini menjadi 2 grup untuk menerapkan CSS Sprite.

Membagi menjadi beberapa gambar sprite sesuai dengan tujuan dan wilayah yang berbeda membantu memastikan keseimbangan antara kecepatan memuat dan pengalaman pengguna.

Menyimpulkan

Sprite CSS benar-benar teknik ampuh yang sering digunakan desainer situs web untuk mengoptimalkan produk mereka. Menerapkan teknik ini secara cerdas dan terampil akan sangat meningkatkan kecepatan memuat halaman dan pengalaman situs web Anda.

Selain itu, jika lebih banyak menerapkan teknik Lazy Load, maka akan terbentuk kombo untuk meningkatkan kecepatan loading secara efektif.