Menyimpan Font Secara Lokal untuk Mengurangi Waktu Muat Situs Anda

Menyimpan font secara lokal, berarti menyajikan file font yang Anda gunakan di situs web dari akun hosting Anda sendiri, server Anda, atau CDN yang Anda miliki, alih-alih menggunakan layanan pihak ketiga. Jika diterapkan dengan benar, hal ini dapat mengurangi waktu muat situs Anda dengan mengurangi waktu pencarian DNS, penanganan TLS, dan penundaan permintaan eksternal; memberikan manfaat yang terukur terutama untuk Core Web Vitals, pengalaman pengguna, dan kinerja SEO. Untuk hasil terbaik, Anda harus menggunakan hanya bobot font yang diperlukan, memilih format WOFF2, memuat font kritis secara awal, dan mendefinisikan font-display: swap dalam CSS Anda.

Banyak situs web menggunakan font dari Google Fonts, Adobe Fonts, atau tautan font jarak jauh yang datang dengan tema tanpa menyadarinya selama tahap desain. Metode ini terlihat praktis pada pandangan pertama, tetapi dapat menambah langkah-langkah penyelesaian nama domain, koneksi, dan pengunduhan file di setiap browser pengunjung. Penundaan kecil yang terlihat sepele di jaringan seluler, seperti 100-300 ms, dapat secara signifikan memperpanjang waktu pembukaan halaman jika digabungkan dengan beberapa keluarga font dan bobot yang berbeda. Oleh karena itu, pendekatan menyimpan font secara lokal bukan hanya detail teknis, tetapi juga strategi untuk kinerja web yang lebih cepat, lebih terkontrol, dan lebih berkelanjutan.

Dalam panduan ini, kita akan membahas langkah demi langkah tentang apa itu menyimpan font secara lokal, kapan itu bermanfaat, bagaimana cara menerapkannya di situs WordPress atau perangkat lunak khusus, dan kesalahan apa yang harus dihindari menurut standar SEO 2026. Anda juga akan menemukan saran praktis tentang bagaimana merencanakan optimasi font sambil menggunakan infrastruktur hosting yang cepat dan aman di Hostragons. Pilihan hosting Anda adalah dasar dari kinerja; optimasi font adalah penyetelan halus di atas fondasi ini. Anda dapat mempertimbangkan Paket Hosting Web Hostragons untuk opsi infrastruktur terkait.

Apa Itu Menyimpan Font Secara Lokal?

Menyimpan font secara lokal berarti menyimpan file font dari tipe tertentu di dalam sistem file situs Anda dan menyajikannya kepada pengunjung dari sana. Sebagai contoh, alih-alih memanggil font Inter, Roboto, atau Montserrat melalui Google Fonts, Anda akan mengunduh file WOFF2 terkait dan mengunggahnya ke folder /fonts atau /assets/fonts di situs Anda. Kemudian, Anda mendefinisikan jalur file-file ini dalam CSS Anda menggunakan aturan @font-face. Ketika halaman dimuat, browser akan mengambil file font langsung dari nama domain Anda tanpa harus pergi ke layanan font eksternal.

Pendekatan ini sangat penting dari segi kinerja, privasi, dan kontrol. Anda dapat menentukan format file font apa yang akan disajikan, berapa lama cache akan disimpan, bobot mana yang akan dimuat, dan di halaman mana saja yang akan digunakan. Misalnya, jika situs Anda hanya menggunakan bobot 400 dan 700, Anda tidak perlu menyimpan file yang tidak perlu seperti 300, 500, 600, dan 800. Dengan begitu, baik ukuran total file berkurang maupun kekacauan CSS berkurang.

Secara praktis, ada tiga komponen utama dalam penerapan menyimpan font secara lokal: file font yang dioptimalkan, definisi CSS yang benar, dan pengaturan caching server yang efektif. Ketika salah satu dari ketiga komponen ini hilang, peningkatan kecepatan yang diharapkan dapat terbatas. Misalnya, jika Anda menggunakan file TTF yang lebih lama alih-alih WOFF2, ukuran file akan meningkat. Jika header cache salah, pengunjung mungkin harus mengunduh font yang sama di setiap halaman. Jika preload digunakan dengan cara yang salah, browser dapat memberikan prioritas yang tidak perlu.

