เวิร์กโฟลว์ของ Core Web Vitals ด้วยเครื่องมือของ Google

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

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

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

Core Web Vitals จะวัดได้ดีที่สุดในวงการ

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

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

เครื่องมือที่อยู่ในห้องทดลอง เช่น Lighthouse ยังมักทำ "Cold Load" ของหน้าเว็บในฐานะผู้เข้าชมหน้าใหม่ ซึ่งมักเป็นการโหลดที่ช้าที่สุด แต่ในชีวิตจริง ผู้เข้าชมอาจมีการแคชเนื้อหาบางอย่างไว้หากเคยเข้าชมมาก่อน หรือเมื่อเรียกดูส่วนต่างๆ ของเว็บไซต์ ผู้เข้าชมและเครื่องมือใหม่ๆ ก็อาจพบว่าเว็บไซต์มีลักษณะแตกต่างจากแบนเนอร์คุกกี้หรือเนื้อหาอื่นๆ ที่แสดงต่อผู้เข้าชมเหล่านั้น

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

Google วัด Core Web Vitals ผ่านรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) นี่คือชุดข้อมูลสาธารณะที่รวบรวมจากผู้ใช้ Chrome จริง ซึ่งเป็นหัวใจสำคัญของเครื่องมือต่างๆ ของ Google และบุคคลที่สามที่รายงาน Core Web Vitals ของเว็บไซต์

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

รวบรวมข้อมูลภาคสนามของคุณเองหากเป็นไปได้

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

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

อย่างไรก็ตาม คุณอาจไม่ได้เป็นส่วนหนึ่งขององค์กรขนาดใหญ่หรือแม้แต่องค์กรที่เอื้ออำนวยต่อโซลูชันของบุคคลที่สาม ในกรณีเหล่านี้ คลัง web-vitals ของ Google จะช่วยคุณรวบรวมข้อมูล Web Vitals ทั้งหมด อย่างไรก็ตาม คุณจะต้องเป็นผู้รับผิดชอบวิธีการรายงาน จัดเก็บ และวิเคราะห์ข้อมูลนั้น

หากใช้ Google Analytics อยู่แล้ว แต่ยังไม่ได้เริ่มรวบรวมข้อมูลในช่องของคุณเอง คุณอาจมีโอกาสใช้ไลบรารี web-vitals เพื่อส่ง Web Vitals ที่รวบรวมในช่องไปยัง Google Analytics และใช้การส่งออกของ BigQuery ของ GA4 เพื่อรายงานข้อมูล

ทำความเข้าใจเครื่องมือของ Google

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

รายงานประสบการณ์ของผู้ใช้ Chrome (CrUX)

ดังที่กล่าวไว้ก่อนหน้านี้ CrUX เป็นชุดข้อมูลสาธารณะของข้อมูลภาคสนามที่รวบรวมจากกลุ่มผู้ใช้ Google Chrome ที่แท้จริงจากเว็บไซต์หลายล้านเว็บไซต์ โดยประกอบด้วยเมตริก Core Web Vitals และเมตริกอื่นๆ สําหรับเว็บไซต์ที่มีการเข้าชมเพียงพอ

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

กรณีที่ควรใช้ CrUX

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

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

เมื่อใดที่ไม่ควรใช้ CrUX

CrUX แสดงเฉพาะผู้ใช้ Chrome ซึ่งถึงกระนั้นก็เฉพาะผู้ใช้ Chrome กลุ่มย่อยเท่านั้น โซลูชัน RUM เต็มรูปแบบจะช่วยเพิ่มประสบการณ์การใช้งาน Chrome และเบราว์เซอร์อื่นๆ ที่รองรับเมตริก Web Vitals

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

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

