Cara melakukan defer CSS di Astro
Dalam pengembangan web, skrip CSS dan JS adalah blocking, browser akan berhenti memuat (render) HTML sebelum semua CSS selesai dimuat. Untuk meningkatkan kecepatan loading, kita bisa defer CSS dengan beberapa cara.
Untuk mengatasinya, kita dapat melakukan defer (menunda) pemuatan skrip, terutama yang besar dan berpotensi melakukan blocking pada pemuatan halaman.
Jika di WordPress kita bisa menggunakan plugin seperti WP Rocket, di Astro tidak demikian, kita harus mengeksekusinya di “jantung” Astro; BaseLayout.astro.
INFO
Pada artikel ini kita akan fokus pada metode defer CSS
Masalah utama blocking
Secara umum, skrip font di inject langsung di src/styles/global.css jika kita menggunakan Tailwind.
Catatan:
Jangan ikut ketik tanda backtick
di awal dan akhir kode/perintah, itu cuma penanda blok kode untuk memudahkan penulisan.
Astro secara default adalah SSG, setiap perubahan sekecil apapun harus melalui proses build, karena itu Astro sangat statis, sehingga setiap skrip CSS akan dikunci menjadi file-file CSS seperti dibawah ini.
| URL | Transfer Size | Duration |
|---|---|---|
| /_astro/slug.q0KO3V-z.css | 22.5 KiB | 1,710 ms |
| /_astro/slug.BXMC-2ZL.css | 10.3 KiB | 1,080 ms |
| /css2?family=Inter:wght@400;500;600;700&display=swap(fonts.googleapis.com) | 1.5 KiB | 780 ms |
Ini adalah mekanisme dari Astro sebagai SSG, dan pemrosesan Tailwind untuk mengeksekusi font. Jadi kita tidak bisa melakukan alternatif lain, tapi kita bisa mengoptimasinya dengan defer CSS.
Solusi untuk render-blocking
Cara paling efektif adalah dengan melakukan defer, tepat di BaseLayout.astro atau file lainnya yang bertanggungjawab terhadap layout utama website.
Jika sebelum defer, kita mengimpor global.css seperti ini:
import '../styles/global.css'Maka untuk mengaktifkan defer, kita buat skripnya seperti ini:
import globalCssUrl from '../styles/global.css?url';Untuk font, kita impor ulang di BaseLayout.astro (atau file layout utama lainnya).
const googleFontUrl = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
---
<head>
<meta charset="UTF-8">
<title>My Website</title>
<!-- 1. Inline Critical CSS -->
<style>
/* Paste Critical CSS di sini. Contoh: */
body { font-family: sans-serif; background-color: #f0f0f0; margin: 0; }
.header { padding: 1rem; background: #333; color: white; }
/* ...dan style penting lainnya untuk above-the-fold... */
</style>
<!-- 2. Preconnect ke Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 3. Defer sisa CSS (non-critical) -->
<link rel="preload" href={googleFontUrl} as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href={googleFontUrl}></noscript>
<link rel="preload" href={globalCssUrl} as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href={globalCssUrl}></noscript>
</head>Kode const googleFontUrl harus berada di atas <head>, tepatnya diatas --- sehingga dikenali Astro sebagai kode global untuk BaseLayout yang dapat ditempatkan di dalam <head> atau <body>, meskipun best practice yang teruji adalah di dalam <head>.
Untuk pengalaman pengguna yang lebih baik, kita bisa menggunakan metode Critical CSS untuk menampilkan warna tertentu ketika halaman dimuat sehingga tidak tampil halaman kosong selama layout diisi.
Jadi kita bisa menggunakannya dengan kode lengkap seperti ini:
---
// src/layouts/BaseLayout.astro
import globalCssUrl from '../styles/global.css?url';
const googleFontUrl = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
---
<head>
<meta charset="UTF-8">
<title>My Website</title>
<!-- 1. Inline Critical CSS -->
<style>
/* Paste Critical CSS di sini. Contoh: */
body { font-family: sans-serif; background-color: #f0f0f0; margin: 0; }
.header { padding: 1rem; background: #333; color: white; }
/* ...dan style penting lainnya untuk above-the-fold... */
</style>
<!-- 2. Preconnect ke Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 3. Defer sisa CSS (non-critical) -->
<link rel="preload" href={googleFontUrl} as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href={googleFontUrl}></noscript>
<link rel="preload" href={globalCssUrl} as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href={globalCssUrl}></noscript>
</head>
<body>
<slot />
</body>Kesimpulan
Blocking CSS dapat diselesaikan dengan metode defer, sehingga situs Astro kita dapat memenuhi standar CWV (Core Web Vital), atau memberikan pengalaman pengguna yang lebih baik meskipun skor CWV tidak mencapai 100, terutama di mobile (misal dengan menambahkan skrip AdSense, micro-moment seperti RotatingQuote dan RotatingGlossary yang ada di situs ini).
Topik dalam Artikel Ini
Memuat kontributor…
Dan para kontributor lainnya yang mendukung MauCariApa.com.
Telkomsel OrbitPenyedia layanan internet rumah yang menggunakan perangkat modem WiFi tanpa langganan
Penyedia layanan internet rumah yang menggunakan perangkat modem WiFi tanpa langganan
Diskusi & Komentar
Panduan Komentar
- • Gunakan bahasa yang sopan dan konstruktif
- • Hindari spam, promosi, atau link yang tidak relevan
- • Komentar akan terus dipantau secara berkala