นำ CSS ที่ไม่ได้ใช้ออก

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

ภาพหน้าจอของการตรวจสอบการนำ CSS ที่ไม่ได้ใช้ออกของ Lighthouse

วิธีที่ 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 ที่ใช้และไม่ได้ใช้ด้วยแท็บการครอบคลุม

เครื่องมือสําหรับนักพัฒนาเว็บใน Chrome: แท็บความครอบคลุม
Chrome DevTools: แท็บการครอบคลุม

แทรก 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 ที่ไม่ได้ใช้ในหน้าเว็บของคุณ

แหล่งข้อมูล