ดึงข้อมูล CSS ที่สำคัญ

ดูวิธีปรับปรุงเวลาการแสดงผลด้วยเทคนิค CSS ที่สำคัญ

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

ภาพแล็ปท็อปและอุปกรณ์เคลื่อนที่ซึ่งมีหน้าเว็บล้นขอบหน้าจอ

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

วันที่ ไฟล์ HTML ที่มี CSS ที่สำคัญแทรกอยู่ในส่วนหัว
CSS ที่สำคัญในบรรทัด

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

วันที่ การเปรียบเทียบมุมมองแถบฟิล์มของการโหลดหน้าเว็บที่มี CSS ที่บล็อกการแสดงผล (ด้านบน) และหน้าเดียวกันที่มี CSS สำคัญแบบแทรกในบรรทัด (ด้านล่าง) ในการเชื่อมต่อ 3G แถบแสดงตัวอย่างรูปภาพด้านบนแสดงเฟรมว่าง 6 เฟรมก่อนแสดงเนื้อหา แถบแสดงตัวอย่างรูปภาพด้านล่างแสดงเนื้อหาที่มีความหมายในเฟรมแรก
การเปรียบเทียบการโหลดหน้าเว็บที่มี CSS ที่บล็อกการแสดงผล (ด้านบน) และหน้าเดียวกันที่มี CSS สำคัญในบรรทัด (ด้านล่าง) บนการเชื่อมต่อ 3G

หากมี First Contentful Paint (FCP) คุณภาพต่ำ และเห็นดูที่ "กำจัดทรัพยากรที่บล็อกการแสดงผล" โอกาสในการตรวจสอบของ Lighthouse จึงเป็นความคิดที่ดีที่จะลองใช้ CSS ที่สำคัญ

การตรวจสอบ Lighthouse ด้วย &quot;กำจัดทรัพยากรที่บล็อกการแสดงผล&quot; หรือ &quot;เลื่อน CSS ที่ไม่ได้ใช้&quot; โอกาส

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