วิธีปรับปรุงการหน่วงเวลาอินพุตครั้งแรก (FID) ใน WordPress

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

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

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

บทนำสู่การหน่วงเวลาอินพุตครั้งแรก

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

FID เป็นหนึ่งในตัวชี้วัดหลักของ Core Web Vitals สร้างโดย Google รายงานนี้วัดประสิทธิภาพของหน้าเว็บ

ต่อไปนี้คือตัวชี้วัดประสิทธิภาพหลักสามตัวที่รวมอยู่ในรายงาน Core Web Vitals:

• Largest Contentful Paint (LCP) : เป็นการวัดเวลาที่เว็บไซต์ของคุณใช้ในการโหลดหลังจากที่ผู้ใช้ร้องขอ URL
• First Input Delay (FID) : นี่คือเวลาที่เว็บไซต์ของคุณตอบสนองหลังจากที่ผู้เยี่ยมชมโต้ตอบกับเพจ
• Cumulative Layout Shift (CLS) : วัดการเปลี่ยนแปลงเค้าโครงทั้งหมดที่เกิดขึ้นขณะโหลดหน้า

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

ต่อไปนี้คือข้อดีบางประการของการปรับปรุงคะแนน FID ของคุณ:

• เพิ่มเวลาเฉลี่ยของผู้เข้าชมในหน้า
• อัตราตีกลับของคุณลดลง
• การแปลงที่เพิ่มขึ้น

สาเหตุที่เป็นไปได้ของคะแนน FID ที่ไม่ดี

เมื่อคุณเรียกใช้การทดสอบ Core Web Vitals รายงานจะให้คะแนนการหน่วงเวลาอินพุตครั้งแรกแก่คุณ FID ที่ยอมรับได้คือ 100 มิลลิวินาทีหรือน้อยกว่า

คะแนน FID ที่แย่คืออะไรที่สูงกว่า 300 มิลลิวินาที ซึ่งอาจเกิดจากปัจจัยที่แตกต่างกันเล็กน้อย

หนึ่งในสาเหตุที่พบบ่อยที่สุดของ First Input Delay สูงคือโค้ด JavaScript จำนวนมาก หากเบราว์เซอร์ต้องรันไฟล์ JavaScript ขนาดใหญ่ การดำเนินการตามคำขออื่นอาจยุ่งเกินไป

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

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

วิธีวัดคะแนน FID ของเว็บไซต์ของคุณ

เมื่อคุณทราบแล้วว่า First Input Delay คืออะไร ก็ถึงเวลาทดสอบเว็บไซต์ของคุณแล้ว

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

1. PageSpeed ​​Insights

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

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

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

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

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

2. Google Search Console

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

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

จากนั้นดาวน์โหลดไฟล์ HTML ที่สร้างขึ้นสำหรับคุณ คุณจะต้องอัปโหลดไฟล์นี้ไปยังไดเรกทอรีรากของเว็บไซต์ก่อนจึงจะสามารถใช้คุณลักษณะต่างๆ ของ Google Search Console ได้

หลังจากการยืนยัน คุณจะสามารถเข้าถึงแดชบอร์ดของคุณได้ ที่นี่ คุณสามารถนำทางไปยังแท็บ Core Web Vitals

PageSpeed ​​Insights อาจต้องใช้เวลาสักครู่ในการเข้าถึงรายงานของคุณ หากคุณเพิ่งเริ่มใช้เครื่องมือนี้ นอกจากนี้ คุณอาจไม่สามารถดูรายงานได้หากไซต์ของคุณมีผู้เข้าชมไม่เพียงพอ

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

3. ประภาคาร

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

พูดง่ายๆ ก็คือ TBT จะประเมินว่าไซต์ของคุณตอบสนองต่อการป้อนข้อมูลของผู้ใช้ได้ดีเพียงใด เช่นเดียวกับ FID TBT จะวัดความล่าช้าระหว่าง First Contentful Paint (FCP) และ Time to Interactive (TTI) เนื่องจากคล้ายกันมาก คุณสามารถใช้ TBT เพื่อวัดคะแนน FID ของคุณได้

หากต้องการดูรายงานของ Lighthouse บนเว็บไซต์ของคุณ คุณจะต้องคลิกขวาบนหน้าเว็บของคุณ จากนั้นเลือก ตรวจสอบ

ที่ด้านบนของโค้ดที่สร้างขึ้น ให้ค้นหาไอคอนลูกศรคู่ จากนั้นคลิกและเลือก Lighthouse

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

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

จากนั้นเลื่อนลงมาจนกว่าคุณจะเห็น เมตริก ในส่วนนี้ คุณจะเห็น Total Blocking Time ของคุณ

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

Lighthouse เป็นเครื่องมือเมตริกในห้องปฏิบัติการ ดังนั้นเมตริก Total Blocking Time จะไม่ประเมินการโต้ตอบที่แท้จริง โชคดีที่การปรับปรุงคะแนน TBT ของคุณสามารถปรับปรุงความล่าช้าของอินพุตแรกได้

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

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

มาดูวิธีการลด First Input Delay ใน WordPress กัน

1. ติดตั้งปลั๊กอินการเพิ่มประสิทธิภาพ

วิธีง่ายๆ ในการเริ่มต้นคือการติดตั้งปลั๊กอินที่เน้นที่ Core Web Vitals ด้วยการทำเช่นนี้ คุณสามารถปรับปรุง First Input Delay ของคุณได้โดยไม่ต้องทำอะไรมาก