สุดท้าย ในฐานะที่เป็นชุดข้อมูลสาธารณะ CrUX จะจำกัดปริมาณข้อมูลที่ใช้ได้และวิธีค้นหาข้อมูลนี้ การบันทึกข้อมูล RUM ของตนเองช่วยให้คุณรวบรวมรายละเอียดเพิ่มเติม (เช่น องค์ประกอบ LCP) และแบ่งข้อมูลออกเป็นส่วนๆ เพื่อระบุปัญหาได้ ผู้ใช้ที่ลงชื่อเข้าสู่ระบบมีประสบการณ์ Core Web Vitals ดีกว่าหรือแย่กว่าผู้ใช้ที่ออกจากระบบแล้วใช่ไหม ผู้ใช้ที่มี LCP ช้ามีองค์ประกอบ LCP ที่เฉพาะเจาะจงไหม การโต้ตอบใดทําให้ค่า FID และ INP สูง

PageSpeed Insights (PSI)

PSI เป็นเครื่องมือที่รายงานข้อมูลภาคสนามจาก CrUX และห้องทดลองจาก Lighthouse สำหรับหน้าเว็บหนึ่งๆ ดูรายละเอียดเพิ่มเติมในส่วนเหล่านั้น

กรณีที่ควรใช้ PSI

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

PSI ยังให้ข้อมูล Lighthouse ซึ่งให้คำแนะนำที่เป็นประโยชน์ในการปรับปรุง Core Web Vitals หากเมตริกสอดคล้องกัน คำแนะนำของ Lighthouse อาจมีความเกี่ยวข้องน้อยกว่าในกรณีที่คำแนะนำไม่ตรงกัน

เนื่องจาก Lighthouse เรียกใช้จากเซิร์ฟเวอร์ จึงอาจสร้างเกณฑ์พื้นฐานที่สอดคล้องกันมากกว่าการเรียกใช้ Lighthouse จากเครื่องมือสำหรับนักพัฒนาเว็บ

เมื่อใดที่ไม่ควรใช้ PSI

PSI ใช้ได้เฉพาะกับ URL สาธารณะ และใช้ไม่ได้กับเว็บไซต์การพัฒนาที่ไม่ได้เข้าถึงแบบสาธารณะ

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

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

สุดท้าย คำแนะนำจาก Lighthouse อาจมีค่าจำกัดในกรณีที่ข้อมูลระดับหน้าเว็บใช้งานได้ใน CrUX แต่แตกต่างจากข้อมูลในห้องทดลอง Lighthouse กรณีนี้อาจเกิดขึ้นโดยเฉพาะอย่างยิ่งกับปัญหา CLS หลังการโหลด และสําหรับ Core Web Vitals (FID และ INP) แบบอินเทอร์แอกทีฟซึ่งการตรวจสอบในห้องปฏิบัติการไม่มีประโยชน์มากนัก

Search Console

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

ฟีเจอร์ที่มีประโยชน์อย่างหนึ่งของ Search Console คือการจัดกลุ่มหน้าที่คล้ายกัน (เช่น หน้าที่ใช้เทมเพลตเดียวกัน) เข้าไว้ในการประเมินเป็นกลุ่มเดียว Search Console ยังมีรายงาน Core Web Vitals ซึ่งอิงตามข้อมูลภาคสนามจาก CrUX ด้วย

กรณีที่ควรใช้ Search Console

Search Console เหมาะสมสำหรับทั้งนักพัฒนาซอฟต์แวร์และผู้ที่มีบทบาทที่ไม่ใช่นักพัฒนาซอฟต์แวร์ เพื่อประเมินประสิทธิภาพของทั้งการค้นหาและหน้าเว็บในแบบที่เครื่องมืออื่นๆ ของ Google ทำไม่ได้ การนำเสนอข้อมูล CrUX และการจัดกลุ่มหน้าเว็บตามความคล้ายคลึงกันทำให้ข้อมูลเชิงลึกที่ปรับปรุงใหม่เกี่ยวกับการปรับปรุงประสิทธิภาพส่งผลต่อทั้งหมวดหมู่ของหน้าเว็บ

เมื่อใดที่ไม่ควรใช้ Search Console

