First Input Delay (FID) คืออะไร? วิธีลดขนาดใน WordPress

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

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

ในบทความนี้ เราจะพูดถึงความหมายของ First Input Delay และเหตุใดจึงเป็นตัวชี้วัดที่สำคัญ จากนั้นเราจะพูดถึงสี่วิธีในการลดคะแนน FID ใน WordPress ไปกันเถอะ!

สารบัญ:

• First Input Delay คืออะไร?
• วิธีวัด First Input Delay สำหรับเว็บไซต์ของคุณ
• วิธีลดคะแนนความล่าช้าในการป้อนข้อมูลครั้งแรกใน WordPress

ความล่าช้าของอินพุตแรกคืออะไร (และเหตุใดจึงเป็นตัวชี้วัดที่สำคัญ)

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

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

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

ตามหลักการแล้ว First Input Delay ของเว็บไซต์ควรน้อยกว่า 100 มิลลิวินาที นั่นเป็นมาตรฐานที่ Google ถือว่ายอมรับได้สำหรับเว็บไซต์:

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

1. Largest Contentful Paint (LCP): เมตริกนี้วัดระยะเวลาที่ใช้ในการโหลดองค์ประกอบที่ใหญ่ที่สุดในหน้าเว็บ
2. Cumulative Layout Shift (CLS): เป็นการวัดว่าหน้า "เลื่อน" มากเพียงใดเมื่อโหลดขึ้น หากองค์ประกอบเคลื่อนที่มากเกินไปขณะโหลด คุณจะมีคะแนน CLS ต่ำ เรามีคำแนะนำในการแก้ไข Cumulative Layout Shift สำหรับ WordPress

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

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

วิธีวัด First Input Delay สำหรับเว็บไซต์ของคุณ

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

วิธีที่ง่ายที่สุดในการวัด First Input Delay สำหรับเว็บไซต์ของคุณคือการใช้ PageSpeed ​​Insights อย่างไรก็ตาม PageSpeed ​​Insights จะแสดงเฉพาะเวลาหน่วงของอินพุตแรกหากไซต์ของคุณมีการเข้าชมมากพอที่จะรวมอยู่ในรายงานประสบการณ์ผู้ใช้ Chrome

มาคุยกันก่อนว่า PageSpeed ​​Insights ทำงานอย่างไร จากนั้นเราจะแบ่งปันทางเลือกอื่นที่คุณสามารถลองใช้ได้หาก PageSpeed ​​Insights ไม่มีตัวชี้วัด First Input Delay สำหรับเว็บไซต์ของคุณ:

หากต้องการใช้ PageSpeed ​​Insights ให้ป้อน URL ของหน้าที่คุณต้องการทดสอบ PageSpeed ​​Insights จะใช้เวลาสักครู่ในการวิเคราะห์ จากนั้นจะส่งคืนรายงานที่มีลักษณะดังนี้:

โดยรวมแล้ว เว็บไซต์นั้นไม่มีคะแนน Core Web Vital ที่ดีที่สุด อย่างไรก็ตาม คุณจะเห็นว่าทำได้ดีมากเมื่อพูดถึงเมตริก First Input Delay โดยใช้เวลาเฉลี่ยต่ำกว่า 100 มิลลิวินาที

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

ในสถานการณ์นี้ คุณมีสองตัวเลือก:

1. แบบง่าย : คุณสามารถใช้ตัววัด Total Blocking Time ได้จากส่วน Lab Data เป็นพร็อกซีคร่าวๆ สำหรับ First Input Delay time ของคุณ ไม่ใช่การแสดงที่สมบูรณ์แบบ แต่ตัวชี้วัด Total Blocking Time นั้นคล้ายกับ First Input Delay มาก โดยทั่วไป หากคุณปรับปรุงเวลาการบล็อกทั้งหมด คุณจะเห็นการปรับปรุงที่คล้ายกันกับเวลาหน่วงเวลาอินพุตแรกของคุณ
2. ขั้นสูง : คุณสามารถใช้เครื่องมือตรวจสอบประสิทธิภาพผู้ใช้จริง เช่น Request Metrics ด้วยเครื่องมือเหล่านี้ คุณจะต้องเพิ่มสคริปต์ติดตามในไซต์ของคุณเพื่อรวบรวมข้อมูลผู้ใช้จริง

