Mengoptimalkan Kinerja Font Google

Desain situs web yang bagus dilengkapi dengan gambar dan font yang menakjubkan. Sayangnya, kedua elemen web ini sangat berkontribusi pada alasan mengapa banyak situs web menunjukkan latensi yang mengganggu. Tentu saja, hanya font web yang dapat memberikan sesuatu yang menyegarkan, tidak terduga, dan baru.

Namun, ada cara untuk mengatasi fenomena mengerikan ini. SVG membantu pengembang untuk mengelola beberapa tantangan rendering gambar. Dan untuk Google Font, yang merupakan font web yang paling populer digunakan, meningkatkan waktu rendering halaman hanya dengan menerapkan beberapa trik yang tersedia untuk mengoptimalkan kinerja Google Font.

Apa itu font Google?

Font Google adalah kumpulan mesin terbang yang disetel secara khusus yang membentuk font untuk digunakan di situs web. Mereka secara khusus dirancang untuk digunakan melalui internet, oleh karena itu, nama font web.

Diluncurkan sebagai Google Web Fonts pada tahun 2010 dengan hanya sekitar 30 font, Google Fonts sekarang memiliki sekitar 17 miliar font dan saat ini menguasai sekitar 57% dari semua situs web. Google Font, yang sepenuhnya gratis, mencatat sekitar 500.000 tampilan setiap detik pada saat penulisan ini dan telah mengumpulkan lebih dari 37 triliun tampilan sejak 2010.

Penggunaan font Google di situs web Anda memungkinkan Anda melepaskan diri dari keterbatasan font sistem atau 'font web-safe', seperti Arial dan Georgia, yang sebagian besar sudah diinstal sebelumnya di semua sistem operasi.

Bagaimana menerapkan font Google

Implementasi Google Fonts di situs web dilakukan dengan menggunakan antarmuka pemrograman aplikasi (API), mengacu pada pilihan font pengguna. API yang ditawarkan oleh Google ini dapat disematkan ke dalam dokumen HTML Anda menggunakan tag tautan CSS standar atau sintaks untuk impor. Di bawah ini adalah contoh API untuk mengimplementasikan Baloo Chettan 2.

Menggunakan tag tautan CSS standar

Menggunakan sintaks impor
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

Dengan salah satu API di atas dalam dokumen HTML Anda, Anda dapat menggunakan keluarga font di dokumen CSS Anda dengan merujuknya, seperti yang terlihat pada contoh di bawah ini.

font-family : 'Baloo Chettan 2', kursif;

Pentingnya mengoptimalkan kinerja Google Font

Menerapkan dan menggunakan Google Font, seperti font web lainnya, bukanlah masalah besar tetapi mengirimkan font ke pengunjung situs web Anda. Ingat, pengguna tidak memiliki font ini di perangkat mereka. Dengan kata lain, browser mereka harus mengunduhnya sebelum mereka dapat melihat konten situs web Anda.

Berat font

Setiap font hadir dengan bobot yang siap memengaruhi latensi situs web Anda secara negatif. Misalnya, font Google Baloo Chettan 2 memiliki ukuran total 720 KB. Itu berarti Anda perlu memperhitungkan sekitar 9MB ke dalam pemuatan situs web Anda jika Anda harus menggunakan seluruh jenis font Baloo (19), dengan semua bahasa dan varian yang tersedia di situs web Anda. Tentu saja, itu tidak ideal dan tidak mendekati pengoptimalan font web. Namun, melakukan kesalahan berarti membuat pengunjung situs web Anda menunggu beberapa detik sebelum mereka dapat melihat teks apa pun di situs web Anda.

Format huruf

Sayangnya, tidak satu pun dari format ini yang dianggap sebagai format universal yang berfungsi di semua browser.

EOT hanya didukung oleh IE. Chrome dan Opera memiliki dukungan paling banyak untuk sebagian besar format, sementara sekitar 86 persen dari semua browser mendukung format WOFF. Ini mungkin mengharuskan Anda untuk menyertakan semua format font untuk setiap font yang ingin Anda gunakan. Idenya adalah untuk memberikan pengalaman yang konsisten dengan memastikan bahwa semua browser dapat menampilkan setiap font.

Masalah ini adalah bagian dari banyak alasan mengapa ada kebutuhan penting untuk mengoptimalkan kinerja font Google.

Mengoptimalkan kinerja Google Font

Pengoptimalan Google Font dimulai dengan penempatan Font API dan format permintaan Anda, hingga rendering. Berikut adalah trik sederhana tentang cara mengoptimalkan font Google.

