วิธีเพิ่มความเร็วไซต์ WordPress ของคุณด้วยการชะลอการดำเนินการ JavaScript

Nkenganyi Clovis บทช่วยสอน WordPress Dec 14, 2023

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

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

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

มันไม่ใช่ เป็นคุณลักษณะที่สร้างไว้ในปลั๊กอินแคชที่ดีที่สุดในตลาด: WP Rocket

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

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

WP Rocket คืออะไร?

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

WP Rocket ยังมีคุณสมบัติอื่นๆ อีกมากมายเพื่อเพิ่มประสิทธิภาพไซต์ของคุณ เช่น:

  • การบีบอัด GZIP: ลดขนาดไฟล์และประหยัดแบนด์วิธ
  • การแคชเบราว์เซอร์: แคชทรัพยากรคงที่ในเบราว์เซอร์ ช่วยลดจำนวนการสืบค้นไปยังเซิร์ฟเวอร์ของคุณ
  • การลดขนาดและการต่อข้อมูล: ลดจำนวนคำขอ HTTP โดยลบช่องว่างและความคิดเห็นที่ไม่จำเป็นออกจากโค้ดของคุณ และรวมไฟล์จำนวนมากไว้ในไฟล์เดียว
  • LazyLoad: ชะลอการโหลดรูปภาพและ iframe จนกว่าจะปรากฏบนหน้าจอ ช่วยประหยัดแบนด์วิธและปรับปรุงเวลาในการโหลด
  • บูรณาการ CDN: กระจายเนื้อหาของคุณผ่านเครือข่ายเซิร์ฟเวอร์ทั่วโลกเพื่อส่งมอบให้กับผู้เยี่ยมชมของคุณเร็วขึ้น
  • การเพิ่มประสิทธิภาพฐานข้อมูล: ลบข้อมูลที่ไม่จำเป็นออกจากฐานข้อมูลของคุณและลดขนาดลง
  • การโหลดล่วงหน้า: สร้างแคชสำหรับหน้าแรกของคุณและหน้าที่เชื่อมโยงทั้งหมดล่วงหน้าเพื่อปรับปรุงการจัดทำดัชนีโดยเครื่องมือค้นหา
  • และอื่น ๆ...

WP Rocket สามารถช่วยคุณชะลอการดำเนินการ JavaScript ได้อย่างไร?

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

การชะลอการทำงานของ JavaScript อาจปรับปรุงการวัดประสิทธิภาพของไซต์ของคุณ เช่น First Contentful Paint (FCP), Largest Contentful Paint (LCP) และ Time to Interactive (TTI) โดยการลดเวลาในการโหลดครั้งแรกของหน้าเว็บของคุณ เมตริกเหล่านี้มีความสำคัญต่อประสบการณ์ผู้ใช้และ SEO เนื่องจาก Google จัดอันดับเมตริกเหล่านี้ใน Core Web Vitals

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

ฉันจะเปิดใช้งานการหน่วงเวลาการดำเนินการ JavaScript ใน WP Rocket ได้อย่างไร

หากต้องการเปิดใช้งานการดำเนินการ JavaScript แบบล่าช้าใน WP Rocket ให้ทำตามขั้นตอนต่อไปนี้:

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน WP Rocket บนไซต์ WordPress ของคุณ

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

หลังจากซื้อปลั๊กอินและดาวน์โหลดไฟล์ zip แล้ว ให้ไปที่ ปลั๊กอิน > เพิ่มใหม่ บนแดชบอร์ด WordPress ของคุณ และคลิกที่ อัปโหลดปลั๊กอิน ที่ด้านบนของหน้า

หลังจากคลิก อัปโหลดปลั๊กอิน หน้าต่างใหม่จะปรากฏขึ้น โดยคุณจะเห็นช่อง "เลือกไฟล์" คุณจะต้องคลิกและเลือกไฟล์ตัวติดตั้ง zip ในการจัดการไฟล์ของคุณ

เมื่อคุณเลือกไฟล์ zip ให้คลิกที่ ปุ่มติดตั้งทันที

ไปที่ การตั้งค่า > WP Rocket > แท็บกฎขั้นสูง

เลื่อนลงไปที่ส่วน การหน่วงเวลาการดำเนินการ JavaScript

เพิ่มคำสำคัญใน ฟิลด์ Scripts to Delay หรือ Scripts to Exclude from Delaying โดยคั่นด้วยเครื่องหมายจุลภาค

บันทึกการเปลี่ยนแปลงที่ทำ

ตัวอย่างเช่น หากคุณต้องการหน่วงเวลาสคริปต์ทั้งหมดด้วยคำว่า "jquery" หรือ "analytics" ในชื่อ ให้ป้อนคำเหล่านี้ในส่วนสคริปต์ที่จะหน่วงเวลา

หากคุณต้องการละสคริปต์ทั้งหมดที่มีคำว่า "WooCommerce" หรือ "cart" อยู่ในชื่อ ให้ป้อนสคริปต์เหล่านั้นในสคริปต์เพื่อละเว้นจากพื้นที่การหน่วงเวลา

ประโยชน์ของการชะลอการดำเนินการ JavaScript คืออะไร?

ด้วยการชะลอการทำงานของ JavaScript คุณจะได้รับสิทธิประโยชน์หลายประการสำหรับไซต์ WordPress ของคุณ เช่น:

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

บทสรุป

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

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

ผู้ใช้สามารถเพิ่มเวลาในการโหลดเว็บไซต์ คะแนน PageSpeed ​​ประสบการณ์ผู้ใช้ และการแปลงได้โดยใช้ฟังก์ชัน Delay JavaScript Execution ของ WP Rocket

Divi WordPress Theme