First Input Delay (FID): มันคืออะไร & วิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณสำหรับมัน

การมอบประสบการณ์ที่รวดเร็วแก่ผู้เข้าชมมีความสำคัญต่อความสำเร็จของไซต์ของคุณ อย่างไรก็ตาม มีหลายวิธีในการวัดว่ามันทำได้ดีเพียงใด หนึ่งในนั้นคือ First Input Delay (FID) ซึ่งวัดระยะเวลาเป็นมิลลิวินาที (ms) ระหว่างเวลาที่ผู้ใช้โต้ตอบกับไซต์ของคุณในครั้งแรกและเมื่อเบราว์เซอร์ของพวกเขาตอบสนองต่อการกระทำนั้น

ในโพสต์นี้ เราจะอธิบายว่า FID คืออะไรและจะวัดได้อย่างไร นอกจากนี้ เรายังจะหารือกันว่าคะแนน FID ที่ดีคืออะไร และแนะนำวิธีเพิ่มประสิทธิภาพคะแนนของคุณ สุดท้ายนี้ เราจะปิดท้ายด้วยคำถามที่พบบ่อย มาเริ่มกันเลย!

สมัครสมาชิกช่อง Youtube ของเรา

First Input Delay (FID) คืออะไร?

ดังที่เราได้กล่าวไปแล้ว FID (บางครั้งเรียกว่า "เวลาในการตอบสนองของอินพุต") คือการวัดเวลาเป็นหน่วยมิลลิวินาทีที่เกิดขึ้นเมื่อผู้เข้าชมโต้ตอบกับไซต์ของคุณและเมื่อเบราว์เซอร์ตอบสนอง เป็นตัวชี้วัดที่สำคัญที่รวมอยู่ในรายงานประสบการณ์ผู้ใช้ Chrome นอกจากนี้ยังเป็นหนึ่งใน Core Web Vitals สิ่งเหล่านี้คือตัวชี้วัดที่ Google ใช้เพื่อกำหนดคุณภาพของ UX ของเว็บไซต์ของคุณ (และในทางกลับกันคืออันดับของหน้า)

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

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

แม้ว่าไซต์ของคุณจะมี FCP และ LCP ที่มั่นคง แต่ First Input Delay ก็อาจนานพอที่จะทำให้เกิดการตีกลับ พวกเขารู้สึกเหมือนกับว่าเว็บไซต์ของคุณไม่ตอบสนองและช้า

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

วิธีการวัด FID

ก่อนที่คุณจะเริ่มปรับคะแนน FID ให้เหมาะสม คุณจำเป็นต้องรู้ว่าคะแนน FID ของคุณอยู่ที่ใด ตามหลักการแล้ว เพื่อมอบประสบการณ์การใช้งานที่ดีแก่ผู้ใช้ (UX) คุณจะต้องให้คะแนน FID ของคุณต่ำกว่า 100 มิลลิวินาที

คะแนน 100 ms หรือน้อยกว่านั้นถือว่า ดี ในขณะที่คะแนนระหว่าง 100 ถึง 300 ms นั้นยังมีช่องว่างสำหรับการปรับปรุง คะแนน FID ที่สูงกว่า 300 ms นั้น แย่

ในการวัด FID ของคุณ คุณสามารถใช้ Google PageSpeed ​​Insights:

นี่เป็นเครื่องมือฟรีจาก Google ที่จะทดสอบประสิทธิภาพของเว็บไซต์ของคุณได้หลายวิธี ด้วยข้อมูลนี้ คุณสามารถสังเกตเมตริกหลักต่างๆ รวมทั้ง FID

โปรดทราบว่าบางครั้ง FID อาจทำได้ยาก นั่นเป็นเพราะมันต้องมีการป้อนข้อมูลของผู้ใช้ อย่างไรก็ตาม ตราบใดที่คุณมีการโต้ตอบของผู้ใช้บนไซต์ของคุณเมื่อเร็วๆ นี้ คุณควรจะสามารถค้นหาเมตริกนี้ผ่าน PageSpeed ​​Insights

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

คุณสามารถค้นหาเมตริก First Input Delay (FID) ได้ ในส่วน ข้อมูลฟิลด์ ในส่วน โอกาส ที่ต่ำกว่าเล็กน้อย คุณจะพบคำแนะนำสำหรับการเพิ่มประสิทธิภาพหน้าเว็บและคะแนนของคุณ

เราต้องการทราบด้วยว่า Google กำหนดให้คะแนนเหล่านี้เป็น ข้อมูลภาคสนาม ซึ่งหมายความว่าข้อมูลนั้นอิงจากการโต้ตอบของผู้ใช้จริง ไม่ใช่การทดสอบจำลอง (ซึ่งเรียกว่า ข้อมูลห้องปฏิบัติการ หรือพบผ่าน เครื่องมือในห้องปฏิบัติการ ) FID ค่อนข้างเป็นอัตวิสัยและเชื่อมโยงอย่างใกล้ชิดกับการโต้ตอบจริงของผู้ใช้ ดังนั้นการตรวจสอบให้แน่ใจว่าคุณใช้ข้อมูลภาคสนามเป็นสิ่งสำคัญ การจำลองสามารถอธิบายได้มากเท่านั้น