Pramuat sumber daya Google Font

Sangat disarankan agar Anda menggunakan fitur platform web baru: <link rel="preload"> yang memungkinkan Anda memuat font web terlebih dahulu. Fitur ini memungkinkan Anda untuk mengabaikan perilaku browser default, yang biasanya menunda rendering teks dengan terlebih dahulu membuat pohon render untuk mengetahui sumber daya font mana yang diperlukan sebelum mengakses tautan sumber daya.

<link rel="preload"> biasanya disertakan dalam tag <head> HTML Anda untuk memicu permintaan font Anda cukup awal, tanpa menunggu pembuatan CSSOM. Fitur ini hanya memberi browser pra-informasi bahwa font web Anda akan segera dibutuhkan, tanpa memberikan informasi apa pun tentang bagaimana font tersebut akan digunakan.

Selain itu, Anda disarankan untuk menggunakan definisi CSS @font-face yang sesuai di samping fitur pramuat untuk menginformasikan browser tentang cara menggunakan URL sumber daya. Lihat contohnya di poin berikutnya.

Gunakan satu permintaan untuk beberapa font

Ukuran bagus lainnya untuk pengoptimalan font Google adalah menggabungkan beberapa permintaan font menjadi satu tag. Tidak menyertakan tag <link> terpisah untuk setiap font, sehingga mengirimkan beberapa permintaan dalam kumpulan yang berbeda. Untuk menggabungkan permintaan font, cukup pisahkan font di API dengan | karakter. Namun, ini juga dapat dicapai hanya dengan memilih semua font yang Anda perlukan sekaligus di halaman Google Font.

Format permintaan font yang buruk:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Format permintaan font yang disarankan:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

Dengan menggabungkan beberapa permintaan font menjadi satu tag, kami menyimpan browser dari beberapa perjalanan ke server dan juga membantu browser lama dengan maksimal 2 koneksi sekaligus per domain.

Format font yang dioptimalkan untuk semua browser

Browser tanpa dukungan untuk format font tertentu abaikan saja dan lompat ke langkah berikutnya di pohon rendering. Dan untuk memberikan pengalaman yang konsisten, Anda harus menyertakan semua format font dalam deklarasi @font-face CSS Anda.

Namun, beratnya bisa dikurangi. Grafik individu yang menggambarkan font terdiri dari informasi serupa yang dapat dikompresi menggunakan kompresor yang kompatibel seperti GZIP. Meskipun format TTF dan EOT dikompresi secara default, Anda perlu memastikan bahwa server Anda dikonfigurasi untuk menerapkan kompresi saat mengirimkan kedua format font.

Gunakan pengaturan kompresi yang optimal untuk WOFF, yang memiliki kompresi bawaan dan gunakan algoritma prapemrosesan dan kompresi khusus untuk menghadirkan WOFF2 dengan pengurangan ukuran file ~30%.

Contoh deklarasi CSS @font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Catatan: src: menunjuk ke beberapa varian sumber daya sementara url() memungkinkan Anda memuat font eksternal dan local() memungkinkan Anda mencari sumber font secara lokal. Format() menunjukkan format font di URL tertentu.

Berikan prioritas ke local() di daftar src Anda

Meskipun ide pengoptimalan font Google ini mungkin tidak benar-benar berlaku untuk pengguna ponsel kecuali Anda merujuk font sistem default, ini tetap merupakan trik efektif untuk mengoptimalkan font web.

Jika Anda melihat contoh deklarasi @font-face CSS di atas, Anda akan melihat bahwa local() berada di puncak daftar varian sumber daya yang dipisahkan koma di deskriptor src:. Prioritas ini disengaja, dan idenya adalah mengirim browser pengguna ke sumber pertama untuk font secara lokal sebelum memilih untuk mengunduhnya jika tidak tersedia secara lokal.

Ini memastikan bahwa browser tidak mengunduh font yang sudah diinstal secara lokal di komputer pengguna, sehingga memastikan kinerja situs web yang lebih baik.

Kustomisasi rendering font: Tampilan font CSS

Mengontrol kinerja font dengan deskriptor tampilan font untuk @font-face memungkinkan Anda memutuskan bagaimana Google Font harus dirender, berdasarkan berapa lama waktu yang dibutuhkan untuk mengunduh. Awalnya, browser web memiliki pengaturan default tentang apa yang harus dilakukan ketika font terlalu lama untuk dimuat. Sebagian besar dari mereka menetapkan batas waktu setelah itu mereka menggunakan font fallback, tetapi sayangnya, periode batas waktu mereka berbeda.

