Performance Observer API: การวัดประสิทธิภาพรันไทม์และการวิเคราะห์คอขวด

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

Performance Observer API คืออะไร?

Performance Observer API คือ JavaScript API ที่ให้กลไกสำหรับการสังเกตการณ์และตอบสนองต่อเหตุการณ์ที่เกี่ยวข้องกับประสิทธิภาพที่เกิดขึ้นในเว็บแอปพลิเคชัน ซึ่งแตกต่างจากเทคนิคการตรวจสอบประสิทธิภาพแบบดั้งเดิมที่อาศัยการสุ่มตัวอย่างเป็นระยะหรือการติดตั้งเครื่องมือด้วยตนเอง Performance Observer API นำเสนอวิธีที่มีประสิทธิภาพและยืดหยุ่นมากขึ้นในการรวบรวมข้อมูลประสิทธิภาพแบบเรียลไทม์ ช่วยให้นักพัฒนาสามารถสมัครรับข้อมูลประเภทรายการประสิทธิภาพ (performance entry types) ที่เฉพาะเจาะจงและรับการแจ้งเตือนเมื่อใดก็ตามที่มีการบันทึกรายการใหม่

แนวทาง "สังเกตการณ์และตอบสนอง" นี้ช่วยให้สามารถตรวจสอบประสิทธิภาพเชิงรุกได้ ทำให้นักพัฒนาสามารถระบุและแก้ไขปัญหาด้านประสิทธิภาพก่อนที่จะส่งผลกระทบต่อประสบการณ์ของผู้ใช้ API นี้เป็นมาตรฐานสำหรับเบราว์เซอร์สมัยใหม่ ทำให้มั่นใจได้ถึงพฤติกรรมที่สอดคล้องกันและความเข้ากันได้ข้ามแพลตฟอร์ม

แนวคิดและคุณสมบัติที่สำคัญ

เพื่อให้สามารถใช้ Performance Observer API ได้อย่างมีประสิทธิภาพ จำเป็นต้องเข้าใจแนวคิดและคุณสมบัติหลักของมัน:

• PerformanceEntry: แสดงถึงการวัดประสิทธิภาพหรือเหตุการณ์เดียว รายการประสิทธิภาพประกอบด้วยข้อมูลเกี่ยวกับประเภทของเหตุการณ์ เวลาเริ่มต้นและสิ้นสุด และคุณลักษณะอื่น ๆ ที่เกี่ยวข้อง ตัวอย่างเช่น resource, mark, measure, navigation, longtask และ event
• PerformanceObserver: ออบเจ็กต์ที่ช่วยให้คุณสามารถสมัครรับข้อมูลประเภทรายการประสิทธิภาพที่เฉพาะเจาะจงและรับการแจ้งเตือนเมื่อใดก็ตามที่มีการเพิ่มรายการใหม่ลงในไทม์ไลน์ประสิทธิภาพของเบราว์เซอร์
• เมธอด observe(): ใช้เพื่อกำหนดค่า PerformanceObserver ให้รอฟังประเภทรายการประสิทธิภาพที่เฉพาะเจาะจง คุณสามารถระบุประเภทรายการที่คุณต้องการสังเกตการณ์ได้ เช่นเดียวกับตัวเลือก buffered เพื่อรับรายการในอดีต
• เมธอด disconnect(): ใช้เพื่อหยุด PerformanceObserver จากการรอฟังเหตุการณ์ด้านประสิทธิภาพ
• เมธอด takeRecords(): ส่งคืนอาร์เรย์ของรายการประสิทธิภาพทั้งหมดที่ได้รับการสังเกตการณ์แล้ว แต่ยังไม่ได้ประมวลผลโดยฟังก์ชัน callback ของ observer
• ฟังก์ชัน Callback: ฟังก์ชันที่จะถูกเรียกใช้งานเมื่อใดก็ตามที่มีการสังเกตการณ์รายการประสิทธิภาพใหม่ ฟังก์ชันนี้จะได้รับออบเจ็กต์ PerformanceObserverEntryList ที่มีรายการที่สังเกตการณ์

