Cara Marketer Indonesia Pasang Preload Font di Next.js untuk Pangkas Flash of Unstyled Text 2026
TL;DR: Font yang di-load tanpa preload sering tampil dengan jeda 200 sampai 600 ms, memicu Flash of Unstyled Text (FOUT) dan menambah skor CLS. Solusinya pasang
rel="preload"pada file font kritis, kombinasikan denganfont-display: swap, dan batasi preload hanya untuk weight/style yang dipakai di above-the-fold. Di Next.js 15, sebagian dilakukan otomatis vianext/font, tapi marketer yang pakai CSS @import tetap harus pasang manual.
Di beberapa audit website client UMKM bulan ini, saya melihat pola yang sama: hero memakai font custom dari CDN Google atau Adobe, tapi link tag-nya tidak di-preload. Akibatnya teks utama tampil dengan fallback dulu, lalu "loncat" ke font final. Pengguna tidak selalu menyadari, tapi Core Web Vitals report di Search Console mencatatnya sebagai CLS spike di mobile.
Artikel ini menjelaskan cara pasang preload font yang aman di proyek Next.js, baik yang sudah pakai App Router maupun yang masih warisan Pages Router dengan custom CSS.
Masalah: Font Telat dan CLS Naik
Saat browser parsing HTML, file font baru diketahui kebutuhannya setelah CSSOM siap. Artinya font download baru jalan setelah delay CSS parse, sementara konten teks sudah dirender. Browser sementara memakai fallback. Begitu font asli tiba, teks di-repaint, ukurannya berubah sedikit, dan terjadi layout shift kecil yang menambah skor CLS.
Untuk halaman dengan banyak teks above-the-fold (artikel, landing page), efeknya akumulatif. Saya pernah melihat halaman dengan CLS naik dari 0,02 ke 0,18 hanya gara-gara dua weight font besar tidak di-preload. Skor 0,18 sudah masuk kategori "perlu perbaikan" di Core Web Vitals.
Framework: 3 Lapis Optimasi Font
| Lapis | Teknik | Hasil yang diharapkan |
|---|---|---|
| 1. Self-host | Pindahkan file font dari Google Fonts CDN ke domain sendiri atau Vercel | Hilangkan extra DNS lookup dan TLS handshake |
| 2. Preload | <link rel="preload" as="font" type="font/woff2" crossorigin> di <head> | Browser mulai download font sebelum CSS parse selesai |
| 3. Font-display | font-display: swap di @font-face | Render teks pakai fallback dulu, swap saat font siap, tidak ada invisible text |
Kombinasi ketiganya menghilangkan FOIT (Flash of Invisible Text) sekaligus menekan CLS. Detail soal font-display: swap ada di glosarium font-display swap.
Implementasi di Next.js 15 App Router
Cara paling rapi pakai next/font/local:
// app/fonts.ts
import localFont from "next/font/local";
export const inter = localFont({
src: [
{ path: "./fonts/Inter-Regular.woff2", weight: "400", style: "normal" },
{ path: "./fonts/Inter-SemiBold.woff2", weight: "600", style: "normal" }
],
display: "swap",
preload: true,
variable: "--font-inter"
});
next/font akan otomatis inject <link rel="preload"> untuk weight yang dipakai di route saat ini. Jangan preload semua weight, hanya yang above-the-fold, karena tiap preload menambah bandwidth kritis.
Untuk proyek yang masih pakai CSS @import Google Fonts (umum di template legacy), tambahkan manual di app/layout.tsx:
<head>
<link
rel="preload"
href="https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</head>
Atribut crossOrigin="anonymous" wajib, kalau tidak browser akan ignore preload-nya. Detail di dokumentasi preload font web.dev.
Studi Kasus Nalesha: Hero Parfum dan FOUT 480 ms
Saat bantu audit landing page Nalesha (e-commerce parfum), saya menemukan hero menggunakan dua weight font serif dengan ukuran besar di headline. Tanpa preload, font baru tampil di mid-load dan menyebabkan FOUT 480 ms di mobile 4G. CLS tercatat 0,14.
Setelah pasang preload untuk weight 700 (yang dipakai headline) saja, plus font-display: swap, FOUT turun ke 90 ms dan CLS jadi 0,03. Yang penting di sini: hanya satu weight yang di-preload, bukan semua. Preload berlebihan justru kompetisi bandwidth dengan hero image dan menambah LCP.
Pertanyaan Umum
Apakah Google Fonts CDN selalu lebih lambat dari self-host?
Tidak selalu. Google Fonts CDN punya caching global. Tapi extra DNS lookup ke fonts.gstatic.com menambah 30 sampai 150 ms di Indonesia, jadi self-host umumnya menang di koneksi rumahan.
Berapa banyak font yang boleh di-preload?
Idealnya satu sampai dua file font (weight kritis). Lebih dari itu, manfaat preload hilang karena bandwidth ke resource lain (LCP image, CSS) ikut tertunda.
Apakah next/font/google sudah otomatis preload?
Iya, untuk weight yang Anda import dan dipakai di route. Tapi cek Network panel: kadang Next.js inject preload untuk seluruh weight yang diimport, bukan yang benar-benar dipakai. Hapus weight yang tidak dipakai.
Aplikasikan ke Audit Berikutnya
Pasang preload font bukan optimasi yang sekali dan selesai. Setiap kali tambah weight baru atau ganti tipografi, cek ulang Network panel Chrome DevTools: pastikan font kritis ter-download di gelombang pertama, bukan setelah CSS parse. Ini lever performa kecil yang sering luput tapi langsung terasa di CLS.
Artikel Terkait
Website Bisnis
Cara Marketer Indonesia Pasang Canonical Tag di Next.js 15 Tanpa Plugin 2026
Pasang canonical tag di Next.js 15 App Router pakai Metadata API. Kasus duplicate content, multi-region, dan tracking parameter UTM. Step by step.
Website Bisnis
Cara Marketer Indonesia Pasang HSTS di Website Bisnis Tanpa Risiko Lockout 2026
Panduan pasang HSTS aman di Next.js dengan strategi staged rollout, mencegah serangan downgrade tanpa risiko lockout pengguna.
Website Bisnis
Cara Marketer Indonesia Pasang Fetchpriority di Image Hero untuk Pangkas LCP 2026
Atribut fetchpriority="high" memberi tahu browser mana resource paling penting. Untuk image hero, perubahan satu baris ini dapat menurunkan LCP 300-700 ms tanpa migrasi framework.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang