Defer JavaScript ใน WordPress อย่างมีประสิทธิภาพ: เพิ่มความเร็วด้วยเทคนิค Defer และ Async

เว็บไซต์ WordPress ที่โหลดเร็ว ให้ประโยชน์มากในหลายด้าน: ปรับปรุงประสบการณ์ผู้ใช้ (User Experience) เพิ่มความมองเห็นบน Search Engine และเพิ่ม Organic Traffic

หน้าเว็บประกอบด้วย HTML, CSS, JavaScript และรูปภาพ ทุกอย่างต้อง Optimize เพื่อลด Page Load Time รูปภาพมีผลต่อ Page Size มากที่สุด สำคัญที่จะลดขนาดไฟล์รูปด้วยปลั๊กอิน Optimize รูปภาพ WordPress

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

โค้ด JavaScript สามารถ Execute ภายหลังได้ด้วย 2 เทคนิค คือ Defer และ Async ทั้งสองวิธีได้รับการรองรับจากปลั๊กอิน Caching ยอดนิยม แตโซลูชันเฉพาะทาง (Dedicated solutions) จะให้ความควบคุมมากกว่า ว่าไฟล์ JavaScript ไหนควรโหลดทีหลัง

ในบทความนี้ จะอธิบายประโยชน์ของการ Defer Loading ไฟล์ JavaScript และแนะนำปลั๊กอิน WordPress 5 ตัวที่ทำให้กระบวนการง่ายขึ้น

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

วิธีต่างๆ ในการ Defer JavaScript Parsing ใน WordPress (ด้วย Defer และ Async)

JavaScript กลายเป็นองค์ประกอบสำคัญของเว็บ WordPress ใช้แสดง ปุ่ม ฟอร์ม แกลเลอรีสื่อ Audio Video Countdown Timer Timeline โซเชียลมีเดีย และอื่นๆ

เสียดายที่ JavaScript เป็นหนึ่งในสาเหตุหลักที่ทำให้หน้าเว็บโหลดช้า เพราะ Browser ต้องหยุด ดาวน์โหลด และ Execute แต่ละสคริปต์ ก่อนจะ Parse HTML Markup ต่อได้

Parsing คือกระบวนการที่ Browser วิเคราะห์และแปลงโค้ดหน้าเว็บเป็นรูปแบบที่ Execute ได้ โค้ดที่หยุดกระบวนการนี้เรียกว่า "Render-Blocking" เพราะมันล่าช้าการ Render หน้าเว็บให้ผู้เยี่ยมชมเห็น

Render-Blocking Resources เป็นสาเหตุทั่วไปที่ WordPress โหลดช้า Critical CSS สามารถแสดงแบบ Inline ได้เพื่อป้องกัน Render-Blocking แตดีกว่าคือ Defer การโหลด JavaScript ทีหลังด้วย Defer หรือ Async เพื่อไม่ให้ JavaScript บล็อคการ Render หน้า

ยังเป็น Best Practice ที่จะลบ JavaScript ที่ไม่ได้ใช้ และลด JavaScript Execution Time วิธีหนึ่งคือลดขนาดไฟล์ JavaScript ใหญ่ผ่านกระบวนการ Minification ซึ่งลบ Whitespace และโค้ดที่ไม่จำเป็นออกจากแต่ละไฟล์ JavaScript

หนึ่งใน Metric สำคัญที่บริการ Benchmark อย่าง Google PageSpeed Insights และ GTmetrix พิจารณาคือ First Contentful Paint (FCP) คือเวลาที่ใช้แสดงเนื้อหาแรกให้ผู้เยี่ยมชมเห็น Google กำหนด FCP 0-1.8 วินาที = ดี 1.8-3 วินาที = ปานกลาง มากกว่า 3 วินาที = ช้า

แค่ใส่ URL หน้าเว็บลงในบริการ Benchmark จะเห็นไฟล์ JavaScript และ CSS ที่บล็อคการ Render จากภาพด้านล่าง Render-blocking CSS และ JavaScript ใช้เวลาหลายวินาทีในการดาวน์โหลด หากกำจัด Resource เหล่านี้ หน้าจะโหลดเร็วขึ้นอย่างมีนัยสำคัญ

วิธีที่มีประสิทธิภาพที่สุดในการกำจัด Render-blocking JavaScript files คือใช้ Attribute defer และ async Boolean Attributes เหล่านี้ใช้ได้กับ HTML script element เฉพาะเมื่อใช้ SRC attribute เรียกไฟล์ภายนอก

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

JavaScript File (ปกติ)

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

JavaScript File พร้อม Defer

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

JavaScript File พร้อม Async

เมื่อเพิ่ม Attribute defer หรือ async ให้ HTML script element = บอก Browser ให้ดาวน์โหลดไฟล์พร้อมกับการ Parse หน้า

Defer: ไฟล์จะ Execute หลังจากหน้าถูก Parse เสร็จสมบูรณ์

