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

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

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

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

ดังนั้นการเลื่อนการแยกวิเคราะห์ JavaScript หมายความว่าอย่างไร

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

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

โชคดีที่การเลื่อนการแยกวิเคราะห์ JavaScript เป็นวิธีที่ดีที่สุดในการบรรเทาปัญหา

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

เริ่มกันเลย!

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

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

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

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

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

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

จะรู้ได้อย่างไรว่าคุณต้องการเลื่อนการแยกวิเคราะห์ JavaScript

เช่นเดียวกับที่เรากล่าวไว้ก่อนหน้านี้ เครื่องมือทดสอบประสิทธิภาพของเว็บไซต์ เช่น GTmetrix, Google PageSpeed ​​Insights หรือ WP Engine Speed ​​Tool มักแนะนำให้คุณเลื่อนการแยกวิเคราะห์ JavaScript เมื่อวิเคราะห์เว็บไซต์ของคุณ

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

คุณสามารถป้อน URL ของเว็บไซต์ของคุณและรอให้เครื่องมือประเมิน เมื่อการประเมินเสร็จสิ้น ตรงไปที่แท็บ PageSpeed ​​และขยายส่วน Defer parsing of JavaScript

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

Async vs. Defer Attributes

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

• อะซิงโครนัส
• เลื่อนเวลา

คุณสามารถรวมแอตทริบิวต์ async ให้กับแท็กสคริปต์ได้ดังนี้:

 <script src= “path/to/script” async> </script>

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

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

 <script src= “path/to/script” defer> </script>

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

ความแตกต่างที่สำคัญระหว่างแอตทริบิวต์ async และ defer คือเมื่อมีการดาวน์โหลดทรัพยากร

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

ต่อไปนี้คือตัวอย่างเพื่อทำความเข้าใจแอตทริบิวต์ async และ defer:

สมมติว่าคุณมีสองสคริปต์ JS1 และ JS2

เงื่อนไขคือ JS2 ปรากฏในโค้ดหลัง JS1, JS2 มีการพึ่งพา JS1 แต่ JS1 มีขนาดใหญ่กว่า JS2

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

ในทางกลับกัน หากคุณใช้ defer , JS1 และ JS2 จะถูกดาวน์โหลดตามลำดับ ตรวจสอบให้แน่ใจว่าไม่มีข้อผิดพลาด

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

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

ต่อไปนี้คือสาเหตุบางประการที่คุณต้องเลื่อนการแยกวิเคราะห์ JavaScript ใน WordPress:

1. เพื่อเพิ่มอันดับการค้นหา:

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

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

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

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

2. เพื่อเพิ่มอัตราการแปลง:

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

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

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

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

3. เพื่อมอบประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น:

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

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

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

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

• เสียบเข้าไป
• วิธีการวาร์วี่
• ไฟล์ Functions.php

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

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

Async JavaScript เป็นปลั๊กอิน WordPress ฟรีที่ช่วยกำจัด JavaScript ที่บล็อกการแสดงผลในเนื้อหาครึ่งหน้าบน

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

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

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

ขั้นแรก เปลี่ยนเส้นทางไปที่ Plugins -> Add New จากแดชบอร์ด WordPress ของคุณ

ตอนนี้ให้มองหาปลั๊กอิน Async JavaScript บนแถบค้นหา จากนั้น ติดตั้ง และ เปิดใช้งาน

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

ตอนนี้ ให้ติ๊กที่ตัวเลือก Enable Async JavaScript และเลือก Defer as Async JavaScript Method ดังที่แสดงในภาพด้านล่าง:

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

คุณยังสามารถแสดงรายการปลั๊กอินและธีมที่คุณสามารถแยกออกจากการเปลี่ยนแปลงใดๆ ที่ปลั๊กอิน Async JavaScript ทำ

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

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

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

นอกจากนั้น WP Rocket ยังช่วยให้คุณเลื่อนการแยกวิเคราะห์ JavaScript ในแท็บ File Optimization ของแดชบอร์ด WP Rocket

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

หลังจากนั้น เลื่อนลงไปที่ส่วนไฟล์ JavaScript ทำเครื่องหมายที่ตัวเลือก โหลด JavaScript ที่เลื่อนออกไป และเปิดใช้งาน Safe Mode สำหรับ jQuery

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

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

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

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

นี่คือทุกขั้นตอนในการเลื่อนการแยกวิเคราะห์ JavaScript ใน WordPress โดยใช้ปลั๊กอิน W3 Total Cache:

ขั้นแรก เปลี่ยนเส้นทางไปที่ Plugins -> Add New จากแดชบอร์ด WordPress ของคุณ

ตอนนี้มองหาปลั๊กอิน W3 Total Cache บนแถบค้นหาจากนั้น ติดตั้ง และ เปิดใช้งาน

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

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

