รวมเครื่องมือของ Google เพื่อตรวจสอบ ปรับปรุง และติดตามเว็บไซต์อย่างมีประสิทธิภาพ
เผยแพร่เมื่อวันที่ 28 พฤษภาคม 2020
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 ข้อมูล CrUX พร้อมใช้งานผ่านเครื่องมือ CrUX ต่างๆ ทั้งสำหรับการเข้าถึงแบบเป็นโปรแกรมและเครื่องมือภาพเพื่อให้ผู้ใช้ใช้งาน
กรณีที่ควรใช้ CrUX
แม้ว่าคุณจะรวบรวมข้อมูลภาคสนามของคุณเอง แต่ CrUX ก็ยังมีประโยชน์อยู่ แม้ว่า CrUX จะแสดงข้อมูลของผู้ใช้ Chrome เพียงบางส่วน แต่ก็มีประโยชน์ในการเปรียบเทียบข้อมูลภาคสนามของเว็บไซต์เพื่อดูว่าสอดคล้องกับข้อมูล CrUX อย่างไร แต่ละวิธีมีข้อดีและข้อเสีย ซึ่งอาจส่งผลให้เกิดความแตกต่าง หากคุณไม่ได้รวบรวมข้อมูลภาคสนามใดๆ สำหรับเว็บไซต์ 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 คำแนะนำจาก 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 พร้อมกับ Pull Request และติดตามเมตริกประสิทธิภาพเมื่อเวลาผ่านไป
กรณีที่ควรใช้ Lighthouse
Lighthouse เหมาะอย่างยิ่งสำหรับการค้นหาโอกาสในการปรับปรุงประสิทธิภาพระหว่างการพัฒนาทั้งในสภาพแวดล้อมในเครื่องและสภาพแวดล้อมทดลองใช้ Lighthouse CI มีประโยชน์ในทำนองเดียวกันในขั้นตอนการสร้างและทำให้ใช้งานได้ในสภาพแวดล้อม Staging และสภาพแวดล้อมฮาร์ดแวร์และซอฟต์แวร์ ซึ่งจำเป็นต้องมีการทดสอบการถดถอยของประสิทธิภาพเพื่อรักษาประสบการณ์ที่ดีของผู้ใช้
กรณีที่ไม่ควรใช้ Lighthouse
Lighthouse (หรือ Lighthouse CI) ไม่สามารถใช้แทนข้อมูลภาคสนามได้ Lighthouse เป็นเครื่องมือวินิจฉัยเป็นหลักซึ่งแสดงปัญหาที่อาจเกิดขึ้นและแนวทางปฏิบัติแนะนำจากการโหลดหน้าเว็บที่กำหนดไว้ล่วงหน้า คำแนะนำที่แสดงอาจไม่ตรงกับประสิทธิภาพที่ผู้ใช้ได้รับเสมอไป
แม้ว่าจะใช้ Lighthouse เพื่อวิเคราะห์เว็บไซต์เวอร์ชันที่ใช้งานจริงผ่านเครื่องมืออย่าง PageSpeed Insights ได้ แต่โดยหลักการแล้ว Lighthouse ควรใช้ในสภาพแวดล้อมการพัฒนาและการรวมอย่างต่อเนื่องเพื่อแก้ไขปัญหาด้านประสิทธิภาพก่อนที่จะเข้าสู่เวอร์ชันที่ใช้งานจริง
การตรวจสอบที่ Lighthouse มีให้ยังเข้าถึงได้ผ่าน "ข้อมูลเชิงลึก" ในแผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ซึ่งจะให้การวิเคราะห์ประสิทธิภาพของหน้าเว็บที่ละเอียดยิ่งขึ้น
แผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือชุดเครื่องมือพัฒนาในเบราว์เซอร์ ซึ่งรวมถึงแผงประสิทธิภาพ แผงประสิทธิภาพเป็นเครื่องมือทดลองที่ประกอบด้วย 2 "โหมด" ดังนี้
เมื่อเปิดแผงประสิทธิภาพเป็นครั้งแรก หน้าจอตัวชี้วัดแบบเรียลไทม์จะแสดงเมตริก Core Web Vitals ปัจจุบัน พร้อมความสามารถในการนำเข้าข้อมูลภาคสนามจาก CrUX ซึ่งมีประโยชน์ในฐานะมุมมองประสิทธิภาพ "แบบเรียลไทม์" ขณะที่คุณโต้ตอบกับหน้าเว็บเพื่อพยายามค้นหาปัญหาด้านประสิทธิภาพ โดยเฉพาะปัญหาหลังการโหลดที่คุณอาจเห็นในเมตริก CLS และ INP
ประการที่ 2 แผงประสิทธิภาพช่วยให้นักพัฒนาซอฟต์แวร์บันทึกโปรไฟล์ (หรือการติดตาม) ของกิจกรรมทั้งหมดในหน้าเว็บระหว่างการโหลดหน้าเว็บหรือระยะเวลาที่บันทึกไว้ได้ มุมมองนี้ให้ข้อมูลเชิงลึกเกี่ยวกับทุกสิ่งที่สังเกตได้ในมิติต่างๆ เช่น กิจกรรมเครือข่าย การแสดงผล การวาด และการเขียนสคริปต์ รวมถึง Core Web Vitals ของหน้าเว็บ นอกจากนี้ยังมีข้อมูลเชิงลึกที่คล้ายกับข้อมูลที่ Lighthouse ให้ไว้ด้วย
กรณีที่ควรใช้แผงประสิทธิภาพ
นักพัฒนาซอฟต์แวร์ควรใช้แผงประสิทธิภาพเพื่อรับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของหน้าเว็บหนึ่งๆ
คุณสามารถใช้มุมมองตัวชี้วัดแบบเรียลไทม์เพื่อทำความเข้าใจลักษณะประสิทธิภาพปัจจุบันของหน้าเว็บได้อย่างรวดเร็ว และยังระบุปัญหาที่อาจเกิดขึ้นเมื่อมีการโต้ตอบกับหน้าเว็บได้ด้วย
มุมมองการติดตามมีประโยชน์อย่างยิ่งในการแก้ไขข้อบกพร่องเกี่ยวกับปัญหาการตอบสนองที่ส่งผลต่อ INP เมื่อระบุการโต้ตอบที่ตอบสนองได้ไม่ดีและทำซ้ำได้แล้ว แผงประสิทธิภาพจะให้ข้อมูลจำนวนมากเกี่ยวกับสิ่งที่เกิดขึ้นในเบราว์เซอร์เพื่อช่วยให้เข้าใจปัญหา ตั้งแต่การบล็อกเทรดหลัก สแต็กการเรียกใช้ JavaScript ไปจนถึงการแสดงผล
กรณีที่ไม่ควรใช้แผงประสิทธิภาพ
แผงประสิทธิภาพเป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ให้ข้อมูลจากห้องปฏิบัติการเป็นหลัก แม้ว่าจะมีบริบทภาคสนามบางส่วนจาก CrUX ก็ตาม แต่ไม่ได้ใช้แทนข้อมูลภาคสนาม
มุมมองการติดตามมีข้อมูลการแก้ไขข้อบกพร่องจำนวนมาก แต่ด้วยเหตุนี้ จึงอาจเป็นเรื่องยากสำหรับนักพัฒนาแอปมือใหม่หรือผู้ที่ไม่ได้มีบทบาทเป็นนักพัฒนาแอปที่จะเข้าใจ อย่างไรก็ตาม มุมมองตัวชี้วัดแบบเรียลไทม์ที่แผงควบคุมเปิดขึ้นมาจะช่วยแก้ปัญหานี้ได้โดยการแสดงอินเทอร์เฟซที่ใช้งานง่ายขึ้นสำหรับผู้ที่ไม่ต้องการรายละเอียดทั้งหมด
เวิร์กโฟลว์ 3 ขั้นตอนเพื่อให้แน่ใจว่า Core Web Vitals ของเว็บไซต์ยังคงมีประสิทธิภาพดี
เมื่อพยายามปรับปรุงประสบการณ์ของผู้ใช้ คุณควรคิดว่ากระบวนการนี้เป็นวงจรที่ต่อเนื่อง แนวทางหนึ่งในการปรับปรุง Core Web Vitals และเมตริกประสิทธิภาพอื่นๆ อาจเป็นดังนี้
- ประเมินประสิทธิภาพของเว็บไซต์และระบุปัญหา
- แก้ไขข้อบกพร่องและเพิ่มประสิทธิภาพ
- ตรวจสอบด้วยเครื่องมือการรวมอย่างต่อเนื่องเพื่อตรวจจับและป้องกันการถดถอย
ขั้นตอนที่ 1: ประเมินประสิทธิภาพของเว็บไซต์และระบุโอกาสในการปรับปรุง
วิธีที่ดีที่สุดคือการเริ่มต้นด้วยข้อมูลภาคสนามเพื่อประเมินประสิทธิภาพของเว็บไซต์
- ใช้ PageSpeed Insights เพื่อดูเมตริกประสบการณ์การใช้งาน Core Web Vitals โดยรวมในต้นทาง และข้อมูลที่เฉพาะเจาะจงเกี่ยวกับ URL แต่ละรายการ
- Search Console มีประโยชน์ในการระบุหน้าเว็บที่ต้องปรับปรุง โดยฟีเจอร์การจัดกลุ่มหน้าเว็บจะทำงานได้ดีกับเว็บไซต์ของคุณ
- หากคุณมีข้อมูล RUM ข้อมูลดังกล่าวก็มักจะเป็นตัวเลือกที่ดีที่สุดในการระบุหน้าเว็บหรือกลุ่มการเข้าชมที่มีปัญหา
ไม่ว่าคุณจะวิเคราะห์ข้อมูลภาคสนามที่รวบรวมเองหรือข้อมูล CrUX ขั้นตอนแรกนี้ก็มีความสำคัญอย่างยิ่ง หากคุณไม่ได้รวบรวมข้อมูลภาคสนาม ข้อมูล CrUX อาจเพียงพอที่จะให้คำแนะนำแก่คุณได้ โดยมีเงื่อนไขว่าเว็บไซต์ของคุณต้องแสดงอยู่ในชุดข้อมูล
วิเคราะห์ประสิทธิภาพเว็บไซต์ด้วย PageSpeed Insights
PageSpeed Insights จะแสดงข้อมูล CrUX ที่ครอบคลุมข้อมูลประสบการณ์ของผู้ใช้ในช่วง 28 วันที่ผ่านมาที่เปอร์เซ็นไทล์ที่ 75 ซึ่งหมายความว่าหาก 75% ของประสบการณ์ของผู้ใช้เป็นไปตามเกณฑ์ที่กำหนดไว้สำหรับเมตริกหนึ่งๆ ประสบการณ์นั้นจะถือว่า "ดี"
หากคุณมีหน้าเว็บที่ต้องการดูประสิทธิภาพอยู่แล้ว ก็ให้ใช้หน้าเว็บนั้น หากต้องการดูภาพรวมของเว็บไซต์เมื่อเริ่มเพิ่มประสิทธิภาพเป็นครั้งแรก คุณอาจต้องเริ่มจากหน้าแรก เนื่องจากโดยปกติแล้วหน้าแรกจะเป็นหนึ่งในหน้าเว็บที่ได้รับความนิยมมากที่สุดในหลายๆ เว็บไซต์
เริ่มจากมุ่งเน้นที่ส่วนสิ่งที่ผู้ใช้จริงของคุณกำลังประสบอยู่ของ PSI คุณจะเห็นมุมมองข้อมูลสูงสุด 4 มุมมอง ได้แก่ อุปกรณ์เคลื่อนที่และเดสก์ท็อปสำหรับ URL ที่ป้อนและต้นทางทั้งหมด เปรียบเทียบและดูความแตกต่างของทั้ง 2 ตัวเลือก โดยทั่วไปแล้ว อุปกรณ์เคลื่อนที่จะมีประสิทธิภาพน้อยกว่าเดสก์ท็อป เนื่องจากเป็นอุปกรณ์ที่มีข้อจำกัดด้านทรัพยากรมากกว่าและทำงานภายใต้สภาวะเครือข่ายที่อาจมีความเสถียรน้อยกว่า หาก 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 ได้รับการเพิ่มประสิทธิภาพอย่างดีเมื่อหน้าเว็บโหลด นอกจากนี้ CrUX ยังแสดงข้อมูลการวินิจฉัยเพิ่มเติมในประเภททรัพยากรและส่วนย่อย ซึ่งจะช่วยให้คุณวิเคราะห์ปัญหา LCP ได้ด้วย
สำหรับ CLS ให้ดูคะแนน CLS ของ CrUX และ CLS ของ Lighthouse เพื่อดูว่านี่เป็นปัญหา CLS ของการโหลด (ซึ่ง Lighthouse จะตรวจจับและให้คำแนะนำ) หรือปัญหา CLS หลังการโหลดที่ Lighthouse จะตรวจจับไม่ได้ ดูข้อมูลเพิ่มเติมได้ที่คู่มือการเพิ่มประสิทธิภาพ CLS
สำหรับการตอบสนอง ให้ดูที่คะแนน 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 เพื่อดูข้อมูลเพิ่มเติมเพื่อทำความเข้าใจสาเหตุของปัญหาเพื่อระบุปัญหาได้
- ดูการตรวจสอบ Lighthouse เพื่อรับคำแนะนำระดับสูงสำหรับหน้าเว็บ
- ใช้มุมมองตัวชี้วัดแบบเรียลไทม์ในแผงประสิทธิภาพเพื่อวิเคราะห์ Core Web Vitals แบบเรียลไทม์
- ใช้การติดตามแผงประสิทธิภาพเพื่อแก้ไขข้อบกพร่องด้านประสิทธิภาพและทดสอบการเปลี่ยนแปลงโค้ด
ดูคำแนะนำโดยละเอียดเพิ่มเติมได้ที่คู่มือต่อไปนี้
ค้นพบโอกาสด้วย 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 รวมถึงการเปลี่ยนเลย์เอาต์ที่เกิดขึ้นหลังจากการโหลดได้ นอกจากนี้ คุณยังดูข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับเมตริกแต่ละรายการได้ด้วย ดังนี้
มุมมองนี้ให้ข้อมูลที่เป็นประโยชน์มากมายเพื่อช่วยระบุปัญหาด้านประสิทธิภาพ และยังดึงข้อมูลภาคสนามจาก CrUX ได้ด้วย หากต้องการข้อมูลเพิ่มเติม คุณสามารถเจาะลึกด้วยการติดตามได้
เจาะลึกด้วยแผงประสิทธิภาพ
แผงประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณบันทึกโปรไฟล์ (หรือการติดตาม) ของพฤติกรรมทั้งหมดในหน้าเว็บระหว่างช่วงเวลาที่บันทึกไว้ได้
ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพจะอยู่ในแผงด้านข้างข้อมูลเชิงลึก นอกจากนี้ ยังแสดงเมตริก Core Web Vitals พร้อมกับค่าภาคสนามสำหรับเมตริกเหล่านั้นด้วย (หากมี)
แทร็กการเปลี่ยนแปลงเลย์เอาต์จะไฮไลต์การเปลี่ยนแปลงเลย์เอาต์ และการคลิกที่แทร็กเหล่านี้จะแสดงรายละเอียดเพิ่มเติมเกี่ยวกับองค์ประกอบที่เปลี่ยนไปเพื่อแก้ไขข้อบกพร่อง CLS
เวลาสำคัญ เช่น LCP จะแสดงในเวลาที่ด้านล่างของการติดตาม คลิกเพื่อดูรายละเอียดเพิ่มเติม
งานที่ใช้เวลานาน (ซึ่งอาจทำให้เกิดปัญหา INP) จะไฮไลต์ด้วยสามเหลี่ยมสีแดงในแผนภูมิ Flame Chart ด้วย
ฟีเจอร์เหล่านี้ รวมถึงข้อมูลในส่วนอื่นๆ ของแผงประสิทธิภาพจะช่วยให้คุณระบุได้ว่าการแก้ไขส่งผลต่อ Core Web Vitals ของหน้าเว็บหรือไม่
แก้ไขข้อบกพร่องของ Core Web Vitals ในภาคสนาม
เครื่องมือ Lab ไม่สามารถระบุสาเหตุของปัญหา Core Web Vitals ทั้งหมดที่ส่งผลต่อผู้ใช้ได้เสมอไป นี่เป็นเหตุผลหนึ่งที่ทำให้การรวบรวมข้อมูลภาคสนามของคุณเองมีความสำคัญมาก เนื่องจากจะพิจารณาปัจจัยที่ข้อมูลจากห้องปฏิบัติการไม่สามารถทำได้
ดูข้อมูลเพิ่มเติมได้ที่แก้ไขข้อบกพร่องด้านประสิทธิภาพในภาคสนาม
ขั้นตอนที่ 3: ตรวจสอบการเปลี่ยนแปลง
เมื่อแก้ไขปัญหาแล้ว คุณควรตรวจสอบว่าการแก้ไขมีผลตามที่ต้องการและปัญหาใหม่ๆ ไม่รบกวน Core Web Vitals ซึ่งต้องมีการตรวจสอบปัญหาด้านประสิทธิภาพเป็นส่วนหนึ่งของเวิร์กโฟลว์ของนักพัฒนาซอฟต์แวร์เพื่อป้องกันไม่ให้ปัญหาด้านประสิทธิภาพถูกเผยแพร่ไปยังเวอร์ชันที่ใช้งานจริง และตรวจสอบข้อมูลภาคสนามเป็นประจำเพื่อให้แน่ใจว่าเป็นเช่นนั้น
ตรวจสอบคำขอประสิทธิภาพในสภาพแวดล้อมการรวมอย่างต่อเนื่อง (CI)
Lighthouse-CI ช่วยให้คุณเรียกใช้การตรวจสอบ Lighthouse ในการคอมมิตโค้ดได้โดยอัตโนมัติเพื่อป้องกันไม่ให้ประสิทธิภาพลดลงเมื่อป้อนโค้ด ซึ่งสามารถตรวจสอบเวลาในการทำงาน (ซึ่งอาจมีความผันแปร) หรือใช้เป็นเครื่องมือวิเคราะห์โค้ดเพื่อป้องกันแนวทางปฏิบัติที่ไม่ดีในโค้ดสำหรับการตรวจสอบประสิทธิภาพเท่านั้น
ดูแนวโน้มประสิทธิภาพของเว็บไซต์ด้วยข้อมูลภาคสนาม
แม้ว่าคุณควรตั้งเป้าที่จะตรวจจับและแก้ไขปัญหาด้านประสิทธิภาพทั้งหมดก่อนที่จะนำไปใช้งานจริง แต่การตรวจสอบข้อมูลภาคสนามโดยใช้ RUM ก็เป็นสิ่งสำคัญในการค้นหาปัญหาที่หลุดรอดไป มีผลิตภัณฑ์ RUM เชิงพาณิชย์มากมายที่ช่วยในเรื่องนี้ได้ ไลบรารี JavaScript web-vitals สามารถทำให้การเก็บรวบรวมข้อมูลภาคสนามของเว็บไซต์เป็นแบบอัตโนมัติ และเลือกใช้ข้อมูลนี้เพื่อขับเคลื่อนแดชบอร์ดและระบบการแจ้งเตือนที่กำหนดเองได้
สำหรับเว็บไซต์ที่ไม่มีโซลูชัน RUM คุณสามารถใช้เครื่องมือ CrUX ต่างๆ เป็นการวิเคราะห์แนวโน้มพื้นฐานของข้อมูลภาคสนามได้
บทสรุป
การสร้างประสบการณ์ของผู้ใช้ที่รวดเร็วและน่าพึงพอใจต้องอาศัยแนวคิดที่เน้นประสิทธิภาพเป็นอันดับแรกและการนำเวิร์กโฟลว์มาใช้เพื่อให้มั่นใจว่ามีความคืบหน้า ด้วยเครื่องมือและกระบวนการที่เหมาะสมในการตรวจสอบ แก้ไขข้อบกพร่อง และติดตาม คุณจะสามารถสร้างประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้และรักษาประสิทธิภาพให้อยู่ในเกณฑ์ที่กำหนดไว้สำหรับ Core Web Vitals ที่ดีได้