Core Web Vitals และ INP บนเว็บธุรกิจไทยมือถือ

หน้ามือถือของเว็บธุรกิจไทยถูกตัดสินจากสิ่งที่ผู้เข้าชมเห็น และจากสิ่งที่เกิดเมื่อแตะ Google เผยแพร่เกณฑ์ “ดี” สาธารณะสองข้อสำหรับเรื่องนี้ คือ Largest Contentful Paint ไม่เกิน 2.5 วินาที และ Interaction to Next Paint ไม่เกิน 200 มิลลิวินาที ตัวเลขนั้นเป็นเกณฑ์ที่ Google ประกาศ ไม่ใช่คะแนนของเว็บนี้ บทความนี้ไม่แต่งตัวเลข PageSpeed ไม่แต่งเวลาของลูกค้า และไม่อ้างมิลลิวินาทีส่วนตัว งานสร้างหน้าที่ไปถึงเกณฑ์นั้นอยู่ที่ การออกแบบเว็บ บทความนี้ไม่ตั้งราคา

สรุปสั้น: LCP คือจังหวะที่รูปหรือข้อความชิ้นใหญ่สุดบนจอแรกถูกวาดเสร็จ INP คือหน้ารอเท่าใดกว่าจะวาดเฟรมถัดไปหลังแตะหรือกดแป้น ธีมหนัก สไลด์ วิดเจ็ตแชท และรูปที่ยังไม่ย่อ มักเป็นเหตุที่หน้าธุรกิจไทยบนมือถือพลาดเส้น “ดี” สาธารณะของ Google แก้ชิ้น LCP ก่อน แล้วค่อยจัดการสคริปต์ที่ทำให้การแตะค้าง ตรวจที่ข้อมูลภาคสนามใน Search Console หรือบนมือถือจริง อย่าพิมพ์คะแนนแล็บจากความจำ ถ้าเว็บโดนแฮก ให้หยุดและใช้ เช็กลิสต์ 24 ชั่วโมงแรก ถ้าธีมหรือ HTML กำลังจะเปลี่ยน ให้จบ การอัปเกรด WordPress อย่างปลอดภัย ก่อนถือว่าการตรวจความเร็วเสร็จ

LCP คืออะไร

Largest Contentful Paint คือจังหวะที่องค์ประกอบเนื้อหาชิ้นใหญ่สุดในวิวพอร์ตถูกวาดเสร็จ บนหน้าแรกของธุรกิจไทยชิ้นนั้นมักเป็นรูปฮีโร่ แบนเนอร์ หรือหัวเรื่องใหญ่ ไม่ใช่ฟุตเตอร์ และไม่ใช่โลโก้เล็กๆ คือสิ่งที่กินพื้นที่มากสุดบนจอแรกตอนหน้าที่ถูกวาด

เกณฑ์ “ดี” ที่ Google เผยแพร่สำหรับ LCP คือไม่เกิน 2.5 วินาที นิยามนี้ใช้เมื่อมีข้อมูลภาคสนามจาก Chrome User Experience Report เป็นเปอร์เซ็นไทล์ที่ 75 ของการเข้าชมจริง ตามกรอบเวลาที่ Google เผยแพร่สำหรับรายงานนั้น ไม่ใช่คลิกครั้งเดียวในออฟฟิศ เครื่องมือแล็บประมาณ LCP ได้ ค่าประมาณจากแล็บไม่ใช่ป้ายภาคสนาม หน้านี้จะไม่พิมพ์ตัวเลขแล็บ และจะไม่แต่งตัวเลขภาคสนามที่ไม่มีบนจอของคุณ

LCP ช้าแปลว่าสิ่งที่ผู้เข้าชมรออยู่มาช้า รูปใหญ่เกินจอมือถือ รูปอยู่ในสไลด์ที่รอสคริปต์ ธีมโหลดฟอนต์ แล้วไอคอน แล้วแบนเนอร์ เปิดหน้าบนมือถือ ในหน้าต่างส่วนตัว บนเครือข่ายมือถือถ้าทำได้ จดว่าอะไรเต็มจอก่อนเลื่อน รูป หัวเรื่อง หรือเฟรมสไลด์ อย่าเดาจากจอเดสก์ท็อป

