Page Speed Insight, Penerapan pada website KM & I

PageSpeed Insight merupakan tool yang membantu mengukur performa kualitas website kita pada perangkat desktop maupun mobile, dan juga menyertakan saran tentang bagaimana membuat website kita tampil optimal(1)

Dalam mengelola suatu website penting bagi kita untuk mengetahui seberapa baik kualitas web yang kita miliki, salah satu indikatornya tentu saja adalah kecepatan dan kenyamanan penggunaannya. Saat ini banyak service yang menawarkan pengukuran kualitas web diantaranya yaitu

• Google PageSpeed Insight
• Pingdom Website Speed Test
• GT Metrix

Pada artikel ini saya akan berfokus pada Google PageSpeed Insight (GPSI) dikarenakan GPSI sudah turut serta melakukan pengecekan kualitas versi mobile dari web yang kita miliki, selain itu faktor bahwa alat ini dibuat oleh Google menjadi alasan yang cukup kuat. Saya akan membahas beberapa poin yang digunakan GPSI untuk menilai performa website

1. Prioritize visible content / Utamakan tampilan konten utama
2. Eliminate render-blocking JavaScript and CSS in above-the-fold content / Hilangkan JS & CSS pada separuh-atas-halaman website
3. Avoid landing page redirects / Hindari menggunakan redirect
4. Minify Javascript & CSS / Optimalkan Javascript & CSS
5. Optimize images / Optimalkan kompresi gambar
6. Leverage Browser Caching / Optimalkan browser caching
7. Enable compression / Hidupkan kompresi

Dari ketujuh ukuran ini saya akan memberikan fokus pada nomor 1 – 4 pada artikel ini, karena 4 faktor ini menjadi tantangan bagi kami dalam menemukan formula implementasinya. Sedangkan faktor 5-7 dapat dengan mudah diimplementasikan cukup dengan merujuk dokumentasi yang diberikan oleh Google https://developers.google.com/speed/docs/insights/rules

Prioritize visible content & Eliminate render blocking JS & CSS in above-the-fold content

Sebelum masuk mengenai cara mengoptimalkan 2 ukuran ini, kita harus mengetahui dahulu dengan apa yang dimaksud “above-the-fold content”.
Above-the-fold Content (dalam artikel ini kita singkat saja dengan ATF)  adalah bagian dari website kita yang pertama kali terlihat ketika dimuat oleh browser, pada umumnya bagian ini adalah separuh halaman atas website kita.

Terlihat pada gambar di atas ATF adalah area yang berada didalam viewport device tersebut. Dengan mengetahui di mana letak ATF dari website yang kita kelola maka kita dapat melakukan beberapa trik berikut :

1. 1. Ubah seluruh style area ATF tersebut menjadi inline style dan letakan pada area head.
      Hal ini dilakukan agar browser dapat dengan cepat melakukan render tanpa harus menunggu file-file css selesai di download sehingga pengunjung website dapat segera melihat bagian ATF tersebut, walaupun bagian non ATF masih belum terlihat.

      

   2. Letakan file javascript pada bagian bawah halaman website
      Setiap tag <script></script> pada HTML akan membuat browser memproses tag tersebut dan menghambat proses render yang sedang terjadi, dengan memindahkan seluruh tag <script> kebagian bawah website maka membuat bagian ATF dapat terlihat tanpa hambatan.

      

   3. Gunakan teknik asynchronous load pada file CSS
      File CSS umumnya dimuat dengan menggunakan tag rel=stylesheet atau @import pada beberapa kondisi, namun hal ini membuat browser menghentikan sejenak proses render untuk memuat CSS tersebut dahulu. Oleh karena itu saat ini sudah ada standar-rekomendasi baru yaitu rel=”preload” yang memungkinkan file CSS dimuat secara paralel, namun teknik terkadang tidak dapat berjalan dikarenakan browser yang digunakan pengunjung tidak diperbaharui sehingga browser tersebut tidak mendukung penggunaan preload.

Avoid landing page redirects

Hindari melompatkan halaman untuk mendapatkan performa website yang lebih baik, karena setiap lompatan yang dilakukan akan menambah 1 roundtrip. Skenario terbaik berdasarkan dokumentasi GPSI adalah seperti berikut

• example.com uses responsive web design, no redirects are needed – fast and optimal!
• example.com → m.example.com/home – multi-roundtrip penalty for mobile users.
• example.com → www.example.com → m.example.com – very slow mobile experience.

Minify Javascript & CSS

Perkecil file Javascript dan CSS anda untuk mempercepat browser memuat file-file tersebut, Terdapat banyak service di internet untuk melakukan hal ini atau apabila anda dapat melakukan otomatisasi proses ini apabila menggunakan pre-prosesor seperti gulp / grunt (Pembahasan mengenai pre-prosessor akan dibahas di artikel lain). File-file JS & CSS yang sudah diperkecil akan tampil seperti berikut

Pada Gambar 4 dapat terlihat file yang sudah diperkecil isinya menjadi rapat karena seluruh script comment dan karakter putih dihilangkan untuk memperkecil besar ukuran file, semakin kecil file maka akan semakin cepat dimuat dan mengurangi waktu render browser.

Hasil

Dengan melakukan optimalisasi beberapa ukuran diatas kami berhasil meningkatkan skor website http://binus.ac.id/knowledge menjadi 76 untuk mobile dan 93 untuk desktop

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fbinus.ac.id%2Fknowledge%2F&tab=mobile

 

* * *