Mengukur Jalur Rendering Penting

Ilya Grigorik

Dipublikasikan: 31 Maret 2014

Dasar dari setiap strategi performa yang kokoh adalah pengukuran dan instrumentasi yang baik. Anda tidak dapat mengoptimalkan sesuatu yang tidak dapat diukur. Panduan ini menjelaskan berbagai pendekatan untuk mengukur performa CRP.

  • Pendekatan Lighthouse menjalankan serangkaian uji coba otomatis terhadap suatu halaman, lalu menghasilkan laporan tentang performa CRP halaman. Pendekatan ini memberikan ringkasan tingkat tinggi yang cepat dan mendasar tentang performa CRP dari halaman tertentu yang dimuat di browser Anda, sehingga Anda dapat menguji, mengulangi, dan meningkatkan performanya dengan cepat.
  • Pendekatan Navigation Timing API menangkap metrik Real User Monitoring (RUM). Seperti yang tersirat pada namanya, metrik ini diambil dari interaksi pengguna sebenarnya dengan situs Anda dan memberikan gambaran akurat tentang performa CRP di dunia nyata, seperti yang dialami pengguna Anda di berbagai perangkat dan kondisi jaringan.

Secara umum, pendekatan yang bagus adalah menggunakan Lighthouse untuk mengidentifikasi peluang optimalisasi CRP yang jelas, lalu melengkapi kode Anda dengan Navigation Timing API untuk memantau performa aplikasi Anda di dunia nyata.

Mengaudit halaman dengan Lighthouse

Lighthouse adalah alat (bantu) pengauditan aplikasi web yang menjalankan serangkaian pengujian terhadap laman yang diberikan, lalu menampilkan hasil lamannya dalam laporan terkonsolidasi. Anda dapat menjalankan Lighthouse sebagai Ekstensi Chrome atau modul NPM, yang berguna untuk mengintegrasikan Lighthouse dengan sistem integrasi berkelanjutan.

Baca Mengaudit Aplikasi Web dengan Lighthouse untuk memulai.

Saat Anda menjalankan Lighthouse sebagai Ekstensi Chrome, hasil CRP halaman Anda akan tampak seperti screenshot berikut.

Audit CRP Lighthouse

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

Kombinasi Navigation Timing API dan peristiwa browser lainnya yang dikeluarkan saat halaman dimuat memungkinkan Anda merekam dan mencatat performa CRP dunia nyata dari halaman mana pun.

Waktu Navigasi

Setiap label di diagram sebelumnya berkaitan dengan stempel waktu resolusi tinggi yang dilacak browser untuk setiap halaman yang dimuatnya. Sebenarnya, dalam contoh kasus spesifik ini kami hanya menunjukkan sebagian dari semua stempel waktu yang beragam—untuk saat ini kita akan melewati semua stempel waktu terkait jaringan, tetapi kita akan kembali membahasnya dalam 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 telah selesai menguraikan semua konstruksi HTML dan DOM.
  • domContentLoaded: menandai titik ketika kedua DOM siap dan tidak ada stylesheet yang menghambat eksekusi JavaScript—yang berarti bahwa kita sekarang (mungkin) dapat membuat hierarki render.
    • Banyak framework JavaScript menunggu peristiwa ini sebelum mulai mengeksekusi logikanya sendiri. Karena alasan inilah browser merekam stempel waktu EventStart dan EventEnd untuk memungkinkan kita melacak berapa lama eksekusi ini dilakukan.
  • domComplete: seperti namanya, semua pemrosesan 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 dalam setiap pemuatan halaman, browser memicu peristiwa onload yang dapat memicu logika aplikasi tambahan.

Spesifikasi HTML menyatakan kondisi spesifik bagi setiap dan masing-masing peristiwa: kapan harus dimulai, kondisi mana yang harus terpenuhi, dan pertimbangan penting lainnya. Untuk tujuan kita, fokus akan kita berikan pada beberapa tahapan pencapaian yang terkait dengan jalur rendering penting:

  • domInteractive menandai kapan DOM siap.
  • domContentLoaded biasanya menandai kapan DOM dan CSSOM siap.
    • Jika tidak ada parser yang memblokir JavaScript, DOMContentLoaded akan segera diaktifkan setelah domInteractive.
  • domComplete menandai saat 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 sebelumnya mungkin tampak sedikit sulit pada awalnya, tetapi pada kenyataannya, cukup mudah. Navigation Timing API merekam semua stempel waktu yang relevan dan kode kami menunggu peristiwa onload diaktifkan—mengingat kembali bahwa peristiwa onload diaktifkan setelah domInteractive, domContentLoaded, dan domComplete—dan menghitung perbedaan antara berbagai stempel waktu.

Demo NavTiming

Setelah semuanya selesai, sekarang kita punya beberapa tahapan pencapaian untuk melacak dan sebuah fungsi dasar untuk mengeluarkan pengukuran ini. Perhatikan bahwa Anda juga dapat mengubah kode untuk mengirim metrik ini ke server analisis (Google Analytics melakukannya secara otomatis), bukan mencetak metrik ini di halaman. Ini adalah cara yang bagus 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 mengilustrasikan konsep CRP, DevTools tidak cocok untuk pengukuran CRP karena tidak memiliki mekanisme bawaan untuk mengisolasi resource penting. Jalankan audit Lighthouse untuk membantu mengidentifikasi resource tersebut.

Masukan