Masih membahas seputar GTmetrix, kali ini saya ingin membagikan cara mengatasi masalah Serve Scaled Images pada GTmetrix PageSpeed. Ada baiknya sebelum lanjut ke topik pembahasan kita harus tau terlebih dahulu apa itu yang dimaksud Serve Scaled Images
Apa itu Serve Scaled Images?
Serve Scaled Images merupakan sebuah masalah yang membuat loading blog melambat yang disebabkan oleh gambar di blog. Gambar tersebut menjadi berat dikarenakan ia dimuat tidak sesuai dengan dimensi aslinya.
Untuk lebih lengkapnya, silakan anda lihat terlebih dahulu 1 contoh gambar yang mendapatkan masalah ini.
Maksud dari gambar diatas ialah, gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgckExiHObMqQi2nmwxUR6-hGa2tMo9fMVfGCBiFJvrghODinSEBv40zdi6Trx4ansHRvIaz6nWm8PVNlcjT3RjqMYuuTjHiSsKIUeCcNQvXC4NrSENMTPZFAdBqo7Q2UNo9honU1tmywoN/s400-p/Jaringan+Iklan+yang+Ramah+untuk+Pemula.png (link pada gambar diatas) memiliki ukuran 400x400 pixel, sedangkan gambar tersebut hanya ditampilkan sebesar 154x154 pixel pada blog (lihat deskripsi pada gambar diatas).
Nah tentu hal semacam ini hanya membuang-buang byte data, dikarenakan seperti yang kita ketahui, semakin kecil panjang dan lebar gambar semakin kecil pula ukurannya. Bila gambar yang ingin ditampilkan sebesar 154x154, maka muatlah gambar tersebut dengan ukuran 154x154 juga.
Bila kita lihat pada kasus gambar diatas, dengan mengecilkan 1 gambar yang bermasalah tersebut dapat menghemat data sebesar 179.5 KB. Itu hanya 1 gambar, sedangkan ada banyak sekali gambar-gambar di blog kita.
Lalu, Bagaimana cara mengatasi Serve Scaled Images ini?
Untuk platform Wordpress mungkin mudah saja, karena bisa memakai script PHP dan langsung selesai. Tetapi bagi yang menggunakan Blogger, anda akan sedikit ditantang untuk mencari gambar yang dimaksud dan cara mengecilkannya.
Mari kita mulai dengan mencari gambar yang bermasalahnya terlebih dahulu.
Mencari gambar yang dimaksud - Dimana letaknya?
Sekarang, silakan anda buka terlebih dahulu GTmetrix dan cek skor blog anda disana. Bila sudah muncul, ambil salah satu link gambar yang terdapat pada Serve Scaled Images. Lalu, bukalah gambar tersebut di new tab.
Saya beri contoh, link gambarnya ialah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAsie1RQlRPa_i1SvMUf-xL8BtVFphLDdVexm_KjhIm2DM5goXI_Fsj3e6GiEOqu3fFiQKdx_q3iKUGCN6qP3dI8NlgPIE4gMWrFowQahL6C_BlsiwANBwVdUrTrevfR5rE9OsplWU7hk/w250/Defer+Parsing+JS.png, dan bila dibuka akan muncul seperti ini:
Ingat bentuk gambar itu.
Sekarang, buka blog anda. Cari gambar yang sama seperti yang anda lihat dari link di GTmetrix tadi. Untuk contoh yang saya berikan, ternyata gambar tersebut dari post terbaru saya seputar mengatasi Defer Parsing JS.
Sekarang anda tahu dimana letak gambarnya, yaitu gambar thumbnail. Lakukan cara ini untuk semua link yang ada. Biasanya bukan hanya dari thumbnail, bisa juga dari popular post, widget recent post, random post, dan widget-widget lainnya yang memiliki gambar thumbnail.
Nah sekarang mari kita resize ukurang gambar tadi agar sesuai. Anda dapat mencari kode gambarnya lewat Edit HTML. Lalu, lihat pada src nya, tambahkan atribut resizeImage.
Contoh untuk post thumbnail menjadi seperti ini:
<img class='...' expr:src='resizeImage(data:post.thumbnailUrl, 250)' />
Lihat kode diatas, ada angka 250. Ganti dengan saran ukuran gambar yang diberikan GTmetrix. Pada contoh gambar diatas tadi ialah 154.
Terapkan pada semua gambar di blog yang bermasalah. Memang cara ini membutuhkan setidaknya skill dasar mengenai CSS dan HTML, jadi bagi anda yang belum mengerti ada baiknya untuk belajar terlebih dahulu, atau bisa ditanyakan ke saya lewat kolom komentar.