วิธีเพิ่มประสิทธิภาพคะแนน FID ของคุณ

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

เพิ่มประสิทธิภาพและลดขนาดโค้ด CSS และ JavaScript ของคุณ

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

ผู้ใช้ Divi ควรรู้ด้วยว่าธีมจะย่อขนาด HTML, JavaScript และ CSS โดยอัตโนมัติตั้งแต่เริ่มต้น เพียงเปิดใช้งานธีมจะบีบอัดโค้ดทั้งหมดนี้เพื่อให้ FID ของคุณอยู่ในตำแหน่งที่ดีขึ้นกว่าเดิม

หากคุณไม่ใช่ผู้ใช้ Divi คุณมีตัวเลือกสองสามทางในการย่อโค้ดของคุณ วิธีที่รวดเร็วและง่ายดายในการทำเช่นนี้คือการใช้เครื่องมือออนไลน์ เช่น Minify Code คัดลอกโค้ดขนาดเต็มของคุณ วางลงในไซต์ ไซต์ย่อให้เล็กลง จากนั้นคุณคัดลอก/วางผลลัพธ์กลับเข้าไปในไซต์ของคุณ

คุณยังสามารถย่อโค้ดของคุณด้วยตนเองโดยใช้ตัวแก้ไขโค้ด แม้ว่าจะซับซ้อนกว่านี้เล็กน้อยก็ตาม อย่างไรก็ตาม หากคุณมีประสบการณ์ในการทำงานกับโค้ด วิธีนี้จะช่วยให้คุณควบคุมได้มากขึ้น

อีกกลยุทธ์หนึ่งคือการใช้ปลั๊กอินเช่น Autoptimize หรือ W3 Total Cache (หรืออย่างอื่นจำนวนเท่าใดก็ได้)

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

แบ่งงาน JavaScript ยาวๆ ออกเป็นงานเล็กลง

งานที่ยาวนานมักจะบล็อกเธรดหลัก และอาจส่งผลให้ JavaScript ขยายใหญ่ขึ้น ซึ่งส่งผลกระทบต่อการตอบสนองของไซต์ของคุณ เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น และปรับปรุงคะแนน FID ของคุณในกระบวนการ คุณสามารถลองแบ่งงานเหล่านี้ออกเป็นงานที่เล็กลงและไม่ตรงกัน

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

ผู้ใช้ Divi จะได้รับประโยชน์ในด้านนี้เช่นกัน เนื่องจากการอัปเดตประสิทธิภาพครั้งใหญ่จะแยกไลบรารี JavaScript ขนาดใหญ่ของธีมออกจากกัน และโหลดเฉพาะเมื่อจำเป็นเท่านั้น สิ่งนี้ควรลด FID ในไซต์ Divi เกือบทั้งหมด ธีม WordPress มักจะมาพร้อมกับไลบรารี JS ของตนเอง และผู้ใช้อาจไม่มีความเชี่ยวชาญหรือสิทธิ์ในการแยกโค้ดออกจากกันและเพิ่มประสิทธิภาพด้วยตนเอง เราต้องการทำให้สิ่งนั้นไม่ใช่ปัญหากับ Divi

ลดผลกระทบของรหัสบุคคลที่สามและสคริปต์ที่ไม่สำคัญ

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

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

คุณยังสามารถดูที่ส่วน โอกาส ของรายงาน PageSpeed ​​Insights เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการลด JavaScript และ CSS ที่ไม่ได้ใช้:

หากคุณคลิกเพื่อขยายส่วนใดๆ เหล่านี้ ระบบจะแสดงรายการไฟล์และงานเฉพาะที่อาจบล็อกเธรดหลักของคุณ คุณยังค้นหา JavaScript และ CSS ที่ไม่ได้ใช้ได้โดยใช้ Chrome DevTools

ในหลายกรณี ทรัพยากร "การบล็อกการแสดงผล" เหล่านี้จะหยุดการโหลดหน้าเว็บอย่างรวดเร็ว ซึ่งส่งผลต่อ FID ของคุณด้วย การลบและ/หรือการเลื่อนออกไปไม่เพียงแต่ปรับปรุงการโต้ตอบของไซต์ของคุณเท่านั้น แต่ยังปรับปรุงการตอบสนองและความเร็วที่รับรู้อีกด้วย

