6 วิธีง่ายๆในการลดเวลาในการดำเนินการ JavaScript ใน WordPress

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

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

แต่ไม่ต้องกังวล การเพิ่มประสิทธิภาพ JavaScript ไม่จำเป็นต้องซับซ้อน

ในคู่มือนี้เราจะนำคุณผ่านวิธีที่ง่ายและมีประสิทธิภาพในการลดเวลาดำเนินการ JavaScript ใน WordPress

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

มาดำน้ำกันเถอะ!

เวลาดำเนินการ JavaScript คืออะไร?

เวลาดำเนินการ JavaScript หมายถึงระยะเวลาที่ใช้สำหรับเว็บเบราว์เซอร์ในการประมวลผลและเรียกใช้รหัส JavaScript บนหน้าเว็บ

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

ผลกระทบของเวลาดำเนินการ JavaScript ต่อประสิทธิภาพคืออะไร?

นี่คือรายละเอียดของเวลาการดำเนินการ JavaScript ที่มีผลต่อประสิทธิภาพ:

1. การปิดกั้นด้ายหลัก

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

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

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

2. การเรนเดอร์ล่าช้า

เมื่อคุณเยี่ยมชมเว็บไซต์คุณคาดว่าเนื้อหาจะปรากฏบนหน้าจออย่างรวดเร็ว กระบวนการนี้เรียกว่า "การวาดภาพ" เนื้อหาทำให้มั่นใจได้ว่าประสบการณ์การใช้งานที่ราบรื่น

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

3. การล่าช้าครั้งแรก (FID)

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

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

4. การบริโภคหน่วยความจำ

รหัส JavaScript เช่นเดียวกับโปรแกรมอื่น ๆ ต้องใช้หน่วยความจำให้เรียกใช้ รหัสที่ซับซ้อนหรือปรับให้เหมาะสมสามารถกินหน่วยความจำจำนวนมาก

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

5. ส่งผลเสียต่อ SEO

เครื่องมือค้นหาเช่น Google ใช้ความเร็วหน้าเว็บเมื่อจัดอันดับผลการค้นหา

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

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

วิธีการวัดเวลาดำเนินการ JavaScript?

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

การวัดเวลาดำเนินการ JS ด้วยข้อมูลเชิงลึก pagespeed

Google Pagespeed Insights เป็นเครื่องมือฟรีจาก Google ที่วัดความเร็วของหน้าเว็บและให้แนวคิดการเพิ่มประสิทธิภาพ

นี่คือวิธีใช้เพื่อวัดเวลาดำเนินการ JavaScript:

เยี่ยมชมเว็บไซต์ PageSpeed ​​Insights หรือใช้ส่วนขยายของ Pagespeed Insights Chrome

ที่นี่ป้อน URL เว็บไซต์ที่คุณต้องการวิเคราะห์และคลิกปุ่ม "วิเคราะห์"

Pagespeed Insights จะจัดทำรายงานที่มีตัวบ่งชี้ประสิทธิภาพจำนวนหนึ่งรวมถึงเวลาดำเนินการ JavaScript

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

การวัดเวลาดำเนินการ JS ด้วย gtmetrix

GTMetrix เป็นเครื่องมือทั่วไปในการวัดประสิทธิภาพของหน้าเว็บซึ่งรวมถึงเวลาดำเนินการ JavaScript

ไปที่เว็บไซต์ GTMetrix ป้อน URL ของหน้าเว็บแล้วคลิกตัวเลือกการทดสอบตอนนี้

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

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

วิธีลดเวลาดำเนินการ JavaScript

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

1. หลีกเลี่ยงธีม/ปลั๊กอินป่อง

หนึ่งในเหตุผลที่พบบ่อยที่สุดสำหรับการดำเนินการ JavaScript ช้าใน WordPress คือธีมป่องและปลั๊กอินที่มากเกินไป

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

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

ทำไมธีมและปลั๊กอินป่องเป็นปัญหา?