INP คืออะไร

Interaction to Next Paint คือหน้ารอเท่าใดหลังแตะ คลิก หรือกดแป้น กว่าจะวาดเฟรมถัดไป มันแทน First Input Delay ในฐานะตัวชี้การตอบสนองของ Core Web Vitals เกณฑ์ “ดี” ที่ Google เผยแพร่สำหรับ INP คือไม่เกิน 200 มิลลิวินาที นั่นเป็นเส้นตัดสาธารณะของข้อมูลภาคสนาม ไม่ใช่ตัวเลขที่บทความนี้วัด อย่าแต่งถ้ากฎรายงานว่าง

INP ดูทั้งการเข้าชม ไม่ใช่แค่การแตะแรก เมนูที่เปิดช้า ฟอร์มที่ไม่ทำอะไรหลังส่ง และปุ่มที่นิ่งขณะสคริปต์แชทยังไม่จบ เป็นปัญหา INP ได้ หน้าหนึ่งอาจวาดฮีโร่เร็ว แล้วค้างเมื่อมีคนแตะ “โทร” LINE หรือสวิตช์ภาษา สคริปต์จากธีม สไลด์ ตัวสร้างหน้า และวิดเจ็ตแชทแย่งเธรดหลัก งานยาวครั้งเดียวบนมือถือแอนดรอยด์ระดับกลางก็พอให้การแตะพลาดเส้น 200 มิลลิวินาทีสาธารณะ หน้านี้จะไม่กล่าวว่าเกินเท่าใด

การแตะไม่ใช่เวลาโหลด

LCP คือการมาถึง INP คือการวาดถัดไปหลังจากขอให้หน้าทำอะไร ฮีโร่ที่เล็กลงอาจดีขึ้นที่ LCP แต่ INP ไม่ขยับ วิดเจ็ตแชทที่เลื่อนการโหลดอาจดีขึ้นที่ INP และไม่แตะฮีโร่ ให้ถือเป็นสองงาน ปลั๊กอินที่อ้างว่าแก้ทั้งคู่ไม่ใช่การวินิจฉัย

ทำไมหน้ามือถือไทยพลาดเส้นสาธารณะ

รูปแบบนี้เป็นโครงสร้าง สี่อย่างโผล่ซ้ำ ไม่ต้องมีแดชบอร์ดส่วนตัวก็อธิบายได้

ธีมหนักและตัวสร้างหน้า

เว็บ SME ไทยจำนวนมากเริ่มจากธีมอเนกประสงค์ ธีมโหลดไลบรารีสไลด์ ฟอนต์ไอคอน ชุดแอนิเมชัน และสไตล์ชีตของตัวสร้างบนทุก URL รวมหน้าติดต่อสั้นๆ ที่ไม่ต้องการสิ่งนั้น แต่ละสคริปต์ทำให้เธรดหลักไม่ว่างขณะฮีโร่ยังมาไม่ถึง และอีกครั้งเมื่อแตะเมนู เว็บไม่ช้าเพราะเป็น WordPress ช้าเพราะมือถือถูกขอให้รันงานที่จอแรกไม่ต้องการ บนสเตจจิ้ง ให้ปิดสไลเดอร์ แกลเลอรี และแอนิเมชันที่ไม่ได้ใช้ ก่อนเพิ่มปลั๊กอินอีกตัว ถ้าบอกชื่อไม่ได้ว่าสคริปต์ทำอะไร มันไม่ควรอยู่เหนือรอยพับ

สไลด์เหนือรอยพับ

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

วิดเจ็ตแชท

