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

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

เผยแพร่เมื่อ 28 พฤษภาคม 2020

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

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

มีการวัด Core Web Vitals ได้ดีที่สุด

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

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

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

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

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

Search Console

Search Console จะวัดการเข้าชมและประสิทธิภาพของ Search ในเว็บไซต์ รวมถึง 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 เหมาะอย่างยิ่งในการค้นหาโอกาสในการปรับปรุงประสิทธิภาพระหว่างการพัฒนาทั้งในสภาพแวดล้อมในเครื่องและในสภาพแวดล้อมการทดสอบ Lighthouse CI ยังมีประโยชน์ในเฟสการสร้างและทำให้ใช้งานได้ในสภาพแวดล้อมการทดสอบและเวอร์ชันที่ใช้งานจริง ซึ่งจำเป็นต้องมีการทดสอบการถดถอยด้านประสิทธิภาพเพื่อรักษาประสบการณ์ของผู้ใช้ที่ดี

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

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือชุดเครื่องมือสำหรับการพัฒนาในเบราว์เซอร์ ซึ่งรวมถึงแผงประสิทธิภาพ แผงประสิทธิภาพเป็นเครื่องมือในห้องทดลองที่ประกอบด้วย 2 "โหมด" ดังนี้

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

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

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

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

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

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

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

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

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

เวิร์กโฟลว์ 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 และ INP) รวมถึงเมตริก TTFB และ FCP ที่ใช้วินิจฉัย Core Web Vitals ใดไม่เป็นไปตามเกณฑ์ และต่ำกว่าเกณฑ์มากน้อยเพียงใด ซึ่งจะช่วยให้คุณทราบว่าควรมุ่งเน้นที่ส่วนใด

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

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

ดูการตอ��สนองได้ที่คะแนน 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. ใช้มุมมองเมตริกแบบเรียลไทม์ของแผงประสิทธิภาพเพื่อวิเคราะห์ Core Web Vitals แบบเรียลไทม์
3. ใช้การติดตามของแผงประสิทธิภาพเพื่อแก้ไขข้อบกพร่องด้านประสิทธิภาพและทดสอบการเปลี่ยนแปลงโค้ด

ดูคำแนะนำโดยละเอียดได้ในคู่มือต่อไปนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

นอกจากนี้ ระบบจะไฮไลต์งานที่มีระยะเวลานาน (ซึ่งอาจทำให้เกิดปัญหา 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 อิงตามชุดข้อมูล CrUX ใน BigQuery ซึ่งอัปเดตทุกเดือน ข้อมูลนี้อาจเป็นการช่วยเตือนให้คุณตรวจสอบ Core Web Vitals เป็นประจํา

บทสรุป

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