Core Web Vitals: 7 เครื่องมือและเทคนิคในการระบุปัญหาคอขวดด้านประสิทธิภาพ

Core Web Vitals (CWV) เป็นประเด็นร้อนในขณะนี้ ในที่นี้ เราจะมาดูเครื่องมือบางอย่างที่เราสามารถใช้ได้เพื่อช่วยระบุปัญหาด้านประสิทธิภาพของเว็บไซต์ เพื่อเตรียมพร้อมสำหรับการอัปเดตอันดับของ Google ที่กำลังจะมีขึ้นในเดือนพฤษภาคม 2021

ต้องการทบทวนเกี่ยวกับ Core Web Vitals หรือไม่? เรียนรู้ว่ามันคืออะไรและจะปรับให้เหมาะสมได้อย่างไรในบทความอธิบาย Core Web Vitals ของฉัน

การตรวจสอบอัตโนมัติของตัวชี้วัด CWV

หากคุณมีเว็บไซต์หรือหน้าสำคัญหลายหน้าที่คุณต้องการตรวจสอบเมื่อเวลาผ่านไป โดยไม่ต้องทำการทดสอบด้วยตนเองหลังจากการทดสอบ สเปรดชีตของ Digital Inspiration อาจเหมาะสำหรับคุณ เพียงหยิบคีย์ Lighthouse PageSpeed ​​API เสียบ URL บางอันแล้วไป!

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

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

PageSpeed ​​Insights

PageSpeed ​​Insights ของ Google เป็นเครื่องมือที่ฉันใช้ในการตรวจสอบเบื้องต้นเบื้องต้นเกี่ยวกับประสิทธิภาพและปัญหาที่เกี่ยวข้องกับ CWV สำหรับอุปกรณ์เคลื่อนที่และเดสก์ท็อป รายงานมี 'ข้อมูลภาคสนาม'; วิธีที่ผู้ใช้ในโลกแห่งความเป็นจริงได้สัมผัสเว็บไซต์พร้อมกับข้อมูล 'Lab' ของ Lighthouse ที่จำลองการโหลดหน้าเว็บ ซึ่งมีประโยชน์สำหรับการทดสอบซ้ำและสม่ำเสมอ

ตัวชี้วัด Core Web Vital ถูกเน้นอย่างชัดเจนด้วยตัวบ่งชี้ที่เรียบง่ายและมีรหัสสี ตัวชี้วัดที่ไม่ดีจะถูกเน้นด้วยสีแดง ดีในสีเขียว เมตริกเหล่านี้รวมกันเพื่อให้คะแนนความเร็วโดยรวม และคุณต้องการ 90% ขึ้นไปสำหรับ 'ผ่าน' สีเขียว

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

การตรวจสอบประสิทธิภาพ Chrome DevTools

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

