🙃 👨‍🏫 👨🏻‍⚖️ Pada dampak positif font variabel pada kinerja proyek web 👞 🎀 🙏🏽

Ketika memikirkan font web, dan apa dampaknya terhadap kinerja situs, mereka sering memperhatikan tiga indikator berikut:

Jumlah permintaan untuk mengunduh file font.
Ukuran file font.
Waktu sampai rendering halaman pertama.

Saya ingin tahu bagaimana penggunaan font variabel mempengaruhi indikator ini. Karena itu, saya membandingkannya dengan font biasa. Itu yang saya lakukan.

Kurangi jumlah permintaan untuk mengunduh file font

Ada beberapa cara untuk mengurangi jumlah permintaan pengunduhan font. Sebagai contoh, ini adalah caching, menggunakan CDN, mengurangi jumlah varian font yang digunakan. Saya tidak akan berbicara di sini tentang menggunakan CDN atau caching, karena ini, secara umum, adalah hal yang sama ketika bekerja dengan font biasa, seperti ketika bekerja dengan fonta variabel. Sebagai gantinya, saya akan berbicara tentang mengurangi jumlah opsi gaya font.

Di dunia font standar, mengurangi jumlah opsi font yang digunakan akan mengurangi jumlah permintaan pengunduhan font. Ini terjadi karena menggunakan lebih sedikit gaya berarti lebih sedikit file font diperlukan Biasanya untuk ini, Anda perlu merencanakan pilihan font dan mencari keseimbangan antara desain dan kinerja, memutuskan apakah desain yang lebih menarik dan "berat" sepadan dengan dampaknya pada kinerja.

Penggunaan font variabel, karena fakta bahwa mereka dapat menyimpan opsi font yang berbeda dalam satu file, berarti mengurangi jumlah permintaan untuk mengunduh file font tanpa harus berbicara dengan perancang untuk mengurangi jumlah opsi font yang digunakan dalam proyek.

Penggunaan font variabel mengarah pada pengurangan jumlah permintaan hanya karena fitur perangkat dari file font tersebut. Tetapi jika file berisi semua informasi tentang opsi font yang berbeda, pantas untuk bertanya bagaimana ini mempengaruhi ukuran file.

Mengurangi ukuran file font

Ada banyak cara untuk mengurangi ukuran file font. Biasanya langkah pertama dalam proses ini adalah memilih format yang paling efisien untuk menyimpan font web. Misalnya - WOFF2.

▍Menemukan titik referensi

Saya melakukan penelitian tentang ukuran berbagai file font. Secara khusus, menggunakan font Source Sans Pro dari Adobe. Saya memilih font khusus ini karena kodenya di-host di GitHub dan karena itu open source.

Perbandingan ukuran file OTF dari font Source Sans Pro - file yang menyimpan font satu saturasi dan file yang menyimpan font variabel

Sebagai titik referensi, saya mengambil file yang menggambarkan font satu saturasi dari versi standar Source Sans Pro. Ukurannya dalam format OTF adalah 248 Kb. Ukuran file OTF font variabel adalah 405 Kb. Ini berarti bahwa ukuran file dari font variabel adalah 73% lebih besar dari ukuran file yang mengandung satu versi standar Source Sans Pro.

Tetapi mengingat fakta bahwa file font variabel berisi semua informasi yang diperlukan untuk varian font dengan saturasi apa pun, ukuran satu set file font biasa, dengan kemampuan yang sama, akan sekitar 1170 Kb.

Dan ini hampir 3 kali ukuran file font variabel.

Bahkan jika Anda memerlukan font tertentu dalam opsi saturasi normal dan tebal, dua file yang diperlukan untuk menyimpan opsi font ini akan berubah menjadi lebih dari satu file font variabel.

▍ Perbandingan format OTF dan WOFF2

File OTF, dibandingkan dengan format terkompresi WOFF dan WOFF2, ternyata cukup besar.

File dengan satu opsi font: OTF - 234 Kb, WOFF2 - 111 Kb. File font variabel: OTF - 405 KB, WOFF2 - 112 KB.