ประเภทรายการประสิทธิภาพที่รองรับ

Performance Observer API รองรับประเภทรายการประสิทธิภาพที่หลากหลาย ซึ่งแต่ละประเภทให้ข้อมูลเชิงลึกเฉพาะเกี่ยวกับแง่มุมต่าง ๆ ของประสิทธิภาพเว็บแอปพลิเคชัน ประเภทรายการที่ใช้บ่อยที่สุดบางส่วน ได้แก่:

• resource: ให้ข้อมูลเกี่ยวกับการโหลดทรัพยากรแต่ละรายการ เช่น รูปภาพ สคริปต์ สไตล์ชีต และฟอนต์ ประเภทรายการนี้ประกอบด้วยรายละเอียด เช่น URL ของทรัพยากร เวลาเริ่มต้นและสิ้นสุด ระยะเวลาในการดึงข้อมูล และขนาดการถ่ายโอน
• mark: ช่วยให้คุณสร้างการประทับเวลา (timestamp) ที่กำหนดเองภายในโค้ดของคุณเพื่อวัดระยะเวลาของส่วนโค้ดที่เฉพาะเจาะจง คุณสามารถใช้ mark เพื่อติดตามการเริ่มต้นและสิ้นสุดของการดำเนินงานที่สำคัญ เช่น การประมวลผลข้อมูลหรือการเรนเดอร์ UI
• measure: ใช้เพื่อคำนวณระยะเวลาระหว่าง mark สองจุด ประเภทรายการนี้เป็นวิธีที่สะดวกในการวัดประสิทธิภาพของส่วนโค้ดที่คุณกำหนดเอง
• navigation: ให้ข้อมูลเกี่ยวกับเวลาในการนำทาง (navigation timing) ของหน้าเว็บ รวมถึงเวลาในการค้นหา DNS, เวลาในการเชื่อมต่อ TCP, เวลาในการร้องขอและตอบสนอง และเวลาในการประมวลผล DOM
• longtask: ระบุงานที่บล็อกเธรดหลักเป็นระยะเวลานาน (โดยทั่วไปนานกว่า 50 มิลลิวินาที) Long tasks อาจทำให้ UI ไม่ตอบสนองและเกิดอาการกระตุก (jank)
• event: บันทึกข้อมูลเวลาสำหรับเหตุการณ์ของเบราว์เซอร์ที่เฉพาะเจาะจง เช่น click, keydown และ scroll
• layout-shift: ติดตามการเลื่อนของเลย์เอาต์ที่ไม่คาดคิดบนหน้าเว็บ การเลื่อนเหล่านี้อาจสร้างความรำคาญให้กับผู้ใช้และส่งผลเสียต่อประสบการณ์ของผู้ใช้
• largest-contentful-paint: วัดระยะเวลาที่องค์ประกอบเนื้อหาที่ใหญ่ที่สุดจะปรากฏบนหน้าจอ
• first-input-delay: วัดระยะเวลาที่เบราว์เซอร์ใช้ในการตอบสนองต่อการโต้ตอบครั้งแรกของผู้ใช้ (เช่น การคลิกหรือการแตะ)
• element: รายงานข้อมูลเวลาสำหรับการเรนเดอร์องค์ประกอบเฉพาะบนหน้าเว็บ

ตัวอย่างการใช้งานจริงและกรณีศึกษา

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

1. การตรวจสอบเวลาในการโหลดทรัพยากร

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

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

โค้ดนี้สร้าง PerformanceObserver ที่รอฟังรายการ resource และบันทึก URL ของทรัพยากรและระยะเวลาลงในคอนโซล โดยการวิเคราะห์ข้อมูลนี้ คุณสามารถระบุทรัพยากรที่โหลดช้าและเพิ่มประสิทธิภาพได้โดยการบีบอัดรูปภาพ การใช้ Content Delivery Network (CDN) หรือการปรับปรุงการกำหนดค่าเซิร์ฟเวอร์ของคุณ

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

2. การวัดเวลาการทำงานของโค้ดที่กำหนดเอง