Async: เป็น Asynchronous Operation Execute ไฟล์ทันทีที่ดาวน์โหลดเสร็จ ดังนั้น เวลารวมในการ Parse หน้าด้วย Async จะสูงกว่าเล็กน้อย เพราะ Browser จะหยุด Parse HTML ชั่วคราวเพื่อ Execute ไฟล์

หากระบุทั้ง Defer และ Async Browser จะใช้ Async

มาตรฐานสำคัญที่ต้องเข้าใจคือ Document Object Model (DOM) DOM แทนเอกสารทั้งหมด (XML หรือ HTML) เป็น Object เดียว องค์ประกอบสำคัญ เช่น Head, Body, Headers ถือเป็นกิ่งของ DOM

หากไฟล์ JavaScript ไม่ต้องการข้อมูลจากไฟล์อื่นหรือจาก DOM เอง การใช้ Async Method อาจคุ้มค่า เพราะ Element สำคัญของหน้าจะแสดงเร็วขึ้น แตต้องระวัง Async อาจทำให้ Error หากไฟล์ Request ข้อมูลที่ยังโหลดไม่เสร็จ

หากไฟล์ JavaScript ต้องการข้อมูล Defer เป็นตัวเลือกที่ดีกว่า เพราะรับรองว่าดึงข้อมูลทั้งหมดได้ถูกต้องก่อน Execute ไฟล์

เป้าหมายของ Defer และ Async คือลดการบล็อคการ Render หน้า ไม่ว่าจะใช้วิธีไหน ก็จะเห็นการปรับปรุง Page Loading Time อย่างชัดเจน

แนะนำอ่านบทความของ Zell Liew "How and when to use Async and Defer attributes" เพื่อคำอธิบายครบถ้วนว่ándo ควรใช้ Defer และ Async

วิธี Defer Parsing ของ JavaScript ด้วยปลั๊กอิน WordPress

JavaScript Calls ส่วนใหญ่บนเว็บมาจาก Theme และปลั๊กอิน WordPress ที่เปิดใช้งาน ดังนั้นการเพิ่ม Attribute Defer/Async ด้วยตนเองใน Script Elements จึงไม่เป็นไปได้

ดีกว่าคือใช้ปลั๊กอิน Performance WordPress เพื่อ Defer Parsing JavaScript ใน WordPress และลดความซับซ้อนในการ Apply Defer หรือ Async ทั่วเว็บไซต์

ระวัง: การตั้งค่าผิดจะทำให้เว็บพัง เช่น Contact Form อาจแสดงไม่ถูกต้อง หากไม่เลือกตั้งค่าที่ถูกต้อง หรือ Exclude ไฟล์ของ Contact Form ออกจาก Optimization

ดังนั้น Trial and Error (ลองผิดลองถูก) จำเป็นในการหาตั้งค่าที่เหมาะสมและ Performance ที่ดีที่สุด

• สำรองเว็บไซต์ (Website Backups) – Backup ก่อนเปิดใช้งานปลั๊กอิน Optimization
• ทดสอบประสิทธิภาพ (Test Performance) – ทดสอบหน้าสำคัญ และทุกครั้งที่เปลี่ยนตั้งค่า Optimization
• ตรวจสอบเว็บไซต์ (Review Your Website) – เช็คว่าไม่มีส่วนไหนพังหลังเปลี่ยนตั้งค่า

หากเจอปัญหาใหญ่ระหว่าง Defer Parsing JavaScript ให้กลับไปใช้ Default Settings ของปลั๊กอิน ปลั๊กอินก็สามารถ Uninstall ได้หากไม่เข้ากับเว็บ

1. Autoptimize

Autoptimize เป็นโซลูชัน Optimize WordPress ที่หลากหลาย ให้ Aggregate และ Minify JavaScript, CSS, HTML เนื้อหาที่ Optimize แล้วจะถูก Cache เพื่อ Performance Cache นี้อาจใหญ่เกินไปเร็วๆ แนะนำใช้ Autoclear Autoptimize Cache เพื่อล้าง Cache อัตโนมัติ

แม้ Autoptimize จะรู้จักในเรื่อง File Aggregation แตก็สามารถ Defer Parsing JavaScript files ได้ เพื่อไม่ให้เป็น Render-blocking JavaScript และ CSS ยังสามารถแสดงแบบ Inline ได้ พร้อมตัวเลือก Optimize เพิ่มเติมสำหรับ รูปภาพ Google Fonts Emojis และอื่นๆ

DOWNLOAD AUTOPTIMIZE

2. Async JavaScript Plugin

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

ฟีเจอร์สุดโคولคือ Setup Wizard ที่รัน Performance Tests บน GTmetrix สำหรับทุก Configuration ที่เป็นไปได้ของเว็บคุณ ประหยัดเวลามาก เพราะผลลัพธ์แสดงว่าเว็บจะเร็วแค่ไหนกับแต่ละ Configuration แตต้องเช็คเว็บทุกครั้งว่าส่วนไหนพัง

DOWNLOAD ASYNC JAVASCRIPT

3. Perfmatters

