Optimasi Web Font dengan Claude Code

Optimasi font adalah masalah stabilitas render

Web Font sering dianggap urusan desain, padahal dampaknya langsung ke performa. Jika font terlambat, teks bisa tidak terlihat, judul bisa berubah lebar setelah halaman mulai dibaca, tombol CTA bisa bergeser, dan LCP bisa memburuk. LCP atau Largest Contentful Paint adalah waktu sampai elemen konten terbesar di viewport pertama selesai tampil. CLS atau Cumulative Layout Shift adalah pergeseran layout yang tidak diharapkan selama loading.

Risiko ini lebih besar untuk bahasa dengan banyak karakter, seperti Jepang, Mandarin, atau Korea. Satu file font bisa lebih berat daripada CSS penting. Karena itu, jangan meminta Claude Code dengan instruksi umum seperti “optimalkan font”. Instruksi harus menjelaskan font mana yang kritis, teks mana yang boleh memakai system font, kapan memakai preload, kapan memakai preconnect, nilai font-display, dan cara memverifikasi hasil.

Artikel ini memakai Astro sebagai contoh. Kita akan membahas strategi loading, preload, preconnect, font-display, variable font, subsetting, pilihan self-host vs third-party, risiko CLS/LCP, pemeriksaan ala Lighthouse dan WebPageTest, serta prompt Claude Code yang aman. Untuk fakta browser, gunakan dokumentasi resmi MDN tentangfont-display danrel="preload". Untuk praktik performa, lihat web.dev tentangfont best practices, optimize web fonts, danWeb Vitals.

Tentukan strategi sebelum mengubah kode

Mulailah dengan pertanyaan produk: teks apa yang wajib tampil di viewport pertama dengan font merek? Jika jawabannya semua, kemungkinan besar halaman akan boros bandwidth. Blog bisa memakai system font untuk isi artikel dan Web Font subset untuk judul. Dashboard SaaS bisa memakai variable font latin yang self-host. Landing page harus melihat font judul dan hero image bersama, karena keduanya memengaruhi LCP.

Use case	Strategi	Manfaat	Kegagalan umum
Blog multibahasa	Body system font, heading subset Web Font	Artikel tetap terbaca saat font terlambat	Font dekoratif diterapkan ke seluruh body
Dashboard SaaS	Variable font self-host untuk UI	Banyak weight dalam satu file	Italic, axis, atau bahasa tidak terpakai tetap ikut
Landing page hero	Preload hanya WOFF2 untuk heading LCP	Pesan utama tampil lebih cepat	Semua weight bersaing dengan hero image
Icon font lama	Migrasi ke SVG atau komponen ikon	Menghapus satu request font	CSS pseudo-element tertinggal

Untuk situs konten, solusi yang paling aman sering sederhana: pastikan body langsung terbaca, lalu pakai font merek di heading dan navigasi. Untuk UI produk, variable font berguna karena tombol, angka, label, dan tabel sering memakai beberapa weight. Untuk landing page, baca jugaoptimasi gambar dengan Claude Code, dan hubungkan denganoptimasi performance Claude Code.

Implementasi preload dan preconnect di Astro

preload adalah sinyal kuat bagi browser. Pakai hanya untuk satu atau dua file WOFF2 yang benar-benar dipakai di viewport pertama. Jangan preload semua weight, semua bahasa, atau font yang baru muncul setelah scroll. Jika font self-host dari origin yang sama, biasanya preconnect tidak diperlukan. Jika memakai Google Fonts atau provider lain, preconnect bisa berguna untuk origin CSS dan origin file font.

---
// src/layouts/BaseLayout.astro
const criticalFonts = [
  { href: "/fonts/inter-var-latin.woff2", type: "font/woff2" },
  { href: "/fonts/noto-sans-jp-latin-kana.woff2", type: "font/woff2" },
];

const usesGoogleFonts = false;
---

<html lang="id">
  <head>
    {criticalFonts.map((font) => (
      <link rel="preload" href={font.href} as="font" type={font.type} crossorigin />
    ))}

    {usesGoogleFonts && <link rel="preconnect" href="https://fonts.googleapis.com" />}
    {usesGoogleFonts && <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />}

    <link rel="stylesheet" href="/styles/fonts.css" />
  </head>
  <body>
    <slot />
  </body>
</html>