ด้านล่างนี้ คุณสามารถดูตำแหน่งที่จะหาตัววัด Total Blocking Time ใน PageSpeed ​​Insights:

ตอนนี้คุณรู้วิธีวัด FID และ Core Web Vitals อื่นๆ แล้ว มาพูดถึงวิธีปรับปรุงกัน

วิธีลดคะแนนความล่าช้าในการป้อนข้อมูลครั้งแรกใน WordPress

สำหรับส่วนนี้ เราจะเน้นไปที่การเพิ่มประสิทธิภาพ WordPress ที่จะปรับปรุงคะแนน First Input Delay ของคุณ การเพิ่มประสิทธิภาพเหล่านี้บางส่วนจะส่งผลต่อ Core Web Vitals อื่นๆ ในทางบวก ซึ่งทำให้ทั้งหมดนี้มีประโยชน์มากขึ้น

1. ลบสคริปต์ที่ไม่จำเป็นออกจากเว็บไซต์ของคุณ

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

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

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

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

2. เลื่อนรหัสที่ไม่สำคัญระหว่างการโหลด

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

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

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

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

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

ในการตั้งค่านี้บน WordPress คุณสามารถใช้ปลั๊กอิน Async JavaScript ได้ฟรี หรือปลั๊กอินประสิทธิภาพของ WordPress จำนวนมากมีคุณสมบัติในการเลื่อนโค้ด หากคุณยินดีจ่ายสำหรับปลั๊กอินพรีเมียม WP Rocket มีคุณสมบัติที่จะเลื่อน CSS และ JavaScript ที่ไม่สำคัญโดยอัตโนมัติ

3. ใช้เครื่องมือย่อขนาด CSS และ JavaScript

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

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

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

4. ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)

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

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

หากคุณกำลังมองหาตัวเลือก CDN ฟรี เราขอแนะนำให้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้:

1. Cloudflare: นี่เป็นหนึ่งใน CDN ที่ได้รับความนิยมมากที่สุดในตลาด ง่ายต่อการผสานรวมกับ WordPress และมีแผนบริการฟรี
2. Jetpack: ปลั๊กอิน Jetpack มีคุณสมบัติที่เรียกว่า Site Accelerator ซึ่งใช้เซิร์ฟเวอร์ WordPress.com เพื่อแคชองค์ประกอบคงที่จากเว็บไซต์ของคุณ แม้ว่า Jetpack จะต้องใช้บัญชี WordPress.com คุณก็สามารถใช้กับไซต์ WordPress ที่โฮสต์เองได้เช่นกัน

อย่างไรก็ตาม เพื่อประสิทธิภาพที่ดีที่สุด คุณอาจต้องพิจารณา CDN ระดับพรีเมียม เช่น KeyCDN, StackPath หรือ Bunny CDN

ลดความล่าช้าในการป้อนข้อมูลครั้งแรกของไซต์ของคุณวันนี้

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

หากคุณกำลังมองหาวิธีปรับปรุงคะแนน FID ของคุณใน WordPress นี่คือสิ่งที่คุณต้องทำ:

1. ลบสคริปต์ที่ไม่จำเป็นออกจากเว็บไซต์ของคุณ
2. เลื่อน CSS และ JavaScript ที่ไม่สำคัญออกไประหว่างการโหลด
3. ใช้เครื่องมือย่อขนาด CSS และ JavaScript เช่น Autoptimize และ Fast Velocity Minify
4. ใช้ CDN เช่น Cloudflare หรือ Jetpack

คุณมีคำถามเกี่ยวกับวิธีลดคะแนน FID ใน WordPress หรือไม่? พูดคุยเกี่ยวกับพวกเขาในส่วนความคิดเห็นด้านล่าง!