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

เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ

อัปเดตล่าสุด 2019-05-29 UTC