Cara Mengatasi Serve Scaled Image di GTMetrix

Pernahkah anda menggunakan GT-Metrix untuk melihat Score Halaman Web/Blog anda?, Apakah anda pernah mengalami masalah Serve Scaled Image pada bagian PageSpeed di GT-Metrix?

Pada artikel kali ini saya akan menunjukkan cara untuk mengatasi masalah Serve Scaled Image dengan mudah.

Jika anda pernah mengecek Halaman Blog/Website anda di GT-Metrix, pasti anda pernah mengalami masalah pada Serve Scaled Image yang memiliki nilai dibawah 50% atau bahkan memiliki nilai 0.

Dahulu saya sempat pusing dan bingung untuk mengatasinya, tetapi setelah saya melakukan beberapa percobaan, akhirnya masalah tersebut bisa terselesaikan dengan mudah.

Masalah Serve Scaled Image biasanya sering terjadi pada Halaman Home (Homepage) pada Blog khususnya pada Thumbnail. Isu tersebut dapat terjadi karena gambar yang dimuat pertama kali terlalu besar.

Anda bisa mengatasi masalah tersebut dengan cara mengubah resolusi gambar dengan menggunakan Software Image Editor atau dengan bantuan JavaScript (Lagi-lagi JavaScript, tapi apalah daya).

Pada gambar dibawah ini, saya memiliki contoh berupa Score/Grade Serve Scaled Image yang rendah (56%). Sebenarnya untuk Score keseluruhan Blog EL Creative Academy Sudah cukup tinggi, tetapi sebagai contoh, saya akan menunjukkan cara untuk meningkatkan (Walaupun cuma naik 1%).


Pada gambar diatas, anda bisa melihat bahwasanya saya menggunakan gambar dengan resolusi 680 x 453, sedangkan yang tampil pada Homepage memiliki ukuran 100 x 100.

Pertanyaannya: Bagaimana Cara mengubah resolusi tersebut tanpa menggunakan dari Software Image Editor?

Jawabannya simple: Anda bisa mengubah resolusi dari 480 x 453 ke 100 x 100 dengan Image Editor, masalahnya gambar tersebut dapat ter crop/terpotong dan dampaknya akan terlihat jelek pada bagian Post.

Nah, cara untuk mengatasinya bisa menggunakan bantuan JavaScript:

Berikut adalah contoh kodenya:

<script type='text/javascript'>
//<![CDATA[
function snippetimage(a,e){var g=100,i=100;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"-p/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}
//]]>
</script>

Ganti angka yang berwarna UNGU dengan ukuran Thumbnail sesuai pada Blog anda.

Pada kode diatas, saya mengubah Thumbnail menjadi 100 (Pixel). Anda dapat meletakkan kode tersebut sebelum tag </body>.

Catatan: Script diatas tidak dapat berfungsi jika anda sedang menggunakan Lazy Load Image.