หากไซต์ WordPress ของคุณใช้ธีม WordPress แบบชำระเงินหรือธีมยอดนิยมจากที่เก็บ WordPress Themes อย่างเป็นทางการ โอกาสที่ธีมจะได้รับการพัฒนาสำหรับกรณีการใช้งานที่หลากหลาย และคุณอาจใช้ฟีเจอร์ทั้งหมดที่มีในธีมเพียงชุดเล็กๆ
ในกรณีนั้น ไซต์ของคุณกำลังโหลด CSS ที่ไม่ได้ใช้จำนวนมากซึ่งไม่จำเป็นสำหรับการจัดรูปแบบหน้าของไซต์ของคุณ ตัวอย่างเช่น ธีม WordPress ที่คุณใช้อาจมีสไตล์สำหรับหน้า WooCommerce เช่นกัน แต่ถ้าคุณใช้งานเฉพาะบล็อกบนไซต์ WordPress ของคุณ คุณจะไม่ได้ใช้ CSS ที่รวมอยู่ในหน้า WooCommerce บนไซต์ของคุณ และให้บริการที่ไม่ได้ใช้งาน CSS ให้กับผู้ใช้
หากคุณได้ทดสอบเว็บไซต์ของคุณด้วยเครื่องมือ Google Pagespeed คุณอาจทราบแล้วว่าไซต์ของคุณมีปัญหา CSS ที่ไม่ได้ใช้ ในคู่มือนี้ เราจะแสดงวิธีตรวจสอบ CSS ที่ไม่ได้ใช้ก่อน จากนั้นจึงใช้เครื่องมือฟรีเพื่อลบ CSS ที่ไม่ได้ใช้ออกจากไซต์ WordPress ของคุณ
วิธีตรวจสอบ CSS ที่ไม่ได้ใช้
Google Chrome DevTools (อันที่คุณเห็นเมื่อคุณคลิกตัวเลือก "ตรวจสอบ" ในเมนูบริบท) มีคุณลักษณะความครอบคลุมภายในแท็บแหล่งที่มา คุณสามารถใช้ตัวเลือกความครอบคลุมเพื่อค้นหา CSS และ JS ที่ไม่ได้ใช้ซึ่งเว็บไซต์ของคุณโหลด
- เปิดเว็บไซต์ของคุณใน Chrome บนเดสก์ท็อป
- คลิกขวาที่พื้นที่ว่างบนไซต์ของคุณ แล้วเลือก ตรวจสอบ จากเมนูบริบท
- คลิกที่ แหล่งที่มา แทป กด Ctrl + Shift + P เพื่อเปิดหน้าต่างคำสั่ง แล้วพิมพ์ ความคุ้มครอง และเลือก เริ่มการครอบคลุมเครื่องมือวัดและหน้าโหลดซ้ำ จากคำสั่งที่มีอยู่
- ใต้แท็บความคุ้มครอง ให้คลิกที่ ตัวกรอง URL และป้อนโดเมนรากของไซต์ของคุณที่นี่เพื่อแสดงเฉพาะไฟล์ CSS/JS ภายใน
└ ตรวจสอบ ไบต์ที่ไม่ได้ใช้ เพื่อดูเปอร์เซ็นต์ของข้อมูลที่โหลดในไฟล์ CSS/JS จากธีมของคุณ
- คลิกที่ไฟล์ CSS เพื่อดู CSS ที่ไม่ได้ใช้ (ทำเครื่องหมายด้วยแถบสีแดง) ที่โหลดโดยไซต์ของคุณ CSS ที่ใช้ในหน้าปัจจุบันจะแสดงด้วยแถบสีเขียว
เมื่อคุณวิเคราะห์ CSS ที่ไม่ได้ใช้ทั้งหมดที่กำลังโหลดบนเว็บไซต์ของคุณแล้ว ก็ถึงเวลาลบออก มีเครื่องมือฟรีหลายอย่างที่สามารถลบ CSS ที่ไม่ได้ใช้ออกจากหน้าเว็บได้ ด้านล่างนี้เป็นหนึ่งในเครื่องมือยอดนิยมที่ฉันได้ทดสอบและใช้งานในโครงการของฉันเอง
ใช้ PurifyCSS ออนไลน์เพื่อลบ CSS ที่ไม่ได้ใช้ออก
โดยปกติ คุณจะพบปลั๊กอินสำหรับเกือบทุกอย่างใน WordPress แต่สำหรับการลบ CSS ที่ไม่ได้ใช้ น่าเสียดายที่ไม่มีปลั๊กอินตัวเดียว ดังนั้น เราจะใช้เครื่องมือที่ไม่ใช่เฉพาะ wordpress ด้วยตนเองเพื่อลบ CSS ที่ไม่ได้ใช้ออกจากเว็บไซต์ของคุณ
PurifyCSS คือที่สุด เครื่องมือที่ไม่ใช่นักพัฒนาที่เป็นมิตร คุณสามารถค้นหาเพื่อจัดการกับ CSS ที่ไม่ได้ใช้ เครื่องมือนี้มี UI ที่เรียบง่ายเพื่อให้ผู้ใช้ระบุ URL ของเว็บไซต์หรือโค้ด HTML และ CSS สำหรับ WordPress เราจะใช้ตัวเลือก URL และให้ลิงก์ไปยังหน้าทุกประเภทบนเว็บไซต์ของคุณ เพื่อให้เครื่องมือดึง CSS จากทั้งหมดและปรับให้เหมาะสมสำหรับ CSS ที่ไม่ได้ใช้
ต่อไปนี้คือรายการย่อของหน้าที่คุณควรใส่ลงในเครื่องมือ:
- URL ของหน้าแรก
- URL หน้าโพสต์หลายรายการจากแต่ละหมวดหมู่ในเว็บไซต์ของคุณ
└ เพื่อให้แน่ใจว่ามีการรวม CSS สำหรับองค์ประกอบโพสต์ทั้งหมด
- ติดต่อ เกี่ยวกับ ความเป็นส่วนตัว และหน้าต่างๆ ที่คุณอาจมีในไซต์ของคุณ
- หน้าเอกสารเก่า หน้าค้นหา หน้าผู้แต่ง
- หน้าประเภทโพสต์ที่กำหนดเอง
เคล็ดลับยอดนิยม: สร้างโพสต์/หน้า 'คุณสมบัติ' ที่มีองค์ประกอบของธีมทั้งหมดที่คุณใช้หรืออาจใช้ในอนาคต เช่น ตาราง แกลเลอรีรูปภาพ รหัส ก่อน รายการสั่งซื้อ รายการที่ไม่เรียงลำดับ แบบฟอร์ม แท็บ หีบเพลง บล็อก Gutenberg ที่คุณใช้โดยทั่วไป ฯลฯ
ใช้ URL โพสต์ "คุณสมบัติ" นี้ในเครื่องมือ PurifyCSS Online เพื่อให้แน่ใจว่า CSS สำหรับองค์ประกอบที่ใช้กันทั่วไปรวมอยู่ด้วย
ตี ทำความสะอาด CSS เมื่อคุณได้เพิ่มประเภท URL ที่เกี่ยวข้องทั้งหมดจากไซต์ของคุณลงในเครื่องมือ PurifyCSS Online แล้ว
คัดลอก CSS ใหม่ที่สร้างโดยเครื่องมือและใช้บนไซต์ของคุณ รับรองว่า สำรอง style.css . ดั้งเดิม และไฟล์ CSS อื่นๆ ในธีมของคุณก่อนที่จะแทนที่ CSS ใหม่ที่สร้างโดย PurifyCSS
เคล็ดลับ: คุณสามารถใช้ตัวแก้ไขธีม WordPress ในตัวเพื่อแก้ไขไฟล์ CSS ของธีมของคุณ หรือคุณสามารถใช้โปรแกรม FTP/SFTP เพื่อเชื่อมต่อกับเซิร์ฟเวอร์และแก้ไขไฟล์ได้อย่างสะดวกสบายโดยใช้โปรแกรมแก้ไข Notepad