Pagespeed Img Blogger

Masalah umum elemen image pada Pagespeed Insight

Yang sering ditemui di hasil tes Pagespeed Insight untuk elemen gambar (img) adalah :
1. width dan height yang tidak jelas.
2. Gambar dengan format generasi lama.
3. Penundaan gambar dibalik layar.

Pada postingan ini kita bahas poin nomor 1, yaitu masalah width dan height yang tidak jelas pada hasil uji di Pagespeed Insight.

Mengatasi width & height gambar pada Pagespeed Insight

Dibawah ini screenshot hasil tes Pagespeed Insight untuk width & height gambar yang teratasi (lolos uji).

Untuk mengatasi masalah ini, salah satu cara yang paling mudah adalah mengkustom elemen gambar yang diupload dalam postingan.
Buka postingan yang akan diedit, dan pastikan editor postingan dalam mode < > Tampilan HTML. Dan perhatikan kode elemen gambar pada postingan yang biasanya tampak seperti ini :

<div class="separator" style="clear: both;">
  <a href="https://blogger.googleusercontent.com/img/b/_yuUrXyNukhEHxMSLQ/s1600/img-fix.webp" style="display: block; padding: 1em 0; text-align: center; ">
    <img alt="" border="0" data-original-height="311" data-original-width="641" src="https://blogger.googleusercontent.com/img/b/_yuUrXyNukhEHxMSLQ/s1600/img-fix.webp"/>
  </a>
</div>

Kode elemen gambar postingan diatas akan dikustom menjadi elemen picture. Agar lebih jelas, berikut ini kode elemen gambar postingan dalam struktur ringkas sebelum dan sesudah kustom.

Sebelum :

<div class='separator' style="clear: both;">
  <a href='/img/s1600' style="">
    <img alt='' border="0" data-original-height="311" data-original-width="641" src='/img/s1600'/>
  </a>
</div>

Sesudah :

<picture class='separator' style="clear: both;">
  <a href='/img/1600' style="">
      <img alt='' border="0" height="311" width="641" src='img/s1600'/>
      <source srcset='/img/s320' media='(max-width:420px)'>
      <source srcset='/img/s400' media='(max-width:640px)'>
  </a>
</picture>

atau buat lebih spesifik lagi, khusus hanya untuk meladeni Pegespeed insight versi mobile saja, gunakan kode seperti dibawah ini :

<picture class='separator' style="clear: both;">
  <a href='/img/1600' style="">
      <img alt='' border="0" height="311" width="641" src='img/s1600'/>
      <source srcset='/img/s320' media='(max-width:360px)'>
  </a>
</picture>

Cara cepat mengkustom HTML image :

1. Pada tag <div, ubah div menjadi picture.
2. Untuk tag <a href='...', bisa dihapus jika tidak dibutuhkan.
3. Untuk membuat tag source:
   
   • Copy atribut src="https/....."/> pada tag img hingga akhir tag lalu tekan enter untuk membuat baris baru dibawahnya.
     
     
   • Pastekan sebanyak 2 kali.
     
     
   • Tambahkan tag pembuka <source dan atribut media='(max-width:**px)'
     Hasilnya menjadi seperti ini.
     
     
4. Buat templat entri agar disetiap postingan baru, kode tersebut otomatis muncul di editor postingan (mode HTML) untuk memudahkan copy-paste. Caranya lihat dipostingan Membuat Templat Entri Postingan

Penjelasan

1. Kenapa URL gambar bisa dikustom / diedit ? Penjelasannya lihat di postingan : Parameter URL Image
2. Kenapa tag <source/> harus dipasang 2 kali?, dibawah ini penjelasannya.

Fungsi 2 tag <source/>

Tujuan utama pengujian Pagespeed Insight salah satunya adalah penyesuaian ukuran tata letak. Dalam hal ini terutama ukuran gambar (image sizes) vs lebar layar (screen sizes).

Untuk ukuran layar pada pengujian versi mobile, ukuran default terkecilnya adalah 360px (Moto G4 / Android versi 6). Sehingga gambar dan juga tata letak yang disediakan dalam postingan akan disesuaikan dengan ukuran tersebut.

Berdasarkan spesifikasi Pagespeed Insight versi mobile tersebut, apabila dipostingan terdapat gambar yang lebih besar dari 360px dan tidak disertakan atribut dengan value yang sesuai dengan lebar layar 360px maka pada pengujian Pagespeed Insight akan terdeteksi sebagai masalah.

Penggunaan tag source yang lebih dari 1 inilah yang berperan menyediakan spesifikasi gambar yang dibutuhkan pada pengujian versi mobile maupun versi desktop.

Tag <source/> pada elemen picture disematkan 2 kali dengan kueri media yang berbeda berfungsi untuk:

1. Kueri media (max-width:420px) : gambar untuk batas layar hingga 420px
2. Kueri media (max-width:640px) : gambar untuk batas layar hingga 640px
Sedangkan tag img ditargetkan untuk lebar layar diatas 640px keatas.

⇐ Sebelumnya

Selanjutnya ⇒