1. ก่อนอื่น คุณจะต้องตรวจสอบให้แน่ใจว่าคุณกำลังเรียกใช้ตัวตรวจสอบประสิทธิภาพการทำงานด้วยความละเอียดที่ถูกต้อง เนื่องจากองค์ประกอบ LCP และ CLS มักจะเปลี่ยนตามความละเอียดที่ต่างกัน ฉันตั้งค่าของฉันเป็น 350 x 636 พิกเซลเพื่อจำลองมุมมองมือถือ PageSpeed ​​Insights
2. ก่อนเรียกใช้รายงาน คุณอาจต้องการจำลองการเชื่อมต่อและพลังของอุปกรณ์มือถือ ฉันมักจะเลือก Fast 3g และ 4x CPU slowdown
3. การเลือกเมตริก LCP เมื่อสร้างรายงานแล้วจะระบุว่าองค์ประกอบที่ใหญ่ที่สุดคืออะไร ควรใกล้เคียงกับ FCP (First Contentful Paint) มากที่สุด หากมีช่องว่าง คุณจะต้องระบุและปรับปรุงการส่งมอบองค์ประกอบที่ใหญ่ที่สุด
4. งาน CPU ที่ยาวนานจะถูกเน้นด้วยเส้นทแยงมุมสีแดงบนแถบสีเทา ซึ่งมักเกิดจาก JavaScript ที่หนักกว่า ซึ่งแสดงด้วยแถบสีเหลือง และจะส่งผลต่อเมตริกการโต้ตอบของคุณ (FID, TBT และ TTI) การเจาะลึกแถบด้านล่างมักจะชี้ไปที่ไฟล์และฟังก์ชัน JavaScript ที่ละเมิด
5. Layout Shifts จะถูกเน้นด้วยแถบสีแดงเหล่านี้ และการเลือกมักจะเน้นว่าองค์ประกอบใดถูกเปลี่ยน สิ่งเหล่านี้จำนวนมากจะสร้างค่า CLS ที่สูงขึ้น
6. มุมมองเฟรมอาจเป็นวิธีที่ยอดเยี่ยมในการเน้นให้เห็นลักษณะที่เนื้อหาปรากฏและเลย์เอาต์เปลี่ยนไปเมื่อโหลดเข้ามา สำหรับค่า CLS ที่สูง มักจะเห็นได้จากเฟรมว่าสาเหตุคืออะไร ในตัวอย่างนี้ แบนเนอร์คุกกี้ขนาดใหญ่ทำให้เกิดการเลื่อนเลย์เอาต์ตามเนื้อหาที่ถูกกดลง

ส่วนขยาย Chrome Web Vitals

คอร์ SERP Vitals

ส่วนขยาย SERP Vitals จะแสดงตัวบ่งชี้ที่สะดวกสำหรับเมตริก LCP, FID และ CLS โดยตรงในผลการค้นหา เหมาะอย่างยิ่งสำหรับการวิเคราะห์คู่แข่งและสามารถระบุได้อย่างรวดเร็วว่าหน้าเว็บมีแนวโน้มที่จะเร็วเพียงใดก่อนที่คุณจะเข้าชม

ข้อมูลถูกรวบรวมโดยไม่ระบุชื่อจากผู้ใช้จริงโดยรายงานประสบการณ์ผู้ใช้ Chrome (CrUX) อย่างไรก็ตาม ไม่มีให้บริการในทุกไซต์ เนื่องจากไซต์ใหม่หรือไซต์ที่มีการเข้าชมน้อยจะไม่ได้รวบรวมจุดข้อมูลเพียงพอ

เว็บไวทัล

ส่วนขยาย Web Vitals ที่ใช้งานสะดวกจะวัดตัวชี้วัด CWV 3 ตัวสำหรับผู้ใช้เดสก์ท็อปใน Chrome แบบเรียลไทม์ และสีของสัญญาณไฟจราจรจะให้ตัวบ่งชี้อย่างรวดเร็วเมื่อคุณเรียกดูเว็บไซต์ เนื่องจากไม่ต้องใช้ข้อมูลผู้ใช้ที่รวบรวมจากภายนอก จึงเป็นเรื่องดีสำหรับนักพัฒนาที่ทำงานในสภาพแวดล้อมท้องถิ่นเพื่อตรวจหาปัญหาต่างๆ ในระยะเริ่มต้น

ประภาคาร

ส่วนขยาย Lighthouse ให้เส้นทางที่รวดเร็วไปยังคุณลักษณะการรายงานเดียวกันกับที่มีอยู่ใน Chrome DevTools และดึงข้อมูลในห้องปฏิบัติการโดยใช้ Lighthouse API แทนที่จะเป็นข้อมูลภาคสนามจากผู้ใช้จริงผ่าน CrUX

รายงานประสิทธิภาพคล้ายกับการวิเคราะห์อุปกรณ์เคลื่อนที่ PageSpeed ​​Insights มาก โดยให้การวินิจฉัยและคำแนะนำที่คล้ายคลึงกัน นอกจากนี้ยังมีการสร้างรายงานเพิ่มเติมสำหรับ SEO การเข้าถึงและแนวทางปฏิบัติที่ดีที่สุด

โปรแกรมสร้างภาพความเร็วไซต์ของ Treo

