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

Optimalkan Gambar Web


Gambar merupakan salah satu hal utama penentu faktor kecepatan website yang sangat diperhatikan oleh Google. Gambar mempergunakan bandwidth terbesar dari kebanyakan website. Untuk itu, Google menyarankan agar Anda :

  1. menggunakan format gambar yang tepat
  2. mengkompres gambar secara maksimal sehingga ukurannya mengecil
  3. menentukan ukuran gambar agar browser bisa mengetahui secara lebih cepat

#4.1 Gunakan format file gambar yang sesuai dengan kebutuhan

Ada banyak jenis format gambar, untuk itu Anda perlu mengetahui format mana yang cocok dengan gambar Anda agar website lebih optimal. Berikut ini beberapa saran untuk menentukan penggunaan format gambar:

  • Gunakan GIF untuk gambar sederhana atau sangat kecil (misalnya kurang dari 10×10 piksel, atau palet warna yang kurang dari 3 warna, contoh: gambar gravatar, favicon) dan juga untuk gambar yang bergerak (animasi).
  • PNG biasanya lebih baik dari GIF, meskipun beberapa versi browser lama hanya memiliki dukungan parsial untuk PNG.
  • Gunakan JPG untuk semua gambar bertipe fotografi.
  • Jangan menggunakan BMP ataupun TIFF website karena ukurannya yang cenderung sangat besar.

#4.2 Perkecil ukuran gambar dan padatkan

Selain memperkecil ukurannya secara fisik, Anda juga bisa mengurangi ukuran gambar dengan cara mengoptimalkannya. Beberapa optimalisasi gambar yang bisa dilakukan adalah dengan :

  • menghapus bagian gambar yang tidak dibutuhkan
  • mengurangi kedalaman warna ke tingkat terendah yang masih bisa diterima oleh mata
  • menghapus komentar atau informasi gambar yang tidak dipergunakan
  • memotong gambar sesuai ukuran halaman web.
    Sebagai contoh, jika lebar halaman website 600px, ubahlah ukuran gambar menjadi selebar itu … atau lebih kecil. Jangan langsung mengunggah gambar dengan lebar diatas 600px, ini akan memperlambat proses muat halaman website Anda

#4.3 Tentukan ukuran lebar dan tinggi gambar

Menyertakan ukuran lebar dan tinggi gambar ternyata ikut menyumbang peningkatan kinerja website. Jika Anda tidak menyertakan ukuran dimensi gambar, browser tidak mengetahui seberapa besar gambar sampai gambar diunduh secara lengkap. Penundaan kecil ini membuat browser perlu mengukurnya dulu sehingga memperlambat penampilan halaman. Hal ini akan menjadi semakin buruk jika Anda mempergunakan banyak gambar dalam halaman yang sama.

Selain menggunakan editor gambar WordPress, Anda bisa menentukan ukuran gambar dengan cara berikut :

  • HTML: <img src="" width="200" height="100">
  • Inline CSS: <img src="" style="width: 200px; height: 100px">
  • External CSS: #myImage { width: 200px; height: 200px; }

Tool untuk mengoptimalkan gambar

Pengoptimalan lanjutan pada gambar bisa dilakukan dengan memadatkan gambar menggunakan kompresi lossless (tidak mengurangi kualitas gambar) dan kompresi lossy (hasil kompresi lebih kecil dari lossless tetapi dengan kualitas lebih rendah).

Ada cukup banyak plugin yang bisa dipergunakan untuk mengoptimalkan gambar, bahkan kebanyakan bisa melakukan optimalisasi secara otomatis saat gambar diunggah. Beberapa plugin yang bisa Anda pergunakan adalah :

  • WP Smush.it mengurangi ukuran file gambar dengan mengkompres secara otomatis saat diunggah ke media library. Semua kompresi bersifat lossless sehingga Anda tidak akan melihat banyak perbedaan dalam kualitas gambar.
  • Kraken Optimizer mengoptimalkan gambar WordPress melalui Kraken API. Plugin ini bisa dipergunakan untuk mengoptimalkan baik gambar lama ataupun gambar yang baru diunggah. Mode kompresi lossless dan lossy semuanya bisa dilakukan dengan Kraken.
  • EWWW Image Optimizer juga bisa mengoptimalkan gambar secara otomatis sewaktu diunggah ataupun yang sudah ada dalam pustaka media. Baik metode lossless ataupun lossy semua didukung untuk mengoptimalkan gambar Anda

Selain menggunakan plugin, ada banyak program yang juga bisa Anda pergunakan untuk mengkompres gambar, seperti :

Mempercepat dengan Metode Lazy Load
Salah satu cara lain yang bisa dipergunakan untuk mempercepat proses muat website adalah dengan menggunakan metode Lazy Load. Lazy Load adalah cara penundaan pemuatan gambar pada halaman website yang panjang. Gambar yang tidak terlihat di jendela browser pengunjung, tidak dimuat sampai pengunjung menuju ke bagian tersebut. Ini kebalikan dari teknik image preloading yang memuat gambar sebelum ditampilkan. Dengan menggunakan Lazy Load pada halaman website yang panjang akan membuat halaman ditampilkan secara lebih cepat.

Ada banyak plugin WordPress yang dibuat khusus untuk mendukung penggunaan Lazy Load, seperti :

{ 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 }