ลดขนาดไฟล์ CSS และ JavaScript ใน Joomla อย่างไรให้หน้าเว็บโหลดเร็วขึ้น

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

❶ ตรวจไฟล์ที่หน้าเว็บโหลดอยู่ก่อน

① ใช้เครื่องมือวัดหาผู้ต้องสงสัย

ทดสอบหน้าที่ช้าด้วย PageSpeed Insights หรือ Lighthouse แล้วดูรายการ CSS และ JavaScript ที่มีผลต่อการแสดงผล หากต้องการตรวจหน้าเว็บละเอียดขึ้น ให้เปิด Chrome DevTools แล้วดูแท็บ Network เพื่อหาไฟล์ที่ใหญ่ โหลดช้า หรือถูกเรียกซ้ำ

ตรวจหลายประเภทหน้า เช่น หน้าแรก บทความ และหน้าหมวดหมู่ เพราะส่วนเสริมบางตัวโหลดไฟล์เฉพาะบางหน้า

② ตรวจหาไฟล์ที่ไม่ได้ใช้งาน

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

❷ ลดไฟล์ CSS และ JavaScript อย่างปลอดภัย

① ปิดส่วนเสริมหรือฟังก์ชันที่ไม่ใช้

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

② โหลดไฟล์เฉพาะหน้าที่ต้องใช้

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

Joomla มี Web Asset Manager สำหรับจัดการ CSS, JavaScript และลำดับความขึ้นต่อกันของไฟล์ในส่วนเสริม การปรับไฟล์ที่ลงทะเบียนไว้ควรคำนึงถึง dependency เพื่อไม่ให้สคริปต์ทำงานก่อนส่วนที่จำเป็น

③ บีบอัดไฟล์โดยเก็บต้นฉบับไว้

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

❸ ตั้งค่าการโหลดให้เหมาะกับหน้าเว็บ

① ลด CSS ที่ขวางการแสดงผล

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

② เลื่อน JavaScript เฉพาะไฟล์ที่ไม่กระทบการทำงาน

สคริปต์บางไฟล์อาจตั้งให้โหลดภายหลังได้ แต่ไฟล์ที่จำเป็นต่อเมนู แบบฟอร์ม หรือองค์ประกอบที่ผู้ใช้ต้องโต้ตอบทันทีต้องทดสอบเป็นพิเศษ หากใช้ตัวเลือก Defer หรือ Async จากส่วนเสริม ให้เปิดทีละกลุ่มและตรวจว่าลำดับการทำงานยังถูกต้อง

③ อย่ารวมไฟล์ทั้งหมดโดยไม่ตรวจผล

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

❹ ทดสอบหลังปรับและแก้เมื่อเกิดปัญหา

① ตรวจฟังก์ชันสำคัญให้ครบ

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

② เปรียบเทียบผลด้วยหน้าเดิม

ทดสอบ URL และอุปกรณ์เดิม แล้วเปรียบเทียบเวลาโหลด รายการไฟล์ และค่าประสิทธิภาพที่เกี่ยวข้อง ล้างแคช Joomla และแคชของส่วนเสริมหากยังเห็นไฟล์เวอร์ชันเก่า

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