Mengoptimalkan Kinerja Font Google

Wajar untuk mengatakan bahwa Google Font populer. Pada saat penulisan, mereka telah dilihat lebih dari 29 triliun kali di seluruh web dan mudah untuk memahami alasannya — koleksi ini memberi Anda akses ke lebih dari 900 font cantik yang dapat Anda gunakan di situs web Anda secara gratis. Tanpa Google Fonts, Anda akan terbatas pada segelintir "font sistem" yang diinstal pada perangkat pengguna Anda.

Font sistem atau 'Font Aman Web' adalah font yang paling sering diinstal sebelumnya di seluruh sistem operasi. Misalnya, Arial dan Georgia dikemas dengan distribusi Windows, macOS, dan Linux.

Seperti semua hal baik lainnya, Google Font memang memiliki biaya. Setiap font memiliki bobot yang perlu diunduh oleh browser web sebelum dapat ditampilkan. Dengan pengaturan yang benar, waktu muat tambahan tidak terlihat. Namun, salah dan pengguna Anda bisa menunggu hingga beberapa detik sebelum teks apa pun ditampilkan.

Font Google Sudah Dioptimalkan

Google Fonts API tidak hanya menyediakan file font ke browser, tetapi juga melakukan pemeriksaan cerdas untuk melihat bagaimana ia dapat mengirimkan file dalam format yang paling optimal.

Mari kita lihat Roboto, GitHub memberi tahu kita bahwa varian reguler memiliki berat 168kb.

Namun, jika saya meminta varian font yang sama dari API, saya diberikan file ini. Yang hanya 11kb. Bagaimana itu bisa terjadi?

Saat browser membuat permintaan ke API, Google terlebih dahulu memeriksa jenis file mana yang didukung browser. Saya menggunakan Chrome versi terbaru, yang seperti kebanyakan browser mendukung WOFF2, jadi font disajikan kepada saya dalam format yang sangat terkompresi.

Jika saya mengubah agen pengguna saya ke Internet Explorer 11, saya disajikan font dalam format WOFF sebagai gantinya.

Akhirnya, jika saya mengubah agen pengguna saya ke IE8 maka saya mendapatkan font dalam format EOT (Embedded OpenType).

Google Fonts mempertahankan 30+ varian yang dioptimalkan untuk setiap font dan secara otomatis mendeteksi dan memberikan varian optimal untuk setiap platform dan browser.

— Ilya Grigorik, Pengoptimalan Font Web

Ini adalah fitur hebat dari Google Font, dengan memeriksa agen pengguna, mereka dapat menyajikan format yang paling berperforma untuk browser yang mendukungnya, sambil tetap menampilkan font secara konsisten di browser lama.

Cache Peramban

Pengoptimalan bawaan Google Font lainnya adalah cache browser.

Karena sifat Google Font yang ada di mana-mana, browser tidak selalu perlu mengunduh file font lengkap. SmashingMagazine, misalnya, menggunakan font yang disebut 'Mija', jika ini adalah pertama kalinya browser Anda melihat font itu, browser harus mengunduhnya sepenuhnya sebelum teks ditampilkan, tetapi saat berikutnya Anda mengunjungi situs web menggunakan font tersebut , browser akan menggunakan versi cache.

Karena Google Fonts API menjadi lebih banyak digunakan, kemungkinan pengunjung situs atau halaman Anda sudah memiliki font Google yang digunakan dalam desain Anda di cache browser mereka.

— FAQ, Google Font

Cache browser Google Font diatur kedaluwarsa setelah satu tahun kecuali cache dihapus lebih cepat.

Catatan: Mija bukan Google Font, tetapi prinsip caching tidak khusus untuk vendor.

Optimasi Lebih Lanjut Dimungkinkan

Meskipun Google berupaya keras dalam mengoptimalkan pengiriman file font, masih ada pengoptimalan yang dapat Anda lakukan dalam penerapan untuk mengurangi dampak pada waktu pemuatan halaman.

1. Batasi Keluarga Font

Pengoptimalan termudah adalah dengan menggunakan lebih sedikit keluarga font. Setiap font dapat menambahkan hingga 400kb ke berat halaman Anda, kalikan dengan beberapa keluarga font yang berbeda dan tiba-tiba font Anda lebih berat dari seluruh halaman Anda.