Search Console อาจไม่เหมาะกับโครงการที่ใช้เครื่องมือของบุคคลที่สามที่แตกต่างกันซึ่งจัดกลุ่มหน้าเว็บตามความคล้ายคลึงกัน หรือหากเว็บไซต์หนึ่งๆ ไม่ได้อยู่ในชุดข้อมูล CrUX

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

ประภาคาร

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

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

กรณีที่ควรใช้ Lighthouse

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

เมื่อใดที่ไม่ควรใช้ Lighthouse

Lighthouse (หรือ CI) ของ Lighthouse ไม่ได้ใช้แทนข้อมูลภาคสนาม Lighthouse เป็นเครื่องมือวิเคราะห์หลักที่แสดงปัญหาที่อาจเกิดขึ้นและแนวทางปฏิบัติแนะนำจากการโหลดหน้าเว็บที่กำหนดไว้ล่วงหน้า คำแนะนำที่แสดงอาจไม่ตรงกับประสิทธิภาพที่ผู้ใช้ได้รับเสมอไป

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

ส่วนขยาย Web Vitals

ส่วนขยาย Web Vitals ใน Chrome เป็นเครื่องมือวิเคราะห์ที่แสดงเมตริก Core Web Vitals ขณะที่คุณท่องเว็บ และยังมีข้อมูล CrUX สําหรับหน้าปัจจุบันหากแสดงในชุดข้อมูล CrUX และให้ข้อมูลการแก้ไขข้อบกพร่องเพื่อช่วยคุณระบุปัญหาด้านประสิทธิภาพของ Core Web Vitals

กรณีที่ควรใช้ส่วนขยาย Web Vitals

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

เมื่อใดที่ไม่ควรใช้ส่วนขยาย Web Vitals

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

แผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

กรณีที่ควรใช้แผงประสิทธิภาพ

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

เมื่อใดที่ไม่ควรใช้แผงประสิทธิภาพ

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

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

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

1. ประเมินการทำงานของเว็บไซต์และระบุประเด็นปัญหา
2. แก้ไขข้อบกพร่องและเพิ่มประสิทธิภาพ
3. ตรวจสอบด้วยเครื่องมือการผสานรวมอย่างต่อเนื่องเพื่อตรวจหาและป้องกันการถดถอย

ขั้นตอนที่ 1: ประเมินประสิทธิภาพของเว็บไซต์และระบุโอกาสในการปรับปรุง

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

1. ใช้ PageSpeed Insights เพื่อดูเมตริกประสบการณ์การใช้งาน Core Web Vitals โดยรวมเกี่ยวกับต้นทางและข้อมูลที่เฉพาะเจาะจงของ URL แต่ละรายการ
2. Search Console อาจเป็นประโยชน์ในการระบุหน้าที่ต้องปรับปรุงเมื่อฟีเจอร์การจัดกลุ่มหน้าเว็บทำงานได้ดีกับเว็บไซต์
3. หากคุณมีข้อมูล RUM ก็มักจะเป็นตัวเลือกที่ดีที่สุดในการระบุหน้าเว็บหรือกลุ่มการเข้าชมที่มีปัญหา

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

วิเคราะห์ประสิทธิภาพของเว็บไซต์ด้วย PageSpeed Insights

PageSpeed Insights จะแสดงข้อมูล CrUX ที่ครอบคลุมข้อมูลประสบการณ์ของผู้ใช้ในช่วง 28 วันที่ผ่านมาที่เปอร์เซ็นไทล์ที่ 75 ซึ่งหมายความว่า หากประสบการณ์ของผู้ใช้ 75% เป็นไปตามเกณฑ์ที่ตั้งไว้สำหรับเมตริกหนึ่งๆ จะถือว่าประสบการณ์นั้น "ดี"

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

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