วิชวลไลเซอร์ที่ https://treo.sh/sitespeed แสดงเมตริก CWV เมื่อเวลาผ่านไป กรองได้ตามอุปกรณ์ การเชื่อมต่อ และภูมิภาคทางภูมิศาสตร์ มีการอัปเดตทุกสัปดาห์และใช้ข้อมูลจากรายงาน CrUX

ในตัวอย่างด้านล่างสำหรับ bbc.co.uk เราจะเห็นว่าเมตริก CLS ลดลงอย่างมากในช่วง 3 เดือนล่าสุดอย่างไร โดยให้ผลลัพธ์ 'ผ่าน' สีเขียวสำหรับเมตริกหลักทั้งหมด นี่เป็นวิธีที่ยอดเยี่ยมในการวิเคราะห์ประสิทธิภาพของตัววัด CWV เมื่อเวลาผ่านไปหรือเพื่อทำการวิเคราะห์คู่แข่ง

การแสดงภาพคำขอของบุคคลที่สาม

เมตริกการโต้ตอบสำหรับ FID, TTI และ TBT มักจะแก้ปัญหาได้ยาก PageSpeed ​​Insights อาจมีประโยชน์ในแง่ของการระบุสคริปต์ของบุคคลที่สามที่หนักที่สุด แต่บางครั้งการแสดงภาพที่เหมาะสมสามารถสื่อสารผลกระทบของสคริปต์เหล่านี้ได้ง่ายขึ้นมาก

เครื่องมือการทำแผนที่ขอ https://requestmap.herokuapp.com/ เหมาะสำหรับสิ่งนี้ แผนที่ที่สร้างขึ้นมีโหนดสำหรับคำขอของบุคคลที่สามแต่ละรายการ โดยมีโหนดที่ใหญ่กว่าซึ่งแสดงถึงสคริปต์ผลกระทบที่สูงกว่า หากตัวชี้วัดการโต้ตอบของคุณไม่ดี โอกาสที่คุณจะเห็นโหนดจำนวนมากบนแผนที่นี้

นี่คือตัวอย่างจากเว็บไซต์ที่มีเมตริก Time to Interactive TTI 26 วินาที แผนที่แสดงวิดเจ็ตแชทสด แสดงโดยโหนดสีน้ำเงินเข้มจำนวนมากที่ด้านบน ซึ่งคิดเป็นกว่าครึ่งหนึ่งของคำขอทั้งหมด

เครื่องมือขอแผนที่ยังเป็นวิธีที่ยอดเยี่ยมในการพิจารณาว่าสคริปต์หรือเนื้อหาอื่นๆ ถูกโหลดจากที่ใด เราสามารถเห็นโหนดหลายโหนดด้านล่างโดยตรงจากโหนด Google Tag Manager สีเหลืองในตัวอย่างนี้

น้ำตกใน WebPageTest

รายงาน WebPageTest ให้รายละเอียดมากกว่า PageSpeed ​​Insights และสามารถสร้างได้จากอุปกรณ์และสถานที่ต่างๆ

ฉันมักจะใช้เครื่องมือนี้สำหรับการวิเคราะห์น้ำตก ซึ่งแสดงภาพลำดับการโหลดของเนื้อหาทั้งหมดบนหน้า สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อพยายามปรับปรุงเนื้อหาที่สำคัญของคุณ 'ครึ่งหน้าบน' ตัวอย่างเช่น หากคุณกำลังปรับให้เหมาะสมสำหรับ LCP และองค์ประกอบครึ่งหน้าบนที่ใหญ่ที่สุดคือรูปภาพหรือตัวพิมพ์ คุณอาจต้องการใช้การโหลดล่วงหน้าในไฟล์รูปภาพและแบบอักษรที่ใหญ่ที่สุด และตรวจสอบว่าเนื้อหาที่โหลดล่วงหน้าเหล่านี้ปรากฏที่ด้านบนของน้ำตก .

ไม่แน่ใจว่า CWV จะส่งผลกระทบต่อไซต์ของคุณอย่างไร ติดต่อเราวันนี้