แผงประสิทธิภาพ: วิเคราะห์ประสิทธิภาพเว็บไซต์

ใช้แผงประสิทธิภาพ เพื่อวิเคราะห์ประสิทธิภาพของเว็บไซต์

ภาพรวม

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

ใช้แผงประสิทธิภาพ เพื่อทำสิ่งต่อไปนี้

• บันทึกโปรไฟล์ประสิทธิภาพ
• เปลี่ยนการตั้งค่าการบันทึก
• วิเคราะห์รายงานประสิทธิภาพ

ดูคำแนะนำที่ครอบคลุมเกี่ยวกับการปรับปรุงประสิทธิภาพของเว็บไซต์ได้ที่ วิเคราะห์ประสิทธิภาพรันไทม์

เปิดแผงประสิทธิภาพ

หากต้องการเปิดแผงประสิทธิภาพ ให้เปิด DevTools แล้วเลือกประสิทธิภาพ จากชุดแท็บที่ด้านบน

หรือทำตามขั้นตอนต่อไปนี้เพื่อเปิดแผงประสิทธิภาพ ด้วยเมนูคำสั่ง:

1. เปิด DevTools
2. เปิดเมนูคำสั่ง โดยกดปุ่มต่อไปนี้
3. macOS: Command+Shift+P
4. Windows, Linux, ChromeOS: Control+Shift+P
5. เริ่มพิมพ์ Performance panel เลือก Show Performance panel แล้วกด Enter

ดู Core Web Vitals แบบเรียลไทม์

เมื่อคุณเปิดแผงประสิทธิภาพ แผงจะบันทึกและแสดงเมตริก Largest Contentful Paint (LCP) และ Cumulative Layout Shift (CLS) ในเครื่องของคุณทันที รวมถึงบอกคะแนน (ดี ต้องปรับปรุง หรือไม่ดี)

หากคุณโต้ตอบกับหน้าเว็บ แผงประสิทธิภาพ จะบันทึก Interaction to Next Paint (INP) ในเครื่องและคะแนนด้วย ซึ่งเมื่อรวมกับ LCP และ CLS แล้ว จะช่วยให้คุณเห็นภาพรวมที่สมบูรณ์ของ Core Web Vitals ของหน้าเว็บโดยใช้การเชื่อมต่อเครือข่ายและอุปกรณ์ของคุณ

ในแท็บการโต้ตอบ และการเปลี่ยนแปลงเลย์เอาต์ ใต้การ์ดเมตริก 3 รายการ คุณจะเห็นตารางที่มีข้อมูลเกี่ยวกับการโต้ตอบและการเปลี่ยนแปลงเลย์เอาต์ที่บันทึกไว้ ซึ่งรวมถึงองค์ประกอบ เวลา ระยะ (สำหรับการโต้ตอบ) และคะแนน (สำหรับการเปลี่ยนแปลงเลย์เอาต์) หากต้องการล้างทั้ง 2 รายการ ให้คลิก บล็อก ล้าง

หากต้องการดูรายละเอียดคะแนนเมตริก ให้วางเมาส์เหนือค่าเมตริกเพื่อดูคำแนะนำเครื่องมือ

เปรียบเทียบประสบการณ์ของคุณกับประสบการณ์ของผู้ใช้

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

วิธีเพิ่มข้อมูลภาคสนาม

1. ในประสิทธิภาพ > ขั้นตอนถัดไป > ข้อมูลภาคสนาม ให้คลิกตั้งค่า

   

