Optimalkan Gambar Anda dan Jangan Buang Waktu Lagi

Menurut HTTPArchive, rata-rata ukuran situs web meningkat hampir dua kali lipat dalam 5 tahun, dari 1 MB pada tahun 2014 menjadi 2 MB pada tahun 2019. Tentu saja, akses Internet lebih cepat dari sebelumnya, tetapi, mengapa situs web menjadi begitu besar sekarang? Jawabannya sebagian terletak pada aset multimedia pada umumnya dan gambar pada khususnya.

Sudah lama sejak situs web bukan lagi halaman teks sederhana. Mereka sekarang dinamis, penuh dengan gambar, video, GIF… dan kami ingin semua aset ini terlihat bagus dan renyah di layar dengan resolusi besar.

Jika situs web Anda memuat sangat lambat dan Anda tidak pernah mengoptimalkan gambar Anda, saya punya kabar baik: hari ini Anda akan mempelajari apa yang dapat Anda lakukan untuk mempercepat WordPress Anda. Mari kita lihat alat yang dapat Anda gunakan untuk meningkatkan kinerja situs web Anda dan mencegah gambar menghalangi pengalaman pengguna Anda.

Mengapa Pengoptimalan Gambar Penting

Sebelum menjelaskan berbagai metode yang tersedia untuk mengoptimalkan aset gambar dan mempercepat situs web Anda, saya ingin meluangkan beberapa menit untuk meyakinkan Anda tentang pentingnya melakukannya.

Gambar Memiliki Dampak Besar dalam Ukuran Keseluruhan Halaman Web

Seperti yang saya katakan di awal, berat gambar di situs web mewakili persentase penting dari total. Misalnya, pertimbangkan posting blog ini: DevTips – Cara Menghentikan WordPress Dari Menebak URL. Ini adalah posting yang cukup singkat, dengan kurang dari 400 kata, yang menawarkan solusi cepat untuk masalah yang jelas.

Menurut GTMetrix, memuat posting ini menggunakan data 850KB. Tetapi mengapa posting singkat seperti itu menggunakan begitu banyak data? Nah, gambar sebagian bertanggung jawab atas masalah ini: gambar unggulan posting saja memiliki berat lebih dari 200KB, yang mewakili 25% dari total.

Lalu Lintas Seluler

Menurut data yang ditemukan di statcounter, 52% lalu lintas web berasal dari perangkat seluler dan 45% dari desktop. Itulah mengapa saat ini begitu banyak penekanan ditempatkan pada penggunaan desain responsif yang bekerja dengan baik pada layar kecil.

Seperti yang pasti pernah Anda alami sendiri, koneksi Internet di ponsel tidak selalu bagus (khususnya jika Anda bepergian atau di bawah tanah). Menurut Statistia, pada 2019 kecepatan rata-rata sekitar 14 Mbps. Oleh karena itu, jika kami ingin mempercepat situs web kami di seluler, kami harus mengurangi bobotnya sebanyak mungkin, termasuk bobot gambarnya.

Biaya Penyimpanan dan Transfer Data

Alasan lain mengapa Anda harus khawatir menggunakan gambar dengan dimensi yang sesuai adalah uang. Kriteria yang digunakan penyedia hosting untuk menawarkan paket mereka mencakup jumlah ruang disk yang digunakan situs web Anda dan jumlah data yang Anda kirim dari server mereka ke pengunjung Anda. Semakin banyak ruang disk yang digunakan dan semakin banyak data yang dikirim, semakin banyak Anda membayar.

Dengan mengurangi ukuran gambar Anda, Anda akan mengurangi kedua faktor dan Anda akan menghemat uang setiap bulan ?

Tindakan Pengoptimalan Gambar

Sekarang Anda tahu mengapa Anda harus khawatir tentang mengoptimalkan gambar Anda, mari kita lihat apa yang dapat Anda lakukan untuk mempercepat situs WordPress Anda.

#1 Unggah Gambar dengan Skala yang Benar

Jumlah orang yang mengunggah gambar yang diambil langsung dari kamera DSLR baru mereka sangat mengejutkan. Masalahnya, setiap foto yang diambil dengan kamera DSLR mungkin terlalu besar dan berat untuk sebuah situs web.

Hal pertama yang harus Anda lakukan adalah memperkecil gambar ke ukuran yang wajar sebelum mengunggahnya ke situs web Anda. Misalnya, di situs web kami, gambar terbesar yang biasanya kami unggah adalah gambar unggulan dari posting kami. Kami memutuskan untuk membatasi gambar tersebut menjadi hanya 1200x800px. Di posting lain ini saya menjelaskan metode untuk menskalakan dan mengompres gambar dengan cepat sebelum mengunggahnya.

#2 Tweak Tema Anda untuk Menghasilkan thumbnail yang Sesuai

