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). Sesuai namanya, metrik ini ditangkap dari interaksi dengan situs Anda dan memberikan tampilan yang akurat mengenai performa CRP di dunia nyata, seperti yang dialami oleh pengguna 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 audit aplikasi web yang menjalankan serangkaian pengujian terhadap halaman tertentu, lalu menampilkan hasil halaman dalam laporan gabungan. Anda dapat menjalankan Lighthouse sebagai Ekstensi Chrome atau modul NPM, yang berguna untuk mengintegrasikan Lighthouse dengan sistem continuous integration.

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 kasus spesifik ini kita hanya menampilkan sebagian kecil dari semua stempel waktu yang berbeda—untuk saat ini kita melewati semua stempel waktu terkait jaringan, tetapi kita akan kembali membahasnya pada 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. Oleh karena itu, browser menangkap stempel waktu EventStart dan EventEnd untuk memungkinkan kita melacak berapa lama eksekusi ini berlangsung.
  • domComplete: seperti namanya, semua pemrosesan selesai dan semua sumber daya pada laman (gambar, dll.) telah selesai diunduh—di 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 ini, kita akan berfokus pada beberapa tahap penting 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 kapan halaman dan semua sub-sumberdayanya 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, kita sekarang memiliki beberapa {i>milestone<i} spesifik untuk dilacak dan fungsi dasar untuk menghasilkan 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 CRP pengukuran karena tidak memiliki mekanisme bawaan untuk mengisolasi resource kritis. Jalankan audit Lighthouse untuk membantu mengidentifikasi sumber daya tersebut.

Masukan