วิธีชะลอการแยกวิเคราะห์ Javascript ใน WordPress โดยใช้ Defer และ Async

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

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

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

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

ในบทความนี้ ผมจะอธิบายข้อดีของการชะลอการโหลดไฟล์ Javascript และแสดงปลั๊กอิน WordPress ที่มีประโยชน์ 5 รายการแก่คุณซึ่ง จะทำให้กระบวนการของคุณง่ายขึ้น

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

วิธีต่างๆ ในการชะลอการแยกวิเคราะห์ Javascript ใน WordPress (ด้วย Defer &Async)

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

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

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

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

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

หนึ่งในตัวชี้วัดที่สำคัญที่สุดที่บริการเปรียบเทียบเว็บไซต์เช่น Google PageSpeed ​​Insights และ GTmetrix พิจารณาคือ First Contentful Paint ซึ่งเป็นเวลาที่ใช้สำหรับการแสดงเนื้อหาแรกต่อผู้เข้าชม Google ระบุว่าเวลา FCP 0 ถึง 1.8 วินาทีจะดีและ 1.8 ถึง 3 วินาทีจะปานกลาง หากเกิน 3 วินาทีถือว่าช้า

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

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

<script src="javascript.js"></script>

ไฟล์จาวาสคริปต์

<script defer src="javascript.js"></script>

ไฟล์ Javascript พร้อม Defer

<script async src="javascript.js"></script>

Jไฟล์ avascript พร้อม Async

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

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

หากคุณต้องระบุทั้ง defer และ async เบราว์เซอร์จะใช้ async

มาตรฐานที่สำคัญที่ต้องทำความเข้าใจคือ Document Object Model ซึ่งมักเรียกกันว่า DOM DOM แสดงถึงเอกสารทั้งฉบับ เช่น ไฟล์ XML หรือหน้า HTML เป็นออบเจ็กต์เดียว องค์ประกอบที่สำคัญ เช่น ส่วนหัว ลำตัว และส่วนหัว ถือได้ว่าเป็นกิ่งก้านของ DOM

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

หากไฟล์ Javascript ต้องการข้อมูล เลื่อน เป็นตัวเลือกที่ต้องการเนื่องจากช่วยให้แน่ใจว่าเนื้อหาทั้งหมดถูกดึงมาอย่างถูกต้องก่อนที่จะดำเนินการกับไฟล์

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

ฉันแนะนำให้อ่านบทความของ Zell Liew เรื่อง "จะใช้แอตทริบิวต์ Async และ Defer ได้อย่างไรและเมื่อใด" เพื่อดูคำอธิบายที่ครอบคลุมมากขึ้นว่าเมื่อใดควรใช้การเลื่อนเวลาและ async

วิธีชะลอการแยกวิเคราะห์ Javascript โดยใช้ปลั๊กอิน WordPress

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

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

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

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

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

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

1. อัตโนมัติ

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

แม้ว่า Autoptimize จะรู้จักการรวมไฟล์ แต่ก็สามารถใช้เพื่อเลื่อนการแยกวิเคราะห์ไฟล์ Javascript เพื่อไม่ให้มีการบล็อกการแสดงผล นอกจากนี้ยังสามารถแสดงโค้ด Javascript และ CSS ในบรรทัดได้อีกด้วย และมีตัวเลือกการเพิ่มประสิทธิภาพเพิ่มเติมสำหรับรูปภาพ, Google Fonts, อีโมจิ และอื่นๆ

2. ปลั๊กอิน Async JavaScript

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

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

3. ผลงาน

Perfmatters เป็นกล่องเครื่องมือประสิทธิภาพระดับพรีเมียมของ WordPress ที่มีคุณสมบัติพิเศษด้านประสิทธิภาพมากมาย ปลั๊กอินนี้ขายปลีกในราคา $24.95 ต่อปี ช่วยให้คุณเลื่อนการแยกวิเคราะห์ไฟล์ Javascript (ไฟล์ JS ทั้งหมด) บนเว็บไซต์ของคุณได้ ไฟล์ jQuery สามารถรวมอยู่ในการเลื่อนเวลาได้ และคุณสามารถยกเว้นไฟล์ Javascript บางไฟล์ได้เช่นกัน อีกตัวเลือกที่ยอดเยี่ยมที่ให้คุณคือ Javascript Delay ซึ่งจะโหลดไฟล์ Javascript เมื่อมีการโต้ตอบกับผู้ใช้เท่านั้น

Perfmatters สามารถใช้เพื่อปิดการใช้งานคุณสมบัติหลักของ WordPress เพื่อปรับปรุงความปลอดภัยและประสิทธิภาพ นอกจากนี้ยังช่วยให้คุณกำหนด URL สำหรับเข้าสู่ระบบที่กำหนดเอง โหลดเนื้อหาล่วงหน้า โหลดรูปภาพแบบ Lazy Loading รวม Google Analytics เพิ่มประสิทธิภาพ Google Fonts และอื่นๆ อีกมากมาย

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

4. การล้างข้อมูลสินทรัพย์

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

ใบอนุญาตเดียวสำหรับ Asset CleanUp Pro ขายปลีกที่ €42.36 ต่อปี การอัปเกรดทำให้คุณสามารถวางโค้ดในบรรทัดและระบุ async และเลื่อนเวลาสำหรับไฟล์ Javascript แบบทีละหน้า นอกจากนี้ยังปลดล็อกตัวจัดการปลั๊กอินและให้คุณควบคุมวิธีการโหลดเนื้อหาบนเว็บไซต์ของคุณได้ดียิ่งขึ้น

5. HTTP/2 พุชพรีโหลด

HTTP/2 Push Preload ให้คุณพุชและโหลดไฟล์ Javascript และ CSS ล่วงหน้าในเซิร์ฟเวอร์ที่รองรับ HTTP2 ของคุณโดยใช้ฟังก์ชันการโหลด enqueue สามารถใช้กับไฟล์ทั้งหมดหรือคุณสามารถเลือกกำหนดค่าแต่ละทรัพยากรแยกกันได้ ประเภททรัพยากร ได้แก่ สคริปต์ สไตล์ เสียง ฝัง ดึงข้อมูล แบบอักษร รูปภาพ วัตถุ และวิดีโอ

เมื่อคุณป้อน URL ของไฟล์ Javascript คุณสามารถเลือกที่จะ async เลื่อนหรือลบออกได้ HTTP/2 Push Preload ให้คุณกำหนดกฎว่าการตั้งค่านี้จะใช้เมื่อใด คุณสามารถกำหนดกฎ Javascript สำหรับทรัพยากรสำหรับทุกหน้า สำหรับมือถือหรือเดสก์ท็อป สำหรับโพสต์และหน้าเฉพาะ สำหรับหมวดหมู่ หน้าค้นหา หน้า WooCommerce และอื่นๆ

ความคิดสุดท้าย

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

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

บนเว็บไซต์ของฉันเอง ฉันใช้ Autoptimize สำหรับการรวมไฟล์และ Async JavaScript สำหรับการเลื่อนเวลา Javascript ฉันพอใจกับ Async Javascript แม้ว่า HTTP/2 Push Preload อาจเป็นตัวเลือกที่ดีกว่าสำหรับเจ้าของเว็บไซต์จำนวนมาก เนื่องจากช่วยให้คุณควบคุมได้ดียิ่งขึ้นว่าจะนำการตั้งค่าการเพิ่มประสิทธิภาพไปใช้ที่ใด

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

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

ขอให้โชคดี

เควิน