ดูวิธีปรับปรุงเวลาการแสดงผลด้วยเทคนิค CSS ที่สำคัญ
เบราว์เซอร์ต้องดาวน์โหลดและแยกวิเคราะห์ไฟล์ CSS ก่อนจึงจะแสดงหน้าเว็บได้ ซึ่งทำให้ CSS เป็นทรัพยากรที่บล็อกการแสดงผล หากไฟล์ CSS มีขนาดใหญ่หรือสภาพเครือข่ายไม่ดี คำขอไฟล์ CSS อาจใช้เวลาในการแสดงผลหน้าเว็บนานขึ้นอย่างมาก
การรวมรูปแบบที่ดึงมาใน <head> ของเอกสาร HTML ทำให้ไม่จำเป็นต้องส่งคำขอเพิ่มเติมเพื่อดึงข้อมูลรูปแบบเหล่านี้ ส่วนที่เหลือของ CSS จะโหลดแบบอะซิงโครนัสได้
การปรับปรุงเวลาในการแสดงผลสร้างความแตกต่างอย่างมากในประสิทธิภาพที่รับรู้ โดยเฉพาะอย่างยิ่งภายใต้สภาวะของเครือข่ายที่ไม่ดี สำหรับเครือข่ายมือถือ เวลาในการตอบสนองสูงเป็นปัญหาไม่ว่าแบนด์วิดท์จะเป็นเท่าใดก็ตาม
หากมี First Contentful Paint (FCP) คุณภาพต่ำ และเห็นดูที่ "กำจัดทรัพยากรที่บล็อกการแสดงผล" โอกาสในการตรวจสอบของ Lighthouse จึงเป็นความคิดที่ดีที่จะลองใช้ CSS ที่สำคัญ
หากต้องการลดจำนวนรอบการแสดงโฆษณาไป-กลับให้น้อยที่สุด ให้พยายามให้เนื้อหาครึ่งหน้าบนมีขนาดไม่เกิน 14 KB (บีบอัด)
ผลด้านประสิทธิภาพที่คุณสามารถบรรลุได้ด้วยเทคนิคนี้จะขึ้นอยู่กับประเภทของเว็บไซต์ โดยทั่วไปแล้ว ยิ่งเว็บไซต์มี CSS มาก ผลกระทบที่อาจเกิดขึ้นจาก CSS แบบในหน้าก็จะยิ่งมากขึ้น
ภาพรวมของเครื่องมือ
มีเครื่องมือดีๆ มากมายที่ระบุ CSS ที่สำคัญสำหรับหน้าเว็บได้โดยอัตโนมัติ นี่เป็นข่าวดีเพราะการดำเนินการดังกล่าวด้วยตนเองเป็นขั้นตอนที่น่าเบื่อ ต้องมีการวิเคราะห์ DOM ทั้งหมดเพื่อระบุรูปแบบที่ใช้กับแต่ละองค์ประกอบในวิวพอร์ต
วิกฤต
การแตกข้อมูล ที่สำคัญ การลดขนาด และการแทรกในบรรทัด CSS ครึ่งหน้าบนและมีให้ใช้งานในรูปแบบโมดูล npm โดยใช้ได้กับ Gulp (โดยตรง) หรือกับ Grunt (เป็นปลั๊กอิน) และมีปลั๊กอิน Webpack ด้วย
เครื่องมือที่ใช้งานง่ายนี้ต้องใช้ความคิดมากมายในกระบวนการ คุณไม่จำเป็นต้องระบุสไตล์ชีตเอง Critical จะตรวจหาโดยอัตโนมัติ นอกจากนี้ยังรองรับการดึง CSS ที่สำคัญสำหรับความละเอียดหน้าจอที่หลากหลายด้วย
criticalCSS
CriticalCSS เป็นโมดูล npm อีกรายการหนึ่งที่แยก CSS ครึ่งหน้าบน นอกจากนี้ยังพร้อมใช้งานเป็น CLI
โดยจะไม่มีตัวเลือกในการแทรกในบรรทัดและลดขนาด CSS ที่สำคัญ แต่จะช่วยให้คุณสามารถบังคับรวมกฎที่ไม่ได้อยู่ใน CSS ที่สำคัญจริงๆ และให้คุณควบคุมการรวมการประกาศ @font-face ได้ละเอียดยิ่งขึ้น
เพนต์เฮาส์
Penthouse เป็นตัวเลือกที่ดีหากเว็บไซต์หรือแอปมีรูปแบบหรือสไตล์จำนวนมากที่มีการแทรกแบบไดนามิกลงใน DOM (พบได้บ่อยในแอป Angular) โดยใช้ Puppeteer ขั้นสูงและยังมีเวอร์ชันที่โฮสต์ทางออนไลน์อีกด้วย
Penthouse ไม่ตรวจหาสไตล์ชีตโดยอัตโนมัติ คุณต้องระบุไฟล์ HTML และ CSS ที่ต้องการสร้าง CSS ที่สำคัญ ข้อได้เปรียบคือใช้งานหลายงานควบคู่กันไปได้ดี