ลบหรือเลื่อน CSS ที่ไม่ได้ใช้ใน WordPress ให้เว็บโหลดเร็วขึ้น

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

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

พื้นที่หนึ่งที่สามารถลดขนาดหน้าเว็บได้มากคือ สไตล์ (Styling) สไตล์ของเว็บไซต์ควบคุมผ่านภาษาแบบกฎเกณฑ์ที่เรียกว่า Cascading Style Sheets (CSS) ซึ่งเป็นบล็อกก่อสร้างหลักของ World Wide Web พร้อมกับ HTML และ JavaScript

ย่อได้ว่า CSS ไฟล์สไตล์ชีท (Stylesheets) ใช้กำหนดสีหน้าเว็บ ฟอนต์ พื้นหลัง สไตล์รูปภาพ ระยะห่าง (margin) ช่องว่าง (padding) และอื่นๆ ในตัวอย่างด้านล่าง โค้ด CSS รับรองว่าหัวข้ออยู่ตรงกลางและแสดงสีแดง

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

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

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

สรุปเทคนิคเหล่านี้ด้านล่าง:

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

ลดผลกระทบของ CSS ด้วย Defer, Minify และ Combine

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

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

CSS ที่ไม่ได้ใช้ใน WordPress คืออะไร & ทำไมจึงเกิดขึ้น?

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

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

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

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

ประเภทปลั๊กอิน WordPress	ตัวอย่าง Unused CSS
Page Builder	แทรกสไตล์สำหรับบล็อกเนื้อหาที่ไม่ได้ใช้บนหน้านั้น
Content Slider	เรียกสไตล์ชีทสไลเดอร์ทั่วเว็บไซต์ แม้จำเป็นเพียงหน้าแรก
Contact Form	เรียกสไตล์ชีทฟอร์มทั่วเว็บไซต์ แม้จำเป็นเพียงหน้าติดต่อ

ตัวอย่างปลั๊กอิน WordPress ที่เพิ่ม CSS ไม่จำเป็นลงในหน้าเว็บ

เป็นการปฏิบัติที่ดีที่จะลบ Unused CSS ใน WordPress แตหากคุณลบโค้ด CSS ที่สำคัญต่อการออกแบบเว็บไซต์ เว็บไซต์ของคุณจะเสียหาย (break)

Critical CSS คืออะไร?

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

Google แนะนำให้ ดึง (extract) Minify และแสดง Critical CSS แบบ inline ในเอลิเมนต์ HEAD เพื่อให้ First Contentful Paint โหลดเร็ว สามารถใช้ Defer โหลดไฟล์ CSS ที่ไม่ใช่ Critical ภายหลัง เพื่อให้ไฟล์ CSS ที่ कम สำคัญ ไม่ชะลอการโหลดหน้าเว็บครั้งแรก

ลบหรือเลื่อน CSS ที่ไม่ได้ใช้ใน WordPress ให้เว็บโหลดเร็วขึ้น — เครื่องมือค้นหาเช่น Google ต้องการให้เจ้าของเว็บแสดงเนื้อหา Above-the-fold เร็ว

วิธีหา Unused CSS

วิธีเร็วในการค้นพบ Unused CSS บนหน้าเว็บคือ ใส่ URL ลงในเครื่องมือรายงานประสิทธิภาพ เช่น GTmetrix, Google PageSpeed Insights หรือ Pingdom Website Speed Test รายงานจะเน้น Unused CSS และแนะนำให้ลบหรือเลื่อนกฎที่ไม่ได้ใช้

เบราว์เซอร์สมัยใหม่มีเครื่องมือนักพัฒนา (Developer Tools) ช่วยวิเคราะห์การออกแบบและโค้ดเว็บไซต์ เครื่องมือนักพัฒนาใน Google Chrome เรียกว่า Chrome DevTools แท็บ Coverage สามารถใช้หา JavaScript และ CSS ที่ไม่ได้ใช้ได้ เป็นวิธีเร็วและมีประสิทธิภาพหาไฟล์ CSS ที่มีกฎไม่ได้ใช้มาก

โหลด Chrome DevTools โดยคลิกขวาบนหน้าเว็บเลือก Inspect แล้วคลิกแท็บ Coverage จะเห็น URL ของแต่ละไฟล์ และว่าไฟล์เป็น JavaScript, CSS หรือทั้งคู่ ด้านขวาแสดงขนาดไฟล์รวมเป็นไบต์ และไบต์ที่ไม่ได้ใช้ทั้งหมด แถบแสดงภาพแสดงโค้ดที่ไม่ได้ใช้สีแดง และโค้ดที่จำเป็นสีเขียวฟ้า สรุปอยู่แผงด้านล่าง แต่หากคลิกไฟล์เฉพาะ จะเห็นกฎ CSS ที่ไม่ได้ใช้ไฮไลท์สีแดงในแผงด้านบน

ดูรายละเอียดที่หน้า Chrome Developers Coverage

มีเครื่องมือ Unused CSS ฟรีและพรีเมียมอื่นๆ ออนไลน์อีกมาก:

JitBit Unused CSS tool – บริการฟรี ที่รวบรวมทุกหน้าบนเว็บไซต์และเน้น CSS selectors ที่ไม่ได้ใช้ที่ไหนเลย
PurifyCSS Online – เครื่องมือฟรีที่มีประโยชน์ เน้นโค้ดที่ไม่ได้ใช้ และให้ไฟล์ CSS ที่สะอาด
UnusedCSS – บริการพรีเมียม สแกน URL หน้าเว็บ และให้ไฟล์ CSS สะอาดโดยไม่มีโค้ดไม่จำเป็น (ราคาเริ่ม $25 ต่อเดือน)

