Menganalisa First Meaningful Paint

[faultables]

Barusan menganalisa Lighthouse Report untuk situs evilfactory.id halaman index. Mengapa halaman index? Karena halaman index adalah halaman awal dimana pengunjung akan melihat bagaimana layanan yang kita tawarkan.

Berikut hasil reportnya:

Terlihat bahwa dibagian performance, memiliki skor 94. Bagian yang paling menarik adalah bahwa waktu untuk mencapai "First Meaningful Paint" memakan 2.5 detik.

"Screenshot" diatas muncul (tulisan-tulisan) setelah sekitar 2.5 detik. Berikut data yang saya gunakan untuk menguji situs tersebut (di local):

URL: https://evilfactory.id/
Fetch time: Apr 22, 2019, 7:42 PM GMT+7
Device: Emulated Nexus 5X
Network throttling: 150 ms TCP RTT, 1,638.4 Kbps throughput (Simulated)
CPU throttling: 4x slowdown (Simulated)
User agent (host): Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3732.0 Safari/537.36
User agent (network): Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Mobile Safari/537.36 Chrome-Lighthouse
CPU/Memory Power: 850

Masalah

Ada beberapa rekomendasi yang diberikan Lighthouse, salah satunya adalah dibagian "Opportunities" yakni Remove unused CSS, karena memang ada beberapa file (dan selectors) yang tidak digunakan pada halaman tersebut.

Wow dihalaman index hanya 2.5% selector yang digunakan (untuk file tachyons), dan 32.9% untuk global dan chunked styles.

Kita bisa menyelesaikan masalah ini dengan bantuan tools seperti PurgeCSS atau PurifyCSS. Beruntung karena kita pakai Gridsome, sudah ada plugin untuk integrasi dengan PurgeCSS with less effort.

Pada PR ini saya integrasikan dengan fungsionalitas PurgeCSS, dan hasilnya:

First Meaningful Paint kita menjadi 2.3s! Score Performance pun bertambah dari yang sebelumnya 94 menjadi 98. Hal-hal yang saya lakukan adalah:

Load file CSS dari local

Sebelumnya saya load file-file CSS tersebut dari CDN, dengan alasan fast for prototype. Setelah prototype selesai, waktunya fokus ke performa sebelum menambah hutang teknikal lebih banyak. Caranya mudah, karena saya malas tinggal gunakan perintah ini:

$ curl some-cdn-url.tld/some-path/some-file.ext -o path/to/assets/ext/some-file.ext

Selesai!

Purge CSS alias jangan muat selector yang tidak digunakan

Karena saya menggunakan tachyons, ada beberapa selector yang tidak digunakan namun tetap termuat. Dan pastinya ini masalah, dengan bantuan PurgeCSS masalah ini terselesaikan meskipun tidak 100% akurat (tidak 100% hanya memuat selector yang dibutuhkan saja).

Inilah hasilnya setelah saya gunakan PurgeCSS:

Menjadi hanya sekitar 128kb yang tidak digunakan dari total 282kb. Setidaknya beda dengan yang sebelumnya yang mana total bytes yang tidak digunakan sekitar 221kb dari total bytes 349kb. Every byte counts, and little improvement is an improvement.

PR Lainnya

• Ensure text remains visible during webfont load. Sudah ber-eksperimen dengan ini via (font-display), tapi tetap tidak berpengaruh (performance)
• Serve static assets with an efficient cache policy. Tim google merekomendasikan untuk melakukan caching lebih lama, 1 tahun anjiiir. Sedangkan Netlify hanya menyimpan cache selama 4 jam. Mungkin ini bisa diselesaikan via serviceWorker. Done. 1 tahun.
• Minimize Critical Requests Depth. Belum pernah nyari tau.
• Aksesibilitas. Kita bahas di lain topik.

Hasil Lighthouse Terbaru

Bisa diakses disini

[faultables]

Update:

Sedangkan Netlify hanya menyimpan cache selama 4 jam. Mungkin ini bisa diselesaikan via serviceWorker.

Sorry netlify this is not your fault. Problem solved, I have configured it via cloudflare.

[faultables]

Update:

Serve static assets with an efficient cache policy. Tim google merekomendasikan untuk melakukan caching lebih lama... [truncated]

1 tahun! Ini penjelasannya:

[zainfathoni]

Mantap! 👍
Baru tahu kalau ada Coverage tool di Chrome Dev Tools buat ngecek CSS & JS Coverage. 😅

[r17x]

@zainfathoni mantul , terima kasih sudah mampir kesini (ini playground kami bersama @108kb ) heheheh

[faultables]

Baru tahu kalau ada Coverage tool di Chrome Dev Tools buat ngecek CSS & JS Coverage. 😅

Solusi kalau mau pakai lighthouse, tapi cuma mau cek coverage aja haha

[zainfathoni]

@zainfathoni mantul , terima kasih sudah mampir kesini (ini playground kami bersama @108kb ) heheheh

Oalah, 4L juga ternyata.
Loe Lagi Loe Lagi 🤣