4 เคล็ดลับสำคัญในการปรับปรุง Core Web Vitals Auditing

เผยแพร่แล้ว: 2022-05-10

ไม่มีกฎเกณฑ์ที่เข้มงวดและรวดเร็วสำหรับวิธีการตรวจสอบ Core Web Vitals โดยเฉพาะอย่างยิ่งกับเครื่องมือของบุคคลที่สามที่ควรพิจารณา เราแจกแจงเคล็ดลับยอดนิยมในการตรวจสอบความเร็วบางส่วนเพื่อรวมเข้ากับเวิร์กโฟลว์ของคุณ ซึ่งจะครอบคลุม:

  • ประสบการณ์หน้า & Google Search Console
  • ข้อเสียของ PageSpeed ​​Insights
  • เครื่องมือตรวจสอบบุคคลที่สามที่แนะนำ
  • ทำความเข้าใจแผนภูมิน้ำตก

1. เริ่มเวิร์กโฟลว์การตรวจสอบ Core Web Vitals ของคุณด้วย Search Console

เมื่อตรวจสอบเว็บไซต์สำหรับความเร็วของเว็บไซต์และปัญหา Core Web Vitals เราแนะนำให้เริ่มกระบวนการแก้ไขปัญหาโดยตรวจสอบส่วน "ประสบการณ์" ภายใน Search Console โดยจะมีการเข้าถึง Search Console รวบรวมข้อมูลผู้ใช้จริง (ฟิลด์) จากรายงาน Chrome UX ดังนั้น นี่เป็นวิธีง่ายๆ ในการทำความเข้าใจว่าปัญหา LCP, CLS หรือ FID ใดที่ส่งผลต่อประสบการณ์ผู้ใช้ของคุณ และท้ายที่สุดแล้วคือศักยภาพในการจัดอันดับของไซต์

ไปที่ 'Page Experience' > 'Core Web Vitals' และกราฟที่แสดงจะแสดงจำนวน URL ที่จัดอยู่ในประเภท 'ดี', 'ต้องการการปรับปรุง' หรือ 'แย่' สำหรับคุณสมบัติของเว็บไซต์ ตัวอย่างเช่น:

ตัวอย่างกราฟ Core Web Vitals จาก GSC

ดูแผนภูมิด้านล่างเกี่ยวกับการกำหนดเวลาและเมตริกจาก Google ในเกณฑ์ Core Web Vitals ด้านบน

ดี ต้องปรับปรุง ยากจน
LCP <=2.5s <=4s >4s
FID <=100ms <=300ms >300ms
CLS <=0.1 <=0.25 >0.25

จากที่นี่ เราสามารถประเมินได้ว่า URL ส่วนใหญ่จัดอยู่ในประเภทดีหรือไม่ ดังนั้นจึงผ่านตัวชี้วัด Core Web Vitals ทั้งหมด 3 ตัว หรือหากหน้าเว็บส่วนใหญ่ 'แย่' หรือ 'ต้องปรับปรุง' ซึ่งบ่งชี้ว่ามีปัญหาทางเทคนิคที่โดดเด่นอยู่บ้าง ที่ต้องแก้ไขให้ผ่านพ้นไป

เคล็ดลับที่เป็นประโยชน์: หน้าต้องผ่าน Web Vitals ทั้งสามรายการเพื่อที่จะย้ายไปยังสถานะ 'ดี' และ URL ของเว็บไซต์ส่วนใหญ่จะอยู่ในช่วง 'ต้องการการปรับปรุง' ไม่เพียงพอ

