Mempercepat Situs Anda dengan CSS Sprite

web spritemaster

Saya cukup banyak menulis tentang kecepatan halaman di situs ini dan ini merupakan bagian penting dari analisis dan peningkatan yang kami lakukan pada situs klien kami. Selain pindah ke server yang kuat dan memanfaatkan alat seperti Jaringan Pengiriman Konten, ada sejumlah teknik pemrograman lain yang rata-rata dapat digunakan pengembang web.

Standar untuk Cascading Style Sheet asli sudah lebih dari 15 tahun sekarang. CSS adalah evolusi penting dalam pengembangan web karena memisahkan konten dari desain. Lihat blog ini dan blog lainnya dan sebagian besar perbedaan gaya hanya ada di lembar gaya terlampir. Stylesheet juga penting karena disimpan secara lokal di cache di dalam browser Anda. Akibatnya, saat orang terus mengunjungi situs Anda, mereka tidak mengunduh style sheet setiap kali… hanya konten halaman.

Salah satu elemen CSS yang sering kurang dimanfaatkan adalah Sprite CSS. Saat pengguna mengunjungi situs web Anda, Anda mungkin tidak menyadari bahwa mereka tidak hanya membuat satu permintaan untuk halaman tersebut. Mereka buat banyak permintaan… Permintaan untuk halaman, untuk setiap lembar gaya, untuk file JavaScript yang terlampir, dan kemudian setiap gambar. Jika Anda memiliki tema yang memiliki serangkaian gambar untuk perbatasan, bilah navigasi, latar belakang, tombol, dll ... browser harus meminta masing-masing, satu per satu dari server web Anda. Lipat gandakan dengan ribuan pengunjung dan itu bisa menjadi puluhan ribu permintaan yang dibuat ke server Anda!

Ini, pada gilirannya, memperlambat situs Anda. SEBUAH situs yang lambat dapat berdampak dramatis pada keterlibatan dan konversi yang dibuat oleh audiens Anda. Strategi yang digunakan pengembang web hebat adalah meletakkan semua gambar ke dalam satu file… disebut a sprite. Daripada membuat permintaan untuk setiap gambar file Anda, sekarang hanya perlu ada satu permintaan untuk gambar sprite tunggal!

Anda dapat membaca tentang bagaimana CSS Sprite bekerja di CSS-Tricks or Sprite CSS Majalah Smashing pos. Maksud saya bukan untuk menunjukkan kepada Anda bagaimana menggunakannya, hanya untuk menyarankan Anda untuk memastikan tim pengembangan Anda memasukkannya ke dalam situs. Contoh yang disediakan CSS Tricks menunjukkan 10 gambar dari 10 permintaan dan jumlahnya mencapai 20.5Kb. Saat dikumpulkan dalam satu sprite, itu 1 permintaan itu 13kb! Permintaan pulang pergi dan waktu respons untuk 9 gambar sekarang telah hilang dan jumlah data berkurang lebih dari 30%. Lipat gandakan dengan jumlah pengunjung di situs Anda dan Anda akan benar-benar memangkas beberapa sumber daya!

navigasi globalThe Apple bilah navigasi adalah contoh yang bagus. Setiap tombol memiliki beberapa status… apakah Anda sedang berada di halaman, di luar halaman, atau mengarahkan mouse ke atas tombol. CSS menentukan koordinat tombol dan menampilkan wilayah dari status yang benar ke browser pengguna. Semua status ini diciutkan bersama dalam satu grafik - tetapi ditampilkan wilayah demi wilayah seperti yang ditentukan di lembar gaya.

Jika pengembang Anda menyukai alat, ada banyak hal di luar sana yang dapat membantu mereka, termasuk Kerangka kerja CSS kompas, PermintaanKurangi untuk ASP.NET, CSS-Spriter untuk Ruby, Script CSSSprite untuk Photoshop, SpritePad, SpriteKanan, SpriteSapi, ZeroSprites, Generator Sprite CSS Project Fondue, Sprite Master Web, Dan SpriteMe Bookmarklet.

Screenshot dari Sprite Master Web:
web spritemaster

Martech Zone tidak menggunakan citra latar belakang di seluruh temanya, jadi kami tidak perlu menerapkan teknik ini sekarang.

2 Komentar

  1. 1

    Tunggu… bukankah keseluruhan koleksi merupakan "gambar" (atau "bidang"), dan setiap sub-gambar (atau sub-kelompok gambar dalam hal animasi atau gambar yang berubah secara interaktif) adalah "sprite"?

    Mungkin barang-barang sudah diganti namanya sejak terakhir kali saya menangani hal semacam ini, tetapi saya tidak bisa bersumpah bahwa Sprite adalah elemen yang akhirnya ditampilkan, bukan tabel data besar tempat itu ditarik.

    ("Sprite table"… bukankah begitu?)

    • 2

      Kita mungkin membicarakan dua hal yang berbeda, Mark. Dengan CSS, pada dasarnya Anda dapat menentukan 'bagian' mana dari file gambar yang akan ditampilkan menggunakan koordinat. Ini memungkinkan Anda untuk meletakkan semua gambar Anda ke dalam satu 'sprite' dan kemudian menunjuk ke area yang ingin Anda tampilkan dengan CSS.

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.