ประเภทรายการ mark และ measure ช่วยให้คุณสามารถวัดเวลาการทำงานของส่วนโค้ดที่คุณกำหนดเองได้ สิ่งนี้มีประโยชน์สำหรับการระบุคอขวดด้านประสิทธิภาพในตรรกะของแอปพลิเคชันของคุณ ตัวอย่างเช่น คุณสามารถใช้โค้ดต่อไปนี้เพื่อวัดระยะเวลาของฟังก์ชันที่เฉพาะเจาะจง:

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["measure"] });

            

              
                Copy
              
            
          

โค้ดนี้สร้าง mark สองจุดคือ start และ end ก่อนและหลังส่วนของโค้ดที่คุณต้องการวัด จากนั้นใช้เมธอด performance.measure() เพื่อคำนวณระยะเวลาระหว่าง mark ทั้งสอง PerformanceObserver จะรอฟังรายการ measure และบันทึกชื่อการวัดและระยะเวลาลงในคอนโซล โดยการวิเคราะห์ข้อมูลนี้ คุณสามารถระบุส่วนของโค้ดที่ทำงานช้าและเพิ่มประสิทธิภาพโดยใช้เทคนิคต่าง ๆ เช่น การแคช (caching), การจดจำ (memoization) หรือการปรับปรุงอัลกอริทึม

ข้อมูลเชิงลึกที่นำไปปฏิบัติได้: ระบุเส้นทางวิกฤต (critical paths) ของแอปพลิเคชันของคุณ ซึ่งเป็นลำดับของโค้ดที่ถูกเรียกใช้งานบ่อยที่สุดและมีผลกระทบต่อประสิทธิภาพมากที่สุด มุ่งเน้นความพยายามในการเพิ่มประสิทธิภาพไปที่เส้นทางวิกฤตเหล่านี้เพื่อให้ได้ประสิทธิภาพที่ดีขึ้นอย่างมีนัยสำคัญที่สุด

3. การระบุ Long Tasks

ประเภทรายการ longtask จะระบุงานที่บล็อกเธรดหลักเป็นระยะเวลานาน Long tasks อาจทำให้ UI ไม่ตอบสนองและเกิดอาการกระตุก ซึ่งนำไปสู่ประสบการณ์ผู้ใช้ที่ไม่ดี คุณสามารถใช้โค้ดต่อไปนี้เพื่อตรวจสอบ long tasks:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

observer.observe({ entryTypes: ["longtask"] });

            

              
                Copy
              
            
          

โค้ดนี้สร้าง PerformanceObserver ที่รอฟังรายการ longtask และบันทึกชื่องานและระยะเวลาลงในคอนโซล โดยการวิเคราะห์ข้อมูลนี้ คุณสามารถระบุงานที่ใช้เวลานานและเพิ่มประสิทธิภาพโดยการแบ่งงานออกเป็นส่วนเล็ก ๆ การใช้การดำเนินงานแบบอะซิงโครนัส หรือการย้ายงานไปทำใน web worker

แนวทางการเขียนสำหรับระดับโลก: เมื่ออธิบายแนวคิดทางเทคนิค ให้ใช้ภาษาที่ชัดเจนและรัดกุมซึ่งผู้อ่านที่มีความเชี่ยวชาญทางเทคนิคในระดับต่าง ๆ สามารถเข้าถึงได้ หลีกเลี่ยงศัพท์เฉพาะและให้บริบทสำหรับคำศัพท์ที่ไม่คุ้นเคย

4. การวิเคราะห์ Navigation Timing

ประเภทรายการ navigation ให้ข้อมูลโดยละเอียดเกี่ยวกับเวลาในการนำทางของหน้าเว็บ รวมถึงเวลาในการค้นหา DNS, เวลาในการเชื่อมต่อ TCP, เวลาในการร้องขอและตอบสนอง และเวลาในการประมวลผล DOM ข้อมูลนี้สามารถใช้เพื่อระบุคอขวดในกระบวนการโหลดหน้าเว็บ ตัวอย่างเช่น คุณสามารถใช้โค้ดต่อไปนี้เพื่อวิเคราะห์ navigation timing:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