2. ในกล่องโต้ตอบกำหนดค่าการดึงข้อมูลภาคสนาม ให้สังเกตการเปิดเผยข้อมูลความเป็นส่วนตัว แล้วคลิกตกลง

   ขั้นสูง: ตั้งค่าการแมประหว่างสภาพแวดล้อมในการพัฒนาซอฟต์แวร์กับสภาพแวดล้อมในการใช้งานจริง...

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

   1. ในหน้าต่างกล่องโต้ตอบ ให้ขยายส่วนขั้นสูง แล้วคลิก + ใหม่

   2. ในตารางการแมป ให้ป้อน URL ของการพัฒนาซอฟต์แวร์และการใช้งานจริง แล้วคลิก \+

      

      ตัวอย่างเช่น การแมป http://localhost:8080 กับ https://example.com จะแสดงข้อมูลภาคสนามสำหรับ example.com/page1 เมื่อคุณไปที่ localhost:8080/page1

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

      หากต้องการเปลี่ยนการตั้งค่าการดึงข้อมูลภาคสนามหลังจากตั้งค่าแล้ว ให้คลิกข้อมูลภาคสนาม > กำหนดค่า

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

   

   หากต้องการดูรายละเอียดคะแนนเมตริก ให้วางเมาส์เหนือค่าเมตริกเพื่อดูคำแนะนำเครื่องมือ

กำหนดค่าสภาพแวดล้อมให้ตรงกับสภาพแวดล้อมของผู้ใช้มากขึ้น

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

วิธีกำหนดค่าสภาพแวดล้อม

1. ในการ์ดเมตริกแต่ละรายการ ให้ขยายส่วนพิจารณาเงื่อนไขการทดสอบในเครื่อง (หากมี) แล้วอ่านคำแนะนำ

   

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

2. วิธีกำหนดค่าสภาพแวดล้อมให้ตรงกับตัวอย่างนี้

   1. ตั้งค่าวิวพอร์ตเป็นขนาดหน้าจอทั่วไปขนาดใดขนาดหนึ่ง (เช่น 720p หรือ 1080p) หากต้องการจำลองอุปกรณ์และขนาดหน้าจอที่เฉพาะเจาะจง คุณสามารถใช้โหมดอุปกรณ์ในแผงองค์ประกอบ
   2. ผู้ใช้เว็บไซต์ในตัวอย่างนี้ 82% ใช้เดสก์ท็อปในการเรียกดู หากต้องการตรวจสอบว่าคุณเปรียบเทียบคะแนนเมตริกในเครื่องกับข้อมูลภาคสนามที่ถูกต้อง ให้เลือกเดสก์ท็อป จากรายการแบบเลื่อนลงข้อมูลภาคสนาม > อุปกรณ์
   3. ในส่วนการตั้งค่าสภาพแวดล้อม ให้ตั้งค่ารายการแบบเลื่อนลงเครือข่าย เป็น เช่น 4G ที่เร็ว และCPU เป็น เช่น ชะลอความเร็วลง 20 เท่า นอกจากนี้ คุณยังตรวจสอบ check_box ปิดใช้แคชเครือข่าย ในส่วนเดียวกันได้ด้วย

3. เมื่อกำหนดค่าสภาพแวดล้อมแล้ว ให้โหลดหน้าเว็บซ้ำ โต้ตอบกับหน้าเว็บเพื่อบันทึก INP ในเครื่อง แล้วเปรียบเทียบคะแนนเมตริกอีกครั้ง

   

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

เมื่อกำหนดค่าแล้ว คุณก็เริ่มปรับปรุง Core Web Vitals ของเว็บไซต์ได้แล้ว โดยทำดังนี้

• เพิ่มประสิทธิภาพ LCP
• เพิ่มประสิทธิภาพ INP
• เพิ่มประสิทธิภาพ CLS

บันทึกและวิเคราะห์รายงานประสิทธิภาพ

ในส่วนถัดไป ให้ทำตามคำแนะนำเกี่ยวกับวิธีบันทึกโปรไฟล์ เปลี่ยนการตั้งค่าการบันทึก และวิเคราะห์รายงาน

บันทึกโปรไฟล์ประสิทธิภาพ

เมื่อพร้อมที่จะบันทึกแล้ว แผงประสิทธิภาพ จะมีตัวเลือกต่อไปนี้ให้คุณ

• บันทึกประสิทธิภาพรันไทม์
• บันทึกประสิทธิภาพการโหลด
• จับภาพหน้าจอขณะบันทึก
• บังคับให้มีการเก็บขยะขณะบันทึก
• บันทึกการบันทึก
• โหลดการบันทึก
• ล้างการบันทึก

เปลี่ยนการตั้งค่าการบันทึก

