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

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

Milica Mihajlija

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

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

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

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

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

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

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

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

หากต้องการลดจำนวนรอบในการไปกลับเพื่อแสดงผลครั้งแรก ให้พยายามทำให้เนื้อหาด้านบนของหน้าเว็บมีขนาดเล็กกว่า 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 ที่สำคัญ ข้อดีคือทำงานหลายอย่างพร้อมกันได้ดี