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