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