ค่า FCP, FID สูง ความเสี่ยงต่อ UX ที่คนเขียนเว็บต้องระวัง

หลังจากที่เราได้รู้วิธีการวัดความเร็วของเว็บไซต์ด้วย PageSpeed Insights (สำหรับใครยังไม่เคยอ่านสามารถคลิกได้ที่นี่) วันนี้เราจะมาพูดถึงเรื่องของ error ที่ทำให้เว็บไซต์โหลดช้าซึ่งพบเจอได้บ่อยๆ นั่นคือค่า FCP และ FID ที่หลายคนอาจจะพอผ่านตากันมาบ้างแล้ว แต่ในบทความนี้เราจะพามาเจาะลึก error ทั้งสองว่ามีความสำคัญอย่างไรต่อการ optimize เว็บไซต์ รวมถึง score ของ FCP และค่า FID ที่เหมาะสม ควรมีค่าเป็นเท่าไร

FCP (First Contentful Paint)

อธิบายอย่างง่ายคือเป็นค่าที่บอกว่าใช้เวลากี่วินาทีกว่า element แรกจะแสดงผลขึ้นมา ซึ่งมีผลมากต่อประสบการณ์การใช้งาน เนื่องจากถ้า FCP สูงนั่นหมายความว่า element แรกก็จะใช้เวลาโหลดค่อนข้างนาน ทำให้ user ต้องค้างในหน้าโหลดนาน โดยหน้าเว็บปกติจะเริ่มโหลดจากหน้าขาวๆ แล้วค่อยๆ เติมที่ละชิ้นสองชิ้น เพื่อเติมให้ element นั้นเต็มหน้า โดยที่กระบวนการเหล่านี้ก็จะโหลดไล่ไปตั้งแต่ HTML JavaScript ไปจนถึง CSS 

ด้วยความที่ค่า FCP เกี่ยวข้องโดยตรงกับ element แรก จึงส่งผลต่อความรู้สึกของผู้ใช้งานค่อนข้างมาก หากเราปล่อยให้ผู้ใช้งานค้างอยู่ที่หน้าเว็บขาวโพลนนานเกินไป ก็อาจเรียกได้ว่าเป็นการสอบตกเรื่อง first impression ได้ง่ายๆ เลยทีเดียว

โดยปกติแล้ว element แรกที่โหลดขึ้นมาก็จะเกิดจากการโหลด HTML ปัญหาของค่า FCP ที่สูงมีต้นเหตุมาจากหลายอย่าง เพราะค่า FCP เป็นค่าที่เป็นปลายทางแล้วของการทำงาน ปัญหาแรกๆ อาจจะเป็นเรื่องของ server ก็ได้ ถ้า server ช้าก็อาจจะทำให้หน้าเว็บโหลดช้าด้วย หรือบางที HTML CSS ที่เราใช้อยู่มีขนาดใหญ่ก็อาจจะส่งผลต่อค่า FCP ด้วยเช่นกัน รวมถึงรูปหน้าเว็บไซด์ก็มีผลต่อค่า FCP อีกด้วยเราอาจจะต้องค่อยๆ นั่งไล่แก้ไปที่ละส่วน โดยช่วงเวลาที่ FCP ควรจะเป็นนั้นเป็นค่าตามรูปด้านล่าง เห็นได้ว่า ถ้าค่า FCP เราอยู่ระหว่าง 0-2 วินาที จะดีที่สุด ฉะนั้นแล้วเราควรทำให้ค่า FCP เหลือน้อยกว่า 2 วินาที

การที่จะได้มาซึ่งค่า FCP ที่ต่ำกว่า 2 วินาทีอาจจะไม่ได้ง่ายนัก ดังที่กล่าวไปว่าตัวแปรที่ส่งผลต่อค่า FCP มีค่อนข้างมาก โดยสิ่งที่มักต้องจัดการเมื่อค่า FCP ต่ำ ได้แก่ Eliminate render-blocking resources, Minify CSS, Reduce unused CSS, Preconnect to required origins เป็นต้น

FID (First Input Delay)

อาการของการที่ JavaScript บนเว็บยังรันไม่เสร็จ โดยปกติแล้ว browser ตอนที่เปิดเว็บขึ้นมา browser จะพยายามที่จะ complie code JavaScript ก่อนทั้งหมดก่อนที่จะให้ user กดใช้งานได้ ตอนระหว่างที่ user กำลัง complie อยู่ browser จะทำการ block ไม่ให้สามารถกดเพื่อทำงานได้ ซึ่งเวลาที่ block นี่แหละคือ First Input Delay คือ block ไปจนกระทั่ง browser จะยอมปล่อยให้ user สามารถกดเพื่อทำงานได้ในครั้งแรก

สิ่งที่เกิดขึ้นในปัจจุบันคือการที่เว็บไซต์ใส่ CSS JavaScript เยอะมาก เพื่อให้มีลูกเล่น ตัว browser ก็จำเป็นที่จะต้องใช้กำลังมหาศาลด้วยในการที่จะ complie เว็บออกมา นอกจากนี้ยังใช้ CPU มากขึ้นอีกด้วย จุดที่เป็นคอขวดสำคัญคือ browser นั้นเป็น single core CPU หมายความว่าไม่ว่าเครื่องจะแรงแค่ไหน browser ก็จะใช้ CPU เพียง 1 core ในการรันเว็บเพจ ซึ่งส่งผลให้ browser ก็ส่งผลเต็มกำลังในการ complie JavaScript เช่นกัน

โดยปกติแล้วเวลาของ FID ที่เหมาะสมคือ 0-100 Milliseconds นอกจากนี้ช่วงเวลาอื่นจะเป็นไปตามด้านล่างเลย โดยที่เราไม่ควรที่จะให้เวลานั้นเกิน 300 Milliseconds

โดยสิ่งที่ต้องแก้เพื่อลดค่า FID ได้แก่ปัญหาเหล่านี้ Reduce the impact of third-party code, Reduce JavaScript execution time, Minimize main-thread work และ Keep request counts low and transfer sizes small

นี่เป็นเพียงแค่สอง error ที่พบได้บ่อยเมื่อเราลองนำเว็บไซต์ไปวัด score บน PageSpeed Insights ยังมีอีกหลาย error ที่ส่งผลต่อ performance ของเว็บไซต์ หากเว็บไซต์ของคุณกำลังประสบปัญหาโหลดได้ช้า ยังจัดการกับค่า FCP, FID และ error อื่นๆ ได้ไม่ดีพอ ทาง Skooldio ขอแนะนำคอร์สใหม่ PageSpeed Score Boost Up คอร์สเรียนที่ออกแบบมาเพื่อช่วยให้คุณแก้ไขปัญหาได้อย่างตรงจุดไม่ว่าเว็บไซต์ของคุณกำลังติดปัญหาอะไร สิ่งที่สำคัญกว่าการแก้ปัญหาทีละจุดคือการที่คุณจะได้เห็นภาพกว้างและลงลึกรายละเอียดทุกองค์ประกอบที่ส่งผลต่อ performance ทำให้เข้าใจ best practice ในการเขียนเว็บไซต์ คอร์สเรียนสอนโดยผู้เชี่ยวชาญตัวจริงอย่าง คุณตั้ง วรัทธน์ วงศ์มณีกิจ Co-Founder & Chief Product Officer at Wisesight และ Google Developers Expert ด้าน Web Technologie