วิธีการลบ CSS และ JS ที่ไม่ได้ใช้ใน WordPress (ง่ายมาก)

การมี CSS และ JS ที่ไม่ได้ใช้งานจำนวนมากในเว็บไซต์ของคุณอาจส่งผลเสียต่อเวลาในการโหลดเว็บไซต์ของคุณ หากคุณเรียกใช้เว็บไซต์ของคุณผ่าน เครื่องมือทดสอบความเร็ว เช่น Google PageSpeed ​​Insightคุณอาจได้รับคำเตือนให้ลบ CSS ที่ไม่ได้ใช้

โชคดีที่มีวิธีง่ายๆ มากในการทำเช่นนั้น คุณไม่จำเป็นต้องมีความรู้ทางเทคนิคพิเศษใดๆ เพื่อที่จะลบ CSS และ JS ที่ไม่ได้ใช้จากไซต์ WordPress ของคุณ

นี่เป็นเพราะปลั๊กอินที่น่าทึ่งที่เรียกว่า การล้างข้อมูลเนื้อหา: ตัวเร่งความเร็วหน้า. ปลั๊กอินนี้ช่วยให้การลบ CSS ที่ไม่ได้ใช้ทำได้ง่ายเพียงแค่คลิกปุ่มไม่กี่ปุ่ม หรืออีกทางหนึ่ง หากคุณไม่รังเกียจที่จะจ่ายเงินเพียงเล็กน้อยต่อปี WP จรวดมีปุ่ม CSS ที่ไม่ได้ใช้ที่ถูกลบออกไป เพียงเปิดใช้งานปุ่มนั้น ปลั๊กอินจะลบ CSS ที่ไม่ได้ใช้ทั้งหมดโดยอัตโนมัติ

เช็คเอาท์: โฮสติ้ง WordPress บน Google Cloud ที่ได้รับการจัดการสูงสุด 7 อันดับแรก

CSS ที่ไม่ได้ใช้คืออะไร?

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

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

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

นอกเหนือจากปลั๊กอินแล้ว นักพัฒนาธีมยังเขียนสิ่งต่างๆ มากมายลงใน style.css ซึ่งส่วนใหญ่ไม่จำเป็น แต่ไม่ว่าจะจำเป็นหรือไม่ก็ตาม พวกมันจะโหลดทุกครั้งที่ไซต์ของคุณโหลด!

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

เช็คเอาท์: 10 อันดับธีม WordPress ที่เร็วที่สุดและดีที่สุด 

วิธีการระบุ CSS ที่ไม่ได้ใช้

การค้นหา CSS และ JS ที่ไม่ได้ใช้งานนั้นทำได้ง่ายมาก มีสองวิธีที่ฉันจะแนะนำ

วิธีหนึ่งคือการวิเคราะห์เว็บไซต์ของคุณผ่าน Google PageSpeed ​​Insight ตรวจสอบว่าเว็บไซต์ของคุณมีปัญหาการลบ CSS ที่ไม่ได้ใช้หรือไม่ คลิกที่ปัญหานั้นแล้วคุณจะสามารถระบุส่วนประกอบของไซต์ที่รับผิดชอบปัญหาดังกล่าวได้

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

ตัวเลือกที่สองคือการวิเคราะห์อย่างละเอียดมากขึ้น คุณสามารถทำได้โดยใช้เครื่องมือ Chrome Dev

ในเบราว์เซอร์ Chrome ของคุณ เปิด Chrome Dev tools จากนั้นไปที่ coverage จากนั้นคลิกปุ่ม reload ภายในพื้นที่ coverage คุณจะพบ คำแนะนำที่ครอบคลุมเกี่ยวกับวิธีการทำสิ่งนี้ในเครื่องมือ Google Developers.

ตัวเลือกอื่นคือการใช้ jitbit สแกนหาตัวเลือก CSS ที่ไม่ได้ใช้งาน. คุณยังสามารถใช้ PurifyCSS เพื่อค้นหา CSS ที่ไม่ได้ใช้

วิธีการลบ CSS ที่ไม่ได้ใช้

ปฏิบัติตามขั้นตอนเหล่านี้เพื่อลบ CSS ที่ไม่ได้ใช้จาก WordPress:

1. ติดตั้ง Asset CleanUp

ไปที่ปลั๊กอินแล้วเพิ่มใหม่ จากนั้นพิมพ์ “Asset CleanUp” ในช่องค้นหาของหน้าเพิ่มปลั๊กอินใหม่ ติดตั้งและเปิดใช้งานปลั๊กอิน

2. ไปที่การตั้งค่าปลั๊กอิน

หากต้องการเข้าถึงการตั้งค่าปลั๊กอิน จากแดชบอร์ด WordPress คลิกที่การตั้งค่า จากนั้นคลิกที่ Asset CleanUp