Mengapa Optimasi Font Penting untuk SEO?

Google menilai pengalaman pengguna melalui sinyal langsung dan tidak langsung dalam sistem peringkat mereka. Kecepatan situs, keterjangkauan seluler, penundaan interaksi, dan stabilitas visual menonjol dalam evaluasi ini. Font dapat mempengaruhi Largest Contentful Paint, Cumulative Layout Shift, dan waktu muat yang dirasakan. Jika teks yang muncul di judul atau layar pertama dirender dengan font khusus, keterlambatan dalam memuat file font dapat menunda nilai LCP.

Dalam pendekatan SEO 2026, kualitas konten sama pentingnya dengan aksesibilitas teknis. Googlebot harus dapat mengakses file sumber Anda saat merayapi halaman Anda, dan pengguna harus dapat melihat halaman dengan cepat dan stabil. Keterlambatan koneksi di penyedia font eksternal, masalah akses berdasarkan negara, atau masalah DNS yang kadang-kadang muncul berada di luar kendali situs Anda. Menyimpan font secara lokal mengurangi ketidakpastian ini.

Contoh berbasis pengalaman: pada situs korporat dengan total ukuran halaman 1,8 MB yang menggunakan empat keluarga font Google yang berbeda, delapan bobot, dan dua variasi, permintaan font saja dapat mencapai rentang 450-700 KB. Beberapa dari file ini mungkin tidak digunakan di layar pertama, tetapi browser dapat memintanya karena CSS. Ketika desain yang sama disusun dengan dua keluarga font, tiga bobot, dan subset WOFF2, ukuran font dapat turun menjadi 90-180 KB. Perbedaan ini terasa terutama pada koneksi 4G dan perangkat berdaya rendah.

Perbandingan Layanan Font Eksternal dan Menyimpan Font Secara Lokal

Tidak ada satu jawaban yang benar untuk setiap situs. Dalam beberapa proyek, layanan font eksternal mungkin cukup; di proyek lain, penyimpanan lokal memberikan hasil yang jauh lebih baik. Tabel di bawah ini membantu Anda melihat perbedaan dasar saat membuat keputusan.

Singkatnya, jika Anda menginginkan kontrol dan kinerja, penyimpanan lokal adalah pilihan yang lebih kuat. Namun, metode ini tidak boleh dianggap sesederhana "mengunduh font dan mengunggah ke server." Format file yang salah, bobot yang tidak perlu, atau CSS yang salah dapat memperburuk kinerja daripada meningkatkannya.

Dampak Menyimpan Font Secara Lokal pada Kecepatan Situs

File font biasanya terlihat kecil; tetapi dapat menjadi sumber daya kritis dalam rantai pemuatan halaman. Browser pertama-tama mengambil HTML, kemudian mengunduh file CSS, dan menemukan font yang didefinisikan dalam CSS. Jika judul, menu, atau teks tubuh Anda bergantung pada font khusus, browser mungkin akan menunggu file font sebelum menampilkan teks. Dalam hal ini, pengguna dapat melihat area kosong, teks yang tidak terlihat, atau perubahan font yang tiba-tiba.

Ada tiga metrik penting untuk memahami dampak kinerja. Pertama adalah LCP, yang menunjukkan kapan pengguna melihat elemen konten terbesar di layar. Kedua adalah CLS, yaitu pergeseran yang disebabkan oleh perbedaan lebar dan tinggi teks akibat perubahan font. Ketiga adalah INP, yaitu sensitivitas interaksi; meskipun font bukan penyebab utama dari metrik INP, CSS yang berat dan sumber daya yang tidak perlu dapat mengganggu thread utama dan menyebabkan dampak tidak langsung.

Dalam strategi font yang dioptimalkan dengan baik, tujuan utamanya adalah: font yang digunakan di layar pertama harus tetap di bawah 100 KB, variasi yang tidak perlu tidak boleh dimuat, file font harus disajikan dengan cache jangka panjang, dan font kritis harus dimuat sebelumnya jika diperlukan. Jika pada halaman produk e-commerce, judul, harga, dan teks CTA hanya memerlukan bobot 400 dan 700 dari font yang sama, memuat sembilan bobot yang berbeda adalah pemborosan biaya. Untuk memperkuat kecepatan infrastruktur e-commerce Anda, Anda bisa melihat Solusi hosting berkinerja tinggi.

