ลดขนาด CSS

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

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

การลดขนาดไฟล์ 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 ในลดขนาด CSS

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

Drupal

ตรวจสอบว่าคุณได้เปิดใช้ "รวมไฟล์ CSS" ในหน้า "การดูแลระบบ » การกำหนดค่า » การพัฒนา" styles

Joomla

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

Magento

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

โต้ตอบ

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

WordPress

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

แหล่งข้อมูล