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

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

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

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

ดูเพิ่มเติม: 7 อันดับเว็บโฮสติ้ง WordPress บน Google Cloud ที่ดีที่สุด

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

อีกทางเลือกหนึ่งคือการใช้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: บูสเตอร์เพิ่มความเร็วหน้า

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

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

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

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

2 WP จรวด

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

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

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

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

3 Perfmatters

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

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

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

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

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

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

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

สรุป

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

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

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

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

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

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

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