• การดำเนินการโค้ดที่มากเกินไป: ธีมหนักและปลั๊กอินที่เข้ารหัสไม่ดีต้องการทรัพยากรมากขึ้นเพิ่มเวลาดำเนินการ JavaScript
• คำขอ HTTP พิเศษ: ธีมและปลั๊กอินบางตัวโหลด CSS, JavaScript และแบบอักษรเพิ่มเติม - แม้ว่าคุณจะไม่ได้ใช้ก็ตาม
• การโหลดเซิร์ฟเวอร์ที่เพิ่มขึ้น: ปลั๊กอินที่ใช้งานมากเกินไปสามารถชะลอเวลาตอบสนองเซิร์ฟเวอร์ของคุณส่งผลกระทบต่อ SEO และประสบการณ์ผู้ใช้

วิธีเลือกทางเลือกที่มีน้ำหนักเบา?

• ใช้ชุดรูปแบบที่ปรับให้เหมาะสมที่สุด: ติดกับธีมที่รวดเร็วและน้อยที่สุดเช่น GeneratePress, Astra หรือ Kadence ที่จัดลำดับความสำคัญของความเร็ว
• ตรวจสอบปลั๊กอินของคุณ: ตรวจสอบปลั๊กอินเป็นประจำและปิดการใช้งานที่ไม่จำเป็นอีกต่อไป หากปลั๊กอินมีจาวาสคริปต์จำนวนมากลองใช้ทางเลือกที่มีน้ำหนักเบา
• ใช้เฉพาะสิ่งที่คุณต้องการ: หลีกเลี่ยงการติดตั้งปลั๊กอินหลายตัวสำหรับฟังก์ชั่นที่คล้ายกัน เลือกใช้โซลูชัน all-in-one ที่ลดสคริปต์มากเกินไป
• จำกัด สคริปต์ภายนอก: หลีกเลี่ยงการใช้ชุดรูปแบบและปลั๊กอินที่มีสคริปต์ของบุคคลที่สามที่ไม่ต้องการแบบอักษรหรือรหัสติดตาม

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

2. ล่าช้า JS และลบ JS ที่ไม่ได้ใช้

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

ปลั๊กอินการปรับให้เหมาะสมที่สุดเช่น FlyingPress, WP Rocket, Perfmatters, สคริปต์การบิน ฯลฯ ทำสิ่งนี้ อย่างไรก็ตามแต่ละอันจะแตกต่างกันดังนั้นอ่านเอกสารประกอบปลั๊กอินเกี่ยวกับวิธีการเพิ่มไฟล์ (ตามชื่อไฟล์คำหลักหรืออัตโนมัติเช่นเดียวกับ WP Rocket)

ตัวอย่างเช่นหากคุณใช้ปลั๊กอิน WP Rocket คุณสามารถใช้ประโยชน์จากคุณสมบัติการดำเนินการ JavaScript ล่าช้า

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

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

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

ช่วยให้เบราว์เซอร์สามารถแสดงผลเฉพาะวัสดุที่จำเป็นเท่านั้นแทนที่จะถูกจมลงโดยไฟล์ JS ที่ไม่จำเป็น

3. เลื่อน JS

อีกวิธีที่มีประสิทธิภาพในการลดเวลาการดำเนินการ JS คือการชะลอไฟล์ JS

โดยการเลื่อน JavaScript บนเว็บไซต์ WordPress ของคุณเบราว์เซอร์จะโหลดเมื่อหน้าแสดงผลเท่านั้น

คุณสามารถเลื่อนไฟล์ JS ทั้งด้วยตนเองและด้วยความช่วยเหลือของปลั๊กอิน

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

นี่คือตัวอย่างของแอตทริบิวต์การเลื่อนเวลา:

หากคุณต้องการใช้ปลั๊กอินคุณสามารถเลือกจาก WP Rocket, Autoptimize, FlyingPress, การทำความสะอาดสินทรัพย์ ฯลฯ

ตัวอย่างเช่นเช่นความล่าช้า JS จรวด WP ยังมีคุณสมบัติการตัดบัญชี JavaScript

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

4. minify js

หนึ่งในวิธีที่ง่ายที่สุด แต่มีประสิทธิภาพมากที่สุดในการลดเวลาในการดำเนินการ JavaScript ใน WordPress คือการลดขนาดเล็ก

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

มีเครื่องมือ minification JavaScript หลายอย่างที่จะช่วยให้คุณทำงานได้สำเร็จ

