Cara Meraih Skor Kecepatan > 90 dan Melejitkan Waktu Muat Website < 2 Detik

Gabungkan Gambar dengan CSS Sprite

Gambar membuat tampilan halaman web menjadi lebih menarik, tetapi juga membuatnya menjadi lebih lambat. Setiap gambar memerlukan tambahan permintaan HTTP ke server. Solusi untuk mengatasi hal ini bisa dilakukan dengan menggunakan metode CSS Sprite.

Sprite adalah gabungan dari beberapa gambar menjadi sebuah gambar tunggal. Setiap gambar ini nantinya bisa diakses dengan menggunakan CSS.

Sebagai misal, Anda memiliki 3 buah gambar pada suatu halaman seperti berikut.
css_sprites_image

Sebagai ganti menggunakan 3 buah gambar terpisah, Anda bisa menggabungkannya menjadi 1 file gambar tunggal. Dan dengan CSS, Anda bisa menampilkan bagian gambar yang diinginkan. Untuk membuat CSS sprite, Anda bisa mempelajari caranya lebih lanjut di W3Schools.com

Membuat CSS sprite memang bukanlah hal mudah, terutama sekali jika Anda tidak terlalu mengetahui hal-hal teknis seperti ini. Untungnya, Internet menyediakan banyak hal secara gratis, termasuk pembuatan CSS sprite.

Berikut beberapa tool online yang bisa Anda pergunakan untuk membuat CSS sprite secara mudah :

{ 4 comments… add one }
  • Jhon September 10, 2016, 2:49 pm

    Terima kasih banyak atas informasinya. Sangat informatif bagi saya yang sedang membangun website.

    Reply
  • Azhar MZ March 17, 2016, 9:09 pm

    Maksudnya gimana gan Google menyarankan agar website Anda memiliki waktu respon kurang dari 2 detik (2 ms), padahal di https://developers.google.com/speed/docs/insights/Server rekomendasinya di bawah 200 milisekon/milidetik, jika dikonversi ke detik maka 200 ms = 0,2 s (detik)

    Reply
  • kayzip October 8, 2015, 11:05 am

    apa metode keep alive bisa juga diterapkan untuk joomla? mohon pencerahannya?

    Reply
    • PLACESIANA October 9, 2015, 9:57 am

      Metode Keep-Alive bisa dipergunakan dengan CMS apa saja, termasuk Joomla.
      Bahkan website yang dibuat dengan HTML editor biasa juga bisa memanfaatkan metode ini … asalkan mempunyai akses ke konfigurasi web server.

      Reply

Leave a Comment

{ 4 comments }