เลื่อนเวลา CSS ที่ไม่สำคัญ

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

ในคู่มือนี้ คุณจะได้เรียนรู้วิธีเลื่อน CSS ที่ไม่สําคัญเพื่อเพิ่มประสิทธิภาพเส้นทางการแสดงผลที่สําคัญและปรับปรุงFirst Contentful Paint (FCP)

ตัวอย่าง: การโหลด CSS ที่ไม่เหมาะสม

ตัวอย่างต่อไปนี้มีส่วนขยายแบบ Accordion ที่มีย่อหน้าข้อความที่ซ่อนอยู่ 3 ย่อหน้า โดยแต่ละย่อหน้ามีการจัดรูปแบบด้วยคลาสที่แตกต่างกัน

หน้านี้ขอไฟล์ CSS ที่มีคลาส 8 รายการ แต่ไม่จำเป็นต้องใช้คลาสทั้งหมดในการแสดงผลเนื้อหาที่ "มองเห็นได้"

เป้าหมายของคู่มือนี้คือการเพิ่มประสิทธิภาพหน้านี้เพื่อให้โหลดเฉพาะสไตล์ที่สำคัญเท่านั้น ส่วนส่วนที่เหลือ (รวมถึงรูปแบบย่อหน้า) จะโหลดแบบไม่บล็อก

วัดระยะทาง

เรียกใช้ Lighthouse ในหน้าเว็บ แล้วไปที่ส่วนประสิทธิภาพ

รายงานแสดงเมตริก First Contentful Paint ที่มีค่าเป็น "1 วินาที" และโอกาสในการกำจัดทรัพยากรที่บล็อกการแสดงผลซึ่งชี้ไปที่ไฟล์ style.css

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

หากต้องการแสดงภาพวิธีที่ CSS บล็อกการแสดงผล ให้ทำดังนี้

  1. เปิดหน้าเว็บใน Chrome
  2. กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิด DevTools
  3. คลิกแท็บประสิทธิภาพ
  4. ในแผงประสิทธิภาพ ให้คลิกโหลดซ้ำ

ในการติดตามที่แสดง คุณจะเห็นว่าเครื่องหมาย FCP วางอยู่ทันทีหลังจากที่ CSS โหลดเสร็จแล้ว

การติดตามประสิทธิภาพของ DevTools สําหรับหน้าที่ไม่ได้เพิ่มประสิทธิภาพ ซึ่งแสดง FCP ที่เริ่มต้นหลังจาก CSS โหลด
ในหน้าสาธิตที่ไม่ได้เพิ่มประสิทธิภาพ FCP จะไม่เกิดขึ้นจนกว่า CSS จะโหลดเสร็จสิ้น

ซึ่งหมายความว่าเบราว์เซอร์จะต้องรอให้ CSS ทั้งหมดโหลดและประมวลผลก่อนที่จะลงสี 1 พิกเซลบนหน้าจอ

เพิ่มประสิทธิภาพ

หากต้องการเพิ่มประสิทธิภาพหน้านี้ คุณต้องทราบว่าคลาสใดถือว่าสําคัญ หากต้องการดูข้อมูลนี้ ให้ใช้เครื่องมือความครอบคลุม โดยทำดังนี้

  1. ใน DevTools ให้เปิดเมนูคำสั่งโดยกด Control+Shift+P หรือ Command+Shift+P (Mac)
  2. พิมพ์ "ความครอบคลุม" แล้วเลือกแสดงความครอบคลุม
  3. คลิกโหลดซ้ำเพื่อโหลดหน้าเว็บซ้ำและเริ่มบันทึกความครอบคลุม
การครอบคลุมสําหรับไฟล์ CSS ซึ่งแสดงไบต์ที่ไม่ได้ใช้ 55.9%
รายงานการครอบคลุมจะแสดงจำนวน CSS ที่ใช้จริงในการโหลดหน้าเว็บเริ่มต้น

