วิธีชะลอการแยกวิเคราะห์ JavaScript ใน WordPress

เผยแพร่แล้ว: 2021-07-22

เลื่อนการแยกวิเคราะห์ JavaScript ใน WordPress

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

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

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

ตอนนี้คำถามคือสิ่งที่ Defer Parsing of JavaScript ใน WordPress หมายถึงอะไร?

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

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

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

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

ดังนั้นโดยไม่ต้องกังวลใจต่อไป มาเริ่มกันเลย!

Defer Parsing ของ JavaScript ใน WordPress หมายถึงอะไร

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

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

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

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

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

ทำไมคุณต้องชะลอการแยกวิเคราะห์ JavaScript ใน WordPress?

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

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

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

เมื่อเสร็จแล้วไปที่แท็บความเร็วหน้าเว็บ และปรับปรุงความเร็วในการโหลดของคุณ และขยายส่วน Defer Parsing of JavaScript

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

Async VS Defer Attributes

นี่เป็นสิ่งสำคัญเพื่อให้แน่ใจว่าการดาวน์โหลดสคริปต์จะไม่โต้ตอบกับการแสดงผลหน้าเว็บ ดังนั้น สองวิธีในการทำเช่นนี้คือ Async และ defer

หากคุณต้องการเริ่มต้นด้วย Async คุณต้องเพิ่มแท็กสคริปต์ต่อไปนี้

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

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

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

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

เพื่อให้ทราบความแตกต่างระหว่าง Async และ defer ได้ดีขึ้น เราได้แบ่งปันตัวอย่าง อ่านต่อ.

สมมติว่าคุณมีจาวาสคริปต์ JS1 และ JS2 สองตัว และมีเงื่อนไขว่า JS2 ปรากฏในโค้ดหลัง JS1 ซึ่งหมายความว่า JS2 ขึ้นอยู่กับ JS1 แต่มีขนาดใหญ่กว่า JS2

หากคุณกำลังใช้ Async มีความเป็นไปได้ที่ JS2 จะสามารถดาวน์โหลดให้เสร็จสิ้นก่อน JS1 สิ่งนี้สามารถนำไปสู่ข้อผิดพลาดเมื่อ JS2 ถูกดำเนินการในกรณีที่ไม่มี JS1

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

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

เหตุผลที่คุณต้องเลื่อนการแยกวิเคราะห์ JavaScript

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

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

  • เพิ่มอันดับการค้นหา

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

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

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

เพื่อผลลัพธ์ที่ดีที่สุด คุณควรปฏิบัติตามเทคนิค SEO เพื่อเพิ่มเนื้อหาของคุณและปรับความเร็วหน้าเว็บให้เหมาะสม

  • เพิ่มอัตราการแปลง

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

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

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

  • แจกประสบการณ์ผู้ใช้ที่ดีที่สุด

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

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

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

ห้าวิธีที่แตกต่างกันในการชะลอการแยกวิเคราะห์ JavaScript ใน WordPress

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

มารู้จักวิธีการกันเถอะ

ในการเลื่อนการแยกวิเคราะห์ JavaScript คุณสามารถเลือกเส้นทางที่สำคัญสามเส้นทาง ได้แก่ ปลั๊กอิน วิธี varvy และไฟล์ functions.php ด้วยเส้นทางเหล่านี้ คุณสามารถใช้ห้าวิธีที่กำหนดได้

วิธีที่ 1- การใช้ปลั๊กอิน Async JavaScript ฟรี

ใน WordPress Async JavaScript เป็นปลั๊กอินฟรีที่ช่วยกำจัดการบล็อกการเรนเดอร์ JavaScript ในการโหลดเนื้อหา

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

  • Async สามารถดาวน์โหลด JavaScript ขณะแยกวิเคราะห์ไฟล์ HTML แต่หยุดการแยกวิเคราะห์ HTML เพื่อดำเนินการไฟล์ JavaScript
  • Defer สามารถดาวน์โหลดไฟล์ JavaScript ในขณะที่แยกวิเคราะห์ไฟล์ HTML แต่รอที่จะดำเนินการไฟล์หลังจากการแยกวิเคราะห์ HTML เสร็จสิ้น