Saat Anda mengunggah gambar ke WordPress, WordPress menghasilkan beberapa thumbnail. Thumbnail ini ditentukan oleh tema Anda, karena tema Andalah yang tahu kapan perlu versi gambar yang lebih besar atau lebih kecil.

Misalnya, gambar unggulan kami berukuran 1200x800px. Dimensi ini berfungsi dengan baik saat melihat pos itu sendiri:

yang jelas terlalu berlebihan untuk hal seperti ini:

Itu sebabnya, untuk kasus khusus ini, tema kami mendaftarkan ukuran thumbnail baru yang hanya 480x320px dan digunakan di layar daftar posting.

Jika menurut Anda tema Anda tidak menghasilkan thumbnail yang sesuai, saya sarankan Anda membaca dokumentasi WordPress untuk mengetahui cara menentukan ukuran thumbnail dengan set_post_thumbnail_size atau bahkan cara mendefinisikan thumbnail tambahan dengan add_image_size .

Dan, seperti biasa, jika Anda memerlukan bantuan dengan ini, beri tahu saya di bagian komentar di bawah dan saya akan dengan senang hati membantu (atau bahkan menulis posting tentang itu?)

#3 Gunakan Ukuran Gambar dengan Cerdik

WordPress menghasilkan beberapa gambar mini dari gambar yang Anda miliki di perpustakaan media Anda sehingga tema Anda dapat menggunakan gambar terbaik di setiap skenario yang memungkinkan. Tapi inilah bagian yang menarik: Anda juga dapat menggunakan thumbnail saat menyisipkan gambar di halaman dan postingan Anda.

Saat memasukkan gambar ke dalam postingan, lihat bilah sisi dan pilih ukuran yang paling sesuai dengan kebutuhan Anda:

Misalnya, jika Anda akan menempatkan gambar sempit dan kecil seperti ini, maka gambar kecil (300x200px) mungkin sempurna:

tetapi menggunakan thumbnail yang sama untuk gambar yang lebih besar memberikan hasil yang buruk:

Lebih baik menggunakan versi dengan resolusi lebih:

#4 Gunakan Format Gambar Yang Sesuai

Ada format gambar yang berbeda, masing-masing dengan kekuatan dan kelemahannya untuk mengompresi gambar. Format yang paling banyak digunakan adalah:

• PNG Format gambar yang bagus untuk berbagi tangkapan layar yang tidak memiliki gambar apa pun di dalamnya, seperti, misalnya, tangkapan layar editor WordPress.
• JPG. Salah satu format paling luas di dunia. Ia bekerja sangat baik dengan hampir semua jenis fotografi, memungkinkan rasio kompresi yang sangat tinggi. Namun, itu tidak sempurna: jika foto memiliki tepi yang sangat tajam (misalnya, jika ada teks atau gambar), Anda harus menggunakan tingkat kompresi yang lebih rendah atau berisiko gambar memiliki artefak yang jelek.
• GIF. Raja Internet (dan platform media sosial). Ini adalah jenis format yang memungkinkan animasi. Sejujurnya, saya pikir semua "GIF" yang sekarang kita gunakan sebenarnya adalah video (pendek), yang menawarkan rasio kompresi yang lebih baik dan kualitas yang lebih tinggi…

#5 Hapus Gambar yang Tidak Digunakan

Seiring berjalannya waktu, mudah untuk menyimpan banyak gambar lama di situs WordPress Anda yang tidak digunakan siapa pun di mana pun. Jika Anda ingin menghapusnya dengan cepat, dalam posting ini Toni menjelaskan caranya.

#6 Aktifkan Pemuatan Malas

Jadi, gambar memperlambat situs web Anda, bukan? Mengapa kita tidak memberi tahu situs web untuk tidak memuat gambar kecuali benar-benar diperlukan? Itu akan mempercepat, bukan? Masukkan Pemuatan Malas.

Lazy Loading adalah ide yang cukup sederhana: gambar tidak akan dimuat sampai seharusnya terlihat di browser pengunjung. Misalnya, jika website kita memiliki gambar tertentu di footer, mengapa kita harus repot-repot memuatnya sebelum pengguna mencapai akhir website kita? Tunggu sampai mereka sampai di sana dan, begitu mereka melakukannya, muat gambarnya (dan jika tidak, simpan gambar yang dimuat!)

Ada banyak plugin Lazy Loading untuk WordPress. Beberapa penyedia hosting seperti acara SiteGround menyertakan opsi ini dalam instalasi mereka. Cukup cari opsi di Dasbor Anda dan aktifkan.

Saya harap posting hari ini membantu Anda sedikit meningkatkan kecepatan memuat web Anda. Ada beberapa hal yang semudah ini untuk diperbaiki dan memberikan hasil yang baik. Semangat dan keberuntungan!

Gambar unggulan tim Icons8 di Unsplash.