การตั้งค่าการบันทึก ช่วยให้คุณเปลี่ยนวิธีที่ DevTools บันทึกการบันทึกประสิทธิภาพ และให้ข้อมูลเพิ่มเติมในรายงานได้ คลิก การตั้งค่าการบันทึก settings เพื่อเข้าถึงเมนูการตั้งค่าการบันทึก

เลือกตัวเลือกต่อไปนี้จากเมนูการตั้งค่าการบันทึก

• ปิดใช้ตัวอย่าง JavaScript: ปิดใช้การบันทึกสแต็กการเรียก JavaScript ที่แสดงในแท็บหลัก ซึ่งเรียกใช้ระหว่างการบันทึก จะช่วยลดโอเวอร์เฮดประสิทธิภาพ
• เปิดใช้การวัดคุมการแสดงผลขั้นสูง (ช้า): บันทึกการวัดคุมการแสดงผลขั้นสูง ขัดขวางประสิทธิภาพอย่างมาก
• เปิดใช้สถิติตัวเลือก CSS (ช้า): บันทึกสถิติตัวเลือก CSS ขัดขวางประสิทธิภาพอย่างมาก
• การควบคุม CPU: จำลองความเร็ว CPU ที่ช้าลง
• การควบคุมเครือข่าย: จำลองความเร็วเครือข่ายที่ช้าลง

วิเคราะห์รายงานประสิทธิภาพ

ดูคำแนะนำฉบับสมบูรณ์เกี่ยวกับวิธีใช้แผงประสิทธิภาพ ได้ที่วิเคราะห์การบันทึกประสิทธิภาพ

หัวข้อต่อไปนี้เป็นการจัดกลุ่มหัวข้อจากคำแนะนำ รวมถึงเอกสารประกอบที่เป็นประโยชน์อื่นๆ

หากต้องการดูวิธีไปยังส่วนต่างๆ ในรายงาน ให้ทำดังนี้

• ไปยังส่วนต่างๆ ในการบันทึก
• กิจกรรมการค้นหา
• ติดตามผู้เริ่มเหตุการณ์

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

• ข้อมูลเชิงลึกด้านประสิทธิภาพ

หากต้องการดูวิธีมุ่งเน้นสิ่งที่สำคัญสำหรับเวิร์กโฟลว์ ให้ทำดังนี้

• เปลี่ยนลำดับแทร็กและซ่อนแทร็ก
• ซ่อนฟังก์ชันและฟังก์ชันย่อยในแผนภูมิ Flame Chart
• สร้าง Breadcrumb และข้ามไปมาระหว่างระดับการซูม

หากต้องการดูข้อมูลเกี่ยวกับแท็บ Bottom-up, Call tree และ Event log ให้ทำดังนี้

• ดูกิจกรรมในตาราง

หากต้องการดูวิธีวิเคราะห์รายงาน ให้ทำดังนี้

• ดูกิจกรรมของเทรดหลัก
• อ่านแผนภูมิ Flame Chart
• ดูภาพหน้าจอ
• ดูเมตริกหน่วยความจำ
• ดูระยะเวลาของส่วนหนึ่งของการบันทึก
• วิเคราะห์ประสิทธิภาพของตัวเลือก CSS ระหว่างเหตุการณ์ Recalculate Style
• สร้างโปรไฟล์ประสิทธิภาพของ Node.js ด้วยแผงประสิทธิภาพ
• วิเคราะห์เฟรมต่อวินาที (FPS)
• ข้อมูลอ้างอิงเหตุการณ์ในไทม์ไลน์

ปรับปรุงประสิทธิภาพด้วยแผงเหล่านี้

สำรวจแผงอื่นๆ ที่ช่วยปรับปรุงประสิทธิภาพของเว็บไซต์ได้

• Lighthouse: เพิ่มประสิทธิภาพความเร็วเว็บไซต์
• หน่วยความจำ: ภาพรวมแผงหน่วยความจำ
• การแสดงผล: ค้นหาปัญหาเกี่ยวกับประสิทธิภาพการแสดงผล
• ปัญหา: ค้นหาและแก้ไขปัญหา
• ประสิทธิภาพ: ดูข้อมูลเลเยอร์