observer.observe({ entryTypes: ["navigation"] });

            

              
                Copy
              
            
          

โค้ดนี้สร้าง PerformanceObserver ที่รอฟังรายการ navigation และบันทึกเมตริกเวลาต่าง ๆ ลงในคอนโซล โดยการวิเคราะห์ข้อมูลนี้ คุณสามารถระบุคอขวด เช่น การค้นหา DNS ที่ช้า, การเชื่อมต่อ TCP ที่ช้า, การประมวลผลคำขอที่ช้า, การประมวลผลการตอบสนองที่ช้า หรือการประมวลผล DOM ที่ช้า จากนั้นคุณสามารถดำเนินการที่เหมาะสมเพื่อแก้ไขคอขวดเหล่านี้ เช่น การปรับปรุงการกำหนดค่า DNS ของคุณ, การปรับปรุงประสิทธิภาพของเซิร์ฟเวอร์ หรือการปรับปรุงโค้ด HTML และ JavaScript ของคุณ

การปรับแต่ง SEO: ใช้คีย์เวิร์ดที่เกี่ยวข้องอย่างเป็นธรรมชาติทั่วทั้งเนื้อหา ในส่วนนี้ คีย์เวิร์ดเช่น "navigation timing," "DNS lookup time," "TCP connection time," และ "page loading process" ถูกรวมเข้าด้วยกันอย่างราบรื่น

5. การตรวจสอบ Layout Shifts

ประเภทรายการ layout-shift ติดตามการเลื่อนของเลย์เอาต์ที่ไม่คาดคิดบนหน้าเว็บ การเลื่อนเหล่านี้อาจสร้างความรำคาญให้กับผู้ใช้และส่งผลเสียต่อประสบการณ์ของผู้ใช้ ซึ่งมักเกิดจากรูปภาพที่ไม่มีการกำหนดขนาด, โฆษณาที่โหลดช้า หรือเนื้อหาที่ถูกแทรกเข้ามาแบบไดนามิก คุณสามารถใช้โค้ดต่อไปนี้เพื่อตรวจสอบการเลื่อนของเลย์เอาต์:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

observer.observe({ entryTypes: ["layout-shift"] });

            

              
                Copy
              
            
          

โค้ดนี้สร้าง PerformanceObserver ที่รอฟังรายการ layout-shift และบันทึกค่าการเลื่อน (คะแนนที่แสดงถึงขนาดของการเลื่อน) ลงในคอนโซล ค่าที่สูงขึ้นบ่งชี้ถึงการเลื่อนที่สำคัญกว่า คุณสมบัติ hadRecentInput จะระบุว่าการเลื่อนเกิดขึ้นภายใน 500 มิลลิวินาทีหลังจากการป้อนข้อมูลของผู้ใช้หรือไม่ การเลื่อนที่เกิดจากการป้อนข้อมูลของผู้ใช้โดยทั่วไปถือว่ามีปัญหาน้อยกว่า คุณสมบัติ sources ให้รายละเอียดเกี่ยวกับองค์ประกอบที่ทำให้เกิดการเลื่อน โดยการวิเคราะห์ข้อมูลนี้ คุณสามารถระบุและแก้ไขปัญหาการเลื่อนของเลย์เอาต์ได้โดยการกำหนดขนาดสำหรับรูปภาพ, การจองพื้นที่สำหรับโฆษณา และการหลีกเลี่ยงการแทรกเนื้อหาแบบไดนามิกที่อาจทำให้เกิด reflows

ข้อมูลเชิงลึกที่นำไปปฏิบัติได้: ใช้เครื่องมือเช่น Lighthouse ของ Google เพื่อระบุปัญหาการเลื่อนของเลย์เอาต์และรับคำแนะนำในการแก้ไข จัดลำดับความสำคัญในการแก้ไขการเลื่อนที่เกิดขึ้นโดยไม่มีการป้อนข้อมูลจากผู้ใช้

6. การวัด Largest Contentful Paint (LCP)

