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

Demián Renzulli

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

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

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

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

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

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

วัดระยะทาง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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