PageSpeed Insight (PSI) merupakan tools yang dikembangkan oleh Google untuk membuat laporan mengenai pengalaman pengguna pada suatu halaman web di perangkat mobile atau desktop dan memberikan saran untuk meningkatkan pengalaman tersebut.

PSI melakukan penilaian pada halaman web berdasarkan lab data dan field data. Lab data merupakan data yang dikumpulkan menggunakan perangkat dan pengaturan jaringan yang telah ditentukan. 

Sementara itu, field data merupakan data yang didapat dari pengalaman nyata pengguna. Field data pada PageSpeed Insight memanfaatkan dataset dari Chrome User Experience Report (CrUX).

PSI menggunakan Lighthouse untuk melakukan simulasi pada halaman web. Dalam Lighthouse sendiri terdapat beberapa proses audit dari performa, aksesibilitas, best practice, SEO, dan PWA. 

Berikut 7 tips yang dapat Anda coba untuk meningkatkan nilai performa, antara lain: 

  • Mengurangi JavaScript yang tidak digunakan
    Kode JavaScript yang banyak dapat mengakibatkan delay bagi pengguna dalam berinteraksi dengan website sehingga berimbas pada hasil Time to Interactive (TTI) yang lebih lama.
    Anda bisa saja tidak menggunakan JavaScript sama sekali, namun terkadang Anda memerlukannya untuk interactivity
    Oleh karena itu, Anda dapat menerapkan metode code-splitting dan minify menggunakan tools seperti webpack untuk mengurangi jumlah kode JavaScript pada suatu halaman dan waktu eksekusi pada main thread.
  • Preload critical assets
    Melakukan preload ditujukan untuk aset atau sumber daya yang menurut Anda penting untuk diambil terlebih dahulu oleh browser.
    Preload pada CSS biasanya dilakukan dengan teknik Critical CSS dan digunakan untuk menghindari efek pada Largest Contentful Paint (LCP).
    Preload pada JavaScript lebih baik dilakukan setelah melakukan split dan hanya mengambil potongan kode yang penting untuk melakukan interaksi pada website. Selain itu, preload juga dapat meningkatkan metrik Time to Interactive (TTI).
  • Menggunakan next-gen format untuk gambar
    Salah satu langkah paling mudah untuk meningkatkan performa adalah menyajikan gambar dengan file size yang lebih kecil.
    Dengan menyajikan gambar berformat WebP atau AVIF, Anda dapat mengurangi ukuran gambar secara drastis sekaligus mempertahankan kualitas gambar.
    Saat artikel ini dirilis, WebP sudah didukung oleh seluruh browser pada versi terbaru sedangkan dukungan AVIF masih terbatas.
  • Lazy loading
    Setelah Anda melakukan code-splitting, melakukan preload pada aset penting, dan memanfaatkan format gambar terbaru seperti WebP, Anda dapat melakukan lazy load pada gambar dan potongan-potongan kode lain yang telah terpisah sesuai kebutuhan.
    Lazy loading dapat dilakukan dengan menerapkan dynamic import atau menggunakan React.lazy jika Anda menggunakan React.
  • Menggunakan third-party script secara efisien
    Third party script adalah kode yang tertanam pada website dari vendor pihak ketiga yang biasanya digunakan untuk iklan, analitik, media player, dan widget media sosial.
    Sebagai developer, tentunya Anda tidak ingin keberadaan script ini mengganggu proses rendering pada halaman web. Anda dapat menjalankan third party script melalui web worker menggunakan library seperti partytown untuk mengurangi beban di main thread.
    Anda juga dapat menggunakan facade untuk melakukan lazy loading pada elemen yang ditanam seperti media player atau menggunakan lazy iframe loader seperti vb/lazyframe.
  • Mengoptimalkan DOM size
    Pastikan bahwa Anda dapat membagi konten pada halaman web sehingga tidak memperbanyak node pada elemen body yang dapat memperlambat performa.
    Node yang banyak juga dapat mempengaruhi memori ketika melakukan query pada DOM menggunakan JavaScript.
  • Precache pada aset statis
    Dengan melakukan caching pada aset statis, Anda dapat mempercepat proses load halaman. Anda dapat melakukan caching dengan memanfaatkan Cache-Control pada HTTP response header atau menggunakan service worker

Tools seperti PageSpeed Insight dapat membantu mengarahkan developer untuk meningkatkan pengalaman pengguna khususnya aspek performa web. Meskipun demikian, nilai yang baik pada PageSpeed Insight bukanlah acuan utama dalam pengembangan, melainkan menentukan jenis aplikasi dan rendering pattern yang sesuai dengan use case dan kebutuhan bisnis. 

Sebagai contoh, Single Page Applications (SPA) biasanya memiliki nilai performa yang rendah secara teknis, namun aplikasi seperti ini sesuai untuk aplikasi web yang memiliki banyak fitur untuk dijalankan langsung dari browser.

Suitmedia Kreasi Indonesia sebagai digital agency Indonesia dan digital agency Jakarta memiliki spesialisasi transformasi digital yang dapat membantu klien untuk mengembangkan aplikasi web yang sesuai dengan kebutuhan bisnis sekaligus memperhatikan performa dan pengalaman pengguna. 

Sebagai digital agency profesional, Suitmedia menggunakan framework seperti Next.js dan Nuxt.js yang memberikan abstraksi dalam mengembangkan aplikasi web sehingga lebih fokus dalam proses pengembangan fitur dan melakukan optimasi performa dengan mudah.


Penulis: Muhammad Fachri (Frontend Developer)