Jika Anda membandingkan ukuran file format yang berbeda, ternyata Anda dapat sangat mengurangi ukuran file hanya dengan menggunakan format WOFF2.

Tampaknya menarik bagi saya berapa banyak penghematan yang disediakan dengan menggunakan format WOFF2 ketika menyimpan data fonta variabel. Fakta bahwa ukuran file telah menurun dari 405 Kb menjadi 112 Kb mengarah pada fakta bahwa file font variabel hampir sama ukurannya dengan file yang hanya menyimpan satu versi standar Source Sans Pro.

Ini ternyata mengejutkan bagi saya, dan saya benar-benar yakin bahwa penghematan semacam itu tidak mungkin tercapai dalam semua kasus. Tapi itu sangat bagus untuk melihat seberapa efektif kompresi WOFF2 ketika diterapkan ke font variabel.

▍ Mengurangi ukuran file menggunakan subset font

Saat bekerja dengan font standar, ada cara lain untuk mengurangi ukuran file. Terdiri dari penggunaan himpunan bagian font. Ini memungkinkan Anda untuk menyingkirkan karakter yang tidak perlu, atau mengurangi set karakter font, misalnya, hanya menyisakan yang diperlukan untuk menampilkan teks yang diketik dalam bahasa Latin.

Membuat himpunan bagian font membawa beberapa risiko. Menggunakan subset dapat menyebabkan beberapa bagian teks ditampilkan menggunakan font fallback. Ini bisa terjadi jika karakter yang diperlukan tidak sengaja terhapus dari font yang digunakan.

Anda dapat membuat himpunan bagian font menggunakan alat khusus - seperti mesin terbang. Secara khusus, panduan yang baik tentang GitHub telah disiapkan untuk alat ini. Ini berfungsi dengan font standar dan variabel.

Saya memproses versi standar dan variabel Source Sans Pro dengan glyphhanger dan karakter huruf kecil dan huruf besar yang dipilih dari alfabet Latin, serta angka dan karakter khusus seperti tanda seru.

Menggunakan subset font untuk mengurangi ukuran file

Operasi ini memungkinkan kami untuk mengurangi ukuran file yang mengandung font satu saturasi dari 111 Kb menjadi 16 Kb (menghemat 85% sangat baik). Dalam hal font variabel, ukuran file menurun dari 112 Kb menjadi 27 Kb (75% adalah tingkat penghematan yang dapat diterima).

Sekali lagi, hasil ini mengejutkan saya. Saya mengharapkan file font variabel menjadi lebih besar. Mempertimbangkan fakta bahwa dalam situasi tertentu mereka menggunakan font saturasi normal dan tebal yang sama, ternyata file font variabel 27 KB lebih kecil dari dua file, masing-masing berisi informasi tentang font yang sama dengan saturasi berbeda. Sebagai hasilnya, saya percaya bahwa pendekatan ini memberikan penghematan yang sangat baik.

Benar, penting untuk dicatat bahwa hanya percobaan saya dengan font Source Sans Pro yang dijelaskan di sini. Pada font lain, metode yang sama dapat menyebabkan yang lain, hasil yang tidak begitu baik. Menggunakan font variabel mungkin tidak menghasilkan tingkat pengurangan ukuran file yang sama. Sebagai hasilnya, saya sarankan Anda menggunakan hati-hati saat menggunakan himpunan bagian font. Yaitu, sebelum menerapkan teknik pengoptimalan ini dalam praktiknya, ada baiknya menguji semuanya dengan baik, mengevaluasinya, dan memahami apa yang terbaik untuk proyek tertentu.

▍ Pertimbangan tambahan terkait ukuran file

Beberapa pertimbangan tambahan untuk dipertimbangkan ketika berbicara tentang ukuran file font adalah bahwa mengunduh satu file besar akan memakan waktu lebih lama daripada mengunduh beberapa file yang lebih kecil.

