Core Web Vitals คือ มาตรฐานการของประสิทธิภาพเกี่ยวกับประสบการณ์ของผู้ใช้กับหน้าเว็บไซต์ หรือเรียกง่ายๆ ว่าการให้คะแนน UX สำหรับเว็บไซต์นั่นเอง
Core Web Vitals เป็นหนึ่งในมาตรฐานของ Web Vitals ที่มีอย่างอื่นอีกหลายอย่าง เช่น Mobile Friendly, HTTPS, Safe Browsing
กำลังจะเริ่มนำมาใช้ในปี 2021 แน่นอนว่าเจ้าของเว็บไซต์ก็ต้องทำให้เว็บตัวเองได้คะแนนที่ดี เพื่อที่จะเสิร์ฟเว็บให้ขึ้นหน้าแรกของการค้นหาบน Google
ทุกคนรู้ คนทำเว็บรู้ .. Google นั้นให้ความสำคัญกับประสบการณ์ของผู้ใช้อย่างมาก ต้องโหลดเร็ว ต้องปลอดภัย ต้องมีเนื้อหาที่ได้คุณภาพ พี่แกเลยสร้างเครื่องมือต่างๆ สำหรับวัดคุณภาพของเว็บไซต์ออกมา
อย่างเช่น ถ้าเราอยากรู้ว่าความเร็วในการโหลดเว็บไซต์อยู่ในระดับไหน ก็เข้าไปที่ PageSpeed ซึ่งเป็นเครื่องมือเดียวกันกับที่ Google ใช้ประเมินเว็บเรา ที่เป็นหนึ่งในปัจจัยที่นำไปใช้จัดอันดับ และ Core Web Vitals ที่เรากำลังจะพูดถึงก็เช่นเดียวกัน
แล้ว Core Web Vitals มีการวัดผลอย่างไร?
Google เค้าจะใช้ 3 ปัจจัยหลักในการวัดผลด้าน UX ดังนี้ (และผู้เขียนเดาว่า 3 ด้านนี้ จะมีการเปลี่ยนแปลงรายละเอียดอยู่ตลอดเวลา ในช่วงแรกของการนำมาใช้วัดจริง หรืออาจจะมีส่วนอื่นเพิ่มมาอีก)
1. Largest Contentful Paint (LCP):
ความเร็วในการโหลดชุดคอนเทนต์ที่มีขนาดใหญ่ที่สุดในหน้านั้น (หรือพูดให้ลึกก็คือ element’s size) ไม่ว่าจะเป็นภาพ วิดีโอ หรือข้อความ ควรใช้เวลาโหลดไม่เกิน 2.5 วินาที ถึงจะเรียกว่าโอเค
** นับจากส่วนของคอนเทนต์ที่ใช้เวลาโหลดเยอะที่สุดนะ ไม่ใช่นับรวมการโหลดทั้งหน้าเว็บไซต์
พูดให้ลึกขึ้นอีกนิด ก็คือ เวลาเว็บมันโหลด element ต่างๆ มันจะมีการแบ่งเป็นช่วงๆ ซึ่งแต่ละช่วงของการโหลด จะมีส่วนที่เป็น LCP ต่างกัน ดังนั้น เวลาโหลดหน้าหนึ่งครั้ง อาจจะมีหลาย element ที่นับเป็น LCP
ตัวอย่างถามภาพด้านล่าง ส่วนที่ไฮไลท์สีเขียวคือ LCP ในการโหลดแต่ละครั้ง
แล้วอะไรบ้างที่มันจะทำโหลดช้า?
ไฟล์รูปภาพขาดใหญ่ หรือไฟล์ที่ละเอียดเกินความจำเป็นอย่างพวก .png รวมไปถึงไฟล์ video ที่สั่งโหลดทั้งคอนเทนต์โดยที่ยังไม่ได้กด play หรือ server ที่ไม่มีประสิทธิภาพจนมีการเสิร์ฟภาพออกมาช้ากว่าที่ควรจะเป็น
2. First Input Delay (FID):
ระยะเวลา delay ของการ interactive ระหว่างผู้ใช้กับเว็บไซต์ เช่น การกดปุ่มแล้ว code ในปุ่มนั้นมีการตอบสนองทันทีทันใด, ผู้ใช้จิ้มที่ช่อง input เพื่อพิมพ์ข้อมูล, dropdown, checkbox เป็นต้น
การตอบสนองตรงนี้ ต้องใช้เวลาไม่เกิน 100 มิลิวินาที หรือ 0.1 วินาที
แล้วอะไรบ้างที่มันจะทำให้ตอบสนองช้า?
ตรงนี้ Google บอกว่า การทำงานของเว็บไซต์นั้นมีหลายส่วน หากเว็บของคุณมี script เยอะเกินความจำเป็น การประมวลผลของ browser มันก็จะไม่ค่อยว่าง เพราะทำอย่างอื่นอยู่ จนอาจททำให้มีการตอบสนองช้า
ผู้เขียนคาดว่า สิ่งเหล่านี้มักจะเกิดขึ้นกับเว็บไซต์ที่มี code ที่ไม่ได้ใช้เยอะ อย่าง WordPress ที่ติดตั้ง Plugin จำนวนมาก หรือ Theme ที่ใช้ Page Builder ขนาดใหญ่ ทำให้ทั้ง css และ js มากเกินความจำเป็น
3. Cumulative Layout Shift (CLS):
คะแนนความไม่เสถียรของ layout ความไม่เสถียรที่ว่าเกิดขึ้นจากการที่ layout ขยับ เบี้ยว หรือเรียกง่ายๆ ว่า layout มันแสดงไม่ปกติ ที่อาจจะเกิดจากการตั้งใจหรือไม่ตั้งใจ
Google เค้าอธิบายปรากฏการณ์ว่างี้นะ
คุณเคยอ่านบทความออนไลน์ แล้วมันเกิดการเปลี่ยนแปลงบนหน้าเว็บอย่างกะทันหันหรือไม่? เช่น ข้อความถูกเลื่อนลงมา จนมีพื้นที่ว่างเยอะๆ หรือที่แย่กว่านั้นคือคุณกำลังจะกดลิงก์หรือปุ่ม
แต่ในไม่ช้าก่อนที่นิ้วของคุณจะกดลงไป บู้มมมมมม – ลิงก์ที่ต้องการกด เคลื่อนไปที่อื่น และทำให้คุณคลิกอย่างอื่นแทน!
แล้วอะไรบ้างที่มันจะทำให้ layout ไม่เสถียร?
เท่าที่ผมเองเคยเจอก็จะเป็นหน้าเว็บที่โหลดพวก ads หรือการฝัง iframe ที่ตอนมันโหลดไม่เสร็จ พื้นที่ที่วาง layout มันยังไม่ถูกจองความสูง แต่พอโหลดเสร็จปุ๊บ ความสูงของตรงนั้นมันเพิ่มมาแบบกระทันหัน ตรงนี้ทำให้ผู้อ่านหงุดหงิดได้
วิธีแก้คือ ถ้ารู้ว่าส่วนไหนจะมีการวาง pop-up หรือพวก ad ที่จะโหลดมาทีหลัง ให้จองพื้นที่ที่มีความสูงเท่ากับหรือใกล้เคียงสิ่งที่จะโหลดเอาไว้เลย เมื่อมันโหลดเสร็จ layout จะได้ไม่เคลื่อน จีเนียสสุดๆ
ตรงนี้เป็นหน้าที่ของใคร?
ถ้าพูดถึงเว็บไซต์ในระดับกลางขึ้นไป ที่มีคนดูแลหลายฝ่าย ก็จะเป็นหน้าที่ของ admin และ programmer ที่ต้องคอยตรวจสอบและจัดการปัญหาเหล่านี้
รวมไปถึงคนทำคอนเทนต์ที่จะมีบทบาทกับ LCP ที่ต้องระวังไม่อัปโหลดภาพที่มีไฟล์ขนาดใหญ่จนเกินไป คือ ต้องขยันย่อไฟล์รูปให้เหมาะสมกับเว็บอ่ะครับ
หากคอนเทนต์นี้เป็นประโยชน์ก็ฝากติดตามกันไว้ครับ เดี๋ยวจะมีอะไรมาอัปเดตอีกเรื่อยๆ คร้าบบบบบ
ที่มา – web.dev/vitals
