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

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

ภาพรวม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีเพิ่มข้อมูลฟิลด์

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

   

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

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

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

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

   2. ในตารางการแมป ให้ป้อน URL ของการพัฒนาและ 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 ที่แสดงในแทร็กหลักซึ่งเรียกใช้ระหว่างการบันทึก จะลดค่าใช้จ่ายด้านประสิทธิภาพ
• เปิดใช้การวัดคุมการแสดงผลขั้นสูง (ช้า): เก็บข้อมูลการวัดคุมการแสดงผลขั้นสูง ขัดขวางประสิทธิภาพอย่างมาก
• เปิดใช้สถิติตัวเลือก CSS (ช้า): บันทึกสถิติตัวเลือก CSS ขัดขวางประสิทธิภาพอย่างมาก
• การควบคุม CPU: จำลองความเร็ว CPU ที่ช้าลง
• การควบคุมเครือข่าย: จำลองความเร็วเครือข่ายที่ช้าลง

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

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

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

วิธีไปยังส่วนต่างๆ ของรายงาน

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

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

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

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

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

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

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

วิธีวิเคราะห์รายงาน

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

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

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

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