Image of summary web performace my personal website

First Contentful Paint (FCP), First Meaningful Paint (FMP), dan Time to Interactive (TTI) merupakan tiga dari enam metrik performance di laporan Lighthouse. Setiap dari metrik diukur dalam satuan detik. Menurut saya, ketiga metrik ini berperan penting terhadap seberapa cepat website kita dimuat. Lalu, apa saja kriteria yang diukur di FCP, FMP, dan TTI?

Apa yang diukur FCP?

FCP bertugas untuk menangkap waktu ketika browser merender bit pertama konten dari sebuah DOM. Konten tersebut berupa teks, gambar (termasuk gambar latar belakang (background image)), non-white canvas atau SVG. Waktu yang diperlukan untuk konten muncul dalam iframe tidak termasuk dalam tugas FCP. Tetapi, FCP menangkap waktu pada teks dengan font web yang tertunda (pending web fonts).

Apa yang diukur dari FMP?

FMP bertugas untuk mengukur berapa lama pengguna merasa bahwa konten utama suatu halaman terlihat. Skor dari FMP mewakili durasi waktu antara user memulai halaman dimuat dan halaman merender konten utamanya di atas lipatan (above the fold).

FCP dan FMP seringkali berbagi nilai yang sama ketika bit pertama suatu konten dirender pada sebuah halaman dan halaman yang termasuk di atas lipatan (above the fold). Kedua metrik ini juga dapat berbeda, misalnya ketika sebuah konten di atas lipatan dengan sebuah iframe. FMP mencatat ketika konten dari iframe terlihat oleh pengguna.

Apa yang diukur dari TTI?

TTI bertugas untuk mengukur berapa lama sebuah halaman menjadi interaktif sepenuhnya. Halaman dianggap interaktif sepenuhnya saat:

  1. Halaman sudah menampilkan konten yang bermanfaat, yang mana diukur pada First Contentful Paint.
  2. Event handler telah terdaftar untuk sebagian besar elemen pada halaman yang terlihat.
  3. Halaman merespons interaksi pengguna dalam 5 detik.

Beberapa situs mengoptimalkan visibilitas konten dengan mengorbankan interaktivitas. Hal ini dapat menghalangi kenyamanan pengguna (UX). Situs terlihat sudah siap untuk dimuat, tetapi ketika user mencoba untuk berinteraksi tidak ada yang terjadi.

Bagaimana cara memperbaiki waktu dari FCP, FMP dan TTI agar website lebih cepat dimuat?

Untuk memperbaiki waktu dari FCP, FMP dan TTI adalah dengan melihat usulan yang bisa diperbaiki pada laporan Lighthouse.

Image of opportunities to optimize web performance

Pada gambar di atas, laporan Lighthouse memberikan usulan-usulan yang bisa diperbaiki sebagai berikut:

  1. Eliminate render-blocking resources 1.96s
  2. Properly size images 1.52s
  3. Serve images in next-gen formats 0.66s
  4. Preconnect to required origins 0.4s

Semakin besar nilai waktu yang ada di usulan tersebut maka usulan tersebut memberikan dampak besar untuk mempercepat performa website.

Referensi

  1. First Contentful Paint
  2. First Meaningful Paint
  3. Time To Interactive