LINE แชท Facebook บับเบิลแชททั่วไป และเครื่องมือคุกกี้ ล้วนฉีดสคริปต์ บางตัวเปิดเฟรม ดูการเลื่อน และผูกตัวฟังกับการแตะทุกครั้ง งานนั้นแย่งกับเมนู ลิงก์โทร และฟอร์ม ปุ่มแชทมีประโยชน์ มันไม่ต้องรันก่อนฮีโร่วาดเสร็จ และไม่ต้องรันก่อนการแตะแรก โหลดหลังหน้าว่าง หรือหลังผู้เข้าชมเปิดมัน บนสำเนาทดสอบก่อน เก็บเส้นทางแชทไว้เส้นเดียว หน้าที่โหลด LINE กับผู้ขายแชทที่สอง และแอปส่งข้อความ กำลังทำงานเดียวกันสามครั้ง ถอดสำเนาบนสเตจจิ้ง แตะเมนู แล้วจดว่าอะไรเปลี่ยน อย่าแต่งมิลลิวินาที

รูปที่ยังไม่ย่อ และฟอนต์ไทยที่หนัก

ไฟล์ฮีโร่มักเป็นการส่งออกเดสก์ท็อป JPEG หรือ PNG กว้าง ไม่มีความกว้างและความสูงในมาร์กอัป ไม่มีไฟล์เล็กสำหรับมือถือ บางทีอัปโหลดจากสไลด์นำเสนอ มือถือดาวน์โหลดพิกเซลที่ไม่มีวันแสดง ไฟล์นั้นมักเป็นชิ้น LCP ปลั๊กอินแคชจะไม่ขยับป้าย LCP สาธารณะจนกว่าไฟล์นั้นจะเล็กลงและพอดีวิวพอร์ต ส่งออกรูปขนาดมือถือ ระบุความกว้างและความสูงเพื่อไม่ให้เลย์เอาต์กระโดด ใช้รูปแบบที่โฮสต์เสิร์ฟอยู่แล้ว อย่าเพิ่มปลั๊กอินแปลงรูปในหน้าต่างเดียวกับการเปลี่ยนธีม ถ้ารูปเป็นของตกแต่งและหัวเรื่องคือข้อความ อย่าให้รูปเป็นชิ้นใหญ่สุดบนจอแรก ถ้าหัวเรื่องคือชิ้น LCP ฟอนต์ไทยที่มาช้าอาจกั้นการวาดนั้น ใช้กองฟอนต์ระบบ หรือฟอนต์โฮสต์หนึ่งครอบครัว เฉพาะน้ำหนักที่จอแรกใช้

ควรแก้ก่อนอะไร

ลำดับสำคัญ กองปลั๊กอินที่อ้างว่าปรับแต่ง ทำให้บอกไม่ได้ว่าการเปลี่ยนแปลงไหนขยับจอแรกหรือการแตะ

1. ตั้งชื่อชิ้น LCP บนมือถือ รูป หัวเรื่อง หรือเฟรมสไลด์ จดชื่อไฟล์หรือข้อความ
2. ถ้าเป็นสไลด์ ให้แทนด้วยรูปขนาดพอดีรูปเดียว หรือย้ายสไลด์ออกจากจอแรก บนสำเนา
3. ย่อรูปนั้น ให้ความกว้างและความสูง อย่าอัปโหลดต้นฉบับเดสก์ท็อปซ้ำ
4. เลื่อนหรือถอดสคริปต์แชทและสคริปต์บุคคลที่สามที่รันก่อนการแตะแรก เก็บเส้นทางแชทไว้เส้นเดียว
5. ปิดคุณลักษณะธีมที่โหลดไลบรารีบนทุก URL ทำบนสเตจจิ้ง แล้วเปิดหน้าแรกและหน้าติดต่อ
6. ค่อยดูส่วนที่เหลือของธีม ธีมใหม่ไม่ใช่ขั้นแรก ถ้า HTML กำลังจะเปลี่ยน ให้จบเส้นทางอัปเกรดก่อน เพื่อไม่ให้กำลังวัดหน้าที่กำลังจะถูกแทน