ตอนนี้ให้เราย้ายไปที่คำแนะนำทีละขั้นตอนเพื่อชะลอการแยกวิเคราะห์ JavaScript ใน WordPress โดยใช้ปลั๊กอิน Async

  1. เปิดแดชบอร์ด WordPress และข้ามไปที่แท็บปลั๊กอิน
  2. ในแท็บปลั๊กอิน คลิกที่ปุ่มเพิ่มใหม่และค้นหาปลั๊กอิน Async JavaScript
  3. เมื่อคุณพบปลั๊กอินให้คลิกที่ปุ่มติดตั้งและเปิดใช้งาน
  4. ดังนั้นเมื่อการติดตั้งเสร็จสิ้น ให้ไปที่การตั้งค่าและทำการเปลี่ยนแปลงที่จำเป็น
  5. ทำเครื่องหมายที่ตัวเลือกเปิดใช้งาน Async JavaScript และเลือกเลื่อนเป็น Async JavaScript
  6. สำหรับคุณสมบัติขั้นสูง ให้ทำเครื่องหมายและเลือกจากสคริปต์ที่คุณต้องการใช้ - Async และเลื่อนแท็ก
  7. ที่นี่คุณสามารถเลือกสคริปต์ที่คุณต้องการรวมและยกเว้นได้ นอกจากนี้ คุณยังสามารถเลือกปลั๊กอินและธีมที่คุณต้องการแยกออกจากการเปลี่ยนแปลงใดๆ ที่ทำโดย Async JavaScript Plugin
  8. เมื่อการเปลี่ยนแปลงเสร็จสิ้น ให้บันทึกการเปลี่ยนแปลง

วิธีที่ 2: การใช้ปลั๊กอิน WP Rocket

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

นอกจากนี้ ด้วยปลั๊กอินนี้ คุณสามารถรับการแคชหน้า การโหลดแคชล่วงหน้า การบีบอัด และคุณสมบัติเจ๋ง ๆ อื่น ๆ อีกมากมาย

ในทางกลับกัน ปลั๊กอินยังช่วยให้คุณเลื่อนการแยกวิเคราะห์ JavaScript ในแท็บการเพิ่มประสิทธิภาพไฟล์

นี่คือวิธีที่คุณสามารถติดตั้งและใช้ปลั๊กอินได้

  1. เปิดแดชบอร์ด WordPress และเปลี่ยนเส้นทางไปที่แท็บปลั๊กอิน
  2. ตอนนี้คลิกที่ปุ่มเพิ่มใหม่และค้นหาปลั๊กอินจรวด WP
  3. แตะที่ติดตั้งและเปิดใช้งานปลั๊กอิน
  4. จากนั้นไปที่การตั้งค่าและเปิดการเพิ่มประสิทธิภาพไฟล์จากเมนูเพื่อเริ่มต้น
  5. ตอนนี้ให้เลื่อนลงมาที่ไฟล์ JavaScript และทำเครื่องหมายที่ตัวเลือกโหลด JavaScript ที่เลื่อนออกไป และเปิดใช้งานเซฟโหมดสำหรับ Query
  6. เมื่อกระบวนการทั้งหมดเสร็จสิ้น ให้ไปที่ส่วนท้ายของหน้าและคลิกที่ตัวเลือกบันทึกการเปลี่ยนแปลง

วิธีที่ 3: การใช้ W3 Total Cache Plugin

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

แคชทั้งหมดของ W3 มีประสิทธิภาพและปลอดภัยในการใช้งาน นอกจากนี้ คุณสามารถใช้ปลั๊กอินนี้เพื่อชะลอการแยกวิเคราะห์ JavaScript ใน WordPress คุณสามารถใช้ปลั๊กอินนี้ได้อย่างไร

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

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

ลดขนาดตัวเลือกการตั้งค่า
เลือกการไม่บล็อกโดยใช้ตัวเลือกเลื่อนและฝังประเภทของรหัสก่อน แท็ก

การตั้งค่าย่อเล็กสุด JS

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

วิธีที่ 4: ใช้วิธีการที่แนะนำของ Vary

วิธีที่ดีที่สุดอีกวิธีหนึ่งที่คุณสามารถเลือกใช้ Defer Parsing of JavaScript ใน WordPress คือการเลือก Vary ซึ่งใช้สคริปต์เพื่อเรียกไฟล์ JavaScript ภายนอกเมื่อโหลดหน้าแรกแล้ว

