ส่วนโอกาสในรายการรายงาน Lighthouse สไตล์ชีตทั้งหมดที่มี CSS ที่ไม่ได้ใช้ซึ่งน่าจะประหยัดได้ 2 KiB หรือมากกว่า นำ CSS ที่ไม่ได้ใช้ออก เพื่อลดจำนวนไบต์ที่ไม่จำเป็นที่กิจกรรมเครือข่ายใช้ ให้ทำดังนี้
CSS ที่ไม่ได้ใช้ทำให้ประสิทธิภาพช้าลงอย่างไร
การใช้แท็ก <link> เป็นวิธีทั่วไปในการเพิ่มสไตล์ในหน้าเว็บ
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
ไฟล์ main.css ที่เบราว์เซอร์ดาวน์โหลดเรียกว่าสไตล์ชีตภายนอก
เนื่องจากถูกจัดเก็บแยกจาก HTML ที่ใช้ URL ดังกล่าว
โดยค่าเริ่มต้น เบราว์เซอร์จะต้องดาวน์โหลด แยกวิเคราะห์ และประมวลผลสไตล์ชีตภายนอกทั้งหมด ประสบการณ์ที่เจอก่อนที่จะแสดงหรือแสดงเนื้อหาไปยังหน้าจอของผู้ใช้ได้ เป็นเรื่องไม่เหมาะสมที่เบราว์เซอร์จะพยายามแสดงเนื้อหา ก่อนที่จะประมวลผลสไตล์ชีต เนื่องจากสไตล์ชีตอาจมีกฎที่ส่งผลต่อการจัดรูปแบบของหน้าเว็บ
สไตล์ชีตภายนอกแต่ละรายการจะต้องดาวน์โหลดจากเครือข่าย การเดินทางของเครือข่ายเพิ่มเติมเหล่านี้อาจทำให้ใช้เวลามากขึ้นอย่างมาก ที่ผู้ใช้ต้องรอก่อนที่จะเห็นเนื้อหาบนหน้าจอ
CSS ที่ไม่ได้ใช้ยังทำให้การสร้างเบราว์เซอร์ แผนผังการแสดงผล แผนผังการแสดงผลเหมือนกับแผนผัง DOM เว้นแต่จะรวมรูปแบบสำหรับแต่ละโหนดไว้ด้วย ในการสร้างต้นไม้แสดงผล เบราว์เซอร์ต้องเดินแผนผัง DOM ทั้งแผนผังและตรวจสอบว่ากฎ CSS ใดมีผลกับแต่ละโหนด ยิ่งมี CSS ที่ไม่ได้ใช้มาก เบราว์เซอร์อาจต้องใช้เวลาในการคำนวณรูปแบบสำหรับแต่ละโหนดมาก
วิธีตรวจหา CSS ที่ไม่ได้ใช้
แท็บ "การครอบคลุม" ของ Chrome DevTools ช่วยให้คุณค้นพบ CSS ที่สำคัญและไม่สำคัญได้ โปรดดูหัวข้อดู CSS ที่ใช้และไม่ได้ใช้ด้วยแท็บการครอบคลุม
CSS วิกฤตแบบในหน้าและเลื่อนเวลา CSS ที่ไม่สำคัญ
คล้ายกับโค้ดในบรรทัดในแท็ก <script>
ต้องใช้รูปแบบสำคัญในบรรทัดสำหรับ First Paint
ภายในบล็อก <style> ที่ head ของหน้า HTML
จากนั้นโหลดสไตล์ที่เหลือแบบไม่พร้อมกันโดยใช้ลิงก์ preload
พิจารณาการทำให้กระบวนการแยกข้อมูลและการใส่ข้อมูลในบรรทัด "ครึ่งหน้าบน" เป็นแบบอัตโนมัติ CSS โดยใช้เครื่องมือสำคัญ
ดูข้อมูลเพิ่มเติมในเลื่อน CSS ที่ไม่สำคัญ
คำแนะนำเฉพาะสแต็ก
Drupal
ลองนำกฎ CSS ที่ไม่ได้ใช้ออก แนบเฉพาะไลบรารี Drupal ที่จำเป็น ไปยังหน้าที่เกี่ยวข้องหรือคอมโพเนนต์ในหน้า ดูการกำหนดไลบรารี เพื่อดูรายละเอียด
Joomla
ลองลดหรือเปลี่ยนจำนวนส่วนขยาย Joomla ที่โหลด CSS ที่ไม่ได้ใช้ในหน้าเว็บของคุณ
WordPress
ลองลดหรือเปลี่ยนจำนวนปลั๊กอิน WordPress ที่โหลด CSS ที่ไม่ได้ใช้ในหน้าเว็บของคุณ