ภาษาการเขียนโปรแกรม JavaScript ช่วยให้หน้าเว็บแสดงเนื้อหาแบบไดนามิก (Dynamic content) บนเว็บไซต์ WordPress ตัวอย่างเช่น JavaScript ถูกใช้เพื่อฝังเสียงและวิดีโอ ยังใช้แสดงแกลเลอรี่รูปภาพ เมนูโต้ตอบ นาฬิกานับถอยหลัง และอื่นๆ อีกมากมาย
ไฟล์ JavaScript ใช้นามสกุลไฟล์ .js และบนเว็บไซต์ WordPress ทั่วไป ไฟล์ JavaScript จะถูกแทรกเข้าไปในหน้าเว็บโดยธีม WordPress และปลั๊กอิน WordPress ที่เปิดใช้งาน ตัวอย่างเช่น สไลเดอร์หน้าแรกของธีมของคุณอาจต้องการไฟล์ชื่อ slider.js เพื่อทำงานได้ถูกต้อง ในขณะที่หน้าฟอร์มติดต่ออาจต้องการไฟล์ชื่อ form.js
ผมเชื่อว่า JavaScript จำเป็นสำหรับเว็บไซต์ WordPress สมัยใหม่ น่าเสียดายที่มันก็สามารถทำให้เว็บไซต์ช้าลงได้ หากไม่ได้รับการปรับให้เหมาะสม (Optimize) อย่างถูกต้อง
ในเวอร์ชันแรกๆ ของโปรโตคอลการถ่ายโอนข้อความไฮเปอร์เท็กซ์ (HTTP) JavaScript สามารถทำให้เว็บไซต์ช้าลงได้ เนื่องจากแต่ละไฟล์ JavaScript ต้องถูกดาวน์โหลดและรันตามลำดับเพื่อให้หน้าเว็บแสดงได้ถูกต้อง เทคนิคการปรับให้เหมาะสมยอดนิยมสำหรับการแก้ปัญหานี้คือการรวมไฟล์ JavaScript หลายไฟล์เข้าด้วยกัน เพื่อลดจำนวนคำขอ HTTP ที่เบราว์เซอร์ต้องทำ เทคนิคนี้บางครั้งเรียกว่า JavaScript Aggregation (การรวม JavaScript)
ในบทความนี้ ผมจะอธิบายว่าทำไมเจ้าของเว็บไซต์จึง รวมไฟล์ JavaScript ภายนอกใน WordPress และแชร์ปลั๊กอิน WordPress ที่มีประโยชน์ซึ่งสามารถใช้ทำงานนี้ได้ ผมจะพูดถึงว่าทำไมการรวมไฟล์ JavaScript ภายนอกจึงไม่ได้รับความจำเป็นอีกต่อไปสำหรับเจ้าของเว็บไซต์ส่วนใหญ่
ทำไมต้องรวมไฟล์ JavaScript ภายนอกใน WordPress?
แม้ฟังก์ชัน JavaScript จะสามารถเพิ่มเข้าไปใน HTML โดยตรงโดยใช้แท็ก SCRIPT แตเป็นที่ปฏิบัติทั่วไปที่จะบันทึกโค้ด JavaScript ในไฟล์ภายนอกแทน มันเป็นเรื่องเป็นประโยชน์กว่า เพราะแยกโค้ดออกจากกัน และอนุญาตให้ฟังก์ชัน JavaScript ถูกเรียกใช้โดยหลายหน้า
แต่ละไฟล์ JavaScript ที่หน้าเว็บต้องการ ต้องถูกดาวน์โหลดโดยเบราว์เซอร์ระหว่างกระบวนการเรนเดอร์หน้าเว็บ (Page rendering)
| การเรนเดอร์หน้าเว็บ (Page Rendering) | เมื่อใครดูหน้าเว็บ เบราว์เซอร์จะสร้างหน้าโดยการประมวลผลแต่ละบรรทัดของโค้ดตามลำดับ เรื่องนี้เรียกว่า Page Rendering |
| คำขอ HTTP (HTTP Requests) | คำขอเพื่อเข้าถึงไฟล์บนเซิร์ฟเวอร์เรียกว่า HTTP Request ดังนั้น เบราว์เซอร์จึงต้องทำ HTTP Request สำหรับแต่ละไฟล์ JavaScript ที่จำเป็นสำหรับหน้าเว็บ |
เมื่อไฟล์ถูกดาวน์โหลดตามลำดับ จำนวนคำขอ HTTP ที่มากสามารถเพิ่มเวลาที่ใช้ในการโหลดหน้าเว็บได้ ดังนั้น การรวมไฟล์ JavaScript ภายนอกใน WordPress จึงสามารถลดจำนวนคำขอ HTTP ที่ทำระหว่างการเรนเดอร์หน้าเว็บได้มาก
บางเครื่องมือค้นหาแนะนำให้รวมไฟล์ JavaScript ภายนอกเป็น 2 ไฟล์
| ฟังก์ชัน JavaScript สำคัญ (ไฟล์ที่ 1) | ไฟล์ JavaScript แรกประกอบด้วยฟังก์ชันสำคัญที่จำเป็นสำหรับการเรนเดอร์การโหลดหน้าแรกอย่างถูกต้อง |
| ฟังก์ชัน JavaScript ที่ 덜 สำคัญ (ไฟล์ที่ 2) | ไฟล์ JavaScript ที่สองประกอบด้วยฟังก์ชันที่ไม่ค่อยสำคัญที่สามารถเรียกใช้ได้หลังจากที่หน้าเว็บโหลดเสร็จแล้ว |
หากหน้าเว็บต้องการไฟล์ JavaScript 9 ไฟล์เพื่อแสดงอย่างถูกต้อง การรวมไฟล์ JS ภายนอกใน WordPress อาจช่วยลดจำนวนคำขอ HTTP ทั้งหมดสำหรับโค้ด JavaScript จาก 9 เหลือเพียง 2 ไฟล์ ไฟล์ CSS ภายนอกก็สามารถรวมกันได้เช่นกัน ลดจำนวนคำขอ HTTP ของหน้าเว็บลงอีก
เว็บไซต์ WordPress ของฉันจะเร็วขึ้นไหมถ้ารวมไฟล์ JavaScript ภายนอก?
เนื่องจากความปรับปรุงของโปรโตคอลการถ่ายโอนข้อความไฮเปอร์เท็กซ์ การรวมไฟล์ JavaScript และ CSS จึงไม่ได้จำเป็นอีกต่อไป เว้นแต่บริษัทโฮสติ้งเว็บของคุณไม่รองรับ HTTP/2
ใน HTTP/1.0 และ HTTP/1.1 แต่ละไฟล์ JavaScript และ CSS ต้องถูกดาวน์โหลดตามลำดับ หมายความว่า ไฟล์หนึ่งต้องดาวน์โหลดเสร็จสมบูรณ์ก่อน ไฟล์ถัดไปจึงจะเริ่มดาวน์โหลดได้ โปรโตคอล HTTP/2 ซึ่งเปิดตัวในปี 2015 แก้ปัญหานี้โดยอนุญาตให้ดาวน์โหลดแบบขนาน (Parallel downloads) เนื่องจากทรัพยากรภายนอกทั้งหมดสามารถดาวน์โหลดพร้อมกันได้ จึงไม่มีประโยชน์จากการรวมไฟล์อีกต่อไป หากมี HTTP/2
HTTP/2 ได้รับการรองรับจากเบราว์เซอร์อินเทอร์เน็ต 95.6% ณ วันที่ 6 มกราคม 2022 HTTP/2 ถูกใช้โดย 46.9% ของเว็บไซต์ทั้งหมดออนไลน์ แตคุณจะเห็นจากกราฟด้านล่างว่าตัวเลขนี้สูงกว่ามากในกลุ่มเว็บไซต์ที่ยอดนิยมที่สุดบนอินเทอร์เน็ต
หากเว็บโฮสต์ของคุณรองรับ HTTP/2 การรวมไฟล์อาจทำให้เว็บไซต์ช้าลง เพราะไฟล์ JavaScript ที่รวมกันมีขนาดใหญ่กว่าไฟล์ที่รวมเข้าด้วยกัน เนื่องจากเบราว์เซอร์ใช้เวลานานกว่าในการดาวน์โหลดไฟล์ JavaScript ขนาดใหญ่ 2 ไฟล์ เทียบกับไฟล์ JavaScript ขนาดเล็กหลายไฟล์ที่ดาวน์โหลดพร้อมกัน
สองเทคนิคที่ผมแนะนำให้ใช้กับ JavaScript คือ Minification (ลดขนาดไฟล์) และ Defer Parsing (เลื่อนการแยกวิเคราะห์)
| Minify (ลดขนาด) | Minification เกี่ยวข้องกับการลบอักขระที่ไม่จำเป็น เช่น ช่องว่างและคอมเมนต์ ผลลัพธ์คือไฟล์ JavaScript มีขนาดเล็กลง |
| Defer Parsing (เลื่อนการแยกวิเคราะห์) | โค้ด JavaScript ทำให้กระบวนการเรนเดอร์หน้าเว็บช้าลง สองเทคนิคที่เรียกว่า Defer และ Async สามารถใช้แก้ปัญหานี้ได้ |
โปรดอ่านบทความของผมเกี่ยวกับการเลื่อนการแยกวิเคราะห์ JavaScript ใน WordPress เพื่อความเข้าใจที่ดีขึ้นว่าทำไม JavaScript จึงทำให้กระบวนการเรนเดอร์หน้าเว็บช้าลง
วิธีรวมไฟล์ JavaScript ภายนอกใน WordPress
หากบริษัทโฮสติ้งเว็บของคุณยังใช้ HTTP 1.1 ยังคงแนะนำให้รวมไฟล์ JavaScript ภายนอกและไฟล์ CSS ใน WordPress
อย่าลืมรันการทดสอบประสิทธิภาพก่อนและหลังการรวมไฟล์ เพื่อให้คุณทราบว่าเวลาโหลดหน้าเว็บได้รับผลกระทบอย่างไร คุณสามารถทำได้โดยใช้ GTmetrix, Google PageSpeed Insights และ Pingdom Website Speed Test
Autoptimize
Autoptimize เป็นหนึ่งในปลั๊กอินการปรับให้เหมาะสมที่มีประสิทธิภาพที่สุดสำหรับผู้ใช้ WordPress รองรับ Minification สำหรับ HTML และการรวมไฟล์และ Minification สำหรับ JavaScript และ CSS ไฟล์ JavaScript ยังสามารถเลื่อนการโหลด (Deferred) แทนการรวม (Aggregated) เพื่อป้องกัน Render-blocking และมีตัวเลือกการปรับให้เหมาะสมสำหรับ Google Fonts ด้วย
ผมเคยใช้ Autoptimize บนเว็บไซต์ WordPress หลายแห่ง เพราะมันปรับปรุงเวลาโหลดหน้าเว็บได้เสมอ
เว็บไซต์ทางการ | ดาวน์โหลด AUTOPtimize
Asset CleanUp
Asset CleanUp เป็นปลั๊กอินปรับให้เหมาะสม WordPress ที่ตั้งค่าได้สูง รองรับ Minification, การรวมไฟล์ และการเลื่อนการโหลด (Deferring) ของ JavaScript และ CSS มันยังให้คุณทำความสะอาด HTML และให้เครื่องมือมากมายสำหรับจัดการฟอนต์และลดผลกระทบต่อเวลาโหลดหน้าเว็บ
คุณสมบัติของ Asset CleanUp ที่โดดเด่นคือ JavaScript และ CSS Manager ฟีเจอร์นี้ให้คุณระบุได้อย่างแม่นยำว่าไฟล์ JavaScript และ CSS โหลดบนหน้าไหนบ้างทั่วทั้งเว็บไซต์ของคุณ
เว็บไซต์ทางการ | ดาวน์โหลด ASSET CLEANUP
WP Super Minify
WP Super Minify ทำงานแตกต่างออกไปเล็กน้อย โดยให้คุณเลือกได้แค่การบีบอัด JavaScript และการบีบอัด CSS เมื่อเลือก WP Super Minify จะรวม ไฟล์ Minify และแคช (Cache) ไฟล์ของคุณให้อัตโนมัติ
หากคุณมองหาโซลูชันปรับให้เหมาะสมที่เรียบง่ายและทำงานได้ดี นี่อาจเป็นปลั๊กอินสำหรับคุณ
เว็บไซต์ทางการ | ดาวน์โหลด WP SUPER MINIFY
การรวมไฟล์ JavaScript ภายนอกโดยใช้ปลั๊กอินแคช WordPress
ปลั๊กอินแคช WordPress ที่ดีที่สุดรวมถึงเครื่องมือการปรับให้เหมาะสมเพิ่มเติมมากมายเพื่อช่วยปรับปรุงประสิทธิภาพเว็บไซต์ ดังนั้น มีโอกาสสูงที่โซลูชันแคช WordPress ที่คุณใช้อยู่อนุญาตให้คุณรวมไฟล์ JavaScript และ CSS ภายนอกได้
ใน WP Rocket ตัวอย่างเช่น มีตัวเลือกให้ Minify และรวมไฟล์ JavaScript และ CSS ไฟล์ JavaScript ยังสามารถเลื่อนการโหลด (Deferred) เพื่อป้องกัน Render-blocking ได้
คำแนะนำของผมคือ ทดสอบเวลาโหลดหน้าเว็บโดยใช้การรวมไฟล์ด้วยปลั๊กอินแคช WordPress ที่คุณชอบ และเปรียบเทียบผลลัพธ์กับโซลูชันปรับให้เหมาะสม JavaScript แบบแยกต่างหาก เช่น Autoptimize และ Asset CleanUp
ข้อสรุปสุดท้าย
หวังว่าคุณจะเพลิดเพลินกับการสำรวจการรวมไฟล์ JavaScript ภายนอก ตามที่คุณเห็น ไม่ได้จำเป็นต้องรวมไฟล์ JavaScript อีกต่อไป หากเว็บโฮสต์ของคุณรองรับ HTTP/2 เพราะการดาวน์โหลดไฟล์แบบขนานมีประสิทธิภาพมากกว่า
หากเว็บโฮสต์ของคุณรองรับเฉพาะ HTTP/1.1 คุณสามารถรวมไฟล์ JavaScript ภายนอกใน WordPress เพื่อลดเวลาโหลดหน้าเว็บได้
อ่านเพิ่มเติม: ลบ CSS ที่ไม่ได้ใช้ใน WordPress
ขอบคุณที่อ่าน
Kevin