ซึ่งหมายความว่าเบราว์เซอร์จะไม่ดาวน์โหลดหรือใช้งาน JavaScript จนกว่าหน้าเว็บจะไม่โหลด อย่างไรก็ตาม วิธีนี้แนะนำโดย Patrick Sexton

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

นี่คือโค้ดที่คุณสามารถเพิ่มในส่วนเนื้อหาของธีมเพื่อ Defer Parsing of JavaScript ใน WordPress

<ประเภทสคริปต์= “ข้อความ/จาวาสคริปต์”>
ฟังก์ชั่นดาวน์โหลด SAtOnload () {
var องค์ประกอบ = document.createElement (“สคริปต์”);
element.src = “เลื่อน .js” ; document.body.appendChild (องค์ประกอบ);
}
ถ้า
(window.addEventListener) window.addEventListener (“load' ,
downloadJSAtOnload เท็จ);
ถ้า
(window.attachEvent)
Window.attachEvent (“onload”, ดาวน์โหลด JSAtonlaod;
</script>

ขณะทำสิ่งนี้ ตรวจสอบให้แน่ใจว่าคุณได้เปลี่ยน defer.Js เป็นชื่อของไฟล์ JavaScript ภายนอก หลังจากใช้ Wp_footer เพื่อฉีดโค้ดผ่านไฟล์ functions.php ของธีมเด็ก

นี่คือรหัสที่คุณต้องใช้

/**
เลื่อนการแยกวิเคราะห์ JavaScript ด้วยข้อมูลโค้ดจาก Varvy
*/
Add_action ('wp_footer' , 'my_footer_scripts');
การทำงาน
My_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

ตอนนี้เรากำลังดำเนินการตามคำแนะนำทีละขั้นตอนเพื่อความชัดเจน

  1. ไปที่แดชบอร์ด WordPress ของคุณและไปที่การปรากฏตัวจากนั้นแก้ไขธีม
  2. ไปที่ไฟล์ header.php แล้ววางโค้ดที่กล่าวถึงข้างต้นหลังและก่อนส่วนเนื้อหา
  3. จากนั้นคลิกที่ตัวเลือกไฟล์อัพเดต

วิธีที่ 5- การใช้ไฟล์ functions.php

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

คุณควรใช้แอตทริบิวต์ defer กับไฟล์ JavaScript โดยเพิ่มข้อมูลโค้ดลงในไฟล์ functions.php ของคุณ

ในการดำเนินการให้เสร็จสิ้นให้เปิดตัวแก้ไขธีมและไปที่ไฟล์ functions.php เพื่อเพิ่มโค้ดที่กำหนด

การทำงาน
Defer_parsing_of_js ($url) {
ถ้า (
ผู้ใช้_ is_ log_in() )
ส่งคืน $url; //อย่าทำลาย WP Admin
ถ้า ( FALSE ===
สตรอปส์( $url, '.js' ) )
ส่งคืน $url;
ถ้า ( strops ($url, 'jquery.js' ) ) คืนค่า $url;
ส่งคืน str_replace( 'src', 'defer src', $url);
}

Add_filter (
'script_loader_tag',
'defer_parsing_of_js' , 10
);

รหัสนี้ช่วยให้ WordPress เพิ่มแอตทริบิวต์การเลื่อนไปยังไฟล์ JavaScript ยกเว้น JQuery

นี่คือรหัสที่คุณสามารถใช้เพื่อซิงค์แอตทริบิวต์การเลื่อนเวลากับไฟล์ JavaScript ของคุณผ่านไฟล์ functions.php

Add_filter ('สคริปต์ _loader_tag',
'add_defer_tags_to_scripts');
 
การทำงาน
add_defer_tags_to_scripts ($ tyag) {
#list สคริปต์ที่จะเพิ่มมาจาก $scripts_to_defer = array ('script_a', script_b');
$scripts_to_async = อาร์เรย์ ('script _c', 'script_d');
#เพิ่มแท็กเลื่อนไปที่ scripts_to_defer array
Foreach ( $scripts_to_defer เป็น $current_script) {
ถ้า (จริง == สตรอป ($tag,
$current_script) )
Retun
Str_replace ('src,'defer=”defer” src','$tag);
}
#เพิ่มแท็ก async ไปที่ scripts_to_async array
Foreach ( $scripts_to_async เป็น $current_script) {
ถ้า (จริง == สตรอป ($tag,
$current_script) )
กลับ
Str_replace ('src,'defer=”
Async=” async” src', $tag);

}
ส่งคืนแท็ก $;
)

อย่าลืมว่าคุณต้องเข้าคิวแต่ละรหัสเพื่อที่จะได้เพิ่มรหัสต่อไปนี้

Add_action ('wp_enqueue_scripts',
'enqueue_custom_js');
การทำงาน
Enqueue_ custom_js () {
Wp_enqueue_script (' script_a',
Get_stylesheet_directory_uri (), '/script_a.js');
Wp_enqueue_script (' script_b',
Get_stylesheet_directory_uri (), '/script_b.js');
Wp_enqueue_script (' script_c',
Get_stylesheet_directory_uri (), '/script_\c.js');
Wp_enqueue_script (' script_ds',
Get_stylesheet_directory_uri (), '/script_d.js');
}

เมื่อคุณอัปเดตโค้ดทั้งหมดในไฟล์ functions.php แล้ว ให้อัปเดตไฟล์และดูการเปลี่ยนแปลง นี่คือคำแนะนำทีละขั้นตอนในการอัปเดตไฟล์

  1. เปิดแดชบอร์ด WordPress และไปข้างหน้าเพื่อปรากฏตัวจากนั้นแก้ไขธีม
  2. ไปที่ไฟล์ functions.php แล้ววางโค้ดที่กล่าวถึงข้างต้น
  3. จากนั้นคลิกที่ตัวเลือกไฟล์อัพเดต

ปลั๊กอินสำรองเพื่อชะลอการแยกวิเคราะห์ JavaScript ใน WordPress

นอกเหนือจาก Async และ defer คุณยังมีปลั๊กอินอีกสองตัวเลือก Defer Parsing of JavaScript ใน WordPress

  1. แพ็กเสริมความเร็ว

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

    ข้อดี:

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

    จุดด้อย:

    • ซึ่งอาจสร้างปัญหาในการใช้ปลั๊กอินอื่นๆ

  2. Async JavaScript

    3. ปลั๊กอินนี้ช่วยให้โหลดจาวาสคริปต์ทั้งหมดที่เพิ่มเป็น wp_enqueue_script() ได้อย่างง่ายดายโดยใช้ LABJS แจ้งให้เราทราบข้อดีและข้อเสีย

    ข้อดี:

    • มันง่ายมากที่จะใช้ปลั๊กอิน
    • เป็นที่นิยมมากที่สุดในตลาดปลั๊กอิน
    • ออกแบบมาเพื่อชะลอการแยกวิเคราะห์ JavaScript ใน WordPress

    จุดด้อย:

    • อัพเดทไม่ปกติ
    • อาจเข้ากันไม่ได้กับ WordPress . เวอร์ชันใหม่กว่า
    • อาจทำให้เกิดปัญหากับปลั๊กอินอื่น ๆ ได้

    คำถามที่พบบ่อย

    คุณหมายถึงอะไรโดยเลื่อนการแยกวิเคราะห์

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

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

    จะลบการบล็อกการเรนเดอร์ออกจากเว็บไซต์ WordPress ได้อย่างไร

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

    ฉันสามารถใช้เครื่องมือใดเพื่อระบุ JS ที่ไม่สำคัญบนไซต์ของฉันได้

    เพื่อระบุว่า JavaScript มีความสำคัญต่อเว็บไซต์ของคุณหรือไม่ คุณสามารถเข้าถึงเครื่องมือต่อไปนี้

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

    คุณสามารถเลื่อนการแยกวิเคราะห์ JavaScript ใน WordPress ผ่านปลั๊กอิน Auto Optimize ได้หรือไม่

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

    ตอนนี้ปรับตัวเลือกโค้ด JavaScript ให้เหมาะสม และคุณจะปลดล็อกตัวเลือกต่างๆ ตอนนี้ทำเครื่องหมายที่ไฟล์ Aggregate JS-files และปล่อยให้คนอื่น ๆ

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

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

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