สำหรับวิธีการที่ไม่ยุ่งยากให้ใช้ปลั๊กอินเช่น Autoptimize, WP Rocket, Fast Velocity Minify, FlyingPress ฯลฯ

เพียงติดตั้งปลั๊กอินที่คุณต้องการเปิดใช้งาน JavaScript minification และปล่อยให้เครื่องมือทำงาน

5. ยกเลิกการโหลด JavaScript ในหน้าเฉพาะ

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

ตัวอย่างเช่น:

• การโหลดสคริปต์แบบฟอร์มการติดต่อในทุกหน้า - แม้เมื่อไม่มีแบบฟอร์ม
• สคริปต์ WooCommerce ทำงานบนโพสต์บล็อกที่ไม่ต้องการ
• สคริปต์ตัวเลื่อนปรากฏบนหน้าข้อความหนักที่ไม่มีตัวเลื่อน

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

หนึ่งในวิธีแก้ปัญหาที่ง่ายที่สุดสำหรับปัญหานี้คือการปิดใช้งานสคริปต์ที่ไม่จำเป็นในหน้าเว็บที่ไม่จำเป็น

ปลั๊กอินเช่นการทำความสะอาดสินทรัพย์หรือ perfmatters ช่วยให้คุณปิดการใช้งาน JavaScript ต่อหน้าประเภทโพสต์หรือหมวดหมู่โดยไม่ต้องแก้ไขรหัส

หรือหากคุณพอใจกับรหัสให้ใช้ wp_dequeue_script () ในไฟล์ functions.php ของคุณเพื่อป้องกันสคริปต์ที่ไม่จำเป็นจากการโหลด

function remove_unnecessary_js() { if (!is_page('contact')) { wp_dequeue_script('contact-form-script'); } } add_action('wp_enqueue_scripts', 'remove_unnecessary_js');

6. โฮสต์ JavaScript ของบุคคลที่สามในพื้นที่

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

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

ในการโฮสต์ JavaScript ของบุคคลที่สามในเครื่องให้เยี่ยมชมเว็บไซต์ของผู้ให้บริการบุคคลที่สามและดาวน์โหลดไฟล์ JavaScript ที่คุณต้องการ (เช่น Google Fonts, Recaptcha หรือ Analytics Scripts)

ตอนนี้ใช้ FTP เพื่อจัดเก็บไฟล์ใน /wp-content/uploads/ หรือ //wp-includes/js/ ไดเรกทอรี

ถัดไปแก้ไขฟังก์ชันธีมของคุณ php หรือ enqueue สคริปต์ใน wp_enqueue_script () เพื่อชี้ไปที่เวอร์ชันท้องถิ่นแทน URL ภายนอก

function load_local_script() { wp_enqueue_script('local-js', get_template_directory_uri() . '/js/script-name.js', array(), null, true); } add_action('wp_enqueue_scripts', 'load_local_script');

ใช้ปลั๊กอินเช่น WP Rocket หรือ Autoptimize เพื่อ minify และแคชไฟล์ JavaScript ที่โฮสต์ในเครื่องเพื่อการดำเนินการที่เร็วขึ้น

เริ่มลดเวลาดำเนินการ JS วันนี้

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

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

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

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

สำหรับข้อมูลเพิ่มเติมลองดูแหล่งข้อมูลที่เป็นประโยชน์อื่น ๆ เหล่านี้:

• 10 ปลั๊กอิน WordPress Cache ที่ดีที่สุด (ตัวเลือกฟรีและพรีเมี่ยม)
• วิธีแก้ไขเบราว์เซอร์ Leverage ใน WordPress ได้อย่างง่ายดาย
• รีวิว WP Rocket: คุ้มค่าหรือไม่?
• Perfmatters คุ้มค่าหรือไม่? รีวิวในเชิงลึก
• รีวิว Nitropack: เครื่องมือความเร็วที่ดีที่สุดหรือหมวกสีดำ SEO?

สุดท้ายติดตามเราบน Facebook และ X (ชื่อเดิม Twitter) เพื่ออัปเดตต่อไปในบทความ WordPress และบทความที่เกี่ยวข้องกับบล็อกล่าสุด