Core Web Vitals แสดงเมตริกสามรายการที่ Google จัดอันดับ ได้แก่ LCP, CLS และ INP โดยวัดแบบเรียลไทม์บนหน้าเว็บที่คุณกำลังดู ให้คะแนนตามเกณฑ์ของ Google และตรวจสอบย้อนกลับไปยังองค์ประกอบที่อยู่เบื้องหลังตัวเลขแต่ละตัว
Core Web Vitals เป็นผู้ตัดสินว่าหน้าเว็บของคุณมีอันดับอย่างไร แต่วิธีการวัดตามปกตินั้นค่อนข้างน่าอึดอัดใจ เครื่องมือในห้องปฏิบัติการให้คะแนนโหลดสังเคราะห์ที่ไม่มีใครสัมผัสได้ Search Console รายงานผู้ใช้จริงซึ่งล่าช้าไปสี่สัปดาห์ โดยจัดกลุ่มเป็นกลุ่ม URL ไม่ได้บอกคุณว่าองค์ประกอบใดในหน้าตรงหน้าคุณที่เป็นปัญหา
เครื่องมือนี้จะวัดหน้าเว็บที่คุณกำลังดูอยู่จริงในขณะที่คุณใช้งาน LCP, CLS และ INP ต่างก็ได้รับไทล์ที่มีมูลค่า คะแนนดี จำเป็นต้องใช้งาน หรือแย่ โดยเทียบกับเกณฑ์ที่ Google เผยแพร่ และแถบแสดงตำแหน่งที่คุณนั่ง FCP และ TTFB นั่งเคียงข้างกันเพื่อบริบท เนื่องจาก LCP ที่ช้าซึ่งเกิดจากเซิร์ฟเวอร์ที่ช้านั้นเป็นปัญหาที่แตกต่างจากปัญหาที่เกิดจากอิมเมจจำนวนมาก
คำจำกัดความตรงกับสิ่งที่ Chrome รายงานไปยัง CrUX ซึ่งสำคัญหากคุณต้องการเปรียบเทียบตัวเลขกับ Search Console CLS ใช้หน้าต่างเซสชั่น — หน้าต่างสิ้นสุดหลังจากช่วงเวลาหนึ่งวินาทีหรือห้าวินาที และหน้าต่างที่แย่ที่สุดชนะ — แทนที่จะบวกทุกการเปลี่ยนแปลงเข้าด้วยกันอย่างไร้เดียงสา INP คือเปอร์เซ็นไทล์ที่ 98 ของเวลาแฝงในการโต้ตอบของคุณ ซึ่งสำหรับการเข้าชมปกติถือเป็นการโต้ตอบที่ช้าที่สุด LCP จะหยุดการเปลี่ยนแปลงเมื่อคุณโต้ตอบครั้งแรก เช่นเดียวกับที่ Chrome ทำ
มีประโยชน์มากที่สุดคือทุกหมายเลขจะถูกนำมาประกอบ แผงจะตั้งชื่อองค์ประกอบสีที่ใหญ่ที่สุด องค์ประกอบที่เลื่อนและการโต้ตอบที่ช้าที่สุด และปุ่มแสดงจะเลื่อนไปที่องค์ประกอบเหล่านั้นและร่างกรอบบนหน้า แทนที่จะรู้ว่า CLS คือ 0.31 คุณจะเห็นแบนเนอร์ที่ดันเนื้อหาของคุณลง คัดลอกรายงานจะมอบทุกสิ่งให้คุณเป็นข้อความสำหรับตั๋ว
เมตริกการจัดอันดับทั้งสามจะอัปเดตเมื่อคุณใช้เพจ: การเลื่อนจะย้าย CLS การคลิกและการพิมพ์ Move INP แต่ละรายการได้รับการจัดอันดับเป็น "ดี", "ต้องปรับปรุง" หรือ "แย่" โดยเทียบกับเกณฑ์ของ Google
ตั้งชื่อองค์ประกอบสีที่ใหญ่ที่สุด องค์ประกอบที่เลื่อน และการโต้ตอบที่ช้าที่สุด กดแสดงเพื่อเลื่อนไปที่รายการใดก็ได้และร่างเค้าโครงบนหน้าโดยตรง
CLS ใช้หน้าต่างเซสชันที่มีช่องว่าง 1 วินาทีและสูงสุด 5 วินาที INP คือเปอร์เซ็นไทล์ที่ 98 ของเวลาในการตอบสนองของการโต้ตอบ และ LCP ค้างในการโต้ตอบครั้งแรก ดังนั้นตัวเลขของคุณจึงสอดคล้องกับ Search Console
First Contentful Paint และ Time To First Byte อยู่ข้างๆ สามตัวหลัก ดังนั้นคุณจึงสามารถแยกแยะเซิร์ฟเวอร์ที่ช้าได้นอกเหนือจากอิมเมจฮีโร่ที่มีน้ำหนักมาก ก่อนที่คุณจะเริ่มปรับแต่งสิ่งที่ผิด
แสดงรายการการโต้ตอบที่ช้าที่สุดของคุณกับประเภทเหตุการณ์และองค์ประกอบที่เกี่ยวข้อง เพื่อให้สามารถค้นหาเมนูแบบเลื่อนลงหรือตัวกรองที่ช้าที่สุดแทนที่จะคาดเดาได้
คลิกเพียงครั้งเดียวจะคัดลอกทุกตัวชี้วัด การให้คะแนน และตัวเลือกการละเมิดเป็นข้อความธรรมดา พร้อมที่จะวางลงในตั๋ว คำขอดึง หรืออีเมลของลูกค้า
ยืนยันว่า LCP, CLS และ INP อยู่ในสีเขียวบนเทมเพลตใหม่ก่อนที่จะเผยแพร่ แทนที่จะค้นหาจาก Search Console ในเดือนต่อมา
Search Console จะแจ้งให้คุณทราบถึงกลุ่ม URL ที่ไม่ผ่าน CLS เปิดหนึ่งในนั้นด้วยเครื่องมือนี้และดูว่าองค์ประกอบใดที่มีการเปลี่ยนแปลง
เลื่อนหน้าและดู CLS ไต่ระดับ จากนั้นกดแสดงเพื่อร่างโครงร่างโฆษณา แบนเนอร์ หรือแบบอักษรเว็บที่โหลดช้าซึ่งย้ายเนื้อหาของคุณ
คลิกผ่านตัวกรอง เมนู และโมดอล จากนั้นอ่านรายการโต้ตอบที่ช้าที่สุดเพื่อดูว่าการควบคุมใดมีค่าใช้จ่ายหลายร้อยมิลลิวินาที
บันทึกตัวเลข ปรับใช้การแก้ไข จากนั้นวัดหน้าเดียวกันอีกครั้ง และเปรียบเทียบรายงานทั้งสองแบบเคียงข้างกัน
คลิกไอคอน Core Web Vitals ใน Dock DevSuite Pro ไทล์เมตริกจะปรากฏขึ้นทันทีโดยใช้อะไรก็ตามที่บันทึกไว้ในเพจแล้ว
LCP มีความหมายตั้งแต่เริ่มต้นการโหลดหน้าเว็บเท่านั้น ดังนั้นให้โหลดซ้ำโดยเปิดแผงไว้เมื่อคุณต้องการการอ่านที่เชื่อถือได้
เลื่อนดูทั้งหน้าเพื่อใช้ CLS จากนั้นคลิก แตะ และพิมพ์เพื่อสร้างการวัด INP ไทล์จะอัปเดตตามที่คุณไป
กดแสดงถัดจากองค์ประกอบ LCP แหล่งที่มาของการเปลี่ยนเค้าโครง หรือการโต้ตอบที่ช้า หน้าเว็บจะเลื่อนไปที่หน้านั้นและร่างโครงร่างเพื่อไม่ให้มีความคลุมเครือว่าองค์ประกอบใดต้องรับผิดชอบ
คลิกคัดลอกรายงานเพื่อดูสรุปแบบข้อความธรรมดาของทุกเมตริก การให้คะแนน และตัวเลือก กดรีเซ็ตเพื่อเริ่ม CLS และ INP อีกครั้งตั้งแต่ต้น
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 71 รายการสำหรับเบราว์เซอร์ของคุณ
