ไฟล์ CSS เป็นทรัพยากรที่บล็อกการแสดงผล ซึ่งต้องโหลดและประมวลผลก่อนที่เบราว์เซอร์จะแสดงผลหน้าเว็บ หน้าเว็บที่มีสไตล์ชีตขนาดใหญ่เกินความจำเป็นจะใช้เวลาในการแสดงผลนานขึ้น
ในคู่มือนี้ คุณจะได้เรียนรู้วิธีเลื่อน CSS ที่ไม่สําคัญเพื่อเพิ่มประสิทธิภาพเส้นทางการแสดงผลที่สําคัญและปรับปรุงFirst Contentful Paint (FCP)
ตัวอย่าง: การโหลด CSS ที่ไม่เหมาะสม
ตัวอย่างต่อไปนี้มีส่วนขยายแบบ Accordion ที่มีย่อหน้าข้อความที่ซ่อนอยู่ 3 ย่อหน้า โดยแต่ละย่อหน้ามีการจัดรูปแบบด้วยคลาสที่แตกต่างกัน
หน้านี้ขอไฟล์ CSS ที่มีคลาส 8 รายการ แต่ไม่จำเป็นต้องใช้คลาสทั้งหมดในการแสดงผลเนื้อหาที่ "มองเห็นได้"
เป้าหมายของคู่มือนี้คือการเพิ่มประสิทธิภาพหน้านี้เพื่อให้โหลดเฉพาะสไตล์ที่สําคัญแบบซิงค์กัน ส่วนที่เหลือ (รวมถึงสไตล์ย่อหน้า) จะโหลดแบบไม่บล็อก
วัดระยะทาง
เรียกใช้ Lighthouse ในหน้าเว็บ แล้วไปที่ส่วนประสิทธิภาพ
รายงานแสดงเมตริก First Contentful Paint ที่มีค่าเป็น "1 วินาที" และโอกาสในการกำจัดทรัพยากรที่บล็อกการแสดงผลซึ่งชี้ไปยังไฟล์ style.css
การแสดงภาพว่า CSS นี้บล็อกการแสดงผลอย่างไร
- เปิดหน้าเว็บใน Chrome
- กด
Control+Shift+J
(หรือCommand+Option+J
ใน Mac) เพื่อเปิด DevTools - คลิกแท็บประสิทธิภาพ
- ในแผงประสิทธิภาพ ให้คลิกโหลดซ้ำ
ในการติดตามผลที่ได้ คุณจะเห็นเครื่องหมาย FCP วางอยู่ทันทีหลังจาก CSS โหลดเสร็จ
ซึ่งหมายความว่าเบราว์เซอร์ต้องรอให้ CSS ทั้งหมดโหลดและประมวลผลก่อนจึงจะแสดงพิกเซลเดียวบนหน้าจอได้
เพิ่มประสิทธิภาพ
หากต้องการเพิ่มประสิทธิภาพหน้านี้ คุณต้องทราบว่าคลาสใดถือว่าสําคัญ หากต้องการดูข้อมูลนี้ ให้ใช้เครื่องมือความครอบคลุม โดยทำดังนี้
- ใน DevTools ให้เปิดเมนูคำสั่งโดยกด
Control+Shift+P
หรือCommand+Shift+P
(Mac) - พิมพ์ "ความครอบคลุม" แล้วเลือกแสดงความครอบคลุม
- คลิกโหลดซ้ำเพื่อโหลดหน้าเว็บซ้ำและเริ่มจับภาพการครอบคลุม
ดับเบิลคลิกรายงานเพื่อดูรายละเอียด
- ชั้นเรียนที่ทำเครื่องหมายด้วยสีเขียวเป็นชั้นเรียนที่สำคัญ เบราว์เซอร์ต้องใช้องค์ประกอบเหล่านี้เพื่อแสดงผลเนื้อหาที่มองเห็นได้ ซึ่งรวมถึงชื่อ คำบรรยาย และปุ่มแบบ Accordion
- คลาสที่ทำเครื่องหมายด้วยสีแดงจะไม่สำคัญ โดยจะส่งผลต่อเนื้อหาที่มองไม่เห็นในทันที เช่น ย่อหน้าที่ซ่อนอยู่
ใช้ข้อมูลนี้เพื่อเพิ่มประสิทธิภาพ CSS เพื่อให้เบราว์เซอร์เริ่มประมวลผลสไตล์ที่สำคัญทันทีหลังจากโหลดหน้าเว็บ และเลื่อน CSS ที่ไม่สำคัญไว้ใช้ภายหลัง
ดึงข้อมูลการกําหนดคลาสที่ทําเครื่องหมายด้วยสีเขียวในรายงานความครอบคลุม และใส่คลาสเหล่านั้นในบล็อก
<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>โหลดคลาสที่เหลือแบบไม่พร้อมกันโดยใช้รูปแบบต่อไปนี้
<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 ได้เมื่อโหลดสไตล์ชีตเสร็จแล้ว - "การทำให้เป็นค่าว่าง" แฮนเดิล
onload
หลังจากใช้งานแล้วจะช่วยให้เบราว์เซอร์บางรุ่นหลีกเลี่ยงการเรียกใช้แฮนเดิลซ้ำเมื่อเปลี่ยนแอตทริบิวต์rel
- การอ้างอิงสไตล์ชีตภายในองค์ประกอบ
noscript
จะเป็นทางเลือกสําหรับเบราว์เซอร์ที่ไม่เรียกใช้ JavaScript
หน้าเว็บที่ได้จะมีลักษณะเหมือนกับเวอร์ชันก่อนหน้าทุกประการ แม้ว่าสไตล์ส่วนใหญ่จะโหลดแบบไม่พร้อมกันก็ตาม ลักษณะของสไตล์แบบแทรกในบรรทัดและคําขอแบบอะซิงโครนัสไปยังไฟล์ CSS ในไฟล์ HTML มีดังนี้
ติดตามดู
ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อเรียกใช้การติดตามประสิทธิภาพอีกรายการในหน้าที่ได้รับการเพิ่มประสิทธิภาพ
เครื่องหมาย FCP จะปรากฏขึ้นก่อนที่หน้าเว็บจะขอ CSS ซึ่งหมายความว่าเบราว์เซอร์ไม่จําเป็นต้องรอให้ CSS โหลดก่อนที่จะแสดงผลหน้าเว็บ
ขั้นตอนสุดท้าย ให้เรียกใช้ Lighthouse ในหน้าที่เพิ่มประสิทธิภาพแล้ว
ในรายงาน คุณจะเห็นหน้า FCP ลดลง 0.2 วินาที (ปรับปรุงได้ 20%)
คําแนะนํากำจัดทรัพยากรที่บล็อกการแสดงผลจะไม่ปรากฏในส่วนโอกาสอีกต่อไป แต่จะอยู่ในส่วนการตรวจสอบที่ผ่านแทน
ขั้นตอนถัดไปและข้อมูลอ้างอิง
ในคู่มือนี้ คุณได้เรียนรู้วิธีเลื่อน CSS ที่ไม่สําคัญโดยดึงโค้ดที่ไม่ได้ใช้ในหน้าเว็บออกด้วยตนเอง สําหรับสภาพแวดล้อมที่ใช้งานจริงที่ซับซ้อนมากขึ้น คู่มือการดึง CSS ที่สําคัญจะกล่าวถึงเครื่องมือที่ได้รับความนิยมมากที่สุดในการดึง CSS ที่สําคัญ รวมถึงมีโค้ดแล็บเพื่อให้เห็นวิธีทํางานจริง