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

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

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

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

“เลื่อนการแยกวิเคราะห์ JavaScript” หมายถึงอะไร

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

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

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

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

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

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

ประโยชน์หลักของการเลื่อน JavaScript คือหน้าเว็บจะโหลดเร็วขึ้นสำหรับผู้เยี่ยมชม สคริปต์ยังคงต้องโหลดอยู่เบื้องหลัง แต่การเลื่อนออกไปควรปรับปรุงคะแนน Largest Contentful Paint (LCP) ซึ่งเป็นหนึ่งในสามตัวชี้วัด Core Web Vital

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

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

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

วิธีแรกเป็นวิธีที่ง่ายที่สุดเนื่องจากต้องใช้ปลั๊กอิน

1. เลื่อนการแยกวิเคราะห์ JavaScript ด้วยปลั๊กอินฟรี

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

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

เมื่อคุณเปิดใช้งานปลั๊กอิน คุณจะต้องเชื่อมต่อกับบัญชี WordPress.com (คุณสามารถใช้บัญชีฟรีสำหรับสิ่งนี้)

เมื่อคุณพร้อม ให้ไปที่ Jetpack → Boost ในแดชบอร์ด WordPress ของคุณ แล้ว คุณจะเห็นภาพรวมคร่าวๆ ว่าเว็บไซต์ของคุณทำงานเป็นอย่างไรในแง่ของประสิทธิภาพ

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

ปลั๊กอินระบุ JavaScript ที่ไม่จำเป็น เนื่องจากมีผลกับสคริปต์ที่ไม่สำคัญต่อเว็บไซต์เท่านั้น

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

โปรดทราบว่า Jetpack Boost ยังสามารถเปิดใช้งานการโหลดแบบ Lazy Loading และเพิ่มประสิทธิภาพ CSS ของไซต์ของคุณ ซึ่งหมายความว่าปลั๊กอินจะย้าย CSS ที่สำคัญไปที่จุดเริ่มต้นของเอกสาร HTML แต่ละรายการ เพื่อให้เบราว์เซอร์แยกวิเคราะห์ก่อน การตั้งค่านี้มีความสำคัญอย่างยิ่งต่อการปรับปรุงคะแนน First Input Delay (FID)

2. เลื่อนการแยกวิเคราะห์ JavaScript โดยใช้ functions.php ไฟล์

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

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

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

มีสองวิธีในการแก้ไขไฟล์ functions.php คุณสามารถใช้ WordPress Theme File Editor ซึ่งคุณสามารถเข้าถึงได้จากเมนู ลักษณะ ที่ปรากฏ โปรดทราบว่าตัวเลือกนี้จะใช้ได้ก็ต่อเมื่อคุณไม่ได้ใช้ธีมบล็อกที่รองรับการแก้ไขเว็บไซต์แบบเต็ม (FSE)

เมื่อคุณเข้าถึงตัวแก้ไขแล้ว ให้เลือกธีมที่ใช้งานอยู่จากเมนูแบบเลื่อนลงทางด้านขวา แล้วมองหาไฟล์ functions.php ในรายการ

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

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

 function defer_js( $url ) {    if ( is_user_logged_in() ) return $url;     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_js', 11 );

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

เพิ่มสคริปต์นั้นที่ส่วนท้ายของไฟล์ functions.php เพื่อไม่ให้รบกวนโค้ดอื่นๆ ภายใน คลิก อัปเดตไฟล์ ที่ด้านล่างของหน้า เท่านี้ก็เรียบร้อย!

หากคุณไม่มีสิทธิ์เข้าถึงโปรแกรมแก้ไขไฟล์ธีม WordPress แต่สะดวกในการทำงานกับโค้ดบนเซิร์ฟเวอร์ คุณสามารถแก้ไข functions.php ได้โดยเชื่อมต่อกับเว็บไซต์ของคุณผ่าน File Transfer Protocol (FTP) คุณจะต้องใช้ไคลเอนต์ FTP เช่น FileZilla ในการดำเนินการนี้ โปรดจำไว้ว่า คุณต้องสำรองข้อมูลเว็บไซต์ทั้งหมดก่อนดำเนินการใดๆ

เมื่อคุณเชื่อมต่อกับเซิร์ฟเวอร์ของเว็บไซต์ของคุณแล้ว คุณจะต้องค้นหาโฟลเดอร์ รู ทของ WordPress นี่คือโฟลเดอร์ที่มีไฟล์ทั้งหมดของไซต์ของคุณ โดยปกติจะมีชื่อว่า www, public_html หรือชื่อไซต์ของคุณ

เปิดโฟลเดอร์นั้นและไปที่ wp-content/themes ควรมีหลายโฟลเดอร์ หนึ่งโฟลเดอร์สำหรับแต่ละธีมที่ติดตั้งบนไซต์ของคุณ ระบุโฟลเดอร์ของธีมที่ใช้งานอยู่และเปิด ไฟล์ functions.php ควรอยู่ข้างใน

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

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

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

คำถามที่พบบ่อยเกี่ยวกับการเลื่อน JavaScript

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

การเลื่อน JavaScript อาจทำให้ไซต์ของคุณเสียหายได้หรือไม่?

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

นั่นเป็นเหตุผลว่าทำไมการใช้เครื่องมืออย่าง Jetpack Boost เพื่อดูแลงานนี้จึงปลอดภัยที่สุด แม้ว่าจะยังเป็นไปได้ว่าการเลื่อน JavaScript อาจทำให้เกิดปัญหา แต่คุณสามารถปิดใช้งานคุณลักษณะหรือปลั๊กอินทั้งหมดได้อย่างง่ายดาย

การเลื่อนการแยกวิเคราะห์ JavaScript เหมือนกับ “การลบ JavaScript ที่บล็อกการเรนเดอร์” หรือไม่

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

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

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

สคริปต์ใด ๆ ที่อยู่ในหมวดหมู่นี้ควรลบอย่างปลอดภัย สำหรับสคริปต์อื่นๆ คุณสามารถใช้ปลั๊กอิน (เช่น Jetpack Boost) หรือแก้ไขไฟล์ functions.php ด้วยตนเองเพื่อเลื่อนออกไป

ฉันสามารถลบ JavaScript ได้อย่างปลอดภัยแทนที่จะเลื่อนออกไปหรือไม่

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

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

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

การเลื่อน JavaScript ช่วยปรับปรุงประสิทธิภาพของเพจหรือไม่?

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

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

ฉันสามารถทำอะไรได้อีกเพื่อปรับปรุงความเร็วในการโหลดหน้าเว็บ

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

1. พิจารณาใช้ผู้ให้บริการโฮสติ้ง WordPress ที่มีการจัดการ
2. ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)
3. ปรับปรุง Core Web Vitals ใน WordPress
4. ลดขนาด CSS
5. เปิดใช้งานการโหลดแบบขี้เกียจใน WordPress

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

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

ปรับปรุงประสิทธิภาพเว็บไซต์ของคุณวันนี้

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

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

1. ใช้ปลั๊กอินเช่น Jetpack Boost
2. เลื่อน JavaScript โดยใช้ไฟล์ functions.php

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