Setelah implementasi, periksa HTML yang dihasilkan. href harus sama dengan src di @font-face. Tag preload harus memiliki as="font", type="font/woff2", dan crossorigin. Font yang dipreload harus benar-benar dipakai cepat. Jika browser memberi peringatan bahwa preload tidak digunakan, hapus hint tersebut.

Gunakan font-display tanpa membuat CLS

font-display: swap menampilkan teks memakai fallback font terlebih dahulu, lalu menggantinya dengan Web Font saat file tiba. Ini mengurangi teks tidak terlihat, tetapi bisa menyebabkan CLS jika ukuran fallback dan font akhir berbeda. Untuk teks yang tidak kritis pada jaringan lambat, optional kadang lebih baik karena browser bisa tetap memakai fallback.

/* public/styles/fonts.css */
@font-face {
  font-family: "InterVariable";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NotoSansJPSubset";
  src: url("/fonts/noto-sans-jp-latin-kana.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+3000-30FF, U+FF00-FFEF;
}

@font-face {
  font-family: "InterFallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --font-ui: "InterVariable", "InterFallback", system-ui, sans-serif;
  --font-ja: "NotoSansJPSubset", "Hiragino Sans", "Yu Gothic", sans-serif;
}

body {
  font-family: var(--font-ui);
}

article {
  font-family: var(--font-ja);
}

MDN menjelaskanunicode-range sebagai cara membatasi karakter yang ditangani oleh satu @font-face. Ini tidak otomatis mengecilkan file. Untuk mengurangi byte, kamu tetap harus membuat WOFF2 yang lebih kecil.

Kurangi byte dengan variable font dan subsetting

Variable font bisa menggantikan beberapa file statis jika UI memakai banyak weight. Namun variable font tidak selalu lebih kecil. Jika berisi banyak axis, italic, dan cakupan bahasa luas, ukurannya tetap besar. Minta Claude Code mengaudit weight yang benar-benar dipakai, file CSS, dan font family sebelum migrasi.

Subsetting adalah membuat file font yang hanya berisi karakter yang diperlukan. Ini efektif untuk navigasi, heading hero, label tetap, dan CTA. Untuk body artikel, subsetting lebih berisiko karena artikel baru bisa menambah karakter yang tidak ada di subset.

# Create a WOFF2 subset with Latin, punctuation, kana, and full-width forms.
python -m pip install "fonttools[woff]"
mkdir -p public/fonts

pyftsubset ./vendor-fonts/NotoSansJP-Regular.ttf \
  --output-file=./public/fonts/noto-sans-jp-latin-kana.woff2 \
  --flavor=woff2 \
  --layout-features='*' \
  --unicodes="U+0000-00FF,U+3000-30FF,U+FF00-FFEF"

Contoh ini sengaja tidak memuat sebagian besar kanji. Cocok untuk menu, judul, dan teks tetap, tetapi tidak cukup untuk body artikel Jepang. Jika ingin mencakup body, ekstrak karakter dari file MDX dan gunakan --text-file, atau buat subset kanji terpisah. Periksa lisensi font sebelum self-host, modifikasi, atau distribusi ulang.

Self-host atau third-party

Self-host memberi kontrol atas URL, cache, fingerprint, preload target, dan subsetting. Sebagai gantinya, kamu bertanggung jawab atas lisensi, update, dan script build. Third-party seperti Google Fonts lebih cepat dipasang, tetapi menambah koneksi eksternal dan request CSS sebelum file font.

Kriteria	Self-host	Third-party
Koneksi	Same origin	DNS, TLS, CSS origin, font origin
Cache	Dikendalikan sendiri	Mengikuti provider
Preload	File WOFF2 tepat	URL bisa ditentukan CSS provider
Subsetting	Fleksibel	Tergantung layanan
Operasi	Lebih banyak tanggung jawab	Mulai cepat, dependensi lebih besar

Untuk halaman yang berpengaruh ke konversi, self-host font kritis first-view biasanya lebih aman. Font dekoratif bisa ditunda. Jika memakai third-party, muat hanya weight yang dipakai, gunakan display=swap, dan jangan biarkan CSS provider tetap aktif setelah migrasi self-host.

Verifikasi dengan Lighthouse dan waterfall ala WebPageTest

Setelah implementasi, jangan hanya melihat tampilan. Jalankan Lighthouse untuk melihat LCP, CLS, dan audit font. Lalu periksa waterfall seperti WebPageTest: HTML, CSS, font kritis, hero image, JavaScript. Font kritis harus mulai cepat tanpa memblokir CSS atau elemen LCP.

URL="https://example.com/"
npx --yes lighthouse "$URL" \
  --only-categories=performance \
  --chrome-flags="--headless" \
  --output=json \
  --output-path=./lighthouse-fonts.json

node -e "const r=require('./lighthouse-fonts.json'); for (const id of ['largest-contentful-paint','cumulative-layout-shift','font-display']) console.log(id, r.audits[id]?.displayValue ?? r.audits[id]?.score ?? 'n/a')"

Sinyal baik: hanya satu atau dua WOFF2 kritis mulai awal; tidak ada warning preload tidak digunakan; repeat visit memakai cache; heading dan CTA tidak bergeser saat font swap; tidak ada CSS Google Fonts tersisa setelah self-host; file WOFF2 yang sama tidak diunduh dua kali.

Kegagalan yang sering terjadi: bold dipreload padahal viewport pertama hanya memakai regular; subset lupa tanda baca atau full-width digit; font-display: swap dipasang tanpa menyesuaikan fallback metrics; icon font masih dimuat setelah ikon dipindah ke SVG; font lokal dan provider memuat family yang sama.

Prompt Claude Code yang aman

Pisahkan audit, implementasi, dan verifikasi. Mulai dari audit tanpa edit.

Audit web font loading in this Astro site. Do not edit files yet.

Find:
- @font-face, Google Fonts, Fontsource, and CSS import locations
- Font files used above the fold
- preload and preconnect hints that are missing or unnecessary
- CLS or LCP risks caused by font swapping
- Candidates for self-hosting, variable fonts, and subsetting

Return:
- A prioritized table of changes
- Files that should be edited and files that must not be touched
- Verification commands and residual risks

Lalu batasi implementasi.

Implement web font optimization only in these files:
- src/layouts/BaseLayout.astro
- public/styles/fonts.css
- generated files under public/fonts/

Acceptance criteria:
- Preload only WOFF2 files used in the first viewport
- Do not add preconnect when fonts are self-hosted
- Every @font-face has a deliberate font-display value
- Fallback metrics are adjusted to reduce CLS
- Existing routes, article slugs, hero images, and unrelated content are untouched

Verification:
- npm run build
- node scripts/check-code-fences.mjs
- Lighthouse check for LCP, CLS, and font-display
- Report what could not be verified

Hasil praktik dan CTA

Dalam workflow Masa, prompt spesifik lebih stabil daripada prompt umum. “Preload hanya font yang dipakai heading LCP, jaga body tetap terbaca dengan system font, dan laporkan risiko CLS” menghasilkan diff yang lebih kecil. Pada halaman artikel Jepang, subset latin dan kana membuat first viewport lebih stabil, tetapi coverage body penuh tetap membutuhkan ekstraksi karakter. Verifikasi paling berguna adalah waterfall mobile lambat plus pengecekan manual apakah heading dan CTA bergerak saat font swap.

Untuk workflow tim, tulis aturan ini di CLAUDE.md. Mulai daricheat sheet gratis untuk command aman, gunakantemplate produk untuk prompt dan checklist berulang, dan pertimbangkantraining Claude Code jika ingin memperbaiki Core Web Vitals, kualitas artikel, dan CTA monetisasi secara bersamaan.

Self-check sebelum publikasi: artikel ini memiliki lebih dari tiga use case, contoh Astro/CSS/bash yang bisa disalin, link resmi MDN dan web.dev, internal link, failure mode konkret, CTA natural, dan catatan verifikasi praktik.

Optimasi Web Font dengan Claude Code

Optimasi font adalah masalah stabilitas render

Tentukan strategi sebelum mengubah kode

Implementasi preload dan preconnect di Astro

Gunakan font-display tanpa membuat CLS

Kurangi byte dengan variable font dan subsetting

Self-host atau third-party

Verifikasi dengan Lighthouse dan waterfall ala WebPageTest

Prompt Claude Code yang aman

Hasil praktik dan CTA

PDF gratis: cheatsheet Claude Code

Artikel terkait

Permission receipt Claude Code: mencatat scope, bukti, dan rollback

Agent Harness Aman untuk Claude Code dan Codex: Permission, Verifikasi, dan Rollback

Subagent Claude Code: panduan praktis untuk delegasi artikel dan kode