Format Font yang Tepat untuk Self-Host Fonts

Mengapa WOFF2 adalah Pilihan Terbaik?

Format font yang paling efisien untuk web modern dalam kebanyakan skenario adalah WOFF2. WOFF2 menawarkan rasio kompresi yang baik dan didukung oleh sebagian besar browser terbaru. Meskipun file TTF atau OTF cocok untuk desain dan penggunaan desktop, biasanya lebih besar dari yang diperlukan untuk kinerja web. Format lama seperti EOT hanya relevan untuk target browser yang sangat tua.

Misalnya, file TTF dari font yang sama bisa berukuran 300 KB sementara versi WOFF2-nya bisa berkisar antara 80-120 KB. Ketika Anda menggunakan beberapa bobot, perbedaannya bisa bertambah. Oleh karena itu, saat menyimpan font secara lokal, Anda harus menggunakan file WOFF2 yang dioptimalkan untuk web alih-alih mengunggah file seperti adanya.

Haruskah Anda Menggunakan Variable Font?

Variable font dapat menyimpan beberapa bobot atau variasi gaya dalam satu file. Jika desain Anda menggunakan banyak bobot dari 300 hingga 800, variable font mungkin masuk akal. Namun, jika Anda hanya menggunakan 400 dan 700, dua file WOFF2 statis terpisah kadang-kadang dapat memberikan ukuran total yang lebih kecil. Saat mengambil keputusan, perlu untuk menguji ukuran file, jumlah variasi yang digunakan, dan dukungan browser.

Pendekatan berbasis pengalaman yang baik adalah: pertama, buat daftar bobot font yang benar-benar digunakan dalam sistem desain Anda. Kemudian bandingkan total nilai KB dari opsi statis dan variable. Pilihlah yang lebih kecil, lebih sederhana, dan lebih stabil. Keputusan estetika harus menjadi bagian dari proses desain seperti halnya hasil pengukuran.

Bagaimana Cara Menyimpan Font Secara Lokal?

Langkah-langkah berikut dapat diterapkan untuk WordPress, aplikasi PHP khusus, proyek berbasis Laravel, Node.js, dan situs statis. Logikanya sama: hapus font yang tidak perlu, optimalkan file yang diperlukan, sajikan dari server Anda sendiri, dan uji hasilnya.

1. Audit Penggunaan Font yang Ada

Langkah pertama adalah melihat font mana yang dipanggil oleh situs Anda dan dari mana. Anda dapat menggunakan filter "font" di tab Network di Chrome DevTools untuk daftar semua permintaan font. Anda juga dapat memeriksa sumber daya yang memblokir render dan permintaan pihak ketiga dalam laporan PageSpeed Insights, WebPageTest, atau Lighthouse. Cari jawaban untuk pertanyaan berikut: Berapa banyak keluarga font yang digunakan? Berapa banyak bobot yang dimuat? Font-font tersebut berasal dari nama domain mana? Berapa banyak yang benar-benar diperlukan di layar pertama?

Di banyak situs, tema, pembuat halaman, dan plugin memanggil font secara terpisah. Misalnya, tema dapat memanggil Roboto, sementara pembuat halaman memanggil Montserrat, dan plugin formulir memuat Open Sans. Meskipun hal ini mungkin tidak terlihat secara visual, ini membawa biaya kinerja. Menetapkan satu sistem desain untuk mengurangi jumlah keluarga font biasanya memberikan keuntungan terbesar.

2. Unduh dan Sederhanakan File Font yang Diperlukan

Periksa ketentuan lisensi dari font yang Anda pilih. Font sumber terbuka biasanya mengizinkan penyimpanan lokal; namun, font komersial dapat memiliki aturan seperti batasan domain atau lisensi tampilan halaman. Setelah lisensi disetujui, unduh hanya bobot dan gaya yang Anda butuhkan. Dukungan karakter Latin Extended penting untuk bahasa Indonesia; pastikan bahwa karakter "ğ, ü, ş, ı, ö, ç" tidak hilang.

