Cara Mengatasi Serve Scaled Images pada GTmetrix PageSpeed
Cara Mengatasi Serve Scaled Images pada GTmetrix PageSpeed

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.

Contoh Serve Scaled Images

Maksud dari gambar diatas ialah, gambar https://2.bp.blogspot.com/-j19NFlwijSQ/WQmk2U6LCHI/AAAAAAAAFEE/nihQRdUckR8AspWvCpcplVEzWPVDQtwDwCLcB/s400-p/Jaringan%2BIklan%2Byang%2BRamah%2Buntuk%2BPemula.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://1.bp.blogspot.com/-ubXD8g7uacI/Wloa-sFfHdI/AAAAAAAAB-8/14qtDDFZdowI0DN1c6AnjXQ-Nb_muqadwCLcBGAs/w250/Defer%2BParsing%2BJS.png, dan bila dibuka akan muncul seperti ini:

Contoh Serve Scaled Images

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.

Contoh Serve Scaled Images

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.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 7 Agustus 2018 19.24

Pake cara yang diatas aja, yang ganti angka 250 jadi 154. Itu otomatis ke semua thumbnail jadi berubah gambarnya. Kalo untuk di dalam post, memang harus manual semua image diganti jenis ukurannya jadi Original Size, bukan small, medium, atau big.

Balas
John HS Kode Jarwo
John HS
# 7 Agustus 2018 02.17

Edan banget dah mau ganti semua gambar yang begitu banyak, yang ada pegal jari mas wkwk kira2 kalau dibuat otomatis gak bisa ya pakai script gitu.

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 4 Juli 2018 22.02

Maaf gan saya kurang ngerti PHP...

Balas
Firman Achmad Kode Jarwo
Firman Achmad
# 4 Juli 2018 21.29

artikel agan diatas saya membaca mengatasi serve scale images untuk blogger
kalau utuk wordpress memakai script php, itu bagai mana ya? bisa di perjelas

Balas