Misalnya, ketika menggunakan font standar, file yang menyimpan informasi tentang jenis saturasi normal biasanya lebih kecil daripada yang lain. Hasilnya, isi dokumen dapat ditampilkan dengan cepat, segera setelah mengunduh file kecil yang sesuai. Dan nanti, setelah memuat versi huruf tebal, Anda dapat menerapkannya. Keuntungan dari pendekatan ini adalah memungkinkan Anda untuk menampilkan teks pada halaman lebih cepat daripada menggunakan font variabel. Intinya di sini adalah bahwa masing-masing file font standar lebih kecil daripada file font variabel.

Saat menggunakan font variabel, Anda harus menunggu pemuatan satu file besar sebelum menampilkan teks. Ini dapat menambah waktu yang dibutuhkan untuk menyiapkan halaman untuk bekerja. Namun, kebutuhan untuk menunggu semua data font sebelum teks ditampilkan memungkinkan Anda untuk menghindari masalah yang secara bertahap font yang diunduh mempengaruhi teks yang sudah ditampilkan. Selain itu, karena ketika menggunakan font variabel, semua jenis font dimuat sekaligus, kita tidak harus memaksa browser untuk menggambar ulang halaman setiap kali versi font baru dimuat.

Akibatnya, jika kita berbicara tentang ukuran file font, kesimpulan yang dapat ditarik tentang penggunaan font variabel tergantung pada situasi spesifik. Yaitu - dari fitur proyek, dari persyaratan desain, dari font yang digunakan.

Kurangi waktu untuk render pertama

Sekarang mari kita bicara tentang mengurangi waktu sebelum rendering halaman pertama. Semakin pendek waktu ini, semakin baik untuk kinerja. Ini cukup jelas. Selain itu, harus diingat bahwa, sebagaimana telah disebutkan, satu-satunya file font variabel besar dapat memuat lebih lambat daripada beberapa file font kecil. Tetapi bahkan sedikit keterlambatan dalam output halaman, satu-satunya "flash teks yang tidak terlihat" (Flash of Invisible Text, FOIT) dapat mengarah pada fakta bahwa pengguna akan merasa seolah-olah halaman memuat lebih lambat daripada yang sebenarnya terjadi. Akibatnya, saya percaya bahwa alih-alih mengekspos halaman ke risiko FOIT, kita harus mencoba membatasi masalah ini dengan apa yang disebut "Flash of Unstyled Text" (FOUT).

▍FOIT

Inilah yang tampak seperti FOIT.

Contoh manifestasi visual dari FOIT

"Flash teks tidak terlihat" terjadi ketika kita memblokir atau menunda output teks sampai font yang diinginkan dimuat. Akibatnya, sebelum memuat font, halaman akan terlihat kosong.

▍FOUT

Dan ini adalah contoh dari FOUT.

Contoh manifestasi visual FOUT

"Flash teks yang tidak bergaya" terjadi jika teks pertama kali ditampilkan menggunakan font cadangan, dan kemudian ketika font yang diinginkan tersedia, ia beralih atau mengganti font yang sebelumnya digunakan.

Saya percaya bahwa lebih baik jika pengguna menemukan FOUT daripada ketidakmampuan untuk membaca konten halaman. Oleh karena itu, yang terbaik adalah jika, di satu sisi, kami membayangkan skenario pengembangan dengan penampilan FOUT di hadapan pengguna, dan di sisi lain, kami mencoba membuatnya sesedikit mungkin memengaruhi kegunaan proyek.

Cara termudah untuk mengimplementasikan mekanisme FOUT dalam suatu proyek adalah dengan menggunakan propertifont-displaydenganswap. Ini akan memungkinkan teks untuk ditampilkan menggunakan font fallback yang dijelaskan dalam set font. Kemudian, setelah memuat font yang diinginkan, itu akan menggantikan font cadangan. Properti font-displaydapat mengambil nilai lain, dan saya sarankan Anda memeriksanya, tetapi untuk menerapkan perilaku FOUT teks, nilainya swapadalah titik awal yang baik.

