Cara Mengatasi Serve Scaled Images pada GTmetrix PageSpeed

Memperbaiki Serve Scaled Images pada GTmetrix PageSpeed
Masalah Serve Scaled Images pada GTMetrix memberikan efek cukup besar pada proses loading sebuah website/blog dan mengurangi skor pagespeed, hal ini juga saya alami saat edit template blog. Lalu, bagaimana cara mengatasi Serve Scaled Image pada GTmetrix?.

Pada postingan kali ini saya akan berbagi tips mempercepat blog khususnya bagi yang mengalami masalah serve scaled images pada GTmetrix di blogger atau blogspot.

Serve Scaled Images pada GTmetrix

Pada platform blogger/blogspot, masalah serve scaled images pada GTmetrix biasanya terjadi karena thumbnail blog yang memiliki ukuran yang terlalu besar.

Dari hasil tes speed di GTmetrix menunjukkan hasil performa kecepatan loading blog cukup berat, pada bagian Serve Scaled Images diberitahukan bahwa penyebab loading lambat ini dikarenakan oleh image (gambar) dengan mendapat nilai F(42).

Mengatasi Serve Scaled Images GTmetrix
Serve Scaled Images GTmetrix

Kita bisa melihat URL gambar apa saja yang mempengaruhi kecepatan blog, juga disertakan tips untuk memperbaiki serve scaled images tersebut.


Contohnya pada blog ini, gambar dengan URL https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QIsyGugxYJsQTqTB-gMyj0blR7EqFuZcCH-CgZmz-4UrqepQbFue520QrEcDXKM1COI5M8_-do-Jo0EMDo-WDg_KXE3oDRVPFoun3Z301HKMEr3j7ZzVTULBFVit2rZaUPCJuu-Qwoc/w420-h280-p-k-no-nu/fitur+whatsapp+boomerang.webp berasal dari gambar thumbnail di homepage, memiliki ukuran yang cukup besar (420x280) sehingga menurunkan skor speed GTmetrix, dan kita disarankan mengganti ukurannya ke 160x160.

Dan benar saja, gambar tersebut berasal dari thumbnail. Bagaimana cara mengetahuinya? Dilihat dari ukuran gambar, ukurannya kecil. Jika sobat menemukan gambar yang lebih dari itu, kemungkinan juga dari gambar thumbnail widget popular post atau artikel terbaru (bergambar).

Lalu, bagaimana cara resize thumbnail pada blogger?

Tips:
  • Jika melakukan pagespeed pada halaman homepage, kemungkinan besar gambar-gambar yang perlu diperbaiki dari thumbnail artikel terbaru atau widget popular posts.
  • Namun, jika pagespeed pada halaman postingan, gambar yang perlu diperbaiki adalah gambar postingan.

Cara Resize Ukuran Gambar

Setelah mengetahui letak gambar tersebut berada di thumbnail, selanjutnya kita lakukan resize ukuran gambar thumbnail blog dengan mencari kode gambar thumbnail melalui Edit HTML, caranya:

Buka dashboard blog sobat, kemudian masuk ke Tema dan pilih Edit HTML.

Cari kode thumbnail <div class='img-thumbnail'>, biasanya diikuti dengan kode seperti berikut:

<div class='img-thumbnail'>
...
<img class='...' expr:data-src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)'/>
...
</div>

Mungkin pada beberapa template strukturnya berbeda, tapi kurang lebih seperti itu.


Jika menggunakan template VioMagz, teman-teman akan menemukan kode utuh seperti di bawah ini:

  <div class='img-thumbnail'>
  <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
    </a>
  <b:elseif cond='data:post.thumbnailUrl'/>
    <a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
    </a>
  <b:else/>

Selanjutnya, edit kode tersebut dengan menyesuaikan ukuran yang diminta GTmetrix (160x160). Setelah di edit, kode diatas berubah seperti ini:

  <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 160)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
    </a>
  <b:elseif cond='data:post.thumbnailUrl'/>
    <a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 160)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
    </a>
  <b:else/>

Simpan Tema.

Silahkan di cek kembali pada GTmetrix. Cara ini sudah saya buktikan dan bisa mengatasi masalah serve scaled images di GTmetrix.

Demikian postingan untuk kali ini, semoga Cara Mengatasi Serve Scaled Images pada GTmetrix PageSpeed ini bermanfaat dan bisa meningkatkan pagespeed blog teman-teman. Selamat mencoba.
Postingan terkait
Komentar