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

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

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

นี่เป็นเพราะปลั๊กอินที่น่าทึ่งซึ่งรู้จักกันในชื่อ Asset CleanUp: Page Speed ​​​​Booster ด้วยปลั๊กอินนี้การลบ CSS ที่ไม่ได้ใช้ทำได้ง่ายเพียงแค่คลิกปุ่มไม่กี่ปุ่ม หรือถ้าคุณไม่รังเกียจที่จะจ่ายไม่กี่เหรียญต่อปีด้วย WP Rocket มีปุ่ม CSS ที่ไม่ได้ใช้ที่ถูกลบออก เพียงแค่เปิดใช้งานและปลั๊กอินจะลบ CSS ที่ไม่ได้ใช้ทั้งหมดโดยอัตโนมัติ

ชำระเงิน: โฮสติ้ง WordPress ที่มีการจัดการบน Google Cloud 7 อันดับแรก

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

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

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

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

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

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

ชำระเงิน: ธีม WordPress ที่เร็วและดีที่สุด 10 อันดับแรก

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

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

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

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

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

ในเบราว์เซอร์ Chrome ให้เปิดเครื่องมือ Chrome Dev จากนั้นไปที่การครอบคลุม จากนั้นคลิกปุ่มโหลดซ้ำภายในพื้นที่ครอบคลุม คุณสามารถหาคำแนะนำที่ครอบคลุมเกี่ยวกับวิธีการทำเช่นนี้ได้ที่เครื่องมือ 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. การล้างข้อมูลสินทรัพย์: ตัวเร่งความเร็วเพจ

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

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

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

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

2. WP Rocket

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

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

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

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

3. Perfmatters

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

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

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

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

4. CSS JS Manager

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

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

บทสรุป

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

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

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

ยังอ่าน:

วิธีกำจัดทรัพยากรการบล็อกการแสดงผลใน WordPress

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

วิธีเพิ่มปริมาณการเข้าชมบล็อกของคุณ