แม้เครื่องมืออย่าง Chrome DevTools และ PurifyCSS Online จะมีประโยชน์สำหรับดูกฎ CSS ที่ไม่ได้ใช้บนเว็บไซต์ แต่ไม่ได้เป็นประโยชน์เสมอไปในการแก้ปัญหา Unused CSS บนแพลตฟอร์มไดนามิกอย่าง WordPress

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

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

ลบ Unused CSS ใน WordPress ด้วย WP Rocket

WP Rocket เป็นโซลูชันประสิทธิภาพ WordPress ยอดนิยมที่สุดบนตลาด ใบอนุญาต WP Rocket ราคา $49 ต่อปี

ปลั๊กอินมีเครื่องมือลบ Unused CSS ทั้งหมดจากเว็บไซต์ของคุณในคลิกเดียว ในพื้นหลัง WP Rocket กำลังตรวจสอบสไตล์ชีทและสคริปต์ทั้งหมดบนแต่ละหน้า และจับคู่กฎ CSS กับ CSS selectors ที่พบในโค้ด HTML กระบวนการนี้ทำภายนอกบนเซิร์ฟเวอร์ของ WP Rocket จึงต้องแน่ใจว่าปลั๊กอินความปลอดภัย WordPress ของคุณได้ whitelist IP เซิร์ฟเวอร์ของพวกเขา

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

อ่านเพิ่มเติม: วิธีทำความสะอาดฐานข้อมูล WordPress

ลบ Unused CSS ใน WordPress ด้วย Perfmatters

Perfmatters เป็นโซลูชันเพิ่มประสิทธิภาพที่ผมใช้บนเว็บไซต์ของตัวเองในการลบโค้ด CSS ที่ไม่ได้ใช้ เป็นปลั๊กอินพรีเมียม WordPress ราคาเพียง $24.95 ต่อปี

ด้วย Perfmatters Script Manager คุณสามารถเปิด/ปิด ไฟล์ CSS และ JavaScript บนโพสต์และหน้าเฉพาะทั่วเว็บไซต์ สามารถทำข้อยกเว้นสำหรับการปิดสคริปต์ ตาม regular expressions, สถานะล็อกอินของผู้ใช้ และประเภทอุปกรณ์

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

ลบ Unused CSS ใน WordPress ด้วย Asset CleanUp

ทางเลือกยอดเยี่ยนแทน Perfmatters คือ Asset CleanUp ปลั๊กอินฟรี แตมีเวอร์ชันพรีเมียมราคา €42.08 ปลดล็อกฟีเจอร์เพิ่มเติมมากมาย

Asset CleanUp's CSS & Javascript manager ให้คุณ preload ไฟล์ และปิดใช้งานไฟล์บนหน้าเฉพาะทั่วเว็บไซต์ สามารถทำข้อยกเว้นสำหรับผู้ใช้ที่ล็อกอินอยู่

หากอัปเกรดเป็น Asset CleanUp Pro จะได้ควบคุมมากขึ้นว่าพื้นที่ไหนของเว็บไซต์โหลดไฟล์ CSS และ JavaScript และเพิ่มข้อยกเว้นสำหรับขนาดหน้าจอและ regular expressions

ลบไฟล์ Unused CSS ด้วย RapidLoad

Autoptimize เป็นปลั๊กอินเพิ่มประสิทธิภาพ WordPress ที่มีประสิทธิภาพ อนุญาตให้ aggregate, minify และแคช CSS, JavaScript และ HTML ไฟล์ ปลั๊กอิน WordPress RapidLoad Power-Up ขยาย Autoptimize ต่อ โดยช่วยลบ Unused CSS ใน WordPress

เหมือนเครื่องมือเพิ่มประสิทธิภาพ CSS ของ WP Rocket RapidLoad Power-Up ลดเวลาโหลดหน้าเว็บโดยตรวจสอบว่ากฎ CSS ไหนจำเป็นจริง

ตามชื่อ ปลั๊กอินใช้บริการ RapidLoad เพื่อลดขนาดไฟล์ CSS จึงต้องสมัครบริการ RapidLoad เพื่อใช้ RapidLoad Power-Up แผนรายเดือนมีสำหรับ RapidLoad ราคา $5.83 ต่อเดือน

ข้อคิดสุดท้าย

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

เพื่อดูว่าเว็บไซต์ของตัวเองมีโค้ด CSS ที่ไม่ได้ใช้มากน้อยแค่ไหน แนะนำให้รัน benchmarks บนเครื่องมือรายงานประสิทธิภาพ เช่น GTmetrix, Google PageSpeed Insights หรือ Pingdom Website Speed Test เครื่องมือนักพัฒนาอย่าง Chrome DevTools และ PurifyCSS Online ก็สามารถใช้ดูได้ว่า CSS เพิ่มน้ำหนักไม่จำเป็นให้หน้าเว็บมากแค่ไหน

ขอขอบคุณที่เราสามารถลบ Unused CSS ใน WordPress ได้ด้วยโซลูชันประสิทธิภาพ WordPress หลายตัว หากต้องการทำให้เป็นอัตโนมัติ แนะนำให้ใช้ WP Rocket หรือ RapidLoad Power-Up ส่วนท่านที่ชอบแนวทาง hands-on (ทำด้วยตัวเอง) ในการดูแลรักษา WordPress จะชอบ Perfmatters และ Asset CleanUp เนื่องจากปลั๊กอินเหล่านี้ให้คุณควบคุมเต็มที่ว่าพื้นที่ไหนของเว็บไซต์โหลดไฟล์ CSS และ JavaScript

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

อ่านเพิ่มเติม: วิธีเลื่อนการแปลง JavaScript ใน WordPress

โชคดีนะครับ

Kevin