Mengukur Dampak Streaming: FCP, TTI, dan LCP

FCP mengukur waktu sejak awal navigasi hingga bagian konten pertama (teks, gambar, atau latar belakang) digambar di layar. Streaming meningkatkan FCP dengan segera mengirim kerangka HTML — peramban dapat menggambar tata letak, navigasi, dan teks apa pun di atas area tampilan segera setelah potongan pertama tiba.

Dengan SSR sinkron (renderToString), peramban tidak menerima HTML apa pun hingga seluruh proses render selesai. Dengan streaming, peramban menerima kerangka HTML dalam hitungan milidetik sejak permintaan dibuat — tata letak dan konten statis muncul hampir seketika, sehingga FCP berkurang secara signifikan.

LCP mengukur waktu saat elemen terbesar yang terlihat di area pandang digambar — biasanya gambar hero atau judul besar. Streaming meningkatkan LCP jika elemen LCP merupakan bagian dari kerangka (bukan berada di dalam batas Suspense), karena kerangka dialirkan sebelum bagian mana pun yang bergantung pada data.

Pengoptimalan penting adalah merancang halaman agar elemen LCP — bagian hero, judul utama, atau gambar unggulan — berada di luar batas Suspense mana pun. Jika elemen LCP berada di dalam batas Suspense yang menunggu data, streaming tidak dapat membantu LCP hingga data tersebut selesai diproses.

TTI mengukur waktu saat halaman dapat merespons masukan pengguna secara andal — tanpa tugas panjang yang memblokir utas utama. Streaming yang digabungkan dengan hidrasi selektif mengurangi TTI dengan menyebarkan pekerjaan hidrasi dari waktu ke waktu, bukan menjalankan satu tugas hidrasi sinkron yang besar setelah seluruh JavaScript diunduh.

Waktu hingga Byte Pertama (TTFB) ditentukan oleh latensi jaringan dan waktu pemrosesan server sebelum byte pertama dikirim. Streaming tidak mengubah TTFB — di sinilah perenderan di server tepi membantu. Agar streaming meningkatkan FCP, Anda terlebih dahulu memerlukan TTFB yang rendah; jika tidak, Anda hanya melakukan streaming dari server asal yang lambat.

Tampilan strip film WebPageTest menampilkan rangkaian tangkapan layar yang diambil setiap 100 md selama pemuatan halaman. Halaman dengan pengaliran menampilkan tata letak sejak awal, lalu bagian-bagiannya terisi secara bertahap. Halaman tanpa pengaliran menampilkan layar kosong yang kemudian tiba-tiba berubah menjadi halaman yang sepenuhnya ditampilkan—perbedaan visual yang jelas.

Tolok ukur yang bermakna membandingkan halaman yang sama, ditampilkan dengan dua cara: dengan pengaliran RSC Next.js diaktifkan dan dengan SSR sinkron tradisional. Gunakan WebPageTest dengan kondisi jaringan tetap, misalnya 3G Cepat dan perlambatan CPU 4x, lalu bandingkan metrik FCP, LCP, dan TTI dalam 3 kali pengujian untuk memperoleh keyakinan statistik.

Tab Network di Chrome DevTools memiliki menu tarik-turun "Pembatasan" dengan prasetel seperti 3G Cepat dan 4G Lambat. 3G Cepat (1,6 Mbps, RTT 150 md) memperjelas perbedaan antara pengaliran dan tanpa pengaliran karena memperbesar waktu pengunduhan seluruh dokumen HTML, sehingga peningkatan dari pengaliran bertahap terlihat.

Interaksi hingga Cat Berikutnya (INP) mengukur waktu sejak interaksi pengguna apa pun hingga cat berikutnya. Metrik ini menggantikan FID sebagai Metrik Web Inti pada 2024. Pengaliran mengurangi INP dengan memprioritaskan hidrasi komponen interaktif yang kemungkinan besar akan digunakan pengguna terlebih dahulu, sehingga mengurangi waktu pemblokiran sebelum komponen tersebut dapat merespons.

Konfigurasi dengan dampak terbesar menggabungkan perenderan tepi, dengan TTFB rendah dari titik kehadiran terdekat, pengaliran, dengan pengiriman HTML bertahap, serta hidrasi selektif, dengan pemrosesan JS bertahap. Bersama-sama, ketiga teknik ini meminimalkan setiap metrik kinerja utama sepanjang seluruh siklus pemuatan.

Pengaliran paling langsung meningkatkan FCP dengan segera mengirimkan kerangka HTML, dan meningkatkan LCP jika elemen LCP berada di dalam kerangka tersebut. TTI meningkat melalui hidrasi selektif yang menyebarkan pekerjaan JS seiring waktu. TTFB tidak berubah—atasi hal itu dengan perenderan tepi. Gunakan strip film WebPageTest dan pembatasan jaringan Chrome DevTools untuk mengukur dampak pengaliran, serta optimalkan INP sebagai metrik interaktivitas utama dalam Metrik Web Inti.