Core Web Vitals: วิธีแกปัญหา INP และสคริปต์ภายนอกเว็บ
เผยวิธีแก้ปัญหา INP ของ Core Web Vitals โดยไม่ต้องเปลี่ยนโฮสติ้ง แต่เน้นการตรวจสอบและจัดการสคริปต์ภายนอกที่ทำให้เว็บช้า
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- คะแนน INP แย่มักไม่ได้มาจากเซิร์ฟเวอร์ แต่เกิดจากสคริปต์ภายนอก
- โฆษณาและสคริปต์คิดเป็นสัดส่วนใหญ่ของภาระ JavaScript ในเบราว์เซอร์
- การย้ายโฮสติ้งไม่ช่วยแก้ปัญหา INP ตราบใดที่ Main Thread ยังถูกบล็อก
- การปรับแต่งสคริปต์ภายนอกช่วยแก้ปัญหาได้ภายในหนึ่งสปินต์โดยไม่ต้องย้ายเซิร์ฟเวอร์
เมื่อคะแนน Core Web Vitals ตกลงในแถบสีแดง การสนทนาในห้องประชุมมักจบลงที่การเปลี่ยนโฮสติ้ง เพิ่มแรม หรือย้ายไปใช้ VPS แต่หลังจากย้ายระบบเรียบร้อยและค่าใช้จ่ายเพิ่มขึ้น ตัวเลข INP บน Search Console ก็ยังคงแย่เหมือนเดิม ปัญหานี้พบได้บ่อยในโครงการประเภทตกแต่งภายใน งานก่อสร้าง และบริการท้องถิ่น โดยคู่มือการตรวจสอบจาก Search Engine Journal ยืนยันตรงกันว่า ต้นเหตุที่แท้จริงไม่ใช่เซิร์ฟเวอร์ แต่เป็นโค้ดที่รันอยู่ในเบราว์เซอร์ของผู้ใช้งาน
จากข้อมูลเชิงลึกของ adPerf เผยว่าเนื้อหาจากบุคคลที่สามอย่างโฆษณาคิดเป็นสัดส่วนมากกว่า 15% ของภาระการโหลดหน้าเว็บ และราว 88% ของภาระนั้นหมดไปกับ JavaScript ซึ่ง JavaScript นี่เองที่เป็นตัวการบล็อก Main Thread โดยตรง ซึ่งเป็นจุดที่ใช้คำนวณค่า INP เจ้าของธุรกิจจำนวนมากเสียเงินไปกับโครงสร้างพื้นฐานที่ใช้งานได้ดีอยู่แล้ว ขณะที่แท็กการตลาดฟรีสามตัวกลับสูบงบประมาณการตอบสนองของเว็บไซต์ไปจนหมด
ข่าวดีคือปัญหาสามารถแก้ไขได้ภายในหนึ่งสปินต์โดยไม่ต้องย้ายข้อมูลแม้แต่ไบต์เดียวไปยังเซิร์ฟเวอร์ใหม่ INP ทำหน้าที่วัดความเร็วในการตอบสนองต่อการโต้ตอบของผู้ใช้งาน ไม่ใช่ความเร็วที่เซิร์ฟเวอร์ส่งไฟล์ HTML ตราบใดที่แท็กแมเนเจอร์ วิดเจ็ตแชท พิกเซลโฆษณา และวิดีโอฝัง ยังคงรบกวน Main Thread การอัปเกรดเซิร์ฟเวอร์จึงเป็นการย้ายคอขวดเท่านั้น
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ความเข้าใจผิดที่พบบ่อยคือการคิดว่าทั้งสามเมตริกของ Core Web Vitals วัดสิ่งเดียวกัน แต่แท้จริงแล้ว LCP และ INP อยู่คนละโลก LCP เกี่ยวข้องกับเครือข่ายและสินทรัพย์ ส่วน INP เกี่ยวข้องกับสถาปัตยกรรม JavaScript เซิร์ฟเวอร์ที่เร็วขึ้นส่ง HTML ได้เร็วขึ้น แต่ไม่ได้หยุดไม่ให้ Main Thread ยุ่งเหยิง นี่คือจุดที่สคริปต์ภายนอกส่งผลกระทบต่อ INP อย่างชัดเจน
"สาเหตุไม่ใช่เซิร์ฟเวอร์ แต่คือโค้ดที่ทำงานในเบราว์เซอร์ของผู้เข้าชม"
Search Engine Journal
ขั้นตอนการตรวจสอบเริ่มต้นด้วยข้อมูลจริงจาก Search Console ตรงหัวข้อ Core Web Vitals ไปที่รายงาน INP แล้วคลิกเจาะจงไปยัง URL ที่มีปัญหา เช่น หน้าติดต่อ หน้าแคตตาล็อกที่มีตัวกรอง และหน้าชำระเงิน ซึ่งมักเป็นจุดเกิดเหตุบ่อยครั้ง จากนั้นใช้เครื่องมือ DevTools เพื่อแยกแยะสคริปต์ภายนอกออกจากโค้ดภายในเว็บไซต์
การวิเคราะห์เชิงลึกชี้ให้เห็นว่าสคริปต์ภายนอกมักถูกเพิ่มเข้ามาผ่านการประชุมฝ่ายการตลาดโดยไม่มีการตรวจสอบผลกระทบด้านประสิทธิภาพ การทำความเข้าใจความแตกต่างระหว่างข้อมูลจำลองจาก Lighthouse และข้อมูลจริงจาก CrUX ช่วยให้ทีมพัฒนาสามารถมุ่งเป้าไปที่การแก้ไขปัญหาได้อย่างตรงจุด แทนที่จะเสียเวลาไปกับการปรับแต่งโครงสร้างเซิร์ฟเวอร์ที่ไม่ใช่ต้นเหตุ
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น