การวัดเส้นทางการแสดงผลที่สำคัญ

Ilya Grigorik

พื้นฐานของกลยุทธ์ด้านประสิทธิภาพที่แข็งแกร่งทุกกลยุทธ์คือการวัดผลและการใช้เครื่องมือที่ดี คุณไม่สามารถเพิ่มประสิทธิภาพในสิ่งที่วัดไม่ได้ เอกสารนี้ จะอธิบายวิธีการต่างๆ ในการวัดประสิทธิภาพ CRP

  • วิธีการของ Lighthouse จะเรียกใช้ชุดการทดสอบอัตโนมัติกับหน้าเว็บ แล้วสร้างรายงานเกี่ยวกับประสิทธิภาพ CRP ของหน้าเว็บ วิธีนี้ทำให้เห็นภาพรวมระดับสูงของประสิทธิภาพ CRP ในระดับสูงได้อย่างรวดเร็วและง่ายดาย ของหน้าเว็บที่โหลดในเบราว์เซอร์ของคุณ ซึ่งช่วยให้คุณทดสอบ ทำซ้ำ และปรับปรุงประสิทธิภาพได้อย่างรวดเร็ว
  • วิธีการ Navigation Timing API จะบันทึกเมตริกการตรวจสอบผู้ใช้จริง (RUM) ตามที่ชื่อบอก เมตริกเหล่านี้บันทึกมาจากการโต้ตอบของผู้ใช้จริงกับเว็บไซต์ของคุณและให้มุมมองที่แม่นยำเกี่ยวกับประสิทธิภาพ CRP ในชีวิตจริง ตามที่ผู้ใช้พบในอุปกรณ์และสภาพเครือข่ายที่หลากหลาย

โดยทั่วไปแล้ว วิธีการที่ดีคือการใช้ Lighthouse เพื่อระบุโอกาสในการเพิ่มประสิทธิภาพ CRP ที่ชัดเจน จากนั้นติดตั้งโค้ดด้วย Navigation Timing API เพื่อตรวจสอบประสิทธิภาพการทำงานของแอปในส่วนกลาง

การตรวจสอบหน้าเว็บด้วย Lighthouse

Lighthouse เป็นเครื่องมือตรวจสอบเว็บแอปที่ทำการทดสอบชุดต่างๆ กับหน้าเว็บที่ระบุ จากนั้นแสดงผลลัพธ์ของหน้าเว็บในรายงานรวม คุณสามารถเรียกใช้ Lighthouse เป็นส่วนขยาย Chrome หรือโมดูล NPM ซึ่งมีประโยชน์ในการผสานรวม Lighthouse กับระบบการผสานรวมอย่างต่อเนื่อง

โปรดดูการตรวจสอบเว็บแอปด้วย Lighthouse เพื่อเริ่มต้นใช้งาน

เมื่อคุณเรียกใช้ Lighthouse เป็นส่วนขยาย Chrome ผลลัพธ์ CRP ของหน้าเว็บจะมีลักษณะเหมือนภาพหน้าจอด้านล่าง

การตรวจสอบ CRP ของ Lighthouse

ดูข้อมูลเพิ่มเติมเกี่ยวกับผลการตรวจสอบนี้ได้ที่เชนคำขอที่สำคัญ

การใช้ Navigation Timing API และเหตุการณ์เบราว์เซอร์อื่นๆ ที่เกิดขึ้นขณะโหลดหน้าเว็บร่วมกันทำให้คุณสามารถบันทึกและบันทึกประสิทธิภาพ CRP ในชีวิตจริงของทุกหน้าเว็บได้

Navigation Timing

ป้ายกำกับแต่ละป้ายในแผนภาพด้านบนจะสอดคล้องกับการประทับเวลาที่มีความละเอียดสูงที่เบราว์เซอร์ติดตามการโหลดหน้าเว็บแต่ละหน้า อันที่จริง ในตัวอย่างนี้ เราจะแสดงเพียงส่วนเล็กๆ ของการประทับเวลาทั้งหมดเท่านั้น ส่วนตอนนี้เราจะข้ามการประทับเวลาทั้งหมดที่เกี่ยวข้องกับเครือข่าย แต่เราจะกลับมาพูดถึงอีกครั้งในบทเรียนในอนาคต