Jetpack Boost เป็นปลั๊กอินที่ทรงพลังและใช้งานง่าย ซึ่งคุณสามารถใช้เพื่อเพิ่มประสิทธิภาพ Core Web Vitals ของคุณ มีหลายวิธีในการเพิ่มประสิทธิภาพเว็บของคุณและปรับปรุงคะแนน FID ของคุณ

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

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

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

2. เลื่อนการบล็อกการแสดงผล JavaScript

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

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

คุณสามารถใช้ PageSpeed ​​Insights เพื่อระบุ JavaScript ที่บล็อกการแสดงผลได้ ขั้นแรก พิมพ์ URL ของเว็บไซต์ของคุณลงในแถบค้นหา

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

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

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

ในแดชบอร์ด WordPress ให้ไปที่ Jetpack → Boost จากนั้น ค้นหาการตั้งค่าที่ระบุว่า Defer Non-Essential JavaScript

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

3. เลื่อน CSS ที่ไม่สำคัญออกไป

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

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

จากนั้น คุณสามารถใช้ปลั๊กอิน Jetpack Boost เพื่อเพิ่มประสิทธิภาพ CSS ของคุณ ในแดชบอร์ด WordPress ให้ไปที่ Jetpack → Boost จากนั้น ค้นหาการตั้งค่าที่มีข้อความ Optimize CSS Loading

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

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

4. กำจัด JavaScript ที่ไม่จำเป็น

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

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

เช่นเดียวกับที่คุณทำกับสามวิธีแรก ให้เลื่อนไปที่ส่วน โอกาส คราวนี้ ให้มองหา JavaScript และ CSS ที่ไม่ได้ใช้

ถัดจากแต่ละสคริปต์ที่ไม่ได้ใช้ จะมี URL ที่บอกคุณว่ามันมาจากไหน ในตัวอย่างนี้ Google Analytics และ Google Tag Manager กำลังสร้าง JavaScript ที่ไม่จำเป็น

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

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

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

ตัวอย่างเช่น คุณสามารถคลิกที่ หน้าแรก และจะแสดงไฟล์ที่โหลดทั้งหมดในหน้านี้

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

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

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

5. ลดขนาด CSS และ JavaScript

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

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

หลังการติดตั้ง ให้ไปที่ การตั้งค่า → ปรับ อัตโนมัติ ภายใต้ ตัวเลือก JavaScript คุณสามารถทำเครื่องหมายที่ช่องถัดจาก Optimize JavaScript Code

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

เมื่อเสร็จแล้ว บันทึกการเปลี่ยนแปลงของคุณ คุณยังมีตัวเลือกในการล้างแคชหลังจากกระบวนการนี้

6. หน่วงเวลาดำเนินการจาวาสคริปต์

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

ในการดำเนินการนี้ คุณสามารถใช้ปลั๊กอิน เช่น Flying Scripts ด้วยเครื่องมือนี้ คุณสามารถชะลอการทำงานของไฟล์ JavaScript จนกว่าจะมีกิจกรรมของผู้เข้าชมในไซต์ของคุณ

หลังจากที่คุณเปิดใช้งาน Flying Scripts ให้ไปที่ Settings → Flying Scripts ซึ่งจะเปิดหน้าการตั้งค่าสำหรับปลั๊กอิน ซึ่งคุณสามารถเริ่มใช้การหน่วงเวลาของ JavaScript ได้

เริ่มต้นด้วยการเขียนคำหลักที่ระบุสคริปต์ที่คุณต้องการล่าช้า ตัวอย่างเช่น คุณสามารถใช้ “gtag” สำหรับสคริปต์ Google Tag Manager

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

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

อีกทางเลือกหนึ่งที่มีประสิทธิภาพในการปรับปรุง First Input Delay คือการใช้ Content Delivery Network (CDN) นี่คือกลุ่มของเซิร์ฟเวอร์ที่เชื่อมต่อซึ่งสามารถแจกจ่ายเนื้อหาออนไลน์ของคุณไปยังผู้ใช้ทั่วโลก

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

โชคดีที่ไซต์ที่ใช้ Jetpack มี CDN ฟรีอยู่แล้ว หากคุณไปที่ Jetpack → Settings → Performance คุณสามารถเปิด Site Accelerator

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

คำถามที่พบบ่อยเกี่ยวกับ First Input Delay

จนถึงตอนนี้ เราได้พิจารณาแล้วว่า First Input Delay ทำงานอย่างไร และคุณจะปรับปรุงคะแนนได้อย่างไร ตอนนี้ มาดูคำถามทั่วไปเกี่ยวกับ FID กัน

ฉันจะวัดคะแนน FID ของไซต์ WordPress ได้อย่างไร

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

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

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

คะแนน FID ที่ดีคืออะไร?

กล่าวง่ายๆ เว็บไซต์ของคุณจะตกอยู่ในหนึ่งในสามคะแนน:

• ดี : 100 มิลลิวินาทีหรือน้อยกว่า
• ต้องการการปรับปรุง : ช่วงตั้งแต่ 100ms ถึง 300ms
• แย่ : มากกว่า 300ms

หลังจากที่คุณวัดคะแนน FID แล้ว ผลลัพธ์ใดๆ ที่เกิน 100 มิลลิวินาทีจะต้องได้รับการปรับปรุง

ฉันจะเพิ่มประสิทธิภาพคะแนน FID ของฉันได้อย่างง่ายดายได้อย่างไร

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

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

ปรับปรุงความประทับใจแรกของคุณ

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

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