Skooldio-fid-fcp
Technology

ค่า 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 วินาที

Skooldio-pagespeed-score-boost-up

การที่จะได้มาซึ่งค่า 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

Skooldio-fid

โดยสิ่งที่ต้องแก้เพื่อลดค่า 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

 

You may also like

ภาษา Scala คืออะไร
Technology

ภาษา Scala มีจุดเด่นอะไร? ทำไมกำลังมาแรงในสาย Developer และ Data Engineer

Scala คือ ภาษา Programming ที่กำลังมาแรงและเริ่มมีความนิยมใช้กันขึ้นเรื่อย ๆ จุดเริ่มต้นภาษา Scala เรียกได้ว่าเป็นลูกอีกคนหนึ่งของภาษา Java เช่นเดียวกับภาษา Kotlin ที่พัฒนาต่อยอดมาเพื่อแก้ไขข้อบกพร่องบางอย่างของภาษา Java ในจุดประสงค์ที่แตกต่างกัน ...
Software Architecture
Technology

3 Software Architecture Design ที่นิยมใช้พัฒนาระบบซอฟต์แวร์ขนาดใหญ่

ในการออกแบบซอฟต์แวร์ขนาดใหญ่ในองค์กร มักจะมีการทำงานร่วมกันโดยคนจำนวนมาก หากเราต่างคนต่างเขียนซอฟต์แวร์ไปในทางที่ตัวเองเห็นว่าดี ซอฟต์แวร์ที่แต่ละคนทำก็อาจจะทำงานร่วมกันไม่ได้หรือมีปัญหาตอนที่ Integrate เป็น Solution ใหญ่ ดังนั้น การทำซอฟต์แวร์ในระดับนั้นจึงจำเป็นต้องมีการแบ่งสันปันส่วน และมีการออกแบบ Software Architecture เพื่อให้ทำงานร่วมกันได้ดีและมองเห็นภาพรวมไปในทางเดียวกัน ทั้งระหว่างนักพัฒนาในทีมพัฒนากันเอง ...

More in:Technology

Technology

พร้อมแล้วหรือยัง!? ที่จะร่วมเดินทางเข้าสู่มิติคู่ขนาน ผ่านนิทรรศการออนไลน์สุดพิเศษ “Exclusive CO’XI” 

ปฏิเสธไม่ได้เลยกับคำว่า “Multiverse” หรือพหุจักรวาล ต้องเคยผ่านหูผ่านตากันมาบ้าง และอาจ ทำให้ใครหลาย ๆ คนจินตนาการถึงความแปลกใหม่ในอีกจักรวาลที่ขนานกับจักรวาลที่เราอยู่ในปัจจุบัน ซึ่งความแปลกใหม่นั้นอาจจะหมายถึงคน, สิ่งของ และรวมไปถึงนวัตกรรมใหม่ ๆ ที่เราไม่เคยเจอหรือไม่เคยมีมาก่อน เช่นเดียวกันกับ “Exclusive ...
Technology

12 ทักษะ Technical skills และ Soft skills ที่ Programmer ควรเรียนรู้

สำหรับ Programmer นอกจากทักษะการเขียนโค้ด หรือ ภาษาเขียนโปรแกรมจะเป็นทักษะสำคัญที่โปรแกรมเมอร์ต้องมีแน่นอนอยู่แล้ว ยังมีทักษะอื่น ๆ ที่สำคัญในเชิงการทำงานเป็นทีมในระดับองค์กรทั้ง Technical skill และ Soft skill ต่าง ๆ ...

Comments are closed.