Mengecek dan Memperbaiki Performa Web Menggunakan GTMetrix dan Google Pagespeed Insights

Sejak beberapa waktu yang lalu Excellent membuat sebuah project kecil. Setelah projectnya jadi, secara bertahap diujicoba dan disimulasikan. Sudah cukup baik tapi saya merasa kok tampilannya tidak smooth.

Saat diakses, loadingnya agak lambat dan tampilannya seperti tersendat. Padahal itu hanya satu halaman web saja. Saya coba menggunakan browser mobile juga sama saja. Padahal saya membayangkan, saat diketik alamat URL kemudian tekan ENTER, blitz… langsung tampil. Kan saya tekan ENTER, bukan ENTAR. Kalau ENTAR kemudian tampilannya lama sih ya maklum

Saya bilang pada team, saya nggak puas kalau performanya seperti itu. Apakah bisa dicheck nyangkutnya dimana. Apakah bisa diperbaiki? Mereka bilang, “Bisa dong, kan itu memang belum rilis. Masih fase ujicoba jadi memang belum dapat improvement apa-apa karena fokusnya baru ke fungsinya”

Salah seorang team, mas Arif Rahman mereferensikan halaman GTMetrix.

Saat dicoba validasi disana, hasilnya adalah screenshot pertama.

Nilainya F. FARAH.

Performanya 0%. Loading time 11.3s dan total page size 6.41 MB. Di bagian bawahnya ada detail apa saja yang menyebabkan score seperti itu termasuk solusi perbaikannya.

Beberapa yang mencolok misalnya tidak pakai cache. Kemudian penggunaan image yang tidak efisien dan ukurannya terlalu besar dibandingkan dengan format yang ditampilkan. Misalnya ingin menampilkan icon tapi ukuran gambar yang diupload malah ukuran gambar yang besar.

Secara bertahap hal tersebut diperbaiki, sampai kemudian waktu loading jauh lebih singkat. Memang score-nya masih belum mencapai nilai A dan nilai YSlow score masih parah, tapi minimal sudah dapat insights mengenai sumber masalah dan tindakan perbaikan yang bisa dilakukan.

Dari awalnya loading sekitar 11.3s turun menjadi dibawah 5s. Page size juga drop dari 6.41 MB menjadi 1.16 MB. Cukup lumayan meski masih banyak ruang untuk diimprove lagi.

Selain GTMetrix, ada juga Google Pagespeed Insights : https://developers.google.com/speed/pagespeed/insights/

Ini juga bisa dijadikan sebagai acuan untuk mengetahui sumber masalah dan solusi perbaikannya.

Ada solusi lain yang bisa ditempuh, misalnya menggunakan CDN untuk tambahan lapisan keamanan dan peningkatan kecepatan, namun 2 website diatas bisa dijadikan sebagai titik awal karena layanannya gratis dan saat kita baru memulai hal baru tanpa pendapatan, kita bisa cukup puas dengan yang free namun memberikan nilai manfaat yang besar.

Saat saya ujicoba ke website lain baik website personal maupun website Excellent, hasilnya banyak yang parah, hehehe… Jadi ada tambahan kegiatan nih selama WFH.

Originally published at https://www.vavai.com.