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

Kotlin จะมาแทนที่ Java หรือไม่ ทำไม Google เลือก Kotlin เป็นภาษาหลักในการพัฒนา Android - Skooldio Blog | รูปหน้าปก
Technology

ทำไมภาษา Kotlin ถึงเป็นภาษาหลักในการพัฒนา Android? และ Kotlin จะมาแทนที่ Java หรือไม่?

ทำไมภาษา Kotlin ถึงเป็นภาษาแห่งอนาคตของนักพัฒนา Android อะไรคือเหตุผลที่ Google ประกาศรับรองให้ Kotlin เป็นภาษาหลักในการพัฒนา Android และ Kotlin จะมาแทนที่ Java หรือไม่.. ...
Business

อยากเป็นสาย Data เก่ง ๆ ต้องฝึก! 6 ทักษะช่วย Data Scientist ทำงานปัง

บทความจาก Harvard Business Review ชวนเราขบคิดถึงปัญหาของ Data Scientist ในองค์กรใหญ่ เมื่อถึงเวลาที่ต้องนำเสนอข้อมูล บ่อยครั้งที่ Data Scientist ต้องกุมขมับ เพราะไม่รู้จะพูดอย่างไรให้ผู้บริหารเข้าใจ บางครั้งเห็นข้อมูลสำคัญมากอยู่ตรงหน้า ...

More in:Technology

Technology

Kotlin ภาษาแห่งอนาคตของนักพัฒนา Android

Kotlin เป็นหนึ่งในภาษา Programming ที่กำลังได้รับความนิยมอย่างมากในวงการ ซึ่งผลสำรวจจาก JetBrains ในเดือนธันวาคม ปี 2019 พบว่ามีนักพัฒนาจำนวน 4 ล้านคนกำลังใช้ Kotlin จากผลสำรวจของ 2020 ...
จาก React Developer สู่การทำ Flutter Developer | Skooldio Blog Technology

จาก React Developer สู่การทำ Flutter Developer

ในช่วง 2 – 3 ปีมานี้นักพัฒนาหรือผู้ที่มีความสนใจในเทคโนโลยีหลายๆ คนคงจะเคยได้ยินหรือได้รู้จักสิ่งที่เรียกว่า Flutter มาบ้างแล้ว ผมเองก็เป็นหนึ่งในนั้นที่ได้รู้จักกับ Flutter มาซักพักแล้วแต่ไม่ได้มีโอกาสศึกษาและทำความเข้าใจมันสักที จนเมื่อไม่นานมานี้ ได้มีโอกาสได้ศึกษาเจ้า Flutter และนำมาใช้ในการพัฒนาแอปพลิเคชันๆ ...
6 Apps using Flutter Technology

6 บริษัทยักษ์ใหญ่ที่เลือกใช้ Flutter พัฒนาแอปฯ

เทคโนโลยีทีก้าวหน้าไปอย่างรวดเร็ว การพัฒนาแอปพลิเคชั่นที่เริ่มจากแบบ native คือพัฒนาไปทีละแพลตฟอร์ม หรือต้องมีหลายทีมในการพัฒนาแอปพลิเคชันเพียงตัวเดียว ก็ถูกพัฒนามาอย่างต่อเนื่อง โดยเฉพาะ framework สำหรับพัฒนาแอปฯ ที่เริ่มก้าวกระโดดมากขึ้น ด้วยการมีสิ่งที่เรียนกว่า Cross-Platform Application Framework มานั่นเอง ...
4 ข้อดีของการพัฒนาแอปพลิเคชันด้วย Flutter | Skooldio Blog Technology

4 ข้อดีของการพัฒนาแอปพลิเคชันด้วย Flutter

ปัจจุบันนี้ Application เป็นส่วนหนึ่งที่มีผลต่อการทำธุรกิจ เนื่องจากการที่เรามี Application นั้นจะช่วยเพิ่มความสะดวกสบายให้กับลูกค้าในการใช้บริการต่างๆ และยังเพิ่มช่องทางในการติดต่อลูกค้าสำหรับแบรนด์ของเราอีกด้วย ซึ่งส่งผลให้ลูกค้านั้นสามารถจดจำเราได้มกายิ่งขึ้น แต่ว่าธุรกิจในยุคนี้จำเป็นที่จะต้องแข่งกับความเร็ว เนื่องจาก Requirement (ความต้องการ) ของ User เปลี่ยนไปในทุกๆวัน  ...

Comments are closed.