ลดขนาด CSS

ส่วนโอกาสในรายการรายงาน Lighthouse ไฟล์ CSS ที่ไม่ได้ย่อทั้งหมด รวมไปถึงการประหยัดที่เป็นไปได้ในรูปแบบกิบิไบต์ (KiB) เมื่อไฟล์เหล่านี้ถูกลดขนาด:

ภาพหน้าจอของการตรวจสอบ CSS ของ Lighthouse Minify

การลดขนาดไฟล์ CSS ช่วยปรับปรุงประสิทธิภาพได้อย่างไร

การลดขนาดไฟล์ CSS จะช่วยปรับปรุงประสิทธิภาพในการโหลดหน้าเว็บ ไฟล์ CSS มักมีขนาดใหญ่กว่าที่จำเป็น เช่น

/* Header background should match brand colors. */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

สามารถลดเหลือ:

h1,
h2 {
  background-color: #000000;
}

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

h1,
h2 {
  background-color: #000000;
}

ตัวลดขนาดบางโปรแกรมใช้เทคนิคอันชาญฉลาดในการลดจำนวนไบต์ เช่น สามารถลดค่าสี #000000 เป็น #000 ได้อีก ซึ่งเป็นชวเลขที่เทียบเคียงกันได้

Lighthouse แสดงค่าประมาณของโอกาสในการประหยัดค่าใช้จ่ายโดยอิงจาก เกี่ยวกับความคิดเห็นและอักขระช่องว่างที่พบใน CSS นี่เป็นค่าประมาณเชิงรับ ดังที่กล่าวไว้ก่อนหน้านี้ ตัวลดขนาดจะเพิ่มประสิทธิภาพได้อย่างชาญฉลาด (เช่น ลด #000000 เป็น #000) เพื่อลดขนาดของไฟล์เพิ่มเติม ดังนั้น หากคุณใช้ตัวลดขนาด คุณอาจพบว่าการประหยัดได้มากกว่าที่ Lighthouse รายงาน

ใช้ตัวลดขนาด CSS เพื่อลดขนาดโค้ด CSS

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

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

ดูวิธีลดขนาดโค้ด CSS ใน Minify CSS

คำแนะนำเฉพาะสแต็ก

Drupal

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

Joomla

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

Magento

เปิดใช้ตัวเลือกMinify CSS Files ในการตั้งค่าสำหรับนักพัฒนาซอฟต์แวร์ของร้านค้า

โต้ตอบ

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

WordPress

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

แหล่งข้อมูล