Untuk optimasi lebih lanjut, Anda dapat membuat subset. Subset adalah mengeluarkan kelompok karakter yang tidak digunakan dari file font. Untuk situs yang menerbitkan dalam bahasa Indonesia dan Inggris, Latin dan Latin Extended biasanya sudah cukup. Jika Anda tidak menggunakan karakter Kiril, Arab, atau Yunani, mengeluarkan kelompok tersebut dari file dapat mengurangi ukuran. Namun, dalam proyek multibahasa, kesalahan subset yang tergesa-gesa dapat menyebabkan teks terlihat rusak. Dalam merencanakan nama domain dan strategi bahasa untuk proyek multibahasa, Anda dapat mempertimbangkan Panduan Pemilihan Domain dan Situs Multibahasa.

3. Unggah Font ke Folder yang Tepat

Simpan file font dalam struktur folder yang rapi. Anda dapat menggunakan nama file yang dapat dibaca seperti /assets/fonts/inter/inter-400.woff2 dan /assets/fonts/inter/inter-700.woff2. Menambahkan informasi versi ke nama file memudahkan manajemen cache: misalnya inter-400-v2.woff2. Dengan demikian, ketika Anda memperbarui font, Anda tidak akan mengalami masalah cache lama.

Anda dapat menggunakan manajer file di panel hosting Anda, FTP, atau distribusi berbasis Git. Izin file biasanya harus 644, dan izin folder 755. File font harus dapat dibaca publik; jika tidak, browser akan mengalami kesalahan 403 dan beralih ke font sistem. Pastikan juga untuk memeriksa konfigurasi jenis MIME di sisi server. Jenis konten yang benar untuk WOFF2 harus font/woff2.

4. Definisikan @font-face dalam CSS

