วิธีที่ถูกต้องในการลบ CSS ที่ไม่ได้ใช้ใน WordPress

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

วิธีลบ CSS ที่ไม่ได้ใช้ใน WordPress . ให้สำเร็จ

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

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

ทำไม CSS ที่ไม่ได้ใช้ถึงอยู่ที่นั่นด้วย?

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

เครื่องมือสำหรับลบ CSS . ที่ไม่ได้ใช้

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

คิดเกี่ยวกับมันในระหว่างการพัฒนา

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

การใช้โซลูชันออนไลน์ UnusedCSS

อีกวิธีหนึ่งคือใช้โซลูชันระดับพรีเมียม เช่น UnusedCSS เพื่อค้นหาและล้างปัญหา CSS ของคุณอย่างง่ายดาย ข้อดีของเครื่องมือนี้คือสามารถสแกนไฟล์ JavaScript และค้นหาการแทรก คุณลักษณะเด่นบางประการของมันคือ:

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

PurgeCSS สำหรับการลบ CSS พิเศษ

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

ปรับแต่งปลั๊กอินอัตโนมัติ

บรรทัดถัดไปคือปลั๊กอิน WordPress ยอดนิยม ด้วยวิธีนี้ คุณสามารถย่อขนาด รวม และแคชสไตล์ได้อย่างง่ายดาย มันแทรกกฎที่จำเป็นในส่วนหัวของหน้า, CSS ที่สำคัญในบรรทัด, ลดขนาด HTML และย้ายสคริปต์ไปที่ส่วนท้าย โดยพื้นฐานแล้ว สามารถใช้เพื่อใช้งาน "Lazy-load" สำหรับรูปภาพ ปรับแบบอักษรให้เหมาะสม และ JavaScript ที่ไม่พร้อมกันแบบอะซิงโครนัส ทุกเว็บไซต์สามารถได้รับประโยชน์จากปลั๊กอินที่กว้างขวางนี้

WP Rocket

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

ลบ CSS ที่ไม่ได้ใช้ด้วย Asset CleanUp

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

เพิ่มประสิทธิภาพ CSS ของคุณด้วย Perfmatters

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

ข้อควรพิจารณาเพิ่มเติมในการปรับปรุงความเร็วเว็บไซต์

พิจารณาใช้ CDN เพื่อส่งไฟล์ CSS – เพื่อลดความเร็วในการโหลด CSS ของคุณหรือไฟล์อื่นๆ ลงอย่างมาก

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

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