Saya Berhenti Menggunakan Google Fonts CDN
Memuatkan fon daripada Google CDN melambatkan laman web anda.
Dahulu saya menggunakan satu pautan sahaja dalam header saya. Ia terasa mudah. Kemudian saya menyemak skor Lighthouse saya.
Laporan tersebut menunjukkan masalah. Pelayar perlu membuat sambungan tambahan ke pelayan Google. Ia perlu melakukan pencarian DNS dan jabat tangan TLS. Ini menyebabkan kelewatan. Pada sambungan mudah alih yang perlahan, teks kekal tidak kelihatan terlalu lama.
Saya beralih kepada self-hosting. Ia hanya mengambil masa satu petang. Sekarang saya melakukannya untuk setiap projek.
Berikut adalah tetapan yang anda perlukan:
- Gunakan format WOFF2. Ia 30% lebih kecil daripada WOFF. Anda tidak lagi memerlukan format lama seperti .ttf atau .eot.
- Tukar fon anda. Gunakan library
fonttoolsuntuk memampatkan fail .ttf kepada .woff2. - Gunakan properti
font-display: swap. Ini memaparkan teks fallback dengan serta-merta. Ia menghalang teks daripada tidak kelihatan sementara fon anda dimuatkan. - Preload fon kritikal. Tambahkan pautan preload pada bahagian head untuk fon yang digunakan di bahagian atas skrin (above the fold).
- Sentiasa gunakan atribut
crossorigin. Jika anda terlupa, pelayar akan memuat turun fon tersebut sebanyak dua kali. - Subset fon anda. Jika laman web anda menggunakan bahasa Inggeris, buang glyph yang tidak digunakan. Ini boleh mengurangkan saiz fail sebanyak 70%.
- Cache fail anda. Gunakan header
cache-controlyang lama untuk menyimpan fon dalam pelayar.
Aliran kerja ini mudah:
Tukar kepada WOFF2. Gunakan @font-face dengan swap. Preload fon utama dengan crossorigin. Cache fail tersebut.
Tetapan ini meningkatkan kelajuan pemuatan anda dan mengeluarkan pihak ketiga daripada laluan kritikal anda.
Adakah anda masih menggunakan Google CDN untuk produksi? Beritahu saya sebabnya di ruangan komen.