แล้วการประทับเวลาเหล่านี้หมายความว่าอย่างไร

  • domLoading: นี่คือการประทับเวลาเริ่มต้นของทั้งกระบวนการ เบราว์เซอร์กำลังจะเริ่มแยกวิเคราะห์ไบต์แรกที่ได้รับของเอกสาร HTML
  • domInteractive: ทำเครื่องหมายจุดเมื่อเบราว์เซอร์แยกวิเคราะห์การสร้าง HTML และ DOM ทั้งหมดเสร็จสมบูรณ์แล้ว
  • domContentLoaded: ทำเครื่องหมายจุดเมื่อ DOM พร้อมใช้งานและไม่มีสไตล์ชีตที่บล็อกการดำเนินการ JavaScript ซึ่งหมายความว่าตอนนี้เราสามารถสร้างทรีการแสดงผลได้แล้ว (มีความเป็นไปได้)
    • เฟรมเวิร์ก JavaScript จำนวนมากจะรอเหตุการณ์นี้ก่อนที่จะเริ่มดำเนินการตามตรรกะของตนเอง ด้วยเหตุนี้ เบราว์เซอร์จึงมีการประทับเวลา EventStart และ EventEnd เพื่อให้เราติดตามได้ว่าการดำเนินการนี้ใช้เวลานานเท่าใด
  • domComplete: อย่างที่บอกเป็นนัยว่าการประมวลผลทั้งหมดเสร็จสมบูรณ์และทรัพยากรทั้งหมดในหน้า (รูปภาพ ฯลฯ) ดาวน์โหลดเสร็จแล้ว หรืออีกนัยหนึ่งคือ ตัวหมุนโหลดหยุดหมุนแล้ว
  • loadEvent: เป็นขั้นตอนสุดท้ายในการโหลดหน้าเว็บทุกๆ หน้า เบราว์เซอร์จะเริ่มเหตุการณ์ onload ซึ่งเรียกให้แสดงตรรกะแอปพลิเคชันเพิ่มเติม

ข้อกำหนด HTML จะกำหนดเงื่อนไขที่เฉพาะเจาะจงสำหรับแต่ละเหตุการณ์ เช่น เวลาที่ควรเริ่มทำงาน เงื่อนไขที่ควรเป็นไปตาม และอื่นๆ ตามวัตถุประสงค์ของเราแล้ว เราจะโฟกัสที่เหตุการณ์สำคัญ 2-3 อย่างที่เกี่ยวข้องกับเส้นทางการแสดงผลวิกฤติ ดังนี้

  • domInteractive จะทำเครื่องหมายเมื่อ DOM พร้อมใช้งาน
  • domContentLoaded มักจะทำเครื่องหมายเมื่อทั้ง DOM และ CSSOM พร้อมใช้งาน
    • หากไม่มีโปรแกรมแยกวิเคราะห์ที่บล็อก JavaScript โปรแกรม DOMContentLoaded จะเริ่มทำงานทันทีหลังจาก domInteractive
  • domComplete จะทำเครื่องหมายเวลาที่หน้าและทรัพยากรย่อยทั้งหมดพร้อมใช้งาน
<!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>

ลองใช้

ตัวอย่างด้านบนอาจดูน่ากังวลเล็กน้อยเมื่อแรกเห็น แต่จริงๆ แล้วใช้ง่ายมาก Navigation Timing API จะบันทึกการประทับเวลาที่เกี่ยวข้องทั้งหมด และโค้ดของเราเพียงแค่รอให้เหตุการณ์ onload เริ่มทำงาน โปรดระลึกว่าเหตุการณ์ onload เริ่มทำงานหลังจาก domInteractive, domContentLoaded และ domComplete และคํานวณความแตกต่างระหว่างการประทับเวลาต่างๆ

การสาธิต NavTiming

เมื่อกล่าวเสร็จแล้ว ตอนนี้เรามีเหตุการณ์สำคัญสำหรับติดตามและฟังก์ชันง่ายๆ ในการแสดงผลการวัดเหล่านี้ โปรดทราบว่าแทนที่จะพิมพ์เมตริกเหล่านี้ในหน้าเว็บ คุณยังสามารถแก้ไขโค้ดเพื่อส่งเมตริกเหล่านี้ไปยังเซิร์ฟเวอร์การวิเคราะห์ได้ (Google Analytics จะดำเนินการโดยอัตโนมัติ) ซึ่งเป็นวิธีที่ยอดเยี่ยมในการติดตามประสิทธิภาพของหน้าเว็บและระบุหน้าตัวเลือกที่อาจได้รับประโยชน์จากการทำงานเพิ่มประสิทธิภาพบางส่วน

เครื่องมือสำหรับนักพัฒนาเว็บ

แม้ว่าบางครั้งเอกสารเหล่านี้จะใช้แผง Chrome DevTools Network เพื่อแสดงแนวคิด CRP แต่ปัจจุบันเครื่องมือสำหรับนักพัฒนาเว็บยังไม่เหมาะสำหรับการวัด CRP เนื่องจากไม่มีกลไกในตัวสำหรับการแยกทรัพยากรที่สำคัญ ดำเนินการตรวจสอบ Lighthouse เพื่อช่วยระบุทรัพยากรดังกล่าว

ความคิดเห็น