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

Ilya Grigorik

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

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

  • แนวทางของ Lighthouse จะทําการทดสอบอัตโนมัติชุดหนึ่งกับหน้าเว็บ แล้วสร้างรายงานเกี่ยวกับประสิทธิภาพ CRP ของหน้าเว็บ แนวทางนี้ให้ภาพรวมระดับสูงเบื้องต้นที่รวดเร็วและพื้นฐานเกี่ยวกับประสิทธิภาพ CRP ของหน้าเว็บที่โหลดในเบราว์เซอร์ ซึ่งช่วยให้คุณทดสอบ ปรับปรุง และเพิ่มประสิทธิภาพได้อย่างรวดเร็ว
  • แนวทางของ Navigation Timing API จะบันทึกเมตริก Real User Monitoring (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 เพื่อช่วยระบุแหล่งข้อมูลดังกล่าว

ความคิดเห็น