Mengukur Jalur Rendering Penting

Ilya Grigorik

Fondasi dari setiap strategi performa yang kokoh adalah pengukuran dan instrumentasi yang baik. Anda tidak dapat mengoptimalkan apa yang tidak dapat Anda ukur. Dokumen ini menjelaskan berbagai pendekatan untuk mengukur performa CRP.

  • Pendekatan Lighthouse menjalankan serangkaian pengujian otomatis terhadap sebuah halaman, lalu menghasilkan laporan tentang performa CRP halaman. Pendekatan ini memberikan ringkasan umum dan cepat tentang performa CRP halaman tertentu yang dimuat di browser, sehingga Anda dapat menguji, iterasi, dan meningkatkan performanya dengan cepat.
  • Pendekatan Navigation Timing API menangkap metrik Real User Monitoring (RUM). Sesuai dengan namanya, metrik ini diambil dari interaksi pengguna yang nyata dengan situs Anda dan memberikan gambaran akurat tentang performa CRP dunia nyata, seperti yang dialami pengguna Anda di berbagai perangkat dan kondisi jaringan.

Secara umum, pendekatan yang baik adalah menggunakan Lighthouse untuk mengidentifikasi peluang pengoptimalan CRP yang jelas, lalu melengkapi kode Anda dengan Navigation Timing API untuk memantau performa aplikasi Anda di lapangan.

Mengaudit halaman dengan Lighthouse

Lighthouse adalah alat audit aplikasi web yang menjalankan serangkaian pengujian terhadap halaman tertentu, lalu menampilkan hasil halaman tersebut dalam laporan gabungan. Anda dapat menjalankan Lighthouse sebagai Ekstensi Chrome atau modul NPM, yang berguna untuk mengintegrasikan Lighthouse dengan sistem continuous integration.

Lihat Mengaudit Aplikasi Web dengan Lighthouse untuk memulai.

Saat Anda menjalankan Lighthouse sebagai Ekstensi Chrome, hasil CRP halaman Anda akan terlihat seperti screenshot di bawah.

Audit CRP Lighthouse

Lihat Rantai Permintaan Penting untuk mengetahui informasi selengkapnya tentang hasil audit ini.

Kombinasi Navigation Timing API dan peristiwa browser lainnya yang dimunculkan sebagai pemuatan halaman memungkinkan Anda untuk menangkap dan mencatat performa CRP sebenarnya dari halaman mana pun.

Waktu Navigasi

Masing-masing label dalam diagram di atas sesuai dengan stempel waktu resolusi tinggi yang dilacak browser untuk setiap halaman yang dimuatnya. Sebenarnya, dalam kasus spesifik ini kita hanya menunjukkan sebagian dari semua stempel waktu — untuk saat ini kita akan melewatkan semua stempel waktu terkait jaringan, tapi kita akan membahasnya kembali di pelajaran mendatang.

Jadi, apa arti stempel waktu ini?

  • domLoading: ini adalah stempel waktu awal dari seluruh proses, browser akan mulai mengurai byte pertama yang diterima dari dokumen HTML.
  • domInteractive: menandai titik saat browser selesai menguraikan semua konstruksi HTML dan DOM.
  • domContentLoaded: menandai titik saat kedua DOM siap dan tidak ada stylesheet yang memblokir eksekusi JavaScript - yang berarti kita sekarang (berpotensi) membuat hierarki render.
    • Banyak framework JavaScript menunggu peristiwa ini sebelum mulai menjalankan logikanya sendiri. Oleh karena itu, browser mencatat stempel waktu EventStart dan EventEnd agar kita dapat melacak berapa lama eksekusi ini.
  • domComplete: sesuai dengan namanya, semua pemrosesan telah selesai dan semua resource di halaman (gambar, dll.) telah selesai didownload - dengan kata lain, indikator lingkaran berputar pemuatan telah berhenti berputar.
  • loadEvent: sebagai langkah terakhir di setiap pemuatan halaman, browser mengaktifkan peristiwa onload yang dapat memicu logika aplikasi tambahan.

Spesifikasi HTML menentukan kondisi khusus untuk setiap dan setiap peristiwa: kapan harus diaktifkan, kondisi mana yang harus terpenuhi, dan seterusnya. Untuk tujuan kita, kita akan berfokus pada beberapa pencapaian utama yang terkait dengan jalur rendering penting:

  • domInteractive menandai kapan DOM siap.
  • domContentLoaded biasanya menandai kapan DOM dan WebView siap.
    • Jika tidak ada parser yang memblokir JavaScript, DOMContentLoaded akan segera diaktifkan setelah domInteractive.
  • domComplete menandai kapan halaman dan semua subresource-nya sudah siap.
<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent =
          'interactive: ' +
          interactive +
          'ms, ' +
          'dcl: ' +
          dcl +
          'ms, complete: ' +
          complete +
          'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

Cobalah

Contoh di atas mungkin tampak sedikit sulit pada awalnya, tetapi sebenarnya cukup sederhana. Navigation Timing API merekam semua stempel waktu yang relevan dan kode kita hanya menunggu peristiwa onload diaktifkan — ingat bahwa peristiwa onload diaktifkan setelah domInteractive, domContentLoaded, dan domComplete — dan menghitung perbedaan antara berbagai stempel waktu.

Demo NavTiming

Setelah selesai, sekarang kita memiliki beberapa {i>milestone<i} tertentu untuk dilacak dan fungsi sederhana untuk menghasilkan pengukuran ini. Perhatikan bahwa alih-alih mencetak metrik ini di halaman, Anda juga dapat mengubah kode untuk mengirim metrik ini ke server analisis (Google Analytics melakukannya secara otomatis), yang merupakan cara efektif untuk memantau performa halaman dan mengidentifikasi halaman kandidat yang dapat memperoleh manfaat dari beberapa upaya pengoptimalan.

Bagaimana dengan DevTools?

Meskipun dokumen ini terkadang menggunakan panel Jaringan Chrome DevTools untuk menggambarkan konsep CRP, DevTools saat ini tidak cocok untuk pengukuran CRP karena tidak memiliki mekanisme bawaan untuk mengisolasi resource penting. Jalankan audit Lighthouse untuk membantu mengidentifikasi resource tersebut.

Masukan