อย่าเริ่มจากภาพหน้าจอ PageSpeed อย่าเริ่มด้วยการติดตั้งปลั๊กอินแคชสามตัว อย่าเปลี่ยนสลักจริง โครงสร้างเพอร์มาลิงก์ หรือรีไดเรกต์ Rank Math ที่มีอยู่ เพราะเครื่องมือความเร็วแนะนำ URL ใหม่ การเปลี่ยนรีไดเรกต์ไม่ใช่การแก้ไวทัล ถ้าเส้นทางสาธารณะต้องย้าย นั่นเป็น 301 คนละงาน ทดสอบครั้งเดียว และอยู่กับบทความอัปเกรด ถ้าเว็บถูกโจมตี อย่าจูนรูปจนกว่าจะกักกันได้ ใช้เช็กลิสต์ 24 ชั่วโมงแรก แล้วค่อยกลับมาที่นี่

ตรวจอย่างไรโดยไม่ใช้แล็บ

แล็บคือมือถือจำลองบนเดสก์ท็อป ใช้หรือไม่ใช้ก็ได้ มันไม่ใช่แหล่งที่มาของเส้น “ดี” สาธารณะของ Google ข้อมูลภาคสนามคือสิ่งที่ Search Console ใช้เมื่อติดป้าย URL ถ้าไม่มีข้อมูลภาคสนาม ให้พูดอย่างนั้น อย่าเติมช่องว่างด้วยตัวเลขที่พิมพ์เอง

Search Console บนมือถือ

เปิดรายงาน Core Web Vitals ของพร็อพเพอร์ตีที่ครอบโฮสต์จริง เลือกมือถือ อ่านกลุ่มที่ Google แสดงเทียบกับเกณฑ์ที่เผยแพร่ เปิด URL ที่สนใจ แล้วจดว่าจอบอกอะไรเกี่ยวกับ LCP และ INP ถ้าอังกฤษและไทยเป็นสาธารณะทั้งคู่ ให้ตรวจอย่างละ URL อย่าคิดว่าพร็อพเพอร์ตีแบบ prefix เดียวครอบทั้งสอง อย่าขอจัดทำดัชนีเพื่อรีเฟรชป้ายไวทัล ปุ่มนั้นไม่เขียนข้อมูลภาคสนามใหม่ ถ้ารายงานยังไม่มีข้อมูล เว็บยังไม่มีการเข้าชม Chrome ในกลุ่มตัวอย่างสาธารณะมากพอ การไม่มีนั้นเป็นข้อเท็จจริง ไม่ใช่คะแนนเต็ม และไม่ใช่ตัวเลขความล้มเหลว ใช้การตรวจบนมือถือ อย่าแต่งเปอร์เซ็นไทล์

มือถือจริง ไม่ใช่ภาพหน้าจอ

โหลดหน้าแรกบนมือถือ บนเครือข่ายที่ลูกค้าใช้ได้ ในหน้าต่างส่วนตัว จดว่าเมื่อใดรูปหลักหรือหัวเรื่องของจอแรกปรากฏ แตะเมนู สวิตช์ภาษา ลิงก์โทร และปุ่ม LINE ถ้าหน้านิ่งหลังแตะ นั่นคืองาน INP แม้รายงานจะยังไม่มี ทำซ้ำครั้งหนึ่งหลังล้างแคช จดไฟล์หรือวิดเจ็ตที่เปลี่ยน ไม่ใช่มิลลิวินาทีที่แต่งขึ้น

PageSpeed Insights อาจแสดงส่วนภาคสนามและส่วนแล็บ อ่านส่วนภาคสนามถ้ามี อย่าสนใจวงกลมแล็บถ้าจะนำตัวเลขไปวางในรายงาน บทความนี้จะไม่อ้างคะแนนแล็บ และคุณก็ไม่ควรแต่ง ค่าแล็บเป็นเพียงคำใบ้ว่าไฟล์ไหนใหญ่ ไม่ใช่หลักฐานว่าถึงเส้นสาธารณะ 2.5 วินาที หรือ 200 มิลลิวินาทีแล้ว

