ไฟล์ CSS เป็นทรัพยากรที่บล็อกการแสดงผล ซึ่งต้องโหลดและประมวลผลก่อนที่เบราว์เซอร์จะแสดงหน้าเว็บ หน้าเว็บ ที่มีชีตสไตล์ขนาดใหญ่โดยไม่จำเป็นจะใช้เวลานานกว่าในการแสดงผล
ดูวิธีเลื่อน CSS ที่ไม่สำคัญเพื่อเพิ่มประสิทธิภาพเส้นทางการแสดงผลที่สำคัญและปรับปรุง First Contentful Paint (FCP)
การโหลด CSS ที่ไม่เหมาะสม
ตัวอย่างต่อไปนี้มี Accordion ที่มีข้อความ 3 ย่อหน้าที่ซ่อนอยู่ ซึ่งแต่ละย่อหน้ามีสไตล์ที่กำหนดด้วยคลาสที่แตกต่างกัน
หน้านี้ขอไฟล์ CSS ที่มี 8 คลาส แต่ไม่จำเป็นต้องใช้ทั้งหมดเพื่อแสดงเนื้อหาที่ "มองเห็นได้"
เป้าหมายของคำแนะนำนี้คือการเพิ่มประสิทธิภาพหน้าเว็บนี้เพื่อให้โหลดเฉพาะสไตล์ที่สำคัญแบบพร้อมกันเท่านั้น ส่วนสไตล์อื่นๆ (รวมถึงสไตล์ย่อหน้า) จะโหลดแบบไม่บล็อก
วัดผล
เรียกใช้ Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บ เพื่อตรวจสอบเมตริกที่มีผลลัพธ์
- เปิดเดโมใน Chrome
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- เลือกแผงประสิทธิภาพ
- โหลดหน้าเว็บซ้ำจากภายในแผง
รายงานแสดงเมตริก First Contentful Paint ที่มีค่า "1 วินาที" และ โอกาสในการกำจัดทรัพยากรที่บล็อกการแสดงผล ซึ่งชี้ไปยังไฟล์ style.css
ในเทรซที่ได้ ระบบจะวางเครื่องหมาย FCP ทันที หลังจากที่ CSS โหลดเสร็จ