Tiga kiat pragmatis ini akan membantu Anda mengoptimalkan gambar di situs web Anda untuk kecepatan halaman yang Lebih cepat sambil mempertahankan UX Anda.
3 Tips Pengoptimalan Gambar untuk Kecepatan Lebih Cepat & Peringkat Lebih Tinggi
Beberapa orang adalah pembelajar visual, beberapa orang kinestetik, dan yang lainnya auditori. Namun saya berpendapat bahwa sebagian besar dari kita adalah pembelajar yang tidak sabar.
Kita menuntut situs web untuk dimuat dalam sekejap dan pertanyaan kita dijawab secara langsung. Inilah sebabnya mengapa mesin pencari memprioritaskan situs web dengan kecepatan halaman yang lebih cepat, terutama pada perangkat seluler.
Dalam banyak kasus, gambar adalah masalah nomor satu yang mempengaruhi waktu muat situs web.
Kita semua memahami bahwa gambar berkualitas tinggi berkontribusi pada pengalaman pengguna yang positif, tetapi apakah kita sudah minum terlalu banyak Kool-Aid?
Sebuah penelitian Google dan SOASTA pada tahun 2016 mengonfirmasi bahwa halaman web yang kompleks dengan lebih banyak gambar memiliki tingkat konversi yang lebih rendah daripada halaman web dengan lebih sedikit gambar.
Meskipun beberapa situs web mungkin mendapatkan keuntungan dengan menjadi “gambar-berat”, kita harus benar-benar melihat kecepatan halaman sebagai sumber daya yang langka. Semakin kita mendedikasikan sumber daya ini untuk memuat sumber daya yang besar dan berat, maka akan semakin tidak efektif.
Dengan PageSpeed Insights yang didesain ulang oleh Google, banyak orang yang bingung tentang apa yang dimaksud dengan menayangkan gambar dalam “format generasi berikutnya” dan dukungan browser apa yang tersedia untuk memenuhi kekhawatiran Google.
3 Tips Pengoptimalan Gambar untuk Kecepatan yang Lebih Cepat & Peringkat yang Lebih Tinggi
Selain itu, banyak orang yang masih mengandalkan teknologi lama untuk mengompres dan menampilkan gambar di situs web mereka.
Baca terus untuk mengetahui beberapa kiat pragmatis untuk membantu Anda mengoptimalkan gambar untuk kecepatan halaman yang lebih cepat sambil mempertahankan UX Anda.
- Gunakan Gambar Secara Bertanggung Jawab
Desain minimalis sering kali memberikan pengalaman pengguna yang baik karena memberikan performa yang lebih baik. Tetapi Anda perlu bertanya pada diri sendiri apakah gambar benar-benar penting untuk desain Anda.
Untuk halaman web yang lebih dinamis, Anda mungkin tergoda untuk membuat gambar menjadi interaktif dan bahkan menjadi titik fokus desain Anda.
Kecuali jika Anda seorang fotografer, Anda bisa memanfaatkan sumber daya alternatif selain gambar untuk meningkatkan UX Anda, seperti:
CSS3 untuk elemen interaktif.
Grafik vektor yang dapat diskalakan untuk logo dan desain sederhana.
Video yang disematkan, bukan GIF yang besar.
Faktanya, gambar vektor cenderung mempertahankan resolusi yang lebih besar saat dimuat pada perangkat beresolusi lebih tinggi.
Selain itu, alih-alih mengkodekan teks dalam gambar, yang tidak dapat dibaca oleh mesin pencari, Anda dapat beralih ke font web yang meningkatkan UX.
Di dalam alat PageSpeed Insights, Anda akan sering menemukan bahwa Google merekomendasikan untuk menangguhkan gambar di luar layar untuk meningkatkan pemuatan. Hal ini pada dasarnya berarti memindahkan gambar di bawah lipatan sehingga setidaknya pemuatan awal untuk pengguna lebih cepat.
Untuk mencapai hal ini, Anda harus mengoptimalkan rendering jalur kritis Anda.
Ada beberapa metode yang dapat dilakukan untuk mengoptimalkan perenderan jalur kritis Anda, seperti mengecilkan ukuran, menyimpan dalam cache, dan mengompresi semua sumber daya halaman (CSS, JavaScript, HTML).
Pengiriman CSS sebaris untuk header dan modul dokumen utama juga dapat memberikan pemuatan instan kepada pengguna sementara semua CSS dan sumber daya yang tidak terpakai dimuat di backend.
Selain itu, Anda dapat mencegah pemblokiran JavaScript untuk mencegah sumber daya yang ingin dimuat agar tidak dimuat pada pemuatan pertama.
Meskipun hal ini cukup rumit, ada beberapa alat yang dapat membantu Anda di WordPress.
W3 Total Cache menyimpan cache dan mengecilkan hampir semua sumber daya di CDN Anda dari HTML hingga elemen WordPress.
Selain itu, W3 Total cache dapat digunakan untuk mengoptimalkan rendering jalur kritis, seperti menggunakan pemblokiran JavaScript dengan “async” dan “defer” dan fitur-fitur lain yang dapat membantu meningkatkan pemuatan halaman tanpa harus sepenuhnya menyingkirkan gambar.
Alat ini juga menawarkan kemampuan HTTP/2 untuk lebih meningkatkan pemuatan.
- Mengotomatiskan Kompresi Gambar
Mungkin dua cara terbaik untuk mengoptimalkan gambar untuk kecepatan adalah dengan mengurangi ukurannya dan mengompres file mereka. Kompresi gambar sangatlah mudah dengan alat yang tepat yang Anda miliki.
Jika Anda bekerja dengan WordPress, Anda bisa menginstal Imagify dan mengompresi semua gambar Anda secara massal dalam satu klik. Semua gambar selanjutnya yang ditambahkan ke pustaka Anda akan dikompresi menggunakan alat ini.
Plugin ini bahkan menawarkan pengaturan agresif untuk mengompresi JPG dan PNG untuk meningkatkan kecepatan secara besar-besaran.
