AMP-IMG + Blogspot vs Pagespeed Insight

Postingan terkait :

1. Menerapkan AMP-IMG di halaman Non AMP Blogger
2. Lolos audit gambar Pagespeed insight

Kelebihan dan kekurangan AMP dihalaman Non AMP

Intro

Penerapan AMP-IMG di halaman Non AMP khususnya di Blogspot - Blogger, menimbulkan dilema tersendiri apabila dihadapkan dengan Audit Pagespeed Insight.

Salah satu kelebihan AMP untuk elemen gambar adalah bisa digunakan untuk Memanipulasi dimensi gambar dalam audit Pagespeed insight.

Mampu memanipulasi dimensi gambar menjadi kelebihan dalam penerapan AMP-IMG pada halaman Blogspot

Dimana persyaratan lolos audit sesi gambar adalah "dituntut" agar elemen gambar bisa disajikan responsive dengan tetap memberikan width dan height yang jelas.

Dan dengan menggunakan amp-img terbukti halaman blog lolos Audit pada sesi image.

Tapi ternyata disisi lain, script dan stylesheet AMP-IMG yang disematkan untuk mendukung tampilan elemen <img> justru menjadi kendala dan mengurangi score performa.

Dengan kata lain, script tersebut menimbulkan hambatan pemuatan halaman, sehingga meloloskan audit di 1 sesi tetapi menggagalkan audit di sesi lainnya pada saat yang bersamaan.

Hal ini dikarenakan, script dan stylesheet AMP yang dirender pada halaman Non AMP lebih banyak yang tidak terpakai dari pada yang terpakai (Unused script). Dan ini membuang waktu pemuatan halaman.

Padahal tag <amp-img> sudah disetting menjadi template entry postingan standar di blog ini, supaya setiap postingan baru otomatis menggunakan tag <amp-img> sebagai pengganti <img/>.

Postingan terkait : Membuat template entry AMP-IMG

Mengurangi javascript AMP yang tidak digunakan

Solusi

Alih-alih mencari solusi untuk mengurangi javascript yang tidak digunakan akibat pemasangan AMP.

Dan dengan mempertimbangkan kelebihan dan kekurangannya, lebih baik memilih menanggalkan AMP dari template blog.

Keputusan ini berdasarkan manfaat yang diambil dari script AMP pada halaman Non AMP yang hanya berfokus pada satu elemen saja yaitu elemen gambar.
Sedangkan dampaknya mengurangi perfoma percepatan seluruh halaman.

Sehingga saat ini, semua postingan dengan tag <amp-img> harus kembali diedit menjadi <img/>

Postingan terkait : Cara memasang gambar WEBP di Blogspot