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

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 รายการ หากต้องการล้างรายการ ให้คลิก ล้าง

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

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

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

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

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

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

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

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

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

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

    2. ในตารางการแมป ให้ป้อน 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 ของเว็บไซต์ได้แล้ว โดยทำดังนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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