จากนั้น คุณสามารถเจาะลึกลงไปในแต่ละส่วนเพื่อค้นหา URL เฉพาะที่ได้รับผลกระทบจากปัญหาด้านความเร็วและจำเป็นต้องตรวจสอบ สิ่งเหล่านี้ถูกจัดกลุ่มโดยกลุ่มที่คล้ายกันในระดับเทมเพลต ดังนั้น แทนที่จะพยายามตรวจสอบ URL ประเภทต่างๆ ทั้งหมดที่ไซต์อาจมี เช่น หน้าแรก หน้าหมวดหมู่ หน้าผลิตภัณฑ์ โพสต์ในบล็อก ฯลฯ ปัญหาที่ผู้ใช้จริงเผชิญเมื่อเข้าชมเว็บไซต์อาจมีเพียง 1 หรือ 2 เท่านั้น ซึ่งหมายความว่าคุณสามารถมุ่งเน้นความพยายามของคุณไปที่เทมเพลตเหล่านี้เท่านั้น ซึ่งจะช่วยประหยัดเวลาได้มาก

2. ใช้ PageSpeed ​​Insights เท่าที่จำเป็น

แม้ว่า PageSpeed ​​Insights (PSI) เป็นเครื่องมือฟรีที่มีประโยชน์จาก Google ซึ่งให้ภาพรวมระดับบนสุดของโอกาสที่เป็นไปได้ในการแก้ไขปัญหา แต่ก็เป็นวิธีที่ขี้เกียจจริงๆ ในการตรวจสอบความเร็วไซต์หากใช้แยกกัน เราได้เห็น SEO จำนวนมากใช้คำแนะนำ ซึ่งบางครั้งก็ใช้คำต่อคำ และนำเสนอสิ่งเหล่านี้กลับไปยังนักพัฒนาซอฟต์แวร์ของลูกค้าหรือทีมเทคนิคโดยไม่เข้าใจถึง สาเหตุ หรือบริบทใดๆ เบื้องหลังจริงๆ

น่าเสียดายที่สิ่งนี้มักจะนำไปสู่คำถามที่คุณถามกลับมา โดยเฉพาะอย่างยิ่งหากคุณไม่ได้เจาะลึกถึงโอกาสและคำแนะนำเพิ่มเติมที่เครื่องมือจะพูดถึง

ตัวอย่างเช่น เราทุกคนเคยได้ยินคำแนะนำให้ 'กำจัดทรัพยากรการบล็อกการแสดงผล' เพื่อเพิ่มความเร็วในการโหลดองค์ประกอบ LCP แต่จะเกิดอะไรขึ้นเมื่อทรัพยากรนี้มีความสำคัญอย่างยิ่งต่อการระบายสีครั้งแรก เช่น สคริปต์แบนเนอร์คุกกี้ หรือทรัพย์สินที่ได้รับผลกระทบเป็นทรัพยากรของบุคคลที่สาม? นักพัฒนามีแนวโน้มที่จะเคาะสิ่งนี้กลับทันที เนื่องจากไม่มีอะไรมากที่พวกเขาสามารถทำได้ ดังนั้นจึงเป็นเรื่องสำคัญอย่างยิ่งที่คำแนะนำทางเทคนิคใด ๆ ที่นำมาจาก PSI นั้นต้องใช้เกลือเล็กน้อยและตรวจสอบเพิ่มเติมก่อนที่จะส่งกลับไปยัง นักพัฒนา

นอกจากนี้ยังเป็นประโยชน์ที่จะรู้ว่า PSI ใช้ชุดอุปกรณ์จำลอง (Moto G4) กับ Lighthouse แต่ปัญหาอาจแตกต่างกันมากขึ้นอยู่กับอุปกรณ์ที่ผู้ใช้จริงใช้งานบ่อยที่สุด เช่นเดียวกับการทดสอบในห้องปฏิบัติการ มักหมายความว่า PSI จะไม่ส่งคืนปัญหาหรือโอกาสในการทดสอบบนอุปกรณ์นั้น แม้ว่าคุณจะรู้ว่ามีปัญหาสำหรับผู้ใช้จริงของเว็บไซต์จากรายงาน Chrome UX