ประเภทรายการ largest-contentful-paint วัดระยะเวลาที่องค์ประกอบเนื้อหาที่ใหญ่ที่สุดจะปรากฏบนหน้าจอ LCP เป็นหนึ่งใน Core Web Vitals ที่สะท้อนถึงความเร็วในการโหลดที่ผู้ใช้รับรู้ของหน้าเว็บ คะแนน LCP ที่ดีคือ 2.5 วินาทีหรือน้อยกว่า คุณสามารถใช้โค้ดต่อไปนี้เพื่อวัด LCP:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

โค้ดนี้สร้าง PerformanceObserver ที่รอฟังรายการ largest-contentful-paint และบันทึกเวลาเริ่มต้น, องค์ประกอบ และ URL ลงในคอนโซล โดยการวิเคราะห์ข้อมูลนี้ คุณสามารถระบุองค์ประกอบเนื้อหาที่ใหญ่ที่สุดและเพิ่มประสิทธิภาพเวลาในการโหลดโดยการปรับขนาดรูปภาพให้เหมาะสม, การใช้ CDN หรือการโหลดทรัพยากรล่วงหน้า

มุมมองระดับโลก: พิจารณาว่าผู้ใช้ที่แตกต่างกันจะมีองค์ประกอบ LCP ที่แตกต่างกันตามขนาดหน้าจอและความละเอียดของพวกเขา ออกแบบแอปพลิเคชันของคุณเพื่อให้แน่ใจว่าได้คะแนน LCP ที่ดีในอุปกรณ์และขนาดหน้าจอที่หลากหลาย

7. การวัด First Input Delay (FID)

ประเภทรายการ first-input-delay วัดระยะเวลาที่เบราว์เซอร์ใช้ในการตอบสนองต่อการโต้ตอบครั้งแรกของผู้ใช้ (เช่น การคลิกหรือการแตะ) FID เป็นอีกหนึ่ง Core Web Vital ที่สะท้อนถึงการโต้ตอบของหน้าเว็บ คะแนน FID ที่ดีคือ 100 มิลลิวินาทีหรือน้อยกว่า คุณสามารถใช้โค้ดต่อไปนี้เพื่อวัด FID:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

โค้ดนี้สร้าง PerformanceObserver ที่รอฟังรายการ first-input และบันทึกความล่าช้า, ประเภทของเหตุการณ์ และองค์ประกอบเป้าหมายลงในคอนโซล โดยการวิเคราะห์ข้อมูลนี้ คุณสามารถระบุสาเหตุของความล่าช้าในการป้อนข้อมูลที่ยาวนานและเพิ่มประสิทธิภาพโค้ด JavaScript ของคุณเพื่อลดระยะเวลาที่ใช้บนเธรดหลัก

ข้อมูลเชิงลึกที่นำไปปฏิบัติได้: แบ่งงานที่ใช้เวลานานออกเป็นส่วนเล็ก ๆ, ใช้ web workers เพื่อย้ายงานไปยังเธรดเบื้องหลัง และเพิ่มประสิทธิภาพ event listeners ของคุณเพื่อลดเวลาในการประมวลผลสำหรับการโต้ตอบของผู้ใช้

เทคนิคขั้นสูงและข้อควรพิจารณา

นอกเหนือจากกรณีการใช้งานพื้นฐานที่อธิบายไว้ข้างต้น Performance Observer API ยังสามารถใช้ในสถานการณ์ขั้นสูงเพื่อรับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของเว็บแอปพลิเคชันได้มากขึ้น นี่คือเทคนิคขั้นสูงและข้อควรพิจารณาบางประการ:

1. การใช้ Buffering

ตัวเลือก buffered ในเมธอด observe() ช่วยให้คุณสามารถดึงข้อมูลรายการประสิทธิภาพในอดีตที่ถูกบันทึกไว้ก่อนที่จะสร้าง PerformanceObserver ขึ้นมา สิ่งนี้มีประโยชน์สำหรับการรวบรวมข้อมูลประสิทธิภาพที่เกิดขึ้นระหว่างการโหลดหน้าเว็บครั้งแรกหรือก่อนที่โค้ดการตรวจสอบของคุณจะถูกโหลด ตัวอย่างเช่น:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

