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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

ภาพรวม

แผงประสิทธิภาพช่วยให้คุณบันทึกโปรไฟล์ประสิทธิภาพของ 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) ในเครื่องและคะแนนของเมตริกดังกล่าวด้วย ซึ่งนอกเหนือจาก LCP และ CLS แล้ว จะช่วยให้คุณเห็นภาพรวมที่สมบูรณ์ของ Core Web Vitals ของหน้าเว็บโดยใช้การเชื่อมต่อเครือข่ายและอุปกรณ์

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

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

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

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

วิธีเพิ่มข้อมูลช่อง

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

    ปุ่ม "ตั้งค่า" ในส่วน "ขั้นตอนถัดไป"

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

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

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

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

    2. ในตารางการแมป ให้ป้อน URL การพัฒนาและ URL เวอร์ชันที่ใช้งานจริง แล้วคลิก +

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

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

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

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

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

    คอลเล็กชันเก็บข้อมูลช่องหลังจากที่ดึงข้อมูลแล้ว

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

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

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

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

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

    ส่วน "พิจารณาเงื่อนไขการทดสอบในเครื่อง" ที่ขยายออกในการ์ดเมตริกแต่ละใบ

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

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

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

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

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

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

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

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

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

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

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

เปลี่ยนการตั้งค่าการจับภาพ

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

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

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

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

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

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

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

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

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

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

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