การกำหนดค่าการทดสอบเริ่มต้นของ Lighthouse ที่ใช้โดย PageSpeed ​​Insights

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

3. สำรวจเครื่องมือตรวจสอบความเร็วทางเลือก

นอกจากการใช้ PageSpeed ​​และเครื่องมืออื่นๆ ของ Google แล้ว เรายังขอแนะนำให้สำรวจเครื่องมือทดสอบความเร็วฟรีเมียมอื่นๆ เช่น WebPageTest (WPT) หรือ GTMetrix

WebPageTest มีคุณลักษณะที่มีประโยชน์มากมายและตัวเลือกการกำหนดค่าที่ช่วยทดสอบความเร็วที่ระดับหน้า การกำหนดค่าขั้นสูงช่วยให้คุณปรับการตั้งค่าการทดสอบที่สำคัญ เช่น เบราว์เซอร์และประเภทอุปกรณ์ ตลอดจนตำแหน่งทดสอบ วิธีนี้ช่วยให้คุณปรับแต่งการตรวจสอบได้อย่างละเอียด โดยเฉพาะอย่างยิ่งหากคุณทราบว่าผู้ใช้ส่วนใหญ่ของเว็บไซต์อยู่ที่ใด รวมทั้งประเภทอุปกรณ์ของพวกเขา หมายความว่าคุณไม่ได้อาศัยเพียงอุปกรณ์จำลองที่ตั้งไว้ล่วงหน้าของ Google

ที่นี่ คุณยังสามารถปรับการตั้งค่าการเชื่อมต่อจากการเชื่อมต่อ 3G Fast ที่เป็นค่าเริ่มต้น ตลอดจนบล็อก URL บางรายการ หากคุณต้องการทดสอบประสิทธิภาพที่เพิ่มขึ้นสำหรับสคริปต์ที่มีปัญหา มีตัวเลือกการกำหนดค่าอื่นๆ มากมายที่เราไม่ได้ระบุไว้ให้สำรวจ แต่ตัวเลือกด้านบนนี้เป็นตัวเลือกที่เราพบว่ามีประโยชน์มากที่สุดเมื่อตรวจสอบ Core Web Vitals

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

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

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

ตัวอย่างแถบฟิล์มที่แสดงปัญหา CLS เนื่องจากการโหลดแบนเนอร์คุกกี้

GTMetrix มีคุณสมบัติคล้ายกับ WebPageTest อย่างไรก็ตาม ตัวเลือกขั้นสูงจำนวนมากที่ให้บริการฟรีใน WPT นั้นมีให้ในแพ็คเกจแบบชำระเงินเท่านั้น

4. ทำความรู้จักกับแผนภูมิน้ำตก

ในแง่พื้นฐาน แผนภูมิน้ำตกคือไทม์ไลน์ของเวลาที่ร้องขอไฟล์หรือเนื้อหา ระยะเวลาที่ใช้ในการดาวน์โหลด และเวลาที่มองเห็นได้บนหน้า

การดูแผนภูมิน้ำตกอาจดูน่ากลัวเล็กน้อยจากออฟเซ็ต เนื่องจากมีแถว ความยาว และสีต่างๆ มากมายที่สื่อถึงสิ่งที่แตกต่างกัน แต่อย่ามองข้าม! การใช้เวลาเรียนรู้และทำความเข้าใจแผนภูมิน้ำตกเป็นทักษะที่สำคัญที่สุดเพียงอย่างเดียวที่ SEO ด้านเทคนิคควรมีสำหรับการตรวจสอบความเร็ว

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

เคล็ดลับที่เป็นประโยชน์: ให้ความสนใจกับเฉดสีอ่อนและสีเข้มของแถบแนวนอนบนน้ำตก สีอ่อนแสดงว่าเบราว์เซอร์ร้องขอทรัพยากรแล้ว ในขณะที่เฉดสีเข้มแสดงว่ากำลังดาวน์โหลดทรัพยากร

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


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