วิธีลดขนาดไฟล์ CSS และ JavaScript บน WordPress

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

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

❶ ตรวจว่าไฟล์ CSS และ JavaScript มาจากที่ใด

ไฟล์อาจมาจากธีม ปลั๊กอิน เครื่องมือสร้างหน้าเว็บ หรือบริการภายนอก ก่อนลบหรือปรับไฟล์ ควรหาที่มาก่อนเพื่อไม่ให้กระทบฟังก์ชันที่จำเป็น

① ตรวจหน้าที่มีปัญหา

เลือกหน้าที่ต้องการปรับ เช่น หน้าแรก บทความ หรือหน้าสินค้า แล้วตรวจว่าไฟล์ใดถูกโหลดบนหน้านั้นบ้าง หน้าแต่ละประเภทอาจใช้ไฟล์ไม่เหมือนกัน

② ทบทวนปลั๊กอินและฟังก์ชันที่ใช้งาน

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

③ แยกไฟล์ที่จำเป็นกับส่วนที่ไม่ได้ใช้

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

❷ ย่อไฟล์ CSS และ JavaScript

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

① เริ่มจากเปิด Minify ทีละประเภท

ลองเปิดการย่อ CSS ก่อน แล้วทดสอบหน้าเว็บ จากนั้นจึงทดลองย่อ JavaScript แยกกัน การเปิดพร้อมกันอาจทำให้หาสาเหตุยากเมื่อพบปัญหา

② ตรวจฟังก์ชันสำคัญหลังย่อไฟล์

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

③ หลีกเลี่ยงการแก้ไฟล์ต้นฉบับของธีมโดยตรง

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

❸ ลด CSS ที่ไม่จำเป็นโดยไม่ทำให้หน้าตาเว็บเพี้ยน

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

① ตรวจ CSS จากปลั๊กอินที่ไม่ได้ใช้แล้ว

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

② จำกัด CSS ไว้เฉพาะหน้าที่ต้องใช้

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

③ ใช้การสร้าง Critical CSS อย่างระมัดระวัง

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

❹ จัดการ JavaScript ที่ทำให้หน้าเว็บรอ

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

① เลื่อนโหลดไฟล์ที่ไม่จำเป็นต่อการแสดงผลแรก

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

② ระวังสคริปต์ที่มีลำดับการทำงานต่อกัน

ปลั๊กอินหรือธีมบางตัวต้องโหลดไฟล์ตามลำดับ หากเปลี่ยนวิธีโหลด อาจทำให้เมนู ปุ่ม หรือแบบฟอร์มทำงานผิดพลาด ให้ยกเว้นไฟล์ที่เกี่ยวข้องแทนการหน่วงทั้งหมด

③ ตรวจสคริปต์จากบริการภายนอก

แชต เครื่องมือวิเคราะห์ โฆษณา และวิดีโอฝังอาจเพิ่มไฟล์ JavaScript หากไม่จำเป็นต้องใช้ทุกหน้า ให้จำกัดตำแหน่งการโหลดหรือทบทวนว่าบริการใดไม่จำเป็นแล้ว

❺ รวมไฟล์หรือไม่ ต้องทดสอบกับเว็บไซต์จริง

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

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

❻ ใช้ปลั๊กอินเพิ่มประสิทธิภาพโดยไม่ตั้งค่าซ้ำซ้อน

ก่อนติดตั้งปลั๊กอินใหม่ ให้ตรวจว่าระบบแคช โฮสติ้ง หรือ CDN มีการย่อและจัดการไฟล์ให้อยู่แล้วหรือไม่ การเปิด Minify, Combine หรือ Delay ซ้ำจากหลายระบบอาจทำให้เว็บแสดงผลผิดหรือแยกหาสาเหตุได้ยาก

① เลือกใช้ระบบจัดการไฟล์เพียงจุดเดียว

กำหนดให้ปลั๊กอินหรือระบบหนึ่งเป็นผู้จัดการการย่อและโหลดไฟล์ แล้วปิดฟังก์ชันที่ซ้ำจากระบบอื่น

② เปิดทีละตัวเลือก

เริ่มจากการย่อ CSS หรือ JavaScript อย่างใดอย่างหนึ่ง ทดสอบผล แล้วค่อยพิจารณาการตั้งค่าเพิ่มเติม

③ ล้างแคชหลังเปลี่ยน

หลังปรับการตั้งค่า ให้ล้างแคชจากปลั๊กอิน โฮสติ้ง หรือ CDN ตามระบบที่ใช้ แล้วตรวจหน้าเว็บในหน้าต่างส่วนตัว

❼ ลำดับการลดขนาดไฟล์ CSS และ JavaScript

ComSiam แนะนำให้ทำตามลำดับนี้เพื่อจำกัดความเสี่ยงและหาสาเหตุได้ง่าย

① บันทึกผลก่อนเริ่ม

เก็บผลความเร็วและรายการฟังก์ชันที่ต้องทดสอบไว้ก่อนปรับ

② ตรวจไฟล์และปลั๊กอินที่เกี่ยวข้อง

หาว่าไฟล์มาจากธีม ปลั๊กอิน หรือบริการภายนอก และพิจารณาว่ายังต้องใช้หรือไม่

③ ย่อไฟล์ทีละประเภท

เริ่มจาก CSS หรือ JavaScript ก่อน อย่าเปิดหลายตัวเลือกพร้อมกัน

④ ตรวจเว็บไซต์จริง

ทดสอบหน้าแรก บทความ แบบฟอร์ม เมนู และหน้าสินค้าบนมือถือกับคอมพิวเตอร์

⑤ ย้อนกลับเมื่อพบปัญหา

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

❽ ข้อผิดพลาดที่ควรหลีกเลี่ยง

① ลบไฟล์โดยไม่รู้ว่าใช้กับอะไร

ไฟล์อาจถูกเรียกโดยปลั๊กอินหรือธีม การลบเองอาจทำให้ฟังก์ชันหยุดทำงาน

② เปิด Minify, Combine และ Delay พร้อมกัน

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

③ ทดสอบเฉพาะหน้าแรก

หน้าอื่นอาจใช้ CSS และ JavaScript คนละชุด ควรทดสอบหน้าที่มีฟังก์ชันสำคัญด้วย

④ คิดว่าขนาดไฟล์เล็กลงแล้วเว็บจะเร็วขึ้นทุกด้าน

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

สรุป: ลดเฉพาะไฟล์ที่ไม่จำเป็นและทดสอบทุกครั้ง

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

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