วิธีการลบ (หรือชะลอ) CSS ที่ไม่ได้ใช้ในไซต์ WordPress

คุณต้องการ ลบ CSS ที่ไม่ได้ใช้ใน WordPress . หรือไม่ และทำให้เว็บไซต์ของคุณเร็วขึ้น?

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

พื้นที่หนึ่งที่คุณสามารถลดขนาดหน้าเว็บไซต์ได้อย่างมากคือการจัดสไตล์ รูปแบบเว็บไซต์ถูกควบคุมโดยใช้ภาษาตามกฎที่เรียกว่า Cascading Style Sheets ซึ่งเป็นหนึ่งในองค์ประกอบหลักของ World Wide Web ควบคู่ไปกับ HTML และ Javascript

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

h1 {
 text-align: center;
 color: red;

}

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

Cascading Style Sheets สามารถเพิ่มเวลาในการโหลดหน้าได้หากไฟล์มีขนาดใหญ่เกินไปหรือหากมีการเรียกไฟล์ CSS มากเกินไป สามารถใช้เทคนิคจำนวนหนึ่งเพื่อจัดการกับปัญหานี้ เช่น Defer, Minify และ Combine

ด้านล่างนี้คือบทสรุปของเทคนิคเหล่านี้

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

มาดู CSS ที่ไม่ได้ใช้กันอย่างละเอียด และดูว่าคุณจะลบโค้ด CSS ที่ไม่ได้ใช้ออกจากเว็บไซต์ WordPress ได้อย่างไร

CSS ที่ไม่ได้ใช้ใน WordPress คืออะไรและเหตุใดจึงเกิดขึ้น

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

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

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

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

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

Critical CSS คืออะไร

อีกคำหนึ่งที่คุณอาจได้ยินบ่อยๆ คือ Critical CSS . หมายถึงสไตล์ใดๆ ที่จำเป็นในการแสดงเนื้อหาต่อผู้ใช้ทันทีโดยไม่ต้องเลื่อน พื้นที่นี้เรียกว่า ครึ่งหน้าบน และเวลาที่เบราว์เซอร์ใช้โหลดเนื้อหาครึ่งหน้าบนเรียกว่า First Contentful Paint (เอฟซีพี).

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