นำ 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 ช่วยให้คุณค้นพบ CSS ที่สำคัญและไม่สำคัญได้ ดูดู CSS ที่ใช้และที่ไม่ได้ใช้ด้วยแท็บการครอบคลุม

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

CSS ที่สำคัญในหน้าและเลื่อนเวลาส่งออก CSS ที่ไม่สำคัญ

คล้ายกับโค้ดในบรรทัดในแท็ก <script> นั่นคือต้องมีรูปแบบวิกฤตแบบแทรกในบรรทัดสำหรับสีแรกภายในบล็อก <style> ที่ head ของหน้า HTML จากนั้นโหลดสไตล์ที่เหลือแบบไม่พร้อมกันโดยใช้ลิงก์ preload

ลองทำให้กระบวนการดึงข้อมูลและแทรก CSS แบบ "ครึ่งหน้าบน" เป็นแบบอัตโนมัติโดยใช้เครื่องมือสำคัญ

ดูข้อมูลเพิ่มเติมในเลื่อน CSS ที่ไม่สำคัญ

คำแนะนำเฉพาะกลุ่ม

Drupal

ลองนำกฎ CSS ที่ไม่ได้ใช้ออก แนบเฉพาะไลบรารี Drupal ที่จำเป็น ลงในหน้าที่เกี่ยวข้องหรือคอมโพเนนต์ในหน้า ดูรายละเอียดเพิ่มเติมในการกำหนดไลบรารี

Joomla

ลองลดหรือเปลี่ยนจำนวนส่วนขยาย Joomla ที่โหลด CSS ที่ไม่ได้ใช้ในหน้าเว็บของคุณ

WordPress

ลองลดหรือเปลี่ยนจำนวนปลั๊กอิน WordPress ที่โหลด CSS ที่ไม่ได้ใช้ในหน้าเว็บของคุณ

แหล่งข้อมูล