Audit WebAppsmu Dengan Lighthouse - Progressive Web Apps

Apa itu Lighthouse?

Lighthouse merupakan sebuah tools otomatis berbasis opensource yang berguna untuk improve qualitas webapps yang kita bangun. Untuk menjalankan Lighthouse ini, bisa menggunakan chrome extension ataupun dengan command tools based on node js. Langkahnya sangat mudah, tinggal berikan url yang akan di test, Lighthouse sendiri akan otomatis melakukan test performa dari webapps yang kita bangun.

Let's start

Persiapan yang kita lakukan adalah install tools lighthouse terlebih dahulu.

Lighthouse Chrome Extension

Yang perlu anda lakukan adalah install lighthouse extension di chrome di chrome webstore atau bisa juga melalui link ini Lighthouse. 

Tekan tombol add to chrome, kemudian jika muncul popyp pertanyaan Add "Lighthouse"? Tekan tombol Add extension. Tunggu sampai proses install selesai dan muncul keterangan di pojok kanan atas.

Start Testing

Open The Webapps

Setelah selesai proses installasi, tinggal siapkan url aplikasi yang ingin di coba, misal untuk kali ini yang akan di lakukan testing adalah web profile punya penulis ini: https://dyangalih.com/. Buka alamat tersebut sampai semua tampilan selesai di load. 

Generate Report

Kemudian tekan tombol lighthouse chrome di pojok kanan atas sampai muncul tampilan seperti di bawah ini:

Tekan tombol Generate report untuk melakukan proses testing seperti dibawah ini:

Result

Tunggu sampai proses selesai dan akan menghasilkan report yang diiginkan.

Dari hasil yang dihasilkan oleh Lighthouse  kita bisa melihat posisi webapps kita sudah optimal atau belum, jika belum tinggal mencari bagian mana yang belum optimal untuk di optimalkan. Jika salah satu point belum optimal, maka nanti akan muncul tanda x dengan warna merah seperti di bawah ini:

Salah satu bagian terpenting adalah Best Practice.

Bagian ini membantu kita untuk bisa melakukan improve ke webapps kita menjadi lebih baik lagi.

Lighthouse Command Line

Selain bisa melakukan test lighthouse dengan extensi chrome, versi command line based on nodejs dengan versi minimal 5 juga sudah ada. Syarat wajib yang perlu dilakukan adalah memliki instalasi nodejs di komputer yang akan di gunakan testing, jika belum memliki node js silahkan kunjungi url ini nodejs

Install lighthouse

Cara install di node js dengan cara seperti ini:

npm install -g lighthouse

Tunggu sampai proses installasi selesai.

Testing Via Lighthouse Command line

Untuk melakuan testing lighthouse menggunakan command line, caranya seperti dibawah ini:

lighthouse [alamat_web]

Tunggu sampai proses testing selesai dan menghasilkan result

Result

Result yang di generate oleh lighthouse command line berupa file html.

Untuk melihat hasilnya bisa di buka dengan browser.

Yup, itu tadi langkah-langkah yang bisa digunakan kita untuk melakukan testing webapps yang kita bangun dengan menggunakan lighthouse. Jadi, tunggu apa lagi? Just do it now.

Share this

Dyan Galih