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

Demián Renzulli

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

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

ตัวอย่าง: การโหลด CSS ด้อยประสิทธิภาพ

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

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

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

วัดระยะทาง

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

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

หากต้องการดูวิธีที่ CSS นี้บล็อกการแสดงผล

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

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

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

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

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

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

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

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

ด้วยข้อมูลนี้ คุณสามารถเพิ่มประสิทธิภาพ 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 โหลดก่อนแสดงผลหน้าเว็บ

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

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

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

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

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