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

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

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

เหตุใดการเลื่อนการแยกวิเคราะห์ JavaScript จึงมีความสำคัญ

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

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

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

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

เริ่มเลย

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

วิธีการระบุสคริปต์ที่จะเลื่อนออกไป?

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

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

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

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

เลื่อนหรือแอตทริบิวต์ Async

มีสองวิธีในการกำจัดการดาวน์โหลดสคริปต์เมื่อมีการแสดงหน้า

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

>script src="path/to/script" defer/script

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

>script src="path/to/script" async/script

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

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

ต่อไปนี้คือสองวิธีที่คุณสามารถใช้สำหรับ Defer Parsing of JavaScript

1. ปรับแต่ง functions.php ไฟล์

หากคุณคุ้นเคยกับการพัฒนา WordPress คุณต้องรู้ว่าไม่ควร dd สคริปต์โดยตรงในมาร์กอัป HTML แต่คุณสามารถใช้ฟังก์ชัน WordPress ในตัวเพื่อขอทรัพยากรได้

ในการเพิ่มแอตทริบิวต์ async หรือ defer ให้กับสคริปต์ของคุณ คุณควรเพิ่มฟังก์ชันต่อไปนี้ในไฟล์ functions.php ของธีม WordPress ของคุณ

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;
 }

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

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');
}

2. ปลั๊กอินสำหรับเลื่อนการแยกวิเคราะห์ JavaScript

เป็นที่เข้าใจกันว่าไม่ใช่ทุกคนที่มีความรู้และทักษะมากพอที่จะปฏิบัติตามวิธีการข้างต้น ดังนั้น สำหรับผู้เริ่มต้น สามารถใช้ปลั๊กอินบางตัวสำหรับ Defer Parsing of JavaScript

Async JavaScript

Async JavaScript เป็นปลั๊กอิน WordPress ที่ใช้งานได้ฟรี ซึ่งคุณสามารถติดตั้งบน WordPress เพื่อทำงาน

เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอินไปกว่าการตั้งค่าปลั๊กอินและตรวจสอบการเปิดใช้งานตัวเลือก Async JavaScript

เลื่อนลงเพื่อเลือกระหว่างวิธี async หรือ defer

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

เพิ่มประสิทธิภาพอัตโนมัติ

Autoptimize เป็นปลั๊กอินอีกตัวหนึ่งที่ให้คุณเลื่อนการแยกวิเคราะห์จาวาสคริปต์

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

คุณยังสามารถเพิ่มสคริปต์สำหรับแอตทริบิวต์ async ในแท็บ พิเศษ ได้อีกด้วย

คุณสามารถ แก้ไขไฟล์ functions.php หรือใช้ปลั๊กอิน เช่น Autoptimize และ Async JavaScript นี่เป็นวิธีที่เชื่อถือได้สองวิธีในการเพิ่มแอตทริบิวต์ async และ defer ให้กับแท็กสคริปต์

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