ส่วนโอกาสของรายงาน Lighthouse จะแสดงไฟล์ CSS ที่ไม่ได้ย่อทั้งหมด รวมถึงข้อมูลที่อาจประหยัดได้เป็นกิบิไบต์ (KiB) เมื่อลดขนาดไฟล์เหล่านี้
การลดไฟล์ 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 โดยอัตโนมัติก่อนที่จะใช้โค้ดที่อัปเดต ซึ่งมักจะทำได้ด้วยเครื่องมือสร้าง เช่น Gulp หรือ Webpack
ดูวิธีลดขนาดโค้ด CSS ใน Minify CSS
คำแนะนำเฉพาะกลุ่ม
Drupal
เปิดใช้การรวมไฟล์ CSS ในการดูแลระบบ > การกำหนดค่า > การพัฒนา คุณกำหนดค่าตัวเลือกการรวมขั้นสูงยิ่งขึ้น ผ่านโมดูลเพิ่มเติม เพื่อเร่งความเร็วของเว็บไซต์ได้โดยการเชื่อมโยง การลดขนาด และการบีบอัดรูปแบบ CSS
จูมลา
มีส่วนขยาย Joomla จำนวนมากที่ช่วยให้เว็บไซต์เร็วขึ้นได้ด้วยการเชื่อมโยง การลดขนาด และการบีบอัดสไตล์ CSS นอกจากนี้ยังมีเทมเพลตที่มีฟังก์ชันการทำงานนี้ด้วย
Magento
เปิดใช้ตัวเลือก Minify CSS Files ในการตั้งค่าสำหรับนักพัฒนาซอฟต์แวร์ของร้านค้า
โต้ตอบ
หากระบบในรุ่นของคุณลดขนาดไฟล์ CSS โดยอัตโนมัติ ให้ตรวจสอบว่าคุณทำให้บิลด์ที่ใช้งานจริงของแอปพลิเคชันใช้งานได้ โดยใช้ส่วนขยายของ React Developer Tools
WordPress
มีปลั๊กอิน WordPress หลายอย่างที่ช่วยให้เว็บไซต์เร็วขึ้นได้ด้วยการลิงก์ ลดขนาด และบีบอัดสไตล์ นอกจากนี้คุณอาจใช้กระบวนการบิลด์เพื่อลดขนาดล่วงหน้าหากเป็นไปได้