เวิร์กโฟลว์ของ 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 ข้อมูล CrUX พร้อมใช้งานผ่านเครื่องมือ 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 จาก DevTools

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

ประภาคาร

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

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

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

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

เมื่อใดที่ไม่ควรใช้ 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. ประเมินสถานะของเว็บไซต์และระบุจุดที่ทำให้เกิดความไม่สะดวก
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 ที่ป้อนและทั้งต้นทาง เปรียบเทียบทั้ง 2 รายการนี้เพื่อดูว่าแตกต่างกันอย่างไร โดยปกติแล้ว อุปกรณ์เคลื่อนที่จะมีประสิทธิภาพต่ำกว่าเดสก์ท็อป เนื่องจากเป็นอุปกรณ์ที่มีข้อจำกัดด้านทรัพยากรมากกว่าซึ่งทำงานภายใต้สภาพเครือข่ายที่อาจไม่เสถียร หากข้อมูล URL และต้นทางแตกต่างกันอย่างมาก ให้พยายามทำความเข้าใจสาเหตุ หน้าแรกมักเป็นหน้าแรกที่ผู้ใช้เข้าชม (นั่นคือ หน้า Landing Page) จึงอาจช้ากว่าต้นทางที่ผู้ใช้ต้องรับมือกับแคชของเบราว์เซอร์ที่ไม่ได้เตรียมไว้ล่วงหน้า หน้าเว็บถัดไปน่าจะโหลดได้เร็วขึ้น เนื่องจากระบบจะแคชชิ้นงานที่แชร์ไว้ ซึ่งจะช่วยลดข้อมูลระดับต้นทางโดยรวม

นอกจากนี้ PSI ยังแสดง Core Web Vitals ทั้ง 3 รายการ (LCP, CLS และ 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 ได้รับการเพิ่มประสิทธิภาพอย่างดีเมื่อหน้าเว็บโหลด นอกจากนี้ ตอนนี้ 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 เพื่อดูข้อมูลเพิ่มเติมเพื่อทำความเข้าใจสาเหตุหลักในการระบุปัญหา

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

ดูคำแนะนำเพิ่มเติมได้ในคู่มือต่อไปนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

บทสรุป

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