LCP INP และ CLS คืออะไร ทดสอบความเร็วเว็บไซต์ในสองนาที และวิธีแก้ที่ได้ผลมากที่สุด
คุณคงรู้จักความรู้สึกนี้ กดลิงก์บนมือถือระหว่างเดินจาก BTS ไปออฟฟิศ แล้ว… ไม่มีอะไรเกิดขึ้น หน้าขาว วงกลมหมุน รูปขึ้นครึ่งเดียว กว่าหน้าเว็บจะขึ้นครบ นิ้วโป้งก็กด ย้อนกลับ ไปแล้ว
ลูกค้าของคุณก็ทำแบบเดียวกันกับเว็บไซต์ที่ช้า และในไทยที่คนส่วนใหญ่เข้าเว็บผ่านมือถือ มักใช้เน็ตมือถือ และมักอยู่ระหว่างเดินทาง ความเร็วไม่ใช่รายละเอียดทางเทคนิค แต่คือความต่างระหว่างการได้ลูกค้ากับการเสียลูกค้า
ความเร็วสำคัญแค่ไหนจริงๆ
งานวิจัยของ Google ที่ถูกอ้างถึงบ่อยพบว่า เมื่อเวลาโหลดหน้าเพิ่มจากหนึ่งวินาทีเป็นสามวินาที โอกาสที่ผู้เข้าชมจะออกจากหน้าเพิ่มขึ้น 32% และถ้าลากไปถึงห้าวินาที โอกาสออกเพิ่มขึ้นประมาณ 90% ทุกวินาทีที่ให้คนรอ จะมีคนส่วนหนึ่งจากไปเฉยๆ
ความเร็วยังมีผลต่อตำแหน่งที่คุณปรากฏ Google ใช้สัญญาณประสบการณ์การใช้งานหน้าเว็บ รวมถึงชุดการวัดที่เรียกว่า Core Web Vitals เป็นส่วนหนึ่งในการจัดอันดับ เว็บที่เร็วจะไม่ชนะเนื้อหาที่ดีกว่าได้ด้วยความเร็วอย่างเดียว แต่ระหว่างสองหน้าที่ใกล้เคียงกัน หน้าที่เร็วและลื่นกว่าจะได้เปรียบ
ที่มา: งานวิจัยของ Google/SOASTA เรื่องความเร็วหน้าเว็บบนมือถือ ตัวเลขคือโอกาสออกจากหน้าที่เพิ่มขึ้นเมื่อเทียบกับการโหลดหนึ่งวินาที
Core Web Vitals แบบไม่ใช้ศัพท์เทคนิค
Google วัดสามอย่างว่าหน้าเว็บให้ความรู้สึกอย่างไรกับคนจริงๆ ชื่ออาจฟังดูเทคนิค แต่สิ่งที่วัดคือสามัญสำนึก
LCP — "อีกนานไหมกว่าจะเห็นหน้าเว็บ"
Largest Contentful Paint วัดว่าสิ่งที่ใหญ่ที่สุดบนหน้าจอ มักเป็นรูปหลักหรือหัวข้อหลัก ใช้เวลานานเท่าไรกว่าจะปรากฏ ที่ดีคือ ไม่เกิน 2.5 วินาที เกิน 4 วินาทีถือว่าแย่
INP — "กดแล้วตอบสนองไหม"
Interaction to Next Paint วัดว่าหน้าเว็บตอบสนองเร็วแค่ไหนเมื่อมีคนกดปุ่ม เปิดเมนู หรือพิมพ์ในฟอร์ม ที่ดีคือ ไม่เกิน 200 มิลลิวินาที เกิน 500 มิลลิวินาทีจะรู้สึกเหมือนเสีย INP มาแทนตัววัดเดิมชื่อ FID ตั้งแต่เดือนมีนาคม 2567
CLS — "ของบนหน้ากระโดดไปมาไหม"
Cumulative Layout Shift วัดว่าหน้าเว็บขยับมากแค่ไหนระหว่างโหลด คือช่วงเวลาคลาสสิกที่คุณกำลังจะกดลิงก์แล้วโฆษณาดันมันลงไป จนกดผิด ที่ดีคือ ไม่เกิน 0.1
Google ดูที่เปอร์เซ็นไทล์ที่ 75 ของการเข้าชมจริง คือสามในสี่ของผู้เข้าชมควรได้ประสบการณ์ที่ดี
Google ประเมินจากอุปกรณ์ของผู้เข้าชมจริง ไม่ใช่ Wi-Fi ในออฟฟิศของคุณ เว็บที่รู้สึกเร็วทันใจบน MacBook อาจสอบตกบนมือถือ Android อายุสามปีที่ใช้ 4G ซึ่งเป็นมือถือที่ลูกค้าจำนวนมากใช้อยู่
ทดสอบเว็บไซต์ในสองนาที
- เปิด PageSpeed Insights: ไปที่ pagespeed.web.dev แล้ววางที่อยู่หน้าแรกของคุณ
- ดูกล่องด้านบนก่อน: "ดูว่าผู้ใช้จริงได้รับประสบการณ์อย่างไร" แสดงข้อมูลจากผู้เข้าชมจริง (ถ้าเว็บมีผู้เข้าชมมากพอ)
- ดูแท็บมือถือ: เป็นแท็บที่สำคัญที่สุดสำหรับผู้ชมคนไทย
- เลื่อนลงไปที่ "การวินิจฉัย": แสดงปัญหาเฉพาะเจาะจง เรียงจากหนักไปเบา
- ทดสอบหน้าสำคัญด้วย: หน้าสินค้า หน้าจอง หรือหน้าติดต่อ มักช้ากว่าหน้าแรก
ถ้าตั้งค่า Google Search Console ไว้แล้ว รายงาน Core Web Vitals จะแสดงว่ากลุ่มหน้าไหนผ่านหรือไม่ผ่านตามช่วงเวลา (ถ้ายังไม่มี ให้ตั้งค่าเลย ใช้ฟรี และเป็นช่องทางที่ Google ใช้บอกคุณเรื่องเว็บไซต์)
ตัวการที่พบบ่อย (และวิธีแก้)
หลังจากตรวจเว็บไซต์ธุรกิจขนาดเล็กในกรุงเทพฯ มาจำนวนมาก เราเจอปัญหาเดิมๆ ไม่กี่อย่างซ้ำแล้วซ้ำอีก ข่าวดีคือการแก้สองสามข้อแรกมักได้ผลมากที่สุด
1. รูปภาพขนาดใหญ่เกินไป
นี่คือตัวการอันดับหนึ่ง รูป 5 MB จากกล้องหรือเว็บสต็อก แต่แสดงแค่กว้าง 800 พิกเซล บังคับให้ทุกคนดาวน์โหลดมากกว่าที่เห็นหลายเท่า ย่อรูปให้เท่ากับขนาดที่แสดงจริง และบันทึกเป็น WebP หรือ AVIF แทน JPEG หรือ PNG ขนาดใหญ่ บนเว็บไซต์ของเราเอง การแปลงรูปเป็น WebP ลดน้ำหนักรูปจากประมาณ 7.4 MB เหลือไม่ถึง 1 MB โดยมองไม่เห็นความต่าง
2. ปลั๊กอินและสคริปต์มากเกินไป
วิดเจ็ตแชต พิกเซลติดตาม สไลเดอร์ ป๊อปอัป และปลั๊กอิน "ฟรี" ทุกตัว เพิ่มโค้ดที่ต้องดาวน์โหลดและรันก่อนหน้าเว็บจะตอบสนอง แต่ละตัวดูเล็กน้อย แต่รวมกันมักเป็นสาเหตุที่ INP แย่ ตรวจดูทีละตัว ถ้าไม่มีใครดูข้อมูลจากปลั๊กอินนั้นมาหกเดือน ก็ถอดออก
3. โฮสติ้งราคาถูกหรืออยู่ไกล
ถ้าเซิร์ฟเวอร์ตอบสนองช้า ทุกอย่างต้องรอ โฮสติ้งแบบแชร์ที่อัดเว็บไว้หลายพันเว็บ หรือเซิร์ฟเวอร์อีกซีกโลกที่ไม่มี CDN อาจเพิ่มเวลาหนึ่งวินาทีก่อนอะไรจะเริ่มเกิดขึ้น โฮสติ้งที่ดีพร้อม CDN (เครือข่ายที่ส่งไฟล์จากจุดที่อยู่ใกล้ผู้เข้าชม) ให้ความต่างที่รู้สึกได้สำหรับผู้เข้าชมในไทย
4. ฟอนต์เว็บที่บล็อกหน้า
ฟอนต์พิเศษดูสวย แต่การโหลดห้าน้ำหนักของสองฟอนต์ บวกฟอนต์ไทยอีกตัว อาจทำให้ตัวหนังสือขึ้นช้า โหลดเฉพาะน้ำหนักที่ใช้จริง และให้ตัวหนังสือแสดงด้วยฟอนต์สำรองทันทีระหว่างรอฟอนต์พิเศษ
5. เลย์เอาต์ที่กระโดด
รูปที่ไม่กำหนดขนาด แบนเนอร์ที่โหลดทีหลัง และแถบคุกกี้ที่ดันเนื้อหาลง ทำให้ CLS แย่ทั้งหมด กันพื้นที่ให้รูปและสิ่งที่ฝังไว้ก่อนโหลด และให้ป๊อปอัปลอยอยู่เหนือหน้า แทนการดันเนื้อหา
6. ตัวสร้างเว็บแบบลากวางที่ทำงานเกินจำเป็น
ตัวสร้างเว็บแบบลากวางทำให้เพิ่มส่วนต่างๆ แอนิเมชัน และเอฟเฟกต์ได้ง่าย และก็ง่ายที่จะได้หน้าเว็บที่ส่งโค้ดหลายเมกะไบต์สำหรับเลย์เอาต์ธรรมดา บางครั้งวิธีแก้ที่ตรงไปตรงมาที่สุดคือสร้างใหม่ด้วยเทคโนโลยีที่เบากว่า
เริ่มจากด้านบน สามข้อแรกมักให้ผลส่วนใหญ่
ความเร็วคือฟีเจอร์ที่ลูกค้ารู้สึกได้
ไม่มีใครเขียนรีวิวว่า "เว็บไซต์โหลดใน 1.2 วินาที" แต่เขาสังเกตเมื่อมันไม่เร็ว สังเกตเมื่อเมนูตอบสนองทันที เมื่อฟอร์มจองไม่ค้าง เมื่อหน้าไม่กระโดด ความรู้สึกลื่นไหลนั้นเป็นส่วนสำคัญที่ทำให้ธุรกิจดูน่าเชื่อถือบนออนไลน์
ทุกเว็บไซต์ที่เราทำ ออกแบบให้โหลดได้ภายในไม่ถึงวินาทีบนมือถือทั่วไป และผ่าน Core Web Vitals ตั้งแต่แรก โค้ดกระชับ รูปขนาดเหมาะสม ไม่มีปลั๊กอินเกินจำเป็น ถ้าเว็บไซต์ปัจจุบันของคุณช้าและไม่แน่ใจว่าควรแก้หรือทำใหม่ ส่งลิงก์มาให้เรา แล้วเราจะบอกตามจริง และถ้ากำลังวางแผนทำใหม่ อ่าน วิธีรีดีไซน์เว็บไซต์โดยไม่เสียอันดับ Google ก่อน
คำถามที่พบบ่อย
เวลาโหลดเว็บไซต์ที่ดีคือเท่าไร
ตั้งเป้าให้เนื้อหาหลักปรากฏภายใน 2.5 วินาทีบนมือถือ (เกณฑ์ LCP "ดี" ของ Google) เว็บไซต์ธุรกิจขนาดเล็กที่ดีที่สุดแสดงหน้าได้ในประมาณหนึ่งวินาที
ความเร็วเว็บไซต์มีผลต่ออันดับ Google ไหม
มี เป็นหนึ่งในหลายสัญญาณ Core Web Vitals เป็นส่วนหนึ่งของสัญญาณประสบการณ์หน้าเว็บของ Google ความเกี่ยวข้องและคุณภาพเนื้อหาสำคัญกว่า แต่ความเร็วอาจตัดสินระหว่างหน้าที่ใกล้เคียงกัน และมีผลมากต่อการที่ผู้เข้าชมจะอยู่ต่อหรือไม่
ทำไมเว็บเร็วบนคอมพิวเตอร์แต่ช้าบนมือถือ
มือถือมีหน่วยประมวลผลช้ากว่าและมักใช้อินเทอร์เน็ตที่ช้ากว่า และ PageSpeed Insights ทดสอบมือถือด้วยการจำลองเครื่องระดับกลางบนเครือข่ายที่ช้ากว่า รูปหนักและสคริปต์เยอะจึงส่งผลบนมือถือมากกว่ามาก
ทำเว็บ WordPress ให้เร็วขึ้นโดยไม่ต้องทำใหม่ได้ไหม
หลายครั้งทำได้ บีบอัดและย่อรูป ถอดปลั๊กอินที่ไม่ใช้ เพิ่มแคชและ CDN และใช้ธีมที่เบา แต่ถ้าเว็บสร้างบนตัวสร้างเว็บแบบลากวางที่หนักและมีส่วนเสริมเยอะ การทำใหม่อาจถูกกว่าการปรับจูนไม่รู้จบ