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

Demián Renzulli

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

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

ตัวอย่าง: การโหลด CSS ที่ต่ำกว่ามาตรฐาน

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

หน้านี้ส่งคำขอไฟล์ 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 พิกเซลบนหน้าจอ

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

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

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 ได้เมื่อ สไตล์ชีตโหลดเสร็จ
• "ไม่มีข้อมูล" ตัวแฮนเดิล onload หลังจากใช้งานแล้วจะช่วยให้บางเบราว์เซอร์หลีกเลี่ยง เพื่อเรียกเครื่องจัดการอีกครั้งเมื่อเปลี่ยนแอตทริบิวต์ rel
• การอ้างอิงไปยังสไตล์ชีตภายในองค์ประกอบ noscript จะระบุ เบราว์เซอร์สำรองสำหรับเบราว์เซอร์ที่ไม่เรียกใช้ JavaScript

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

ติดตามดู

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

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

วันที่

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

ในรายงาน คุณจะเห็นว่าหน้า FCP ลดลง 0.2 วินาที (20% การปรับปรุงนี้!):

วันที่

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

วันที่

ขั้นตอนถัดไปและ ลูกค้า

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