PSI ยังแสดง Core Web Vitals ทั้ง 3 รายการ (LCP, CLS และ FID) และเมตริก INP ที่รอดำเนินการ รวมถึงเมตริก TTFB และ FCP สำหรับการวินิจฉัยด้วย Core Web Vitals ส่วนใดบ้างที่ล้มเหลวและมีมูลค่าเท่าใด ข้อมูลนี้จะบ่งบอกว่าคุณควรให้ความสนใจที่ส่วนใด

ทำความเข้าใจความสัมพันธ์ระหว่างตัวเลขเหล่านี้ โดยเฉพาะอย่างยิ่งสำหรับ LCP หาก LCP ช้าดังที่แสดงในตัวอย่างนี้ ให้ดูที่ TTFB และ FCP ซึ่งทั้ง 2 อย่างเป็นเป้าหมายของเมตริกนั้น ในตัวอย่างนี้ เรามี TTFB ที่ 1.8 วินาที ซึ่งทำให้การมีคุณสมบัติตรงตามเกณฑ์ที่แนะนำ 2.5 วินาทีเพื่อ LCP ที่ดีทำได้ยาก ซึ่งอาจหมายถึงแบ็กเอนด์ที่ช้า (ปัญหาเกี่ยวกับเซิร์ฟเวอร์หรือการไม่มี CDN), เครือข่ายที่ช้ากว่า หรือการเปลี่ยนเส้นทางที่ทำให้ไบต์ HTML แรกล่าช้า ดูข้อมูลเพิ่มเติมในคู่มือเพิ่มประสิทธิภาพ TTFB FCP ใช้เวลาอีก 1 วินาทีนอกเหนือจากนั้น ซึ่งอาจบ่งบอกถึงเครือข่ายที่ช้า LCP จะไม่นานหลังจาก FCP ในตัวอย่างนี้ ซึ่งบ่งชี้ว่าทรัพยากร LCP ได้รับการเพิ่มประสิทธิภาพอย่างเหมาะสมเมื่อโหลดหน้าเว็บ

สำหรับ CLS ให้ดูคะแนน CrUX CLS และ Lighthouse CLS เพื่อดูว่าเป็นปัญหา CLS ในการโหลดหรือไม่ (ซึ่ง Lighthouse จะตรวจพบและให้คำแนะนำ) หรือปัญหา CLS หลังการโหลดซึ่ง Lighthouse ตรวจไม่พบ ดูข้อมูลเพิ่มเติมได้ในคู่มือ Optimize CLS

สำหรับการตอบสนอง ให้ดูที่คะแนน FID และ INP ดูการตรวจสอบ TBT ใน Lighthouse เพื่อดูว่ามีการประมวลผล JavaScript จำนวนมากเกิดขึ้นระหว่างการโหลดหน้าเว็บเริ่มต้น ซึ่งมีแนวโน้มที่จะส่งผลกระทบต่อ INP หรือไม่ INP อาจเป็นเมตริกที่ยากต่อการปรับปรุง ดังนั้นโปรดดูคำแนะนำ INP การเพิ่มประสิทธิภาพสำหรับข้อมูลเพิ่มเติม

ระบุหน้าที่มีประสิทธิภาพต่ำใน Search Console

แม้ว่า PSI มีประโยชน์เมื่อคุณมี URL เฉพาะที่ต้องการทดสอบหรือเว็บไซต์โดยรวม แต่ Search Console ช่วยคุณกำหนดเป้าหมายหน้าเว็บบางประเภทได้ ซึ่งจะเป็นประโยชน์อย่างยิ่งหากหน้าเว็บหลายหน้ามีธีมหรือเทคโนโลยีร่วมกันและ Search Console สามารถระบุสิ่งเหล่านี้ได้

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

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

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

ขั้นตอนที่ 2: แก้ไขข้อบกพร่องและเพิ่มประสิทธิภาพ

ในขั้นตอนที่ 1 คุณควรระบุหน้าเว็บที่ต้องมีการปรับปรุงประสิทธิภาพ และเมตริก Core Web Vitals ที่ต้องการปรับปรุง คุณสามารถใช้เครื่องมือของ Google เพื่อดูข้อมูลเพิ่มเติมเพื่อทําความเข้าใจสาเหตุที่แท้จริงในการระบุปัญหา