Pusat dari menyimpan font secara lokal adalah aturan @font-face. Definisi sederhana mengikuti logika ini: @font-face { font-family: Inter; src: url('/assets/fonts/inter/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }. Untuk versi tebal dari font yang sama, tambahkan definisi terpisah dengan font-weight: 700.

Salah satu baris paling kritis di sini adalah nilai font-display: swap. Nilai ini memungkinkan browser untuk menampilkan teks dengan font sistem sampai font khusus dimuat. Dengan demikian, masalah teks yang tidak terlihat berkurang. Namun, saat swap digunakan, mungkin terjadi sedikit pergeseran saat font berubah. Untuk mengurangi ini, Anda harus memilih font fallback sistem yang mirip dengan font khusus. Misalnya, untuk Inter, Arial atau system-ui sering kali merupakan cadangan yang wajar.

5. Preload Font Kritis

Preload adalah sinyal kuat yang memberi tahu browser bahwa sumber tertentu harus diunduh lebih awal. Preloading file font utama yang digunakan untuk judul dan teks tubuh di layar pertama dapat meningkatkan LCP. Namun, me-preload semua font adalah kesalahan. Browser akan mengalokasikan bandwidth untuk sumber daya yang tidak perlu, dan gambar atau CSS kritis mungkin mengalami keterlambatan.

Secara umum, hanya preload 1 atau maksimal 2 file font yang pasti digunakan di layar pertama. Misalnya, jika font tubuh utama 400 dan font judul 700 muncul di layar pertama, kedua file ini bisa menjadi kandidat. Jika font miring di halaman detail blog tidak digunakan di layar pertama, jangan preload. Setelah preload, periksa di tab Network untuk memastikan bahwa font benar-benar diunduh lebih awal dan tidak ada pengunduhan ganda.

6. Konfigurasi Pengaturan Cache dan Kompresi

File font adalah aset statis yang tidak sering berubah. Oleh karena itu, mereka harus disajikan dengan pengaturan cache browser jangka panjang. Dalam header Cache-Control, pendekatan umum adalah public, max-age=31536000, immutable. Ketika Anda menggunakan versi dalam nama file, cache selama setahun menjadi aman; karena ketika pembaruan diperlukan, Anda mengubah nama file.

WOFF2 sudah merupakan format terkompresi; oleh karena itu, tidak ada keuntungan besar yang diharapkan dengan Brotli atau Gzip. Namun, kinerja penyajian file statis di server Anda tetap penting. Jika Anda menggunakan keuntungan infrastruktur seperti LiteSpeed, disk NVMe, dan konfigurasi cache yang tepat di Hostragons, file font dapat merespons jauh lebih cepat. Memastikan SSL terpasang dengan benar di sisi infrastruktur juga penting untuk kinerja HTTP/2 dan HTTP/3; informasi tentang ini dapat ditemukan di Panduan Instalasi Sertifikat SSL dan HTTPS.

Menyimpan Font Secara Lokal di Situs WordPress

Optimasi font di WordPress bervariasi tergantung pada tema, plugin, dan pembuat halaman. Pertama, periksa apakah tema Anda memungkinkan menonaktifkan pemanggilan Google Fonts. Banyak tema modern menawarkan opsi untuk menonaktifkan Google Fonts dalam pengaturan tipografi. Elementor, blok Gutenberg, atau plugin slider mungkin juga memiliki pengaturan font mereka sendiri. Periksa semua komponen secara menyeluruh untuk mencegah pengunduhan berulang font yang sama dari sumber yang berbeda.

Secara teknis, metode terbersih adalah menyimpan file font dalam child theme dan menambahkan definisi CSS ke file gaya tema Anda. Anda juga dapat menyimpan font secara lokal menggunakan plugin; namun, menambah jumlah plugin yang tidak perlu dapat bertentangan dengan tujuan kinerja. Jika Anda menggunakan plugin, periksa tanggal pembaruan terakhir, kompatibilitas PHP, dan kesesuaiannya dengan plugin cache Anda.

Pastikan untuk membuat cadangan sebelum melakukan perubahan di situs WordPress Anda. Menghapus pemanggilan font dapat secara tidak sengaja merusak font ikon atau gaya panel admin. Terutama dalam situs WooCommerce, Anda perlu menguji halaman keranjang, pembayaran, dan akun. Jika Anda mencari infrastruktur yang fokus pada kinerja untuk situs korporat WordPress Anda, Anda dapat mempertimbangkan Paket hosting WordPress dalam konten Anda.

Daftar Periksa SEO Teknis dan Core Web Vitals

Setelah Anda melakukan optimasi font, hanya memeriksa "apakah situs terbuka?" tidak cukup. Anda harus melakukan pengukuran, membandingkan nilai sebelum dan sesudah, dan melakukan pengujian yang mendekati pengalaman pengguna nyata. Berikut adalah daftar periksa praktis untuk memulai.

• Verifikasi di tab Network bahwa permintaan font eksternal seperti Google Fonts, fonts.gstatic, atau sejenisnya telah dihapus.
• Usahakan untuk mempertahankan jumlah total file font antara 2-4.
• Pastikan Anda menggunakan format WOFF2 dan ukuran file yang wajar.
• Uji nilai font-display: swap atau optional dalam skenario yang sesuai.
• Jangan lakukan preload yang tidak perlu selain font paling kritis yang digunakan di layar pertama.
• Periksa bahwa header Cache-Control sesuai untuk caching jangka panjang.
• Uji bahwa karakter bahasa Indonesia muncul dengan benar di semua browser.
• Bandingkan hasil Mobile PageSpeed Insights, Lighthouse, dan WebPageTest dengan hasil sebelum perubahan.

Jangan bergantung pada satu hasil tes dalam pengukuran. Kondisi jaringan, kepadatan server, dan lokasi pengujian dapat mempengaruhi hasil. Melakukan setidaknya tiga tes dan melihat tren rata-rata adalah pendekatan yang lebih sehat. Jika LCP turun dari 2,8 detik menjadi 2,3 detik, itu adalah perkembangan yang signifikan. Jika setelah optimasi font, CLS meningkat, tinjau kembali pemilihan font fallback dan metrik font.

Kesalahan Umum

Menggunakan Terlalu Banyak Keluarga Font

Kesalahan paling umum adalah menciptakan variasi yang tidak perlu dalam desain. Ketika satu font digunakan untuk judul, font lain untuk paragraf, font ketiga untuk tombol, dan font keempat untuk kutipan, biaya kinerja meningkat. Banyak situs web profesional dapat menciptakan identitas visual yang kuat dengan satu atau dua keluarga font. Konsistensi tipografi berharga tidak hanya untuk kecepatan tetapi juga untuk persepsi merek.

Pemilihan Font Cadangan yang Salah

Font sistem yang ditampilkan sebelum font khusus dimuat dapat menyebabkan pergeseran teks jika ukurannya sangat berbeda dari font yang muncul setelahnya. Ini dapat meningkatkan nilai CLS. Ketika memilih font fallback, perhatikan kesamaan x-height, lebar huruf, dan tinggi baris. Uji opsi seperti system-ui, Arial, Helvetica, dan Georgia sesuai dengan desain Anda.

Melakukan Preload pada Semua Font

Preload adalah alat yang kuat tetapi dapat berbahaya jika digunakan dengan salah. Mem-preload semua bobot font dapat mengganggu urutan prioritas browser. Hal ini dapat memperburuk LCP di halaman yang memiliki gambar hero. Buat keputusan preload berdasarkan penggunaan aktual di layar pertama dan hasil pengujian.

Melewatkan Ketentuan Lisensi

Tidak semua font gratis atau tanpa batas. Lisensi web untuk font komersial dapat memiliki ketentuan yang berbeda. Menyajikan font yang tidak diizinkan untuk disimpan secara lokal di server Anda dapat menimbulkan risiko hukum. Pastikan untuk mengarsipkan teks lisensi sebelum merilis font dan menyimpannya dalam dokumentasi proyek.

Keamanan, Privasi, dan Ukuran Infrastruktur

Menyimpan font secara lokal tidak hanya tentang kecepatan; ini juga memberikan keuntungan dari segi privasi dan keamanan. Ketika menggunakan layanan font eksternal, browser pengunjung dapat mengirim permintaan ke domain pihak ketiga. Dalam beberapa sektor, hal ini harus dipertimbangkan dari perspektif regulasi perlindungan data. Dengan menyimpan font secara lokal, permintaan font terjadi melalui nama domain Anda sendiri, sehingga aliran data menjadi lebih dapat diprediksi.

Di sisi infrastruktur, HTTPS adalah suatu keharusan. Jika file font dipanggil melalui HTTP, masalah konten campuran atau pemblokiran browser dapat terjadi. Konfigurasi DNS yang benar untuk nama domain Anda, sertifikat SSL, dan kinerja hosting memainkan peran penting di sini. Jika Anda memulai proyek baru, Anda dapat melihat halaman Pemeriksaan Domain dan Pendaftaran untuk pemilihan nama domain, halaman sertifikat SSL untuk penerbitan yang aman, dan halaman Solusi Hosting Hostragons untuk hosting yang kuat.

Jika Anda menggunakan CDN, pastikan untuk memeriksa pengaturan CORS untuk file font. Jika font disajikan dari subdomain yang berbeda, header Access-Control-Allow-Origin mungkin diperlukan. Sebaliknya, menyajikan dari nama domain yang sama lebih sederhana dan tanpa masalah bagi sebagian besar situs kecil dan menengah.

Bagaimana Mengukur Peningkatan Kinerja?

Bukti dari optimasi yang sukses adalah pengukuran. Pertama, catat kondisi saat ini: jumlah total permintaan font, total ukuran font, LCP, CLS, dan total waktu muat. Kemudian, terapkan penyimpanan lokal dan uji halaman yang sama dengan alat yang sama. Ukur template yang berbeda seperti halaman utama, tulisan blog, halaman kategori, dan jika ada, halaman produk secara terpisah.

Dalam skenario contoh, di situs blog yang awalnya memiliki 6 permintaan font dan 420 KB data font, setelah optimasi, bisa turun menjadi 2 permintaan font dan 96 KB data font. Skor performa Lighthouse seluler dapat meningkat dari 72 menjadi 86; LCP bisa turun dari 3,1 detik menjadi 2,4 detik. Angka-angka ini tidak dijamin, karena gambar, JavaScript, dan waktu respons server juga berpengaruh. Namun, optimasi font adalah salah satu perbaikan yang biasanya dapat diterapkan dengan cepat dan dampaknya mudah diukur.

Untuk data pengguna nyata, laporan Chrome User Experience, laporan Core Web Vitals dari Search Console, atau alat RUM memberikan wawasan yang lebih berharga. Tes laboratorium baik untuk menemukan masalah; namun, data pengguna nyata menunjukkan dampak optimasi di lapangan. Jika situs Anda memiliki lalu lintas yang tinggi, lebih aman untuk menerapkan perubahan di lingkungan staging terlebih dahulu, lalu meluncurkannya selama jam rendah risiko.

Rencana Mini yang Dapat Diterapkan: Optimasi Font dalam 60 Menit

Jika waktu Anda terbatas, Anda dapat memulai dengan cepat menggunakan rencana berikut. Dalam 10 menit pertama, daftar permintaan font saat ini menggunakan DevTools dan ambil tangkapan layar. Dalam 10 menit berikutnya, identifikasi keluarga font dan bobot yang benar-benar digunakan dalam desain. Dalam 15 menit berikutnya, unduh file WOFF2 yang diperlukan, periksa karakter bahasa Indonesia, dan unggah ke folder /assets/fonts.

Kemudian, dalam 15 menit, tambahkan definisi @font-face CSS, gunakan font-display: swap, dan hapus tautan font eksternal yang lama. Dalam 10 menit terakhir, lakukan pengujian seluler, verifikasi di tab Network bahwa tidak ada lagi permintaan font eksternal, dan periksa halaman di berbagai browser. Setelah itu, Anda bisa menangani optimasi lebih lanjut seperti pengaturan cache, preload, dan subset secara terpisah.

Rencana ini memberikan hasil cepat, terutama untuk situs usaha kecil, blog, dan halaman promosi korporat. Untuk proyek e-commerce besar atau SaaS, lebih baik menangani optimasi font bersama dengan sistem desain, pustaka komponen, dan proses distribusi.

Kesimpulan

Menyimpan font secara lokal adalah metode yang efektif untuk meningkatkan kecepatan situs, pengalaman pengguna, dan kualitas SEO teknis, jika diterapkan dengan benar. Poin-poin paling penting adalah menggunakan WOFF2, menghapus bobot font yang tidak perlu, mendefinisikan font-display, memuat font kritis secara hati-hati, dan menyajikan file dengan pengaturan cache yang kuat. Proses ini sendiri tidak akan menyelesaikan semua masalah kinerja; tetapi dapat memberikan keuntungan yang cepat, andal, dan terukur.

Semakin kuat infrastruktur hosting Anda, semakin besar manfaat yang Anda dapatkan dari optimasi. Jika Anda ingin membuat situs Anda lebih cepat dan lebih aman, Anda dapat melihat solusi hosting, domain, dan SSL dari Hostragons; dan menerapkan optimasi font sebagai bagian dari rencana kinerja umum Anda. Tanpa tekanan untuk menjual, ukur terlebih dahulu, kemudian tingkatkan, dan verifikasi hasilnya dengan pengalaman pengguna.

Pertanyaan yang Sering Diajukan

Apakah menyimpan font secara lokal selalu lebih cepat daripada Google Fonts?

Tidak selalu. Jika caching yang benar, WOFF2, jumlah file yang sedikit, dan respons server yang baik ada, biasanya lebih dapat diprediksi dan cepat. Namun, font lokal yang salah dikonfigurasi bisa lebih lambat dibandingkan penggunaan eksternal yang sudah dioptimalkan.

Format font apa yang harus saya gunakan untuk self-host fonts?

Untuk sebagian besar situs web modern, WOFF2 adalah pilihan terbaik dalam banyak kasus. Ini menawarkan ukuran file yang lebih kecil dan dukungan browser yang luas. File TTF atau OTF biasanya lebih besar dari yang diperlukan untuk kinerja web.

Berapa banyak bobot font yang ideal untuk digunakan?

Untuk sebagian besar situs, bobot 400 dan 700 sudah cukup. Dalam beberapa desain, 500 atau 600 dapat ditambahkan; namun, setiap bobot baru berarti biaya file dan pemuatan tambahan. Anda perlu menghapus bobot yang tidak digunakan.

Apakah menggunakan font-display: swap itu wajib?

Tidak wajib, tetapi disarankan dalam sebagian besar skenario. Ini memungkinkan teks untuk dilihat sampai font khusus dimuat dan mengurangi masalah teks yang tidak terlihat. Font fallback yang tepat harus dipilih untuk mencegah CLS.

Apakah perlu menggunakan plugin untuk menyimpan font secara lokal di WordPress?

Tidak, itu tidak wajib. Menyimpan file font dalam child theme dan mendefinisikan CSS adalah salah satu metode terbersih. Namun, jika pengetahuan teknis Anda terbatas, Anda juga dapat menggunakan plugin yang terpercaya dan terbaru.