บทความนี้จะไม่ทำอะไร

• แต่งคะแนน PageSpeed เวลาของลูกค้า หรือหลักฐานมิลลิวินาทีส่วนตัว
• ตั้งราคา ตัวเลขที่เผยแพร่อยู่ที่หน้าบริการ หน้านี้ถือลำดับงาน
• ถือปลั๊กอินแคชเป็นตัวแทนของรูป LCP ที่เล็กลง และการแตะแรกที่เงียบลง
• เปลี่ยนสลักจริงหรือรีไดเรกต์ Rank Math ที่มีอยู่ เพื่อความเร็ว
• ล้างเว็บที่โดนแฮก หรือแทนที่การอัปเกรดที่วางไว้ งานนั้นมาก่อนถ้าเป็นงานจริง

ลำดับนั้นคืองาน มันอยู่ข้าง การออกแบบเว็บ หน้านี้ไม่เสนอราคา

คำถามที่พบบ่อย

LCP และ INP ที่ถือว่าดีคือเท่าใด?

เกณฑ์ “ดี” ที่ Google เผยแพร่คือ LCP ไม่เกิน 2.5 วินาที และ INP ไม่เกิน 200 มิลลิวินาที เป็นเส้นตัดสาธารณะของข้อมูลภาคสนาม ไม่ใช่คะแนนจากหน้านี้ และไม่ใช่ตัวเลขที่ควรแต่งถ้า Search Console ไม่มีอะไรให้ดู

ทำไมสไลด์และวิดเจ็ตแชทถึงสำคัญบนหน้ามือถือไทย?

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

ใช้ตัวเลขแล็บ PageSpeed แทน Search Console ได้ไหม?

ไม่ได้ แล็บเป็นการจำลอง เส้น “ดี” สาธารณะของ Google สำหรับตัวชี้เหล่านี้ใช้ข้อมูลภาคสนามเมื่อมีข้อมูลนั้น อ่านรายงาน Core Web Vitals มือถือ หรือส่วนภาคสนามถ้าเครื่องมือแสดง ถ้าว่าง ให้พูดอย่างนั้น อย่าพิมพ์คะแนนแล็บลงรายงานราวกับเป็นป้ายสาธารณะ

ควรรู้อะไรก่อนเปลี่ยนธีม?

ตั้งชื่อชิ้น LCP บนมือถือ แทนสไลด์จอแรกด้วยรูปขนาดพอดีรูปเดียว ย่อรูปนั้น เลื่อนสคริปต์แชทส่วนเกิน ปิดไลบรารีธีมที่ไม่ได้ใช้บนสเตจจิ้ง ธีมใหม่ทีหลัง และหลังอัปเกรดอย่างปลอดภัยถ้า HTML กำลังจะเปลี่ยน ถ้าเว็บโดนแฮก ให้กักกันก่อน

ราคาอยู่ที่ไหน และต่างจากบทความอัปเกรดกับเว็บโดนแฮกอย่างไร?

ไม่ได้อยู่ที่นี่ เราไม่ตั้งค่าธรรมเนียม และไม่พิมพ์คะแนน วันแรกหลังถูกแฮกเป็นอีกบทความ การอัปเกรด WordPress อย่างปลอดภัยเป็นบทความเรื่องสำรองข้อมูล สเตจจิ้ง และรีไดเรกต์ หน้านี้คือลำดับการตรวจไวทัล ตั้งชื่อ LCP ทำให้การแตะเงียบ แล้วอ่านข้อมูลภาคสนามหรือมือถือจริง บทสนทนาเรื่องออกแบบอยู่ที่หน้าออกแบบเว็บ