font-display: swap;

Salah satu masalah dengan FOUT adalah ketika mengganti font, Anda sering dapat melihat teks disusun ulang pada halaman untuk menyesuaikan konten dengan font yang parameternya "diukur" berbeda dari parameter font yang sebelumnya digunakan.

Saat bekerja dengan font standar, kita dapat memodifikasi properti seperti line-height, font-sizedan letter-spacingdengan melakukan ini untuk menyesuaikan teks untuk mengganti font dan mengurangi pergeseran konten yang terjadi selama proses ini. Anda dapat melakukan ini dengan alat Pencocokan Gaya Font yang fantastis . Buku itu diciptakan oleh Monica Dinkulescu , yang terinspirasi oleh ini artikel yang sangat baik oleh Helen Holmes (serius - sebuah artikel yang indah - saya sarankan membacanya).

Saya berharap bahwa seiring waktu, font variabel akan menikmati dukungan yang lebih luas untuk sistem operasi. Ini akan memungkinkan Anda untuk memudahkan perubahan tata letak dengan menggunakan font variabel sistem sebagai cadangan.

Font cadangan variabel

Bayangkan apa yang akan terjadi jika kita memiliki font sistem yang mendukung kemampuan untuk mengontrol saturasi, lebar, dan ukuran optiknya. Ini akan memungkinkan memodifikasi properti font tersebut agar sesuai dengan karakteristik font khusus yang kami gunakan. Jika Anda menggabungkan ini dengan metode yang ada untuk menyetel properti sepertiline-heightataufont-size, ini akan memberi kami kesempatan untuk membuat transisi yang hampir tak terlihat di antara kedua font. Ini berarti bahwa pengguna akan mengalami manifestasi FOUT yang kurang terlihat, dan fakta bahwa browser, karena perubahan tata letak yang lebih kecil ketika mengubah font, harus melakukan lebih sedikit pekerjaan dalam menggambar ulang halaman.

Itu akan sangat luar biasa, dan saya berharap hal itu akan terjadi.

Ringkasan

Menggunakan font variabel mengurangi ukuran keseluruhan data font yang diunduh oleh browser. Fakta bahwa font variabel digunakan dan bukan yang biasa pada halaman secara otomatis berarti bahwa untuk mempersiapkan halaman untuk output, Anda harus melakukan lebih sedikit permintaan.

Bahkan jika ukuran file font variabel mungkin tampak cukup besar bagi Anda - perhatikan fakta bahwa menggunakan font tersebut, Anda dapat menerapkan teknik optimasi lainnya. Yaitu, kita berbicara tentang format font canggih seperti WOFF2, tentang pembentukan subset font, tentang penggunaan properti font-display: swap. Semua ini menunjukkan bahwa, menggunakan font variabel, kita bisa mendapatkan pengurangan dalam data font dan peningkatan signifikan dalam kemampuan untuk mendesain halaman.

Jika kita dapat menangani beberapa tantangan kinerja yang ada, ini akan memungkinkan kita untuk lebih memperhatikan desain. Artinya, Anda tidak lagi harus mencari kompromi antara desain dan kinerja halaman.

Di bidang penggunaan font variabel, kami memiliki kesempatan untuk memahami bagaimana teknologi ini dapat membantu menciptakan pengalaman pengguna yang lebih positif dari bekerja dengan proyek kami. Karena kenyataan bahwa penggunaan font variabel berarti kemungkinan menggunakan banyak opsi font, kita dapat membuat proyek yang dapat secara fleksibel beradaptasi dengan fitur perangkat yang digunakan untuk bekerja dengannya. Ini memungkinkan Anda untuk membuat teks yang dapat diakses dan dibaca, tanpa khawatir tentang fakta bahwa tambahan file font biasa akan sangat mempengaruhi ukuran data yang diperlukan untuk memastikan halaman berfungsi.

Pembaca yang budiman! Apakah Anda menggunakan font variabel dalam proyek Anda?

Pada dampak positif font variabel pada kinerja proyek web