Divi มีการสลับเพื่อเลื่อนสคริปต์ที่ไม่สำคัญเช่นนี้ ในตัวเลือกธีม คุณสามารถเลือกที่จะเลื่อนสคริปต์ jQuery และใช้การเลื่อนเวลา CSS แบบอินไลน์ ซึ่งเมื่อรวมกับคุณลักษณะ Critical CSS ของธีมจะลบ CSS ที่บล็อกการแสดงผล ทั้งหมด คุณยังสามารถสลับการเลื่อนเวลาสไตล์ชีตของตัวแก้ไข Google Fonts และ Gutenberg ได้อีกด้วย สิ่งเหล่านี้ถูกมองว่าเป็น "การปิดกั้นการแสดงผล" ดังนั้นสมาชิก Elegant Themes จะเห็นคะแนน FID ที่ปรับปรุงเกือบจะในทันที

First Input Delay (FID) คำถามที่พบบ่อย

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

FID เหมาะสมกับประสิทธิภาพโดยรวมของเว็บไซต์ของฉันอย่างไร

โดยพื้นฐานแล้ว FID จะวัดการโต้ตอบครั้งแรกที่ผู้เข้าชมมีกับเว็บไซต์ของคุณ เป็นทั้งเมตริกเชิงปริมาณและเมตริกที่รับรู้ เนื่องจากส่งผลต่อการแสดงผลครั้งแรกของผู้ใช้กับไซต์ของคุณ คุณสามารถดูได้อย่างเป็นกลางว่าไซต์ตอบสนองต่อการป้อนข้อมูลของผู้ใช้เมื่อใด แต่จากการโต้ตอบของผู้ใช้กับไซต์ คุณสามารถดูได้ว่าพวกเขารับรู้เมื่อใดเช่นกัน

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

นอกจากนี้ ในฐานะที่เป็น Core Web Vital (ควบคู่ไปกับ Largest Contentful Paint (LCP) และ Cumulative Layout Shift (CLS)) FID มีบทบาทสำคัญในวิธีที่ Google จัดอันดับเว็บไซต์ของคุณ ดังนั้น นอกเหนือจากประสบการณ์ของผู้ใช้แล้ว ยังอาจส่งผลต่อ Search Engine Optimization (SEO) ของเว็บไซต์ของคุณ กลยุทธ์เดียวกันหลายอย่างในการปรับปรุง FID จะลดประสิทธิภาพโดยรวมของไซต์ของคุณลงอย่างมากเช่นกัน

ฉันจะวัด FID ของฉันได้อย่างไร

มีหลายวิธีที่คุณสามารถวัดคะแนน FID ของคุณได้ วิธีที่เร็วและง่ายที่สุดคือการเรียกใช้ไซต์ของคุณผ่าน Google PageSpeed ​​Insights รายงานนี้จะให้รายละเอียดเกี่ยวกับตัวชี้วัดที่สำคัญต่างๆ รวมถึง FID นอกจากนี้ยังจะให้คำแนะนำเกี่ยวกับวิธีการปรับปรุงคะแนนของคุณ

นอกจากนี้ คุณสามารถใช้เครื่องมืออื่นๆ เพื่อเข้าถึงคะแนน FID ของคุณได้ ซึ่งรวมถึงรายงานประสบการณ์ผู้ใช้ Chrome, รายงาน Core Web Vitals ของ Google Search Console และไลบรารี JavaScript ของ Web Vitals คุณอาจพบว่าเครื่องมือเช่น GT Metrix และ Pingdom's Speed ​​​​Test มีประโยชน์

ฉันจะปรับปรุงคะแนน FID ของฉันได้อย่างไร

การปรับปรุง FID ของคุณสามารถช่วยปรับปรุงทั้งการจัดอันดับ UX และ SEO ของเว็บไซต์ของคุณ โดยทั่วไปแล้ว คะแนน FID ที่ไม่ดีอาจเกิดจากปัจจัยหลายประการ ได้แก่:

• JavaScript หนัก
• สคริปต์ที่ไม่ได้ใช้
• งาน JavaScript แบบยาว
• ไฟล์สคริปต์แบบยาว

เพื่อเพิ่มคะแนนของคุณ มีขั้นตอนที่คุณสามารถทำได้ ซึ่งรวมถึงการลดขนาดโค้ดของไซต์ของคุณ การลบหรือการหน่วงเวลาสคริปต์ของบุคคลที่สามที่ไม่ได้ใช้ และการแบ่งงาน JavaScript ที่ยาว (และไฟล์ CSS) ออกเป็นงานที่เล็กลง

บทสรุป

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

โปรดจำไว้ว่า คะแนน FID ในอุดมคติคือ 100 ms หรือน้อยกว่า หากคุณต้องการปรับปรุงและลดเวลานั้นลง กลยุทธ์ต่างๆ ที่เรากล่าวถึงข้างต้น (เช่น การเลื่อน JavaScript ที่ไม่ได้ใช้ การปรับโค้ด CSS และ JavaScript ให้เหมาะสม และการเลื่อน/ลบทรัพยากรการบล็อกการแสดงผล) จะทำให้คุณใช้เวลาน้อยลงอย่างไม่ต้องสงสัย พวกเขาต้องเป็น

คุณมีคำถามใด ๆ เกี่ยวกับ FID หรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!

ภาพเด่นโดย wan wei / shutterstock