ตอนนี้ เปลี่ยนเส้นทางไปที่แท็บ Performance -> Minify จากแถบด้านข้างทางซ้าย และเลื่อนลงมาที่ส่วนหัว JS ซึ่งคุณจะเห็นส่วน Operations in areas ที่มีแท็ก HTML สองแท็ก

เลือก Non-blocking โดยใช้ตัวเลือก “defer” ในประเภท Embed ของแท็ก Before </head>

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

คุณสามารถเพิ่ม URI ได้มากเท่าที่คุณต้องการโดยคลิกที่ปุ่ม เพิ่มสคริปต์

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

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

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

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

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

คุณสามารถใช้วิธีนี้โดยปรับแต่งข้อมูลโค้ดที่ Varvy จัดหาให้ จากนั้นเพิ่มสคริปต์ลงในไฟล์ธีมของคุณทันทีก่อนแท็กปิด </body>

นี่คือรหัสที่จะเพิ่มในส่วนเนื้อหาของธีมของคุณเพื่อเลื่อนการแยกวิเคราะห์ JavaScript ใน WordPress:

 <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณได้เปลี่ยนชื่อ defer.js เป็นชื่อไฟล์ JavaScript ภายนอกของคุณ หลังจากนั้น คุณสามารถใช้ wp_footer hook เพื่อฉีดโค้ดผ่านไฟล์ functions.php ของธีมลูกของคุณ

ด้วยวิธีการนี้ คุณสามารถห่อโค้ดของ Varvy ได้ดังนี้:

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

นี่คือทุกขั้นตอนของวิธีการนี้ที่อธิบายด้วยภาพที่ชัดเจน:

เข้าสู่ระบบแดชบอร์ด WordPress ของคุณและไปที่ลักษณะที่ ปรากฏ -> ตัวแก้ไขธีม

ตอนนี้ ให้คลิกที่ไฟล์ header.php จากด้านขวาของหน้าจอ แล้ววางโค้ดที่กล่าวถึงข้างต้นก่อนปิด </body tag>

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

วิธีที่ 5: การใช้ functions.php File

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

คุณสามารถใช้แอตทริบิวต์ defer กับไฟล์ Javascript ได้โดยเพิ่มข้อมูลโค้ดลงในไฟล์ functions.php ของคุณ
คุณต้องไปที่ Theme Editor จากแดชบอร์ด WordPress ของคุณ หลังจากนั้นคลิกที่ functions.php และเพิ่มรหัสต่อไปนี้:

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

ข้อมูลโค้ดนี้บอกให้ WordPress เพิ่มแอตทริบิวต์ defer ให้กับไฟล์ JavaScript ทั้งหมดของคุณ ยกเว้น JQuery
คุณยังสามารถเพิ่มโค้ดต่อไปนี้เพื่อใช้ async หรือ defer แอตทริบิวต์ไปยังไฟล์ JavaScript ของคุณได้อย่างง่ายดายผ่านไฟล์ functions.php :

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

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

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function 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_d', get_stylesheet_directory_uri().'/script_d.js'); }

เมื่อคุณเพิ่มโค้ดลงในไฟล์ functions.php เสร็จแล้ว ให้คลิกที่ปุ่ม Update File

นี่คือทุกขั้นตอนของวิธีการนี้ที่อธิบายด้วยภาพที่ชัดเจน:

เข้าสู่ระบบแดชบอร์ด WordPress ของคุณและไปที่ลักษณะที่ ปรากฏ -> ตัวแก้ไขธีม

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

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

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

1. แพ็คบูสเตอร์ความเร็ว:

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

ข้อดีของ Speed ​​Booster Pack:

• ง่ายมากและใช้งานง่ายและมาพร้อมกับอินเทอร์เฟซผู้ใช้แบบโต้ตอบ
• ช่วยในการเพิ่มประสิทธิภาพ JavaScript, การเพิ่มประสิทธิภาพ CSS, การโหลดแบบ Lazy Loading และการรวม Content Delivery Network (CDN)
• อัปเดตเป็นประจำเพื่อประสิทธิภาพที่ยอดเยี่ยมและการปรับปรุงข้อบกพร่อง

จุดด้อยของ Speed ​​Booster Pack:

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

2. WP JavaScript ที่รอการตัดบัญชี:

ปลั๊กอิน WordPress นี้จะชะลอการโหลด JavaScript ทั้งหมดที่เพิ่มโดยใช้ wp_enqueue_script() โดยใช้ LABJS ผลลัพธ์ที่ได้คือการปรับเวลาในการโหลดให้เหมาะสมที่สุด

ข้อดีของ WP Deferred JavaScripts:

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

ข้อเสียของ WP Deferred JavaScripts:

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

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

บทสรุป

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

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

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

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