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

Ilya Grigorik

เผยแพร่เมื่อ: 31 มีนาคม 2014

รากฐานของกลยุทธ์ประสิทธิภาพที่มั่นคงทุกกลยุทธ์คือการวัดผลที่ดีและ การวัดคุม คุณไม่สามารถเพิ่มประสิทธิภาพสิ่งที่วัดไม่ได้ คู่มือนี้อธิบายแนวทางต่างๆ ในการวัดประสิทธิภาพ 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 เพื่ออธิบายแนวคิด CRP แต่ DevTools ก็ไม่เหมาะสําหรับการวัด CRP เนื่องจากไม่มีกลไกในตัวสําหรับแยกทรัพยากรสําคัญ เรียกใช้การตรวจสอบ Lighthouse เพื่อช่วยระบุแหล่งข้อมูลดังกล่าว

ความคิดเห็น