1. เรียกใช้การตรวจสอบ Lighthouse เพื่อดูคำแนะนำระดับหน้าเว็บ
2. ใช้ส่วนขยาย Web Vitals เพื่อวิเคราะห์ Core Web Vitals แบบเรียลไทม์
3. ใช้แผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อแก้ไขข้อบกพร่องด้านประสิทธิภาพและทดสอบการเปลี่ยนแปลงโค้ด

ดูคำแนะนำโดยละเอียดได้จากคำแนะนำต่อไปนี้

• การเพิ่มประสิทธิภาพ LCP
• การเพิ่มประสิทธิภาพ CLS
• การเพิ่มประสิทธิภาพ FID
• การเพิ่มประสิทธิภาพ INP

ค้นพบโอกาสด้วย Lighthouse

PageSpeed Insights จะเรียกใช้ Lighthouse ให้คุณ แต่สำหรับการพัฒนาในเครื่อง คุณสามารถเรียกใช้ Lighthouse จาก Chrome DevTools ได้เช่นกัน ซึ่งจะเป็นประโยชน์ในการตรวจสอบการแก้ไขในเครื่อง

ประเด็นสำคัญคือการตรวจสอบว่าการตรวจสอบ Lighthouse จำลองปัญหาที่คุณพยายามแก้ไข (เช่น ปัญหาเกี่ยวกับ LCP หรือ CLS ที่ช้า) หรือไม่ Lighthouse จะประเมินประสบการณ์ของผู้ใช้ในระหว่างการโหลดหน้าเว็บเท่านั้น เนื่องจากเป็นเครื่องมือในห้องทดลอง จึงไม่ต้องมี FID และ INP เพื่อพิจารณา TBT

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

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

สำหรับ FID และ INP ให้ใช้การตรวจสอบของ TBT เพื่อระบุปัญหาที่อาจส่งผลต่อเมตริกเหล่านั้น แต่โปรดทราบว่า Lighthouse มีข้อจำกัดเรื่องปริมาณการวินิจฉัยที่จำกัดหากไม่มีการโต้ตอบ

วิเคราะห์แบบเรียลไทม์ด้วยส่วนขยาย Web Vitals

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

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

เจาะลึกด้วยแผงประสิทธิภาพ

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

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

แทร็ก Layout Shift จะไฮไลต์การเปลี่ยนแปลงของเลย์เอาต์ การคลิกที่เลย์เอาต์เหล่านี้จะมีรายละเอียดเพิ่มเติมเกี่ยวกับองค์ประกอบที่เปลี่ยนไปเพื่อแก้ไขข้อบกพร่อง CLS

งานที่ใช้เวลานาน (ซึ่งอาจนำไปสู่ปัญหา FID และ INP) จะได้รับการไฮไลต์ด้วยสามเหลี่ยมสีแดง

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

แก้ไขข้อบกพร่องของ Core Web Vitals ในภาคสนาม

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

ดูประสิทธิภาพการแก้ไขข้อบกพร่องในช่องสำหรับข้อมูลเพิ่มเติม

ขั้นตอนที่ 3: ตรวจสอบการเปลี่ยนแปลง

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

ตรวจสอบข้อกำหนดด้านประสิทธิภาพในสภาพแวดล้อมการผสานรวมอย่างต่อเนื่อง (CI)

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

ดูแนวโน้มความสมบูรณ์ของเว็บไซต์พร้อมข้อมูลภาคสนาม

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

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

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

แดชบอร์ด CrUX จะอิงตามชุดข้อมูล BigQuery ของ CrUX ซึ่งได้รับการอัปเดตเดือนละครั้ง การทำเช่นนี้จะเป็นการช่วยเตือนให้ตรวจสอบ Core Web Vitals เป็นประจำ

บทสรุป

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