Perfmatters เป็น Performance Toolbox แบบ Premium ที่มีฟีเจอร์ Performance เฉพาะตัวหลายสิบอย่าง ราคาเริ่ม $24.95/ปี ให้ Defer Parsing JavaScript files (ทั้งหมด) บนเว็บ ไฟล์ jQuery สามารถรวมใน Deferral ได้ และ Exclude ไฟล์ JavaScript เฉพาะได้ อีกฟีเจอร์น่าสนใจคือ JavaScript Delay ซึ่งจะโหลด JavaScript ก็ต่อเมื่อมี User Interaction

Perfmatters สามารถ Disable Core WordPress Features เพื่อเพิ่ม Security และ Performance กำหนด Custom Login URL, Preload Content, Lazy Load Images, รวม Google Analytics, Optimize Google Fonts และอื่นๆ

ฟีเจอร์โปรดของผมคือ Script Manager เพราะให้ Enable/Disable JavaScript และ CSS files สำหรับทุกหน้าบนเว็บ ได้ ลดขนาดหน้าเว็บมาก เพราะ Developer มักโหลด JavaScript/CSS ทั่วเว็บ แม้จริงๆ แล้วจำเป็นแค่บางหน้า

OFFICIAL WEBSITE

4. Asset CleanUp

Asset CleanUp เป็นปลั๊กอิน Optimization ที่ Feature-rich ให้ Minify, Combine และ Defer Parsing JavaScript และ CSS files CSS และ JS Manager ทำงานคล้าย Script Manager ของ Perfmatters ให้ระบุว่าไฟล์ไหนโหลดบนหน้าไหน ยังสามารถ Disable Core WordPress Settings, Clean up HTML Code, Optimize Google Fonts และอื่นๆ

License เดียว Asset CleanUp Pro ราคา €42.36/ปี อัปเกรดแล้วสามารถวางโค้ด Inline และระบุ Async/Defer สำหรับ JavaScript files ตามหน้าเว็บ (Page-by-page) ยังปลดล็อค Plugin Manager และให้ควบคุมการโหลด Assets ทั่วเว็บได้ดีขึ้น

DOWNLOAD ASSET CLEANUP | ASSET CLEANUP PRO

5. HTTP/2 Push Preload

HTTP/2 Push Preload ให้ Push และ Preload JavaScript และ CSS files ผ่าน HTTP2 Supported Server โดยใช้ Enqueue Loading Function ใช้ได้กับทุกไฟล์ หรือ Configure แต่ละ Resource แยกได้ Resource Types รวมถึง Script, Style, Audio, Embed, Fetch, Font, Image, Object, Video

เมื่อใส่ URL ไฟล์ JavaScript สามารถเลือก Async, Defer หรือ Remove HTTP/2 Push Preload ให้กำหนด Rules ว่าเมื่อไหร่ Setting นี้จะ Apply ได้ กำหนด Rules สำหรับ Resource ทุกหน้า, Mobile/Desktop, Post/Page เฉพาะ, Categories, Search Pages, WooCommerce Pages และอื่นๆ

DOWNLOAD HTTP/2 PUSH PRELOAD

ข้อความสรุป

JavaScript ยังคงเป็นวิธีที่นิยมเพื่อเพิ่ม Dynamic Content และ Interactive Elements บนเว็บ ด้วย Theme และปลั๊กอิน WordPress หลายตัวใช้ JavaScript จึงสำคัญที่จะ Defer Parsing ของ JavaScript ใน WordPress และใช้ Defer และ Async เพื่อให้หน้า Render เร็ว และลดการบล็อคการ Render

จะพบฟังก์ชัน Apply Defer และ Async ในปลั๊กอิน WordPress หลายตัว แตโซลูชันที่อ้างอิงในบทความนี้ให้ความควบคุมมากกว่ากับไฟล์ JavaScript ของคุณ

บนเว็บของผม ใช้ Autoptimize สำหรับ File Aggregation และ Async JavaScript สำหรับ JavaScript Deferrals พอใจกับ Async JavaScript แต HTTP/2 Push Preload อาจเป็นตัวเลือกดีกว่าสำหรับเจ้าของเว็บหลายคน เพราะให้ควบคุมได้ดีกว่าว่าจะ Apply Optimization Settings ที่ไหน

Asset CleanUp และ Perfmatters ให้ฟีเจอร์และฟังก์ชันคล้ายกัน ไม่แนะนำใช้ร่วมกัน Asset CleanUp Pro ให้ควบคุมดีกว่าและฟีเจอร์ขั้นสูงกว่า แตผมยังใช้ Perfmatters บนเว็บตัวเองสำหรับ Clean up WordPress เพราะใช้ง่ายกว่า ทั้งสองโซลูชันจะเพิ่มประสิทธิภาพ WordPress Optimization Setup ใดๆ แม้จะใช้ปลั๊กอินตัวอื่น Defer Parsing JavaScript เพื่อลด Render Blocking

ขอแนะนำทดสอบปลั๊กอิน WordPress ทั้งหมดนี้สำหรับ Defer JavaScript Parsing และทดสอบหลายครั้ง เพื่อให้ได้ Configuration ที่ดีที่สุด

โชคดีนะครับ

Kevin