เมื่อ CSS ถูกรวมเป็นไฟล์เดียว ถึงแม้จะมีการทำ tree-shaking แล้วก็ตาม ก็ยังมี CSS ที่ไม่ได้ใช้อยู่จำนวนมาก เนื่องจากบริบท @media ที่แตกต่างกัน (มือถือ แท็บเล็ต เดสก์ท็อป ธีมสว่าง/มืด/อื่นๆ และอื่นๆ)
ส่งผลเสียต่อ Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) รวมถึงเมตริกประสิทธิภาพและความสามารถในการใช้งานที่สำคัญอื่นๆ: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI) และเหตุการณ์ DOMContentLoaded
มีวิธีปรับปรุงการโหลดและการแสดงผล CSS อย่างเห็นได้ชัด โดยการแยก CSS ออกเป็นไฟล์ต่างๆ ซึ่งแต่ละไฟล์จะมีเฉพาะโค้ดที่จำเป็นในบริบทนั้นๆ
แยกไฟล์ CSS ของคุณออกเป็นไฟล์ต่างๆ ดังนี้:
📄main.css - มี CSS ที่จำเป็นสำหรับเงื่อนไข @media ทั้งหมด
📄screen.css - มี CSS ที่จำเป็นสำหรับเงื่อนไข @media screen เท่านั้น
📄print.css - มี CSS ที่จำเป็นสำหรับเงื่อนไข @media print เท่านั้น
📂breakpoints
📄x-small.css - มี CSS ที่จำเป็นสำหรับ breakpoint X-Small เท่านั้น
📄sm.css - มี CSS ที่จำเป็นสำหรับ breakpoint Small เท่านั้น
📄md.css - มี CSS ที่จำเป็นสำหรับ breakpoint Medium เท่านั้น
📄lg.css - มี CSS ที่จำเป็นสำหรับ breakpoint Large เท่านั้น
📄xl.css - มี CSS ที่จำเป็นสำหรับ breakpoint Extra large เท่านั้น
📄xxl.css - มี CSS ที่จำเป็นสำหรับ breakpoint Extra extra large เท่านั้น
📂themes
📄light.css - มี CSS ที่จำเป็นสำหรับธีมสว่างเท่านั้น
📄dark.css - มี CSS ที่จำเป็นสำหรับธีมมืดเท่านั้นจากนั้น ใส่ไฟล์ CSS ในลักษณะนี้:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">ด้วยแนวทางนี้ เบราว์เซอร์สมัยใหม่จะจัดลำดับความสำคัญของการโหลด CSS สำหรับเงื่อนไข @media ปัจจุบัน ทำให้การแสดงผลหน้าเว็บเริ่มต้นได้เร็วขึ้นมาก เนื่องจากผู้ใช้ไม่จำเป็นต้องรอการโหลด CSS ส่วนที่ไม่ได้ใช้
ในกรณีที่คุณรวม CSS ทั้งหมดไว้ในไฟล์เดียว และไม่ได้ระบุเงื่อนไขในแอตทริบิวต์ media ของแท็ก link เบราว์เซอร์จะรอให้ CSS ทั้งหมดโหลดเสร็จสิ้นก่อนที่จะเริ่มแสดงผลหน้าเว็บ ซึ่งทำให้การแสดงผลหน้าเว็บช้าลงอย่างมาก
Breakpoint ในตัวอย่างนี้อ้างอิงจาก Bootstrap 5 แนวทางนี้จะมีความสำคัญมากยิ่งขึ้นสำหรับ Bootstrap ในเร็วๆ นี้ เนื่องจากพวกเขาจะเพิ่มการรองรับธีมสว่าง/มืด/อื่นๆ
หากคุณต้องการทำให้เว็บดีขึ้นและเร็วขึ้น โปรด:
- แชร์บทความนี้
- ส่งบทความนี้ให้กับผู้พัฒนาเฟรมเวิร์กที่คุณใช้
- นำการแยก CSS นี้ไปใช้บนเว็บไซต์ของคุณ
Share on social media or save for later:
หากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับการปรับแต่งนี้และพฤติกรรมของเบราว์เซอร์ โปรดดูที่:
- บทความ “Conditionally adaptive CSS. Browser behavior that might improve your performance” โดย Vadim Makeev ภาพหน้าจอบนหน้าปกของบทความนี้ นำมาจากบทความที่ยอดเยี่ยมของเขา ซึ่งเขามีภาพหน้าจอและการทดลองเพิ่มเติม
- MDN Web Docs: CSS performance optimization