Saat Anda melakukan cek URL di Pagespeed Google, dan menemukan peringatan "Ubah Ukuran Gambar Dengan Tepat", Anda harus melakukan sesuatu untuknya. Ini mempengaruhi kecepatan situs web Anda saat dimuat.
Sekarang, Anda berada ditempat yang benar. Saya akan membahas tentang bagaimana Saya mengatasi masalah "Ubah Ukuran Gambar Dengan Tepat" di Pagespeed. Beberapa hal yang Saya lakukan:
- Memahami
- Analisis
- Ubah Ukuran Gambar Dengan Tepat
Mari kita teruskan.
Apa Itu Ubah Ukuran Gambar Dengan Tepat
Pagespeed menggunakan matriks pengukuran ini dalam bentuk kibibyte (KiB). Mereka memberikan rekomendasi tentang seberapa banyak penghematan yang berpeluang.
Setiap gambar yang dimuat di halaman, Google akan menghitung dan membandingkan ukuran gambar yang dirender dengan ukuran gambar aslinya.
Itu sebabnya, setiap gambar yang ditampilkan dengan ukuran yang tidak benar, dapat berdampak buruk pada waktu muat halaman. Itu karena Browser berusaha keras untuk menghasilkan gambar yang sesuai, dan membutuhkan lebih banyak waktu untuk memuat.
Mengatasi Masalah "Ubah Ukuran Gambar Dengan Tepat"
Dalam studi kasus ini, Saya menggunakan Blogger. Bila Anda menggunakan WordPress, mengubah ukuran gambar mungkin lebih mudah. Inilah langkah-langkah yang saya lakukan untuk mengatasi "Ubah Ukuran Gambar Dengan Tepat".
1. Ubah Dimensi Gambar dengan Tepat
Setelah Saya mengetahui URL gambar yang ditandai, Saya harus mengubah dimensi gambar dengan tepat. Itu yang akan dilakukan dalam hal ini. Jadi, URL yang bermasalah adalah ini:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLiB8nQLoWcSu2_RG3Y5mfTRItkSQ88BPKSvcW32tCklj7ggYXU-XMD4_Vml6OPrsUUI6xBFO4l8GrVkkzKHTJ__7tzgAXDH-6tHjV660lfrpwQe6f-wRGQPWmFDEvaBUwD5zaQ-AYcbq143a27X95XPPK9IcO-ltgpuRtx49ie6AJVHrXWWmeeD_4XKrC/s1600/crawl-file-robots-txt.png
Sekarang, mari kita analisis, dimana permasalahannya.
Seperti yang Anda ketahui, ada dimensi yang ditambahkan otomatis dari Blogger, dimana gambar yang ditampilkan adalah gambar asli dan memiliki dimensi yang lebih besar. Lihatlah bagian .../s1600/...
Blogger secara otomatis menambahkan s1600 di dalam URL gambar. Pada percobaan saya, ini menggambarkan dimensi gambar. Cobalah mengubahnya dengan angka lain, dan dimensi gambar akan berubah.
Saya juga telah mengulas lebih dalam tentang optimasi gambar. Anda dapat mempelajarinya disana, dan melihat beragam alat untuk optimalkan gambar.
2. Tambahkan Penanda -rw Setelah Ukuran Dimensi
Di URL gambar, tambahkan penanda -rw setelah ukuran dimensi gambar Anda. Misalnya, .../s600/... menjadi .../s600-rw/...
Sebenarnya, Saya tidak tahu pasti tentang karakter khusus ini dalam URL gambar. Tetapi FAKTANYA, itu menyelesaikan masalah gambar Saya.
Jangan lupa untuk menambahkan rw (/s600-rw) setelah angka dimensi yang diinginkan.
3.Tambahkan Gambar di Editor Post
Saat menambahkan gambar di blogger, Anda mungkin bisa memilih menggunakan metode upload gambar. Tetapi, cara yang paling efektif adalah menambahkan gambar melalui tautan.
Setelah Anda mengubah URL gambar, pastikan itu dapat ditampilkan di browser. Kemudian, tambahkan gambar melalui Link di Editor Post Anda.
Mengapa harus menambahkan melalui Link..?
Saat anda menambahkan gambar melalui link, itu akan menghasilkan kode gambar dengan dimensi sesuai dengan URL gambar anda.
Blogger menggunakan kode data-original-width dan data-original-height dalam setiap gambar yang diunggah. Mereka akan menyesuaikan dengan URL gambar yang ditambahkan itu. Jadi, disini tehnik intinya.
Atribut data-original-width saja tidak cukup. Itu hanya menandai data gambar, bukan tentang bagaimana ruang gambar itu ditampilkan. Jadi, Anda harus menambahkan lagi atribut width dan height secara manual.
4. Tambahkan Atribut Width & Height
Setelah kita menentukan dimensi gambar yang sesuai, jangan lupa untuk menambahkan atribut Width dan Height pada elemen IMG. Blogger tidak secara otomatis menambahkan elemen ini. Jadi, tambahkan secara manual.
Hasilnya, kode gambar Saya, akan terlihat seperti ini:
<img
alt=""
border="0"
width="600"
height="176"
data-original-height="176"
data-original-width="600"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLiB8nQLoWcSu2_RG3Y5mfTRItkSQ88BPKSvcW32tCklj7ggYXU-XMD4_Vml6OPrsUUI6xBFO4l8GrVkkzKHTJ__7tzgAXDH-6tHjV660lfrpwQe6f-wRGQPWmFDEvaBUwD5zaQ-AYcbq143a27X95XPPK9IcO-ltgpuRtx49ie6AJVHrXWWmeeD_4XKrC/s600-rw/crawl-file-robots-txt.webp"/>Hasil Studi Kasus
Perubahan yang Saya lakukan berhasil. Saat diagnosa halaman di Pagespeed, tidak ditemukan lagi pesan kesalahan "Ubah Ukuran Gambar Dengan Tepat" pada elemen gambar Saya.
Lihat hasil ini:
Pesan kesalahan tentang Gambar itu sudah hilang. Itu artinya, semua tips yang dijelaskan sebelumnya berjalan dengan baik.
Kesimpulan
Blogger memiliki cara khusus dalam menampilkan gambar. Mengubah dimensi yang tepat untuk gambar, membuat gambar dalam kompresi yang ringan, menjadi langkah yang baik untuk mengatasi masalah "Ubah Ukuran Gambar Dengan Tepat" di Pagespeed.
Sekarang, cek halaman Anda di Pagespeed. Bila Anda memiliki yang sama, lakukan perubahan dan beritahu Saya di kolom komentar.
Komentar