Langsung ke konten utama

Cara Memperbaiki Kinerja Website dengan Lighthouse

Tips kali ini adalah berbagi pengalaman tentang cara memperbaiki kinerja website dengan Lighthouse, sebuah tools SEO yang tersedia secara gratis di browser Google Chrome. Sudah agak lama sebenarnya saya mengetahui tentang kegunaan tools ini, namun baru belakangan memakainya secara intensif.

Lighthouse adalah tools open source otomatis untuk meningkatkan kualitas halaman web. Siapa pun bisa menjalankannya pada laman web apa saja, baik website publik, atau yang perlu otentikasi. Lighthouse melakukan audit untuk melihat kinerja, aksesibilitas, aplikasi web progresif, SEO dan sejumlah parameter lainnya. Tools lain untuk perbaikan kinerja website adalah memakai GTmetrix.

Anda dapat menjalankan Lighthouse di Chrome DevTools, atau dari command line, atau sebagai Node module. Ketika membuka sebuah laman dan meminta untuk diaudit oleh Lighthouse, ia akan segera menjalankan serangkaian audit terhadap laman itu, dan lalu menyajikan laporan tentang seberapa baik halaman itu.

Cara Memperbaiki Kinerja Website dengan Lighthouse

Dari laporan komprehensif yang disajikan, Anda menggunakan hasil audit yang gagal sebagai petunjuk tentang cara meningkatkan kinerja laman. Setiap audit memiliki dokumen rujukan yang menjelaskan mengapa audit itu penting, serta cara memperbaikinya.

Meskipun petunjuk cara memperbaiki sudah diberikan, namun pengalaman mengajarkan bahwa Anda harus siap mendedikasikan waktu yang cukup lama untuk googling, mencari solusi masalah yang Anda hadapi dari berbagai sumber, baik dari laman lokal maupun luar.

Anda juga harus siap dengan proses coba salah yang bisa sangat melelahkan, jika betul-betul ingin agar kinerja website bisa mencapai skore yang baik. Agar laman utama tidak terganggu selama melakukan perbaikan, ada baiknya membuat test page, dengan css, html dan setting lain yang sama persis seperti laman utama.

Ikuti langkah berikut untuk memperbaiki kinerja website dengan Lighthouse:
  1. Buka laman yang hendak diaudit dengan browser Google Chrome pada komputer desktop atau notebook.
  2. Klik View > Developer > Developer Tools
  3. Layar akan terbelah dua seperti tampak di bawah ini.

    Memperbaiki Kinerja Website dengan Lighthouse
  4. Di sebelah kiri adalah laman yang hendak diaudit, dan di bagian kanan ada daftar kategori audit serta pilihan Mobile atau Desktp. Biarkan pada setelan standar, lagipula audit mobile jauh lebih penting ketimbang desktop sehingga harus didahulukan.
  5. Klik 'Generate Report', dan tunggu dengan sabar sampai Lighthouse selesai melakukan Audit dan menyajikan hasilnya. Apa yang terlihat selama proses audit berjalan tak perlu dikhawatirkan.
  6. Ada lima skor hasil audit yang ditampilkan, yaitu Performance, Accessibility, Best Practices, SEO, dan PWA (Progressive Web App). Saran saya, lakukan perbaikan dengan urutan dari termudah ke tersulit, yaitu: SEO, Best Practices, Accessibility, Performance. Setelah itu beres, Anda bisa berlanjut ke PWA.

    Memperbaiki Kinerja Website dengan Lighthouse
  7. Klik pada skor SEO, dan lihat satu persatu bagian yang tidak lolos audit, dan lakukan perbaikan yang dianjurkan. Setiap kali setelah melakukan perbaikan, lakukan audit ulang dari langkah pertama untuk melihat hasilnya. Usahakan skor SEO mencapai angka 100.

    Salah satu audit yang biasanya gagal adalah pada
    <meta name="viewport"> ,
    dimana Lighthouse meminta agar viewport bisa diperbesar jika pengunjung ingin melihat lebih jelas suatu bagian laman.

    Kode yang saya gunakan adalah:
    <meta content='width=device-width, initial-scale=1, maximum-scale=5' name='viewport'/>
    dimana pengunjung bisa memperbesar laman hingga lima kali ukuran standarnya.
  8. Setelah beres dengan skor di SEO, lanjutkan melihat satu persatu hasil audit pada Best Practices, hingga seterusnya pada Performance.

Selama melakukan perbaikan dengan Lighthouse ini, entah berapa puluh keywords yang saya masukkan ke mesin pencari Google, dan puluhan laman website yang harus saya buka untuk mencari solusi pada setiap baris audit yang gagal. Perlu kesabaran, ketelatenan, dan pemilihan keywords yang tepat.


Jika suatu saat mengalami kebuntuan dan tidak menemukan solusi, berhentilah dahulu. Tinggalkan komputer, lakukan hal lain, atau pergi ke WC sambil berpikir memutar otak, karena tak jarang ide brilian muncul ketika sedang duduk atau jongkok di atas WC. Sungguh! Lihat pula tips perbaikan kinerja website di label Tips, Blogger, atau WordPress.

Ada masanya ketika merasa benar-benar mentok dan ingin melakukan cara pintas, membayar jasa orang untuk melakukan perbaikan. Ini adalah alternatif terakhir jika Anda sudah merasa tak sanggup atau tak punya cukup waktu untuk melakukannya. Googling saja untuk menemukannya, jika sudah benar-benar menyerah.


Saran saya, sebelum meminta bantuan ke seseorang yang sepertinya punya kompetensi, lakukan audit Lighthouse pada halaman utama dan beberapa halaman lainnya dari website orang itu untuk melihat skornya. Jika Anda memasang AdSense atau plugin, pastikan orang itu juga memasangnya. Jika bagus, Anda bisa lanjut dengan menanyakan berapa jasa yang harus Anda bayar.