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

Demián Renzulli

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

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

การโหลด CSS ที่ไม่เหมาะสม

ตัวอย่างต่อไปนี้มี Accordion ที่มีข้อความ 3 ย่อหน้าที่ซ่อนอยู่ ซึ่งแต่ละย่อหน้ามีสไตล์ที่กำหนดด้วยคลาสที่แตกต่างกัน

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

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

วัดผล

เรียกใช้ Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บ เพื่อตรวจสอบเมตริกที่มีผลลัพธ์

1. เปิดเดโมใน Chrome
2. เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
3. เลือกแผงประสิทธิภาพ
4. โหลดหน้าเว็บซ้ำจากภายในแผง

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

ในเทรซที่ได้ ระบบจะวางเครื่องหมาย FCP ทันที หลังจากที่ CSS โหลดเสร็จ

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

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

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

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

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

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

ข้อมูลนี้จะช่วยให้คุณเพิ่มประสิทธิภาพ 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 เช่น loadCSS ซึ่งห่อหุ้มลักษณะการทำงานนี้และทำงานได้ดีในเบราว์เซอร์ต่างๆ ฟังก์ชันเหล่านี้ รองรับนโยบายรักษาความปลอดภัยเนื้อหา ซึ่งอาจไม่อนุญาต ให้ใช้ JavaScript onload ในบรรทัด

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

หน้าเว็บที่ได้จะมีลักษณะเหมือนกับเวอร์ชันก่อนหน้าทุกประการ แม้ว่าสไตล์ส่วนใหญ่จะโหลดแบบไม่พร้อมกันก็ตาม

ตรวจสอบ

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

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

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

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

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

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

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