Ketika CSS dibundel menjadi satu file, bahkan setelah tree-shaking, file tersebut masih mengandung banyak CSS yang tidak terpakai karena perbedaan konteks @media (ponsel, tablet, desktop, tema terang/gelap/tema lainnya, dll.).
Ini buruk untuk Core Web Vitals: First Input Delay (FID), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), serta metrik performa dan kegunaan penting lainnya: First Contentful Paint (FCP), Total Blocking Time (TBT), Time to Interactive (TTI), dan event DOMContentLoaded.
Ada cara untuk meningkatkan pemuatan dan rendering CSS secara signifikan dengan memisahkan CSS ke dalam file yang berbeda, di mana setiap file hanya berisi kode yang dibutuhkan dalam konteks tersebut.
Pisahkan CSS Anda ke dalam file yang berbeda:
📄main.css - berisi CSS yang dibutuhkan untuk semua kondisi @media
📄screen.css - berisi CSS yang dibutuhkan hanya untuk kondisi @media screen
📄print.css - berisi CSS yang dibutuhkan hanya untuk kondisi @media print
📂breakpoints
📄x-small.css - berisi CSS yang dibutuhkan hanya untuk breakpoint X-Small
📄sm.css - berisi CSS yang dibutuhkan hanya untuk breakpoint Small
📄md.css - berisi CSS yang dibutuhkan hanya untuk breakpoint Medium
📄lg.css - berisi CSS yang dibutuhkan hanya untuk breakpoint Large
📄xl.css - berisi CSS yang dibutuhkan hanya untuk breakpoint Extra large
📄xxl.css - berisi CSS yang dibutuhkan hanya untuk breakpoint Extra extra large
📂themes
📄light.css - berisi CSS yang dibutuhkan hanya untuk tema terang
📄dark.css - berisi CSS yang dibutuhkan hanya untuk tema gelapKemudian, sertakan file CSS seperti ini:
<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)">Dengan pendekatan ini, browser modern memprioritaskan pemuatan CSS untuk kondisi @media saat ini, sehingga rendering halaman dimulai jauh lebih cepat karena pengguna tidak perlu menunggu pemuatan bagian CSS yang tidak terpakai.
Dalam kasus di mana Anda memiliki semua CSS yang dibundel dalam satu file dan tidak menentukan kondisi dalam atribut media tag link, browser menunggu seluruh set CSS dimuat sebelum memulai rendering halaman. Hal ini memperlambat rendering halaman secara drastis.
Breakpoint dalam contoh ini didasarkan pada Bootstrap 5. Pendekatan ini akan menjadi lebih penting untuk Bootstrap dalam waktu dekat mengingat mereka akan menambahkan dukungan tema terang/gelap/tema lainnya.
Jika Anda ingin membuat web menjadi lebih baik dan lebih cepat, mohon:
- bagikan artikel ini,
- kirimkan artikel ini kepada pengembang framework yang Anda gunakan,
- terapkan pemisahan CSS ini di situs web Anda.
Bagikan di media sosial atau simpan untuk nanti:
Jika Anda ingin membaca lebih lanjut tentang optimasi ini dan perilaku browser, silakan lihat yang berikut:
- Artikel “CSS adaptif bersyarat. Perilaku browser yang mungkin meningkatkan performa Anda” oleh Vadim Makeev. Tangkapan layar sampul untuk artikel ini diambil dari artikelnya yang sangat baik, di mana ia memiliki lebih banyak tangkapan layar dan eksperimen.
- MDN Web Docs: Optimasi performa CSS.