FCP, FMP dan TTI di Laporan Lighthouse

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 yang dilacak pada bagian performance di laporan Lighthouse. Menurut saya, ketiga metrik ini berperan penting terhadap seberapa cepat website kita cepat dimuat. Umumnya, setiap dari metrik tersebut diukur dalam satuan detik.

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. Maksud dari interaktif pada TTI sebagai berikut:

  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?

Hal yang paling efektif untuk memperbaiki waktu dari FCP, FMP dan TTI adalah dengan memperbaiki peluang-peluang yang disorot pada laporan Lighthouse. Semakin penting peluang tersebut, semakin besar dampak yang akan dihasilkan pada skor performa website.

Image of opportunities to optimize web performance

Contoh, mengeliminasi sumber render yang memblokir (Eliminate render-blocking resources) menunjukkan peluang untuk memperbaiki kecepatan suatu halaman dimuat (dalam satuan detik). Mengeliminasi sumber yang memblokir, tidak hanya memperbaiki skor FCP dan FMP, tetapi juga akan menambah nilai pada metrik performa lainnya dan skor performa website di laporan lighthouse secara keseluruhan.

Sumber

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