Optimasi Performa Google Fonts

Boleh dibilang bahwa Google Fonts sangat popular bagi para pemilik situs web. Lebih dari 900 jenis huruf yang disediakan Google fonts dapat kita gunakan secara bebas. Dibalik itu, ternyata Google Fonts memiliki kekurangan. Setiap jenis huruf, atau kita sebut font, menjadi beban setiap kali kita menampilkan halaman web kepada para pengunjung. Beban tersebut akan memberi efek kepada waktu muat tambahan bagi halaman web kita.

Dengan pengaturan yang tepat, waktu muat tambahan tersebut tidak akan dirasakan pengunjung situs web kita. Jika kita membuat pengaturan yang salah maka pengunjung situs web kita akan merasakan waktu tunggu yang relatif lebih lama sebelum teks bisa ditampilkan.

Sebenarnya, Google Fonts sudah di-optimasi

Sebenarnya, API Google Fonts tidak hanya menyediakan file font untuk browser para pengujung situs web kita. API Google Fonts juga melakukan pemeriksaan dan pemilihan cara pengiriman serta format yang paling optimal bagi browser pengunjung web.

Ketika browser membuat permintaan kepada API Google Fonts, API akan memeriksa jenis file apa yang didukung oleh browser. Jika browser seperti Google Chrome yang sudah mendukung format WOFF2 maka API akan menggunakannya. Ketika pengunjung menggunakan Internet Explorer 11 maka mereka akan diberikan jenis file WOFF. Jika mereka menggunakan Internet Explorer 8 maka mereka akan diberikan jenis file EOT. Jadi, API akan memberikan jenis file yang berbeda tergantung dari browser yang digunakan pengunjung web kita.

Jadi, sampai di sini kita bisa melihat bahwa sebenarnya font yang diambil dari Google Fonts sudah dioptimasi baik cara pengirimannya dan juga jenis file-nya. Kalau mengutip artikel berjudul Optimasi Font Web yang ditulis Ilya Grigorik, maka dapat disimpulkan sebagai berikut.

Google Fonts maintains 30+ optimized variants for each font and automatically detects and delivers the optimal variant for each platform and browser.

Ilya Grigorik, Optimasi Font Web.

Memanfaatkan cache

Selain optimasi dalam pengiriman filenya, layanan Google Fonts juga memanfaatkan fitur browser caching. Oleh karena itu maka browser tidak perlu lagi mengunduh ulang font yang sudah diunduh. Browser hanya akan mengunduh jika menemukan huruf yang baru pertama kali ditemui. Cache tersebut diatur agar dapat digunakan selama satu tahun. Tentu saja jika kamu tidak menghapus cache tersebut.

Optimasi lainnya dari kita

Selain optimasi yang dilakukan dari sisi layanan Google Fonts, kita juga dapat mengoptimasi lebih jauh lagi. Optimasi ini dalam rangka mengurangi waktu muat halaman yang kita tampilkan kepada para pengujung web kita.

Batasi jenis huruf

Optimasi yang paling mudah adalah menggunakan jenis huruf sesedikit mungkin. Perlu kamu ketahui bahwa setiap font dapat menambahkan beban hingga 400 kb. Bayangkan ketika kita menggunakan banyak jenis huruf dalam satu halaman web. Berapa total beban yang perlu dimuat oleh browser?

Kami dari Jagokomputer merekomendasikan agar kita tidak menggunakan lebih dari dua jenis huruf. Satu jenis digunakan untuk judul-judul konten halaman, dan satu jenis lainnya untuk isi kontennya. Yang kita butuhkan adalah kejelian dalam memadukan jenis huruf yang kita pilih.

Gunakan varian yang dibutuhkan saja

Karena standar yang tinggi dari Google Fonts, banyak jenis huruf yang ada juga menyertakan semua varian yang tersedia. Mulai dari “thin” varian hingga “Black Italic”. Paling tidak ada 12 varian dalam satu jenis font.

Optimasi selanjutnya adalah mengecualikan varian-varian font yang memang tidak kita butuhkan. Biasanya kita hanya butuh tiga atau empat varian dalam satu jenis font. Sebagai contoh kita menggunakan jenis huruf Lato untuk judul dan hanya membutuhkan varian bold dan bold italic, maka kita hanya memuat dua varian tersebut.

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

Gabungkan request font

Kalau biasanya kita menggunakan Google Fonts maka kita menggunakan element link seperti berikut.

<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">

Maka situs web kita membuat dua permintaan HTTP kepada server Google Fonts. Padahal, semakin banyak permintaan HTTP yang kita minta maka semakin lama waktu muat halaman web. Sebaiknya kita gabungkan request font tersebut menjadi satu permintaan. Contoh diatas dapat ditulis seperti ini.

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

Kesimpulan

Dengan melakukan optimasi Google Fonts, maka akan memberikan efek yang significant pada waktu muat halaman web kita. Adakah diantara kalian yang sudah mencoba optimasi tersebut? Beri tahu kami melalui komen di bawah ya.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *