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

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

ภาพรวม

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

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

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

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

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

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

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

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
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 ของหน้าเว็บโดยใช้การเชื่อมต่อเครือข่ายและอุปกรณ์ของคุณ นอกจากนี้ แผงยังบันทึกและรายงาน 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

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

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

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

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

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

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

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

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

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

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

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

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

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

• นำทางการบันทึก
• กิจกรรมการค้นหา
• ติดตามผู้เริ่มเหตุการณ์

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

• ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

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

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

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

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

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

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

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

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

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

แหล่งข้อมูลเพิ่มเติม