ดับเบิลคลิกรายงานเพื่อดูรายละเอียด ดังนี้

  • ชั้นเรียนที่ทำเครื่องหมายด้วยสีเขียวเป็นชั้นเรียนที่สำคัญ เบราว์เซอร์ต้องใช้องค์ประกอบเหล่านี้เพื่อแสดงเนื้อหาที่มองเห็นได้ ซึ่งรวมถึงชื่อ คำบรรยาย และปุ่มแบบ Accordion
  • ชั้นเรียนที่มีเครื่องหมายสีแดงนั้นไม่สำคัญโดยจะส่งผลต่อเนื้อหาที่มองไม่เห็นทันที เช่น ย่อหน้าที่ซ่อนอยู่

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

  1. ดึงข้อมูลการกําหนดคลาสที่ทําเครื่องหมายด้วยสีเขียวในรายงานความครอบคลุม และใส่คลาสเหล่านั้นในบล็อก <style> ที่ส่วนหัวของหน้า

    <style type="text/css">
    .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
    </style>
    
  2. โหลดคลาสที่เหลือแบบไม่พร้อมกันโดยใช้รูปแบบต่อไปนี้

    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>
    

ซึ่งไม่ใช่วิธีมาตรฐานในการโหลด CSS วิธีการมีดังนี้

  • link rel="preload" as="style" ขอสไตล์ชีตแบบอะซิงโครนัส ดูข้อมูลเพิ่มเติมเกี่ยวกับ preload ได้ในคำแนะนำเกี่ยวกับการโหลดเนื้อหาที่สำคัญล่วงหน้า
  • แอตทริบิวต์ onload ใน link ช่วยให้เบราว์เซอร์ประมวลผล CSS ได้เมื่อโหลดสไตล์ชีตเสร็จแล้ว
  • การ "nulling" ของเครื่องจัดการ onload หลังจากที่ใช้จะช่วยให้เบราว์เซอร์บางตัวหลีกเลี่ยงการเรียกใช้เครื่องจัดการเมื่อเปลี่ยนแอตทริบิวต์ rel ได้
  • การอ้างอิงสไตล์ชีตภายในองค์ประกอบ noscript จะทำให้เบราว์เซอร์ไม่เรียกใช้ JavaScript เป็นเบราว์เซอร์สำรอง

หน้าผลการค้นหาจะเหมือนกับเวอร์ชันก่อนหน้าทุกประการ แม้ว่ารูปแบบส่วนใหญ่จะโหลดไม่พร้อมกันก็ตาม ลักษณะของสไตล์แบบแทรกในบรรทัดและคําขอแบบอะซิงโครนัสไปยังไฟล์ CSS ในไฟล์ HTML มีดังนี้

ติดตามดู

ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อเรียกใช้การติดตามประสิทธิภาพอีกรายการในหน้าที่ได้รับการเพิ่มประสิทธิภาพ

เครื่องหมาย FCP จะปรากฏขึ้นก่อนที่หน้าเว็บจะขอ CSS ซึ่งหมายความว่าเบราว์เซอร์ไม่จําเป็นต้องรอให้ CSS โหลดก่อนที่จะแสดงผลหน้าเว็บ

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

ขั้นตอนสุดท้าย ให้เรียกใช้ Lighthouse ในหน้าที่เพิ่มประสิทธิภาพแล้ว

ในรายงาน คุณจะเห็นว่าหน้า FCP ลดลง 0.2 วินาที (เพิ่มขึ้น 20%)

รายงาน Lighthouse ที่แสดงค่า FCP เท่ากับ &quot;0.8 วินาที&quot;
FCP ใหม่ที่ลดลง

คําแนะนํากำจัดทรัพยากรที่บล็อกการแสดงผลจะไม่ปรากฏในส่วนโอกาสอีกต่อไป แต่จะอยู่ในส่วนการตรวจสอบที่ผ่านแทน

การแสดงภาพรายงาน Lighthouse ที่แสดง &quot;กำจัดทรัพยากรการบล็อก&quot; ในส่วน &quot;การตรวจสอบที่ผ่าน&quot;
ตอนนี้หน้าเว็บผ่านการตรวจสอบทรัพยากรที่บล็อกแล้ว

ขั้นตอนถัดไปและข้อมูลอ้างอิง

ในคู่มือนี้ คุณได้เรียนรู้วิธีเลื่อนเวลา CSS ที่ไม่สำคัญโดยการแยกโค้ดที่ไม่ได้ใช้ในหน้าเว็บด้วยตนเองแล้ว สำหรับสภาพแวดล้อมการใช้งานที่ซับซ้อนยิ่งขึ้น คู่มือการดึงข้อมูล CSS ที่สำคัญจะครอบคลุมเครื่องมือยอดนิยมบางส่วนในการดึงข้อมูล CSS ที่สำคัญ และมี Codelab เพื่อดูวิธีการใช้งานจริง