โค้ดนี้สร้าง PerformanceObserver ที่รอฟังรายการ navigation และ resource และดึงข้อมูลรายการในอดีตทั้งหมดที่ถูกบันทึกไว้ก่อนที่ observer จะถูกสร้างขึ้น

2. การกรองรายการประสิทธิภาพ

คุณสามารถกรองรายการประสิทธิภาพตามเกณฑ์ที่เฉพาะเจาะจงเพื่อมุ่งเน้นไปที่ข้อมูลที่เกี่ยวข้องกับการวิเคราะห์ของคุณมากที่สุด ตัวอย่างเช่น คุณสามารถกรองรายการทรัพยากรตาม URL หรือประเภทเนื้อหา:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

โค้ดนี้สร้าง PerformanceObserver ที่รอฟังรายการ resource และกรองให้เหลือเฉพาะรายการสำหรับทรัพยากรรูปภาพที่มีนามสกุล .jpg

3. การใช้ Web Workers

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

แนวทางการเขียนสำหรับระดับโลก: ใช้ตัวอย่างที่เกี่ยวข้องกับผู้ชมทั่วโลก หลีกเลี่ยงตัวอย่างที่เฉพาะเจาะจงกับประเทศหรือวัฒนธรรมใดวัฒนธรรมหนึ่ง

4. การผสานรวมกับแพลตฟอร์มการวิเคราะห์

Performance Observer API สามารถผสานรวมกับแพลตฟอร์มการวิเคราะห์เพื่อรวบรวมและวิเคราะห์ข้อมูลประสิทธิภาพในที่เดียว ซึ่งจะช่วยให้คุณสามารถติดตามแนวโน้มประสิทธิภาพเมื่อเวลาผ่านไป, ระบุการถดถอยของประสิทธิภาพ และเชื่อมโยงเมตริกประสิทธิภาพกับข้อมูลพฤติกรรมผู้ใช้อื่น ๆ คุณสามารถส่งรายการประสิทธิภาพไปยังแพลตฟอร์มการวิเคราะห์ของคุณโดยใช้ API ของมันหรือโดยการบันทึกไปยัง endpoint ฝั่งเซิร์ฟเวอร์

5. การใช้ Polyfills สำหรับเบราว์เซอร์รุ่นเก่า

แม้ว่า Performance Observer API จะได้รับการสนับสนุนจากเบราว์เซอร์สมัยใหม่ส่วนใหญ่ แต่อาจไม่มีในเบราว์เซอร์รุ่นเก่า เพื่อรองรับเบราว์เซอร์รุ่นเก่า คุณสามารถใช้ polyfill ที่ให้การใช้งานสำรองของ API มี polyfills หลายตัวที่พร้อมใช้งานออนไลน์ซึ่งคุณสามารถใช้ในแอปพลิเคชันของคุณได้

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ Performance Observer API

เพื่อให้สามารถใช้ Performance Observer API ได้อย่างมีประสิทธิภาพและหลีกเลี่ยงข้อผิดพลาดทั่วไป ให้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

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

การปรับแต่ง SEO: สร้างคำอธิบายเมตาที่น่าสนใจ คำอธิบายโดยสรุปเนื้อหาของบล็อกโพสต์มีให้ในข้อมูลเมตาของ JSON

บทสรุป

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

จำไว้ว่าต้องให้ความสำคัญกับประสบการณ์ของผู้ใช้เหนือสิ่งอื่นใด การเพิ่มประสิทธิภาพควรมีเป้าหมายเพื่อมอบประสบการณ์ที่ราบรื่นและน่าพึงพอใจแก่ผู้ใช้ของคุณเสมอ การใช้ Performance Observer API อย่างมีประสิทธิภาพจะช่วยให้คุณเข้าใจประสิทธิภาพของแอปพลิเคชันของคุณได้ลึกซึ้งยิ่งขึ้นและตัดสินใจอย่างมีข้อมูลเพื่อปรับปรุงประสบการณ์ของผู้ใช้

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