Saya sarankan menggunakan tidak lebih dari dua font, satu untuk heading dan satu lagi untuk konten biasanya sudah cukup. Dengan penggunaan ukuran font, berat, dan warna yang tepat, Anda dapat mencapai tampilan yang bagus bahkan dengan satu font.

2. Kecualikan Varian

Karena standar Google Font berkualitas tinggi, banyak keluarga font berisi spektrum penuh bobot font yang tersedia:

• kurus (100)
• Miring Tipis (100i)
• Cahaya (300)
• Miring Ringan (300i)
• Reguler (400)
• Miring Reguler (400i)
• Sedang (600)
• Miring Sedang (600i)
• Tebal (700)
• Tebal Miring (700i)
• Hitam (800)
• Hitam Miring (800i)

Itu bagus untuk kasus penggunaan lanjutan yang mungkin memerlukan semua 12 varian, tetapi untuk situs web biasa, itu berarti mengunduh semua 12 varian saat Anda mungkin hanya membutuhkan 3 atau 4.

Misalnya, keluarga font Roboto memiliki berat ~144kb. Namun jika Anda hanya menggunakan varian Reguler, Miring Reguler, dan Tebal, angka tersebut turun menjadi ~36kb. Penghematan 75%!

Kode default untuk menerapkan Google Font terlihat seperti ini:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Jika Anda melakukannya, itu hanya akan memuat varian '400 biasa'. Yang berarti semua teks terang, tebal dan miring tidak akan ditampilkan dengan benar.

Untuk memuat semua varian font, kita perlu menentukan bobot di URL seperti ini:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

Jarang ada situs web yang menggunakan semua varian font dari Tipis (100) hingga Hitam (900), strategi optimalnya adalah dengan menentukan hanya bobot yang Anda rencanakan untuk digunakan:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

Ini sangat penting ketika menggunakan beberapa keluarga font. Misalnya, jika Anda menggunakan Lato untuk judul, masuk akal untuk hanya meminta varian tebal (dan mungkin miring tebal):

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. Gabungkan Permintaan

Cuplikan kode yang kami kerjakan di atas membuat panggilan ke server Google ( fonts.googleapis.com ), yang disebut permintaan HTTP. Secara umum, semakin banyak permintaan HTTP yang perlu dibuat halaman web Anda, semakin lama waktu yang dibutuhkan untuk memuat.

Jika Anda ingin memuat dua font, Anda dapat melakukan sesuatu seperti ini:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Itu akan berhasil, tetapi itu akan mengakibatkan browser membuat dua permintaan. Kami dapat mengoptimalkannya dengan menggabungkannya menjadi satu permintaan seperti ini:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

Tidak ada batasan berapa banyak font dan varian yang dapat ditampung oleh satu permintaan.

4. Petunjuk Sumber Daya

Petunjuk sumber daya adalah fitur yang didukung oleh browser modern yang dapat meningkatkan kinerja situs web. Kita akan melihat dua jenis petunjuk sumber daya: 'DNS Prefetching' dan 'Preconnect'.

Catatan: Jika browser tidak mendukung fitur modern, browser akan mengabaikannya. Jadi halaman web Anda akan tetap dimuat secara normal.

Pengambilan Awal DNS

Prefetching DNS memungkinkan browser memulai koneksi ke Google's Fonts API ( fonts.googleapis.com ) segera setelah halaman mulai dimuat. Ini berarti bahwa pada saat browser siap untuk membuat permintaan, beberapa pekerjaan sudah selesai.

Untuk menerapkan prefetching DNS untuk Google Font, Anda cukup menambahkan satu baris ini ke halaman web Anda <head> :

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

Prakoneksi

Jika Anda melihat kode penyematan Google Font, tampaknya itu adalah satu permintaan HTTP:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

Namun, jika kita mengunjungi URL itu, kita dapat melihat ada tiga permintaan lagi ke URL yang berbeda, https://fonts.gstatic.com. Satu permintaan tambahan untuk setiap varian font.