Properti font-display yang baru diperkenalkan saat ini mendukung lima rentang nilai: auto | blok | tukar | mundur | opsional

Anda harus mengatur properti untuk memblokir nilai jika rendering teks dalam jenis huruf tertentu sangat penting. Ini karena memungkinkan browser untuk menggunakan teks yang tak terkalahkan sebagai pengganti wajah font yang disukai ketika mereka belum siap dan menukarnya segera setelah mereka selesai mengunduh. Sebagian besar browser menggunakan nilai ini sebagai nilai default ( otomatis ) mereka.

Pertukaran dapat digunakan dalam kasus di mana Anda mampu untuk membuat tampilan font sementara sampai font-face yang diinginkan siap. Swap mirip dengan memblokir tetapi membuat font mundur segera halaman mulai memuat dan akan menggantinya dengan jenis huruf yang disukai segera setelah siap. Nilai ini memiliki periode swap tak terbatas dan periode blok nol detik.

Nilai swap tidak ideal untuk teks isi agar tidak mengganggu pengalaman pembaca di tengah jalan dengan menggeser teks. Anda dapat menggunakan ini untuk teks logo di mana Anda perlu menampilkan nama atau slogan perusahaan dengan cepat menggunakan fallback tetapi pada akhirnya memerlukan jenis huruf resmi untuk tujuan branding.

Contoh: properti font-display diatur ke swap
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

Nilai swap dapat dilihat diimplementasikan di baris kode pertama (Google Font API) yang digunakan dalam mendemonstrasikan cara menautkan font Google di dokumen HTML Anda.

Fallback mirip dengan swap tetapi memiliki periode swap yang terbatas. Jika tampilan font pilihan tidak dimuat dalam jangka waktu tertentu, biasanya nol detik, teks akan mempertahankan font cadangan selama sisa masa pakai halaman. Ini adalah kandidat yang baik untuk teks isi; itu membuat teks secepat mungkin dan tidak akan menggesernya pada saat ada orang yang mulai membaca.

Nilai opsional adalah replika fallback tetapi memungkinkan browser untuk memutuskan apakah akan memulai pengunduhan font web atau tidak, dengan mempertimbangkan kecepatan jaringan pengguna. Dalam situasi di mana koneksi terlalu lemah, browser harus membatasi permintaan dan memprioritaskan sumber daya yang paling dibutuhkan dengan tidak mengirimkan permintaan apa pun untuk mengunduh font web.

Batasi font-family dan varian

Karena setiap jenis font dan varian berkontribusi pada bobot halaman, bagian dari proses pengoptimalan Google Font Anda harus menyertakan pembatasan kedua elemen ini.

Tersedianya beberapa varian seperti italic , regular, bold , dll bukan berarti Anda memiliki 'pilihan' untuk memasukkannya ke dalam unduhan Anda. Pangkas unduhan Anda ke varian yang tepat yang diperlukan dan hindari memasukkan terlalu banyak. Akan sia-sia untuk mengunduh varian yang lengkap karena Anda hanya ingin menggunakan satu kata darinya. Di sinilah trik pengoptimalan berikutnya untuk Google Font berguna.

Gunakan parameter teks

Parameter teks adalah salah satu trik pengoptimalan font Google terbaik yang perlu Anda ketahui, dan yang mengejutkan, sebagian besar pengembang tidak menggunakannya. Parameter memungkinkan Anda untuk memuat hanya karakter yang Anda butuhkan.

Dengan asumsi Anda hanya ingin menggunakan dua huruf dari wajah font dalam nama perusahaan Anda seperti pada contoh di bawah ini. Saya menggunakan font yang berbeda untuk huruf C dan N:

Nama perusahaan

Anda dapat meminta untuk memuat hanya dua huruf itu, alih-alih seluruh wajah font. URL Font akan menyertakan parameter tambahan seperti ini:

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

Kesimpulannya

Pengoptimalan Google Font adalah strategi penting untuk meningkatkan kinerja situs web secara keseluruhan.

Aksesibilitas dan keterbacaan selalu menjadi faktor utama yang menjadi fokus, selain desain tipografi yang baik. Metode yang disebutkan di atas untuk meningkatkan kinerja font semuanya difokuskan pada penskalaan font-weight, mengakses font web secepat mungkin, dan rendering format/alternatif yang valid ketika jaringan pengguna tidak stabil.

Harap beri tahu kami jika Anda telah mencoba salah satu metode ini, dan tentang proses pengoptimalan font web apa pun yang tidak disebutkan dalam artikel ini.