3. ลบ CSS และ JS ที่ไม่ต้องการ

ในการตั้งค่าปลั๊กอิน คุณอาจต้องยอมรับว่าคุณรู้ว่าปลั๊กอินทำงานอย่างไรภายใต้แท็บการลอกไขมันก่อนที่คุณจะเริ่มต้น

หากต้องการลบ CSS และ JS ให้คลิกที่ตัวจัดการ CSS และ JSS จากนั้นคุณสามารถลบ CSS และ JS ที่คุณไม่ต้องการได้ คุณสามารถลบได้เฉพาะหน้าแรก ทั้งหมด หรือเฉพาะ URL หนึ่งๆ นอกจากนี้ คุณยังสามารถลบได้สำหรับโพสต์ เพจ หรือหมวดหมู่

ตัวอย่างคือการยกเลิกการโหลดแบบฟอร์มติดต่อใดๆ จากการโหลดสำหรับทั้งไซต์ ยกเว้นหน้าติดต่อเรา

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

ลบปลั๊กอิน CSS WordPress ที่ไม่ได้ใช้

นี่คือปลั๊กอินบางส่วนที่คุณสามารถใช้เพื่อลบ CSS ที่ไม่ได้ใช้ใน WordpPress:

1. Asset CleanUp: บูสเตอร์เพิ่มความเร็วหน้า

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

คุณสามารถปิดใช้งานเฉพาะโพสต์แต่ละรายการได้ ด้วยเวอร์ชันพรีเมียม คุณสามารถปิดใช้งาน CSS/JS ที่ไม่ได้ใช้งานโดยใช้ปลั๊กอิน

ปลั๊กอินนี้เป็นปลั๊กอินประสิทธิภาพครบครันพร้อมตัวเลือกอื่นๆ มากมายเพื่อเพิ่มความเร็วให้กับ WordPress การลบ CSS/JS ที่ไม่ได้ใช้เป็นเพียงส่วนหนึ่งเท่านั้น

ในโพสต์นี้ ฉันใช้ปลั๊กอินนี้มีคำแนะนำ

2 WP จรวด

WP จรวด เป็นปลั๊กอินประสิทธิภาพพรีเมียมอันดับหนึ่งของ WordPress หากคุณเป็นมือใหม่ ฉันหมายถึงว่าคุณไม่มีประสบการณ์หรือไม่คุ้นเคยกับ WordPress เลย WP Rocket คือวิธีที่ง่ายที่สุดในการลบ CSS ที่ไม่ได้ใช้

คุณต้องซื้อปลั๊กอิน เมื่อคุณซื้อปลั๊กอินแล้ว คุณสามารถดาวน์โหลดได้จากบัญชีของคุณหรือตรวจสอบอีเมลของคุณเพื่อดูลิงก์ดาวน์โหลด

ติดตั้งปลั๊กอินผ่านแดชบอร์ด > ปลั๊กอิน > เพิ่มใหม่ > อัปโหลด

เพียงไปที่การตั้งค่า WP Rocket แล้วคลิกที่แท็บ “File Optimization” จากนั้นเลื่อนลงมาแล้วคุณจะเห็น “Remove Unused CSS” ทำเครื่องหมายในช่อง บันทึก และล้างแคช

3 Perfmatters

ผลงาน เป็นปลั๊กอินพรีเมียมที่พัฒนาโดย Brian Jackson และ Brett Jackson น้องชายของเขา ปลั๊กอินนี้สามารถช่วยลบ CSS ที่ไม่ได้ใช้ได้อย่างง่ายดาย

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

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

ปลั๊กอินนี้เป็นปลั๊กอินประสิทธิภาพที่มาพร้อมกับตัวเลือกอื่นๆ มากมายเพื่อเพิ่มความเร็วให้กับ WordPress การลบ CSS/JS ที่ไม่ได้ใช้ก็เป็นส่วนหนึ่งของปลั๊กอินนี้

4. ตัวจัดการ CSS JS

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

ปลั๊กอินนี้ยังสามารถเลื่อนการโหลดไฟล์ CSS หรือ JS ได้อีกด้วย

สรุป

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

อาจเป็นไปไม่ได้ที่จะลบ CSS ที่ไม่ได้ใช้ทั้งหมด แต่คุณสามารถลดจำนวนลงให้เหลือน้อยที่สุดได้ ฉันใช้ Asset CleanUp เพื่อลบ CSS ที่ไม่ได้ใช้ เป้าหมายแนวโน้ม.

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

อ่านเพิ่มเติม:

วิธีการกำจัดทรัพยากรที่บล็อกการเรนเดอร์ใน WordPress

วิธีทำให้ WordPress รวดเร็วมาก

วิธีดึงดูดผู้เข้าชมไปที่บล็อกของคุณ