Masalah dengan permintaan tambahan ini adalah browser tidak akan memulai proses untuk membuatnya sampai permintaan pertama ke https://fonts.googleapis.com/css selesai. Di sinilah Preconnect masuk.

Preconnect dapat digambarkan sebagai versi prefetch yang disempurnakan. Itu diatur pada URL spesifik yang akan dimuat oleh browser. Alih-alih hanya melakukan pencarian DNS, itu juga menyelesaikan negosiasi TLS dan jabat tangan TCP juga.

Sama seperti DNS Prefetching, ini dapat diimplementasikan dengan satu baris kode:

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Hanya menambahkan baris kode ini dapat mengurangi waktu buka halaman Anda hingga 100 md. Ini dimungkinkan dengan memulai koneksi di samping permintaan awal, daripada menunggu sampai selesai terlebih dahulu.

5. Host Font Secara Lokal

Google Font dilisensikan di bawah lisensi 'Libre' atau 'free software', yang memberi Anda kebebasan untuk menggunakan, mengubah, dan mendistribusikan font tanpa meminta izin. Itu berarti Anda tidak perlu menggunakan hosting Google jika tidak mau — Anda dapat menghosting sendiri font-fontnya!

Semua file font tersedia di Github. File zip yang berisi semua font juga tersedia (387MB).

Terakhir, ada layanan pembantu yang memungkinkan Anda memilih font mana yang ingin Anda gunakan, kemudian menyediakan file dan CSS yang diperlukan untuk melakukannya.

Ada kerugian untuk menghosting font secara lokal. Saat Anda mengunduh font, Anda menyimpannya sebagaimana adanya pada saat itu. Jika ditingkatkan atau diperbarui, Anda tidak akan menerima perubahan tersebut. Sebagai perbandingan, saat meminta font dari Google Fonts API, Anda selalu disajikan versi terbaru.

Perhatikan parameter lastModified di API. Font secara teratur dimodifikasi dan ditingkatkan.

6. Tampilan Font

Kami tahu bahwa browser perlu waktu untuk mengunduh Google Font, tetapi apa yang terjadi pada teks sebelum siap? Untuk waktu yang lama, browser akan menampilkan ruang kosong di mana teks seharusnya berada, juga dikenal sebagai "FOIT" (Flash of Invisible Text).

Bacaan yang Direkomendasikan : “FOUT, FOIT, FOFT” oleh Chris Coyier

Tidak menunjukkan apa-apa sama sekali bisa menjadi pengalaman yang menggelegar bagi pengguna akhir, pengalaman yang lebih baik adalah awalnya menunjukkan font sistem sebagai fallback dan kemudian "menukar" font setelah mereka siap. Ini dimungkinkan dengan menggunakan properti font-display CSS.

Dengan menambahkan font-display: swap; ke deklarasi @font-face, kami memberi tahu browser untuk menampilkan font fallback hingga Google Font tersedia.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

Pada tahun 2019, Google mengumumkan bahwa mereka akan menambahkan dukungan untuk tampilan font: swap. Anda dapat mulai menerapkan ini segera dengan menambahkan parameter tambahan ke URL font:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Gunakan Parameter Text

Fitur yang sedikit diketahui dari Google Fonts API adalah parameter text . Parameter yang jarang digunakan ini memungkinkan Anda untuk hanya memuat karakter yang Anda butuhkan.

Misalnya, jika Anda memiliki logo teks yang harus berupa font unik, Anda dapat menggunakan parameter text untuk hanya memuat karakter yang digunakan dalam logo.

Ini bekerja seperti ini:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Jelas, teknik ini sangat spesifik dan hanya memiliki beberapa aplikasi realistis. Namun, jika Anda dapat menggunakannya, itu dapat mengurangi berat font hingga 90%.

Catatan: Saat menggunakan parameter text , hanya bobot font "normal" yang dimuat secara default. Untuk menggunakan bobot lain, Anda harus secara eksplisit menentukannya di URL.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Membungkus

Dengan perkiraan 53% dari 1 juta situs web teratas menggunakan Google Font, menerapkan pengoptimalan ini dapat memberikan dampak yang besar.

Berapa banyak hal di atas yang sudah Anda coba? Beri tahu saya di bagian komentar.