Dalam beberapa minggu terakhir, secara kebetulan di tempat kerja dan dalam proyek pihak ketiga, saya telah belajar banyak tentang font web, serta banyak hal baru tentang Google Font khususnya. Berkat ini, saya dapat memberikan jawaban yang lebih terperinci untuk pertanyaan yang tampak sederhana bagi saya di masa lalu: haruskah Anda menyimpan Google Font di server Anda?Secara obyektif, saya akui bahwa font bukan keahlian saya. Saya lebih suka pendekatan yang lebih praktis dan tidak fokus pada desain (lihat situs ini dan pastikan ya) dan sebelum itu saya tidak merasa perlu menggunakan font yang tidak standar. Tentu saja, mereka terlihat sedikit lebih bagus dan "merek" teks. Tetapi untuk teks utama ada sedikit akal di dalamnya. Saya tidak pernah memberi peringkat pada artikel (atau terkait dengan kontennya secara berbeda), hanya karena font yang indah digunakan untuk mengirimkannya. Namun, saya sepenuhnya menyadari dampak negatif font tambahan pada kinerja dan kecepatan pemuatan halaman, jadi mungkin karena ini saya bias.Namun, banyak yang mungkin tidak setuju dengan saya, dan font-font itu, apakah penting bagi saya secara pribadi atau tidak, sering digunakan oleh banyak pengembang lain, dan seringkali mereka tidak punya pilihan. Mari kita lihat apa yang bisa dilakukan agar tidak kehilangan kecepatan situs, dan membuat para desainer senang.Self-Hosted vs Sumber Daya Eksternal
Beberapa tahun yang lalu dianggap normal untuk menggunakan CDN untuk menghubungkan sumber daya bersama (misalnya, jQuery dengan code.jquery.com - dan ya, mereka masih sangat menggunakannya ). Untuk memperjelas, dengan CDN di sini yang saya maksud memuat sumber daya dari domain orang lain, bukan CDN Anda sendiri.Alasannya adalah browser seharusnya membatasi jumlah koneksi untuk setiap domain (biasanya sampai 6 koneksi), jadi menggunakan domain lain memberi Anda 6 koneksi lagi. Ini bisa benar di masa lalu (terutama ketika batasannya adalah <6 domain) dan sebelum HTTPS menjadi norma, secara signifikan meningkatkan biaya koneksi. Selain itu, HTTP / 2sebenarnya manfaat dari menggunakan satu koneksi (kebanyakan!), jadi menggunakan domain lain sering kali merupakan kerugian dalam kinerja daripada akuisisi.Cara lain untuk mencapai hal yang sama adalah dengan sharding domain utama dengan satu atau lebih subdomain teknis (misalnya, assets.example.com), dan dalam hal ini, font lagi tidak muncul di domain utama Anda, tempat halaman web Anda diambil. Namun demikian, metode ini memiliki masalah koneksi yang sama, jadi ini tidak dapat disebut sebagai peningkatan kinerja, bahkan jika pernah ada.Keuntungan lain dari CDN publik adalah probabilitas tinggi bahwa pengunjung sudah memiliki versi jQuery bersyarat ini di cache. Tetapi, sekali lagi, saya yakin ini terlalu banyak. Ada begitu banyak perpustakaan dan versinya, danTembolok peramban lebih kecil dari yang terlihat, jadi kecocokan seperti itu sangat tidak mungkin. Selain itu, Safari menggunakan cache HTTP unik untuk setiap domain yang dikunjungi, untuk alasan privasi (cache dua-kunci), dan Chrome juga akan segera memperkenalkan fungsi ini . Jadi, tidak ada lagi yang perlu diperdebatkan.Topik ini dengan lancar berubah menjadi percakapan tentang dampak CDN pihak ketiga pada privasi. Anda tidak tahu bagaimana dan mengapa mereka melacak pengguna Anda, yang tidak dapat terjadi dengan solusi yang di-host-sendiri. Dan inovasi terbaru dalam undang-undang mengharuskan banyak situs untuk secara eksplisit mendaftar semua cookie yang digunakan di situs. Bukan tugas termudah saat menggunakan CDN pihak ketiga.Untuk waktu yang lama, saya telah diyakinkan bahwa CDN pihak ketiga atau bahkan pecahan domain Anda sendiri sangat jauh dari perolehan kinerja yang dijanjikan. Terlalu sering Anda dapat menemukan situs di mana domain utama hanya mendistribusikan index.html, dan kemudian banyak waktu terbuang untuk menyiapkan koneksi baru .Ini belum lagi implikasi keamanan dari mengunduh sumber daya dari situs pihak ketiga. Ya, ada SRI , tetapi dapat menyebabkan masalah yang tidak terduga , dan saya jujur ββtidak mengerti intinya. Jika itu adalah sumber daya statis (di mana Anda dapat menggunakan SRI), kemudian simpan secara lokal, dan jika itu tidak statis (karena isinya dapat berubah), maka Anda tidak dapat menggunakan SRI.Juga, penggunaan sumber daya dari sumber pihak ketiga mengancam bahwa mereka akan menjadi satu titik kegagalan (SPOF) dan menonaktifkan situs Anda. Ini telah terjadi lebih dari satu kali , dan meskipun sepertinya Google Fonts tidak akan jatuh, ini mungkin diblokir oleh proksi perusahaan atau oleh seluruh negara .Secara umum, semakin banyak orang yang menyarankan untuk menjaga sumber daya statis mereka di rumah , idealnya pada domain dari mana Anda mendistribusikan halaman web. Font adalah sumber daya statis, jadi hal yang sama berlaku untuk mereka, bukan? Nah, ternyata semuanya tidak begitu sederhana, karena font memiliki kekhasan dan teknik optimasi sendiri, yang dapat membuat penyimpanan lokal sedikit lebih rumit ...Google Font dan cara kerjanya
Google Fonts adalah sumber yang luar biasa jika Anda suka font. 977 font gratis yang dapat digunakan siapa saja secara gratis. Font komersial seringkali sangat mahal dan biasanya dilisensikan daripada dijual, yaitu, biaya dibebankan berdasarkan jumlah halaman yang diharapkan. Oleh karena itu, memiliki begitu banyak font gratis dan sangat mudah digunakan dalam satu koleksi sangat berguna.Tapi itu belum semuanya. Google Font, seperti banyak penyedia sumber daya untuk situs (lihat contoh jQuery di atas), menyediakan CDN dan menyimpan font untuk semua orang untuk digunakan langsung dari server mereka. Ini berarti Anda dapat mulai menggunakan font dengan hanya menambahkan satu baris kode di situs Anda untuk memuat stylesheet:<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Anda juga dapat menambahkan lebih banyak properti dan font dalam satu baris untuk memuat beberapa font dan variasi masing-masing:<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900%7CPoppins:300,400,700,900&display=swap" rel="stylesheet">
Kerugiannya adalah penurunan kinerja (keuntungannya juga dalam kinerja, tetapi ini tidak begitu jelas, kita akan membahas ini). Masalahnya adalah bahwa situs Anda (mengatakan www.example.com ) beban stylesheet dari fonts.googleapis.com, yang mengembalikan beberapa CSS dengan aturan font-face. Berikut adalah sumber untuk tautan dalam contoh di atas:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Kita akan berbicara tentang apa arti beberapa pengaturan ini nanti (dan juga tentang mengapa ada dua aturan font-face), tetapi untuk sekarang ini berarti Anda dapat menggunakan font ini dalam gaya Anda seperti ini:body {
font-family: 'Lato', sans-serif;
}
Namun, sekarang Anda harus terhubung ke fonts.googleapis.com, unduh CSS, lalu sambungkan ke fonts.gstatic.com dan unduh fontnya sendiri (mengapa Google tidak dapat meng-host CSS dan font pada domain yang sama - Saya benar-benar tidak mengerti!).Font sering terdeteksi oleh browser dengan penundaan saat memuat halaman (setelah semua, Anda perlu memuat CSS untuk menemukan tautan ke mereka). Tetapi Google Font ditemukan lebih lambat, karena CSS perlu diunduh dari domain lain , dan kemudian font dari domain ketiga dan, seperti yang saya sebutkan, membangun koneksi HTTPS juga tidak instan. Ini dapat dilihat pada diagram cascading di bawah ini yang dihasilkan oleh WebPageTest (perhatikan bahwa semua tes dijalankan dengan Chrome - 3GSlow):
Baris 1 menunjukkan bahwa HTML dimuat lebih dulu. Kemudian, segera setelah diunduh dan dibaca dalam waktu kurang dari 2 detik, peramban mendeteksi kebutuhan untuk memuat Google Fonts CSS dan memuatnya dalam baris 4. Diperlukan satu detik untuk membangun koneksi, dan kemudian sebuah file diunduh selama 3,5 detik. Akhirnya, peramban mengetahui tentang keberadaan font kami dan memuatnya di baris 6, setelah kehilangan 1 on detik dalam perjalanan ke koneksi dengan fonts.gstatic.com.Jadi, menggunakan font ini dari Google Fonts memerlukan biaya produktivitas tiga detik penuh sejak HTML tersedia, tidak memperhitungkan waktu untuk mengunduh font itu sendiri!Mempercepat Font Google dengan preloading sumber daya
Anda dapat mengurangi hit performa buruk ini ketika memuat CSS dan font dari dua domain yang berbeda. Domain pertama (untuk CSS) harus ditempatkan lebih dekat ke awal file index.html sehingga browser membacanya sesegera mungkin, tetapi yang kedua masih disembunyikan. Namun, kami tahu seperti apa domain ini nantinya (fonts.gstatic.com), sehingga kami dapat membuka koneksi terlebih dahulu untuk menghemat waktu pada koneksi kedua nanti:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Saat menguji ulang, kita melihat gambar berikut:
Di sini kita melihat bahwa koneksi pada saluran 5 terbuka terlebih dahulu, sebelum memuat CSS. Jadi kami menang lebih dari satu detik (mengunduh font dalam 4 detik, bukan 5,25), karena kami berhasil menghindari buang waktu selama koneksi dan font diunduh segera setelah membaca CSS Google Fonts.Anda mungkin berpikir bahwa Anda dapat melanjutkan dan memuat ulang seluruh font, alih-alih konten dengan hanya bergabung dengan domain, tetapi Google Fonts memanggil font hash unik. Pada contoh di atas, font yang diunduh disebut S6uyw4BMUTPHjx4wXg.woff2, bukan lato.woff2, jadi preloading tidak dimungkinkan kecuali Anda ingin situs Anda mogok pada suatu hari ketika Google tiba-tiba memutuskan untuk mengubah hash ini.Dalam kasus apa pun, jika Anda menggunakan Google Font dan tidak bermaksud melakukan hal lain setelah membaca catatan ini, tambahkan setidaknya koneksi awal ke domain, jika belum. Ini hanya satu baris kode dan harus secara signifikan meningkatkan kinerja halaman Anda.Sebenarnya, Google Fonts memberikan perintah serupa di header HTTP ketika membuat CSS:
Tetapi dalam banyak kasus ini tidak akan banyak membantu, karena pada saat Anda menerima header respons HTTP dari server dengan CSS, browser sudah tahu bahwa Anda ingin terhubung ke domain ini untuk mengunduh font. Jadi lebih baik bagi Anda untuk menentukan ini dalam kode HTML sehingga preload berfungsi lebih awal (tidak masalah jika digandakan dengan cara ini, upaya kedua akan diabaikan begitu saja). Namun, jika halaman Anda masih diproses pada saat header dari server Google Fonts CSS diterima, dan DOM tidak siap (mungkin ini adalah tanda terlalu banyak JavaScript di halaman Anda?), Ini dapat membantu meningkatkan kinerja ketika akhirnya menjadi jelas font mana yang akan diunduh.Tampilan Font: Tukar
Pada kode font-face di atas, Anda dapat melihat font-display: swap; line. Ini adalah instruksi yang relatif baru. Ini dapat ditambahkan ke deklarasi font dan itu akan memberi tahu browser untuk menggunakan fallback pertama, yaitu font sistem (sans-serif dalam contoh ini), dan kemudian menggantinya dengan font asli setelah mengunduhnya. Dengan cara ini Anda dapat menghindari keterlambatan dalam memuat konten ketika font belum dimuat dan juga meningkatkan kinerja dengan baik.Ya, ini mengarah pada pecahnya teks tanpa gaya (FOUT) - "lompatan" yang sama dalam konten selama pemuatan halaman, tetapi beberapa orang tidak menyukainya (pendapat saya setuju, konten lebih penting daripada gaya, tetapi teks yang melompati halaman itu menyebalkan, meskipun ini dapat dikurangi dengan mengutak-atik font cadangan). Alternatifnya adalah flash invisible text (FOIT). Dalam hal ini, teks disembunyikan sampai font muncul, yang jelas-jelas menunda pengunduhan dan dapat menyebabkan masalah lain jika beberapa teks dimuat, tetapi beberapa tidak !Bagaimanapun, sebelum pengenalan font-display: swap, browser yang berbeda berurusan dengan ini secara berbeda - beberapa, seperti IE dan Edge, menggunakan FOUT, yang lain menggunakan FOIT, dan mereka memiliki waktu yang berbeda sampai mereka menunggu font untuk menunggu. Karena itu, jika font tidak dimuat, konten Anda dapat tetap tidak terlihat untuk waktu yang lama. Pengenalan font-display: swap memungkinkan pengembang situs web untuk memutuskan sendiri bagaimana ini akan terjadi. Sebagian besar browser mendukung font-display: swap, dengan pengecualian IE dan Edge, tetapi seperti yang disebutkan di atas, mereka tetap menggunakan ini secara default. Font Google juga mendukung berbagai opsi tampilan font dan menawarkan tampilan font: swap secara default.Jadi, tip lain jika Anda menggunakan font Google adalah untuk memeriksa bahwa Anda memiliki parameter & display = swap di URL, dan jika tidak (baru saja didukung), lalu tambahkan:Misalnya, ganti ini:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
Hal ini:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Anda juga dapat menentukan salah satu nilai tampilan font lainnya , misalnya opsional , jika diinginkan.Sayangnya, ini hanya memecahkan setengah dari masalah. Instruksi ini menggunakan CSS, yang mengembalikan Google Font, jadi ini hanya berguna setelah Anda mengunduh file CSS. Jadi, ini membantu untuk mengatasi keterlambatan saat memuat font sendiri, tetapi tidak membantu saat Anda sedang menunggu untuk memuat CSS ini. Jadi ini adalah peningkatan yang baik (setidaknya bagi mereka yang lebih suka FOUT), tetapi masih belum keseluruhan solusi secara keseluruhan.Google Fonts
Saya membantu membuat Web Almanac (tampilan fantastis pada kondisi Internet - lihat sendiri apakah Anda belum melihatnya) dan unduhan font Google yang lambat di situs kami mengganggu saya dan saya ingin memperbaikinya. Terutama FOUT dengan font-display: swap. Saya bertanya-tanya apakah kita dapat mengurangi dampak dari ini, dan solusi lokal tampaknya menyimpan file secara lokal, mungkin menggunakan preloading.Kami telah menggunakan teknik-teknik di atas (preloading dan font-display: swap;), tetapi, tentu saja, akan lebih baik untuk menghindari menghubungkan CSS dari luar. Kami tahu apa yang akan ada di CSS ini. Jadi, dengan percaya diri pilih self-host? Di sinilah mulai menarik ...Saya menemukan skrip yang nyaman di GitHub ( Google Font Download), yang membantu saya mengunduh semua opsi font yang berbeda (karena ada banyak, hingga 9 tergantung pada halaman), dan kemudian menyalin CSS, yang ditampilkan di stylesheet utama kami, dan mengunggah font ke server. Ada alat online lain yang melakukan hal yang sama. Itu semua tampaknya bekerja, dan kami menyingkirkan pemuatan CSS yang mengganggu dan kebutuhan untuk bekerja dengan dua domain.Namun, setelah diperiksa lebih dekat, saya perhatikan bahwa fontnya lebih besar:
Seperti yang Anda lihat, ada peningkatan ukuran yang signifikan (hingga 74% ekstra untuk beberapa di antaranya!) Dibandingkan dengan font Google yang diunduh (kanan) dan font yang ditempatkan secara lokal (kiri). Awalnya, saya pikir ini karena server web lokal saya, misalnya, karena kompresi dimatikan. Tetapi font WOFF2 disajikan tanpa kompresi oleh server web - atau setidaknya seharusnya - karena formatnya mencakup kompresi Brotli. Juga, tangkapan layar di atas menunjukkan byte yang diunduh (hitam di bagian atas), serta byte yang tidak terkompresi (sedikit lebih ringan di bagian bawah) untuk setiap kolom (mereka sangat mirip di kedua kolom, karena font benar-benar dikirim tanpa kompresi oleh server web, tetapi byte yang diunduh menyertakan header HTTP) , jadi mereka sedikit lebih besar), dan ada perbedaan dalam byte terkompresi dan tidak terkompresi, jadi bukan itu intinya.Perbandingan aturan font-face yang diperoleh menggunakan alat dengan yang asli mengungkapkan satu perbedaan:Dari Google Font:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Dari alat unduhan:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src:
local('Lato Regular'),
local('Lato-Regular'),
url('Lato_400.woff2') format('woff2'),
url('Lato_400.woff') format('woff');
}
Perbedaan pertama adalah kita kehilangan tampilan font: swap line, tetapi ini bisa diperbaiki tanpa masalah. Jauh lebih menarik adalah kenyataan bahwa Google Font mendistribusikan dua font - dan termasuk rentang Unicode yang berbeda di dalamnya. Ini karena font-subset dan mengurangi file font.Subset huruf
Subset huruf adalah penghapusan karakter yang tidak akan Anda gunakan untuk mengurangi ukuran file font. Biasanya, sebagian besar orang Barat hanya menggunakan karakter Latin, dan mengunduh font dengan semua karakter yang mungkin tidak akan Anda gunakan tidak rasional. Saya pernah mendengar tentang ini sebelumnya, tetapi saya tidak pernah berpikir seberapa penting ini bisa terjadi! Google Fonts secara otomatis menampilkan wajah font dengan serangkaian karakter Latin, dan juga, jika mungkin, menghubungkan font kedua untuk karakter Latin yang diperluas (misalnya, Δ), yang akan diunduh hanya jika perlu.Bahkan, Anda juga dapat meminta font khusus yang hanya berisi karakter yang Anda butuhkan dengan parameter teks:https://fonts.googleapis.com/css?family=Lato&text=ABCDilihat oleh pengamatan lebih lanjut, alat pemuatan font yang saya gunakan ternyata mendukung subset font, tetapi hanya untuk "bahasa" keseluruhan (Latin atau Latin diperpanjang), dan menggabungkan kedua himpunan karakter ke dalam satu file. Pada akhirnya, saya kembali menggunakan apa yang digunakan browser saya dan berhenti menggunakan alat ini. Ini memberikan ukuran file yang serupa (dengan sedikit perbedaan karena header HTTP di lingkungan pengembangan saya), tetapi saya segera menemukan bahwa itu bukan hanya pengelompokan font.Google Font mendistribusikan font dengan cerdas
Google Font tidak selalu membuat CSS yang sama dan itu tergantung pada agen pengguna yang digunakan . Misalnya, untuk Internet Explorer 11, ia mengirim yang berikut ini:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWA.woff) format('woff');
}
Di sini Anda dapat melihat bahwa ia hanya menyediakan format WOFF, karena IE 11 tidak mendukung WOFF2 , dan untuk alasan yang sama unicode-range tidak ditentukan. Ini memberikan font-display: swap (seperti yang saya tunjukkan di URL untuk CSS), meskipun browser tidak mendukungnya, tetapi tidak berbahaya.Bukan hanya pabrikan dan versi browser. Petunjuk fonttermasuk instruksi tambahan dalam file font, yang kemudian digunakan untuk memberikan tampilan font terbaik - terutama pada layar resolusi rendah atau untuk ukuran yang sangat kecil. Petunjuk font digunakan pada Windows, tetapi tidak pada MacOS, jadi tergantung pada OS mana Anda bekerja saat menerima Google Font, menggunakan browser (bahkan jika Anda menggunakan Chrome di setiap platform), Anda mungkin mendapatkan file font dengan petunjuk atau tanpa dia. Jika Anda mengunduh versi Windows dan menggunakannya untuk diri Anda sendiri, Anda sebenarnya akan membuat pengguna MacOS menderita karena kebutuhan untuk memproses file font besar penuh dengan petunjuk yang tidak digunakan, dan jika Anda melakukan sebaliknya, Anda berpotensi dapat membuat pengguna Windows menderita dari tampilan font yang lebih buruk, tanpa font yang mengisyaratkan.Ketika saya menggunakan Google Font, dan ketika saya mengunduh font untuk penggunaan lokal, saya melakukannya pada Mac saya, jadi saya mendapatkan file yang lebih kecil. Ketika saya menggunakan alat ini, saya mendapatkan font lengkap, dengan isyarat. Jadi itu alasan lain untuk perbedaan ukuran besar!Isyarat font masih relevan, karena layar definisi tinggi telah menjadi lebih umum - ini adalah pertanyaan yang bagus, dan banyak font pada awalnya dikirim tanpa petunjuk, karena dibutuhkan banyak waktu untuk membuatnya. Ketika ada - secara signifikan dapat meningkatkan ukuran font. Dalam kasus Lato, ukurannya dua kali lipat. Apakah sepadan dengan beban kerja tambahan yang akan Anda temui dengan meninggalkan Google Font dan mencari font secara lokal? Ini adalah keputusan lain yang perlu Anda buat sendiri.Jadi, Google Fonts CDN didukung oleh skrip pintar yang memberikan font yang paling cocok, mengoptimalkannya untuk mempertahankan kinerja maksimum. Beralih ke penyimpanan font lokal Anda harus mengkonfigurasi semua ini sendiri, dan ada kemungkinan untuk kehilangan tampilan font Anda yang benar di beberapa browser jika Anda tidak.Untuk Web Almanac, kami melihat statistik pada browser pengunjung dan memutuskan untuk hanya mendukung WOFF2, dan juga menggunakan versi MacOS tanpa mengisyaratkan, karena mereka menimbang setengah dari beratnya. CSS yang disederhanakan ini (terutama karena unicode-range didukung oleh semua browser yang mendukung WOFF2), dan pengguna IE 11 dan browser lama lainnya melihat sans-serif secara default, yang tidak terlihat sangat bagus, tetapi menurut pendapat kami, font adalah peningkatan progresif, dan bahkan tanpa mereka situs tersebut masih lebih dari yang dapat digunakan. Selain itu, browser lama bahkan dapat mengambil manfaat dari menggunakan font default sistem, karena mereka kemungkinan akan digunakan pada mesin yang lebih tua, bertenaga rendah.Anda juga dapat membuat penyesuaian lain untuk font yang Anda gunakan jika Anda mau (periksa lisensi terlebih dahulu!), Tetapi menyalin font Google default yang digunakan di Chrome pada MacOS mungkin cukup bagi sebagian besar dari kita jika Anda ingin mendukung hanya browser WOFF2 tanpa mengisyaratkan .Namun demikian, jika kita memilih Google Font, maka kita akan memiliki WOFF (dan bahkan format yang lebih lama) dan mengisyaratkan di mana perlu, tanpa perlu untuk konfigurasi substitusi font yang benar tergantung pada browser. Jadi, menggunakan Google Font untuk font masih memiliki kelebihan tertentu, dan memilih penyimpanan lokal Anda menolaknya. Ini juga berlaku untuk peningkatan apa pun di masa depan untuk Google Font .Peningkatan Font Masa Depan
Karena saya mempelajari topik font, dan memperingatkan bahwa Anda dapat kehilangan manfaat Google Font di masa mendatang dengan membuka penyimpanan lokal, saya ingin sedikit menjauh dari topik utama dan berbicara tentang hal-hal menarik lainnya yang saya temukan. Apa perubahan besar yang akan datang di dunia font? Ya, ada dua perubahan yang saat ini sedang dibahas secara aktif dan yang dapat memengaruhi font di masa mendatang (dan karenanya dapat didukung oleh Google Font, mungkin secara default jika Anda memilih untuk menggunakan layanan ini): font variabel dan pengayaan font progresif .Font variabel
Font variabel memungkinkan Anda untuk menggunakan gaya font yang berbeda tanpa harus mengunduh file individual. Saya sebutkan sebelumnya bahwa Web Almanac menggunakan hingga 9 file font yang berbeda, tetapi pada kenyataannya hanya 2 font. Alasannya sederhana - situs ini juga menggunakan versi cetak tebal, miring, tebal, dan bahkan lebih tipis dari salah satu atau keduanya. Begitu banyak variasi font yang sama mungkin tampak tidak pantas dan Anda mungkin berpikir bahwa browser itu sendiri akan mengatasi tugas mengubah ketebalan teks atau menulis miring. Ya itu mungkin. Tetapi setiap browser melakukan ini sedikit berbeda, dan hasilnya bisa sangat berbeda , banyak yang menyebutnya "font buatan".Satu-satunya cara untuk memastikan tampilan yang sama adalah dengan menggunakan "font nyata" khusus untuk setiap gaya yang Anda butuhkan.Font variabel menstandarkan tampilan berbagai variasi font dan kebutuhan untuk file tambahan menghilang. Secara teoritis, kita bisa mengganti 9 font ini dengan 2 ketika versi font variabelnya tersedia.Ini membuka banyak kemungkinan untuk menggunakan font di Internet. Meskipun menurut saya 9 opsi untuk dua font terlalu banyak, pada kenyataannya tidak terlalu banyak, sementara font variabel akan memungkinkan variasi yang tak ada habisnya. Pada perangkat seluler, Anda dapat mengatur ketebalan yang sedikit berbeda untuk "tebal" daripada pada desktop dan tablet. Font variabel dengan beberapa instruksi CSS sederhanaizinkan ini tanpa biaya sumber daya untuk mengunduh font tambahan. Baru-baru ini di DotCSS, Jason Pamental berbicara tentang font variabel dan menunjukkan bagaimana Anda bisa mendapatkan halaman yang dirancang dengan indah dengan apa yang tampaknya banyak font yang berbeda - semua menggunakan satu file!Menggunakan font variabel juga berarti memuat semua variasi font secara bersamaan , menghindari kebingungan yang disebabkan oleh masalah yang disebutkan sebelumnya. Ini juga mengarah pada redraws tata letak yang lebih sedikit: tanpa font variabel, halaman akan digambar ulang oleh browser lagi dan lagi karena setiap varian font dimuat.Font variabel memiliki dukungan yang baikdi browser modern, tetapi kelemahannya adalah ukurannya yang besar, karena menyimpan variasi font yang berbeda membutuhkan lebih banyak ruang, seperti halnya dengan pemberian font. Itu tergantung pada font, tetapi biasanya mereka dua kali lebih besar setelah kompresi, jadi untuk membenarkan penggunaannya, Anda harus memerlukan setidaknya dua gaya. Meski begitu, Anda mungkin lebih baik memilih satu file yang lebih kecil yang diunggah untuk menampilkan teks kritis, daripada satu file yang lebih besar untuk menampilkan semua teks. Dan lagi, dapat menggunakan font-display: swap menjadi solusi yang kurang bermasalah? Terserah masing-masing pemilik situs untuk memutuskan!Pengayaan Font Progresif
Pengayaan Font Progresif , pada dasarnya, mengambil subset ke tingkat baru dan memungkinkan Anda untuk mengunduh definisi karakter tambahan yang diperlukan dalam bentuk aliran informasi tambahan yang melengkapi font yang saat ini dimuat, tetapi tidak menambahkan yang tambahan. Ini mungkin tampak seperti keuntungan kecil bagi kami orang Barat, tetapi untuk bahasa lain - terutama di Timur Jauh - file font bisa sangat masif (misalnya, 2MB ), karena banyaknya karakter dalam bahasa ini. Untuk alasan ini, font web lebih jarang digunakan di negara-negara tersebut dan pengayaan font progresif dapat memiliki efek positif pada situasi tersebut.Pengayaan Font Progresif, seperti yang saya mengerti, berada pada tahap yang jauh lebih awal dari font variabel, tetapi adademo online . Dalam hal apa pun, ini adalah perubahan lain yang berpotensi menarik terkait font.Apakah Google Fonts akan terus meningkat?
Mengingat cara kerja Google Font, mudah dibayangkan bahwa Google Font dapat terus tumbuh dengan peningkatan baru, seperti yang dijelaskan dalam artikel ini (atau banyak lainnya!), Hanya dengan mengubah CSS yang Anda berikan. Dan dia bisa melakukannya dengan bijak. Misalnya, menentukan apakah browser Anda mendukung teknologi baru (seperti sekarang dengan format font - WOFF atau WOFF2), atau dengan cara lain. Misalnya, jika Anda meminta lebih dari dua font dan memberikan font yang kurang intensif sumber daya, maka Anda dapat mengotomatiskan dan menautkan ke file font yang sama di beberapa iklan font-face, dan jika Anda hanya meminta satu opsi, maka rujuk ke yang lebih ringan, font tradisional. Kedengarannya tidak masuk akal? Mereka sudah melakukannya dengan satu font.(Oswald)! Sejujurnya, saya tidak tahu apakah hal yang sama mungkin terjadi dengan Progressive Font Enrichment, karena saya tidak sepenuhnya memahami prinsip kerjanya, tetapi akan menarik untuk dilihat.Juga, perlu disebutkan bahwa menggunakan Google Font, ketika memperbarui font, misalnya, untuk menambahkan set karakter baru atau memperbaiki kesalahan dalam glyphs, Anda mendapatkan font baru secara otomatis. Dengan penyimpanan lokal, ini tidak akan berfungsi - setidaknya bukan tanpa intervensi satu tangan. Mungkin Anda bisa melihat ke arah permintaan proxy melalui domain Anda dan karenanya mengambil yang terbaik dari kedua opsi, tetapi ini kemungkinan besar akan lebih lambat dan memerlukan konfigurasi dan manajemen tambahan.Di sisi lain, penyimpanan lokal memberikan stabilitas, karena beberapa pembaruan dapat memengaruhi desain Anda, misalnya, jika judul dalam satu baris mulai meregang menjadi dua karena perubahan font. Ada kategori orang yang sangat kesal karena hal iniManfaat penyimpanan font lokal
Jadi, kita telah membahas banyak teori, dan meskipun ada manfaat potensial yang jelas dari penyimpanan lokal, ada juga kesulitan untuk dipertimbangkan, dan menggunakan Google Font juga memiliki beberapa manfaat yang jelas. Jadi apakah host-host layak? Itu tergantung pada fasilitas nyata dalam situasi tertentu. Jika perbedaan dalam kinerja tidak signifikan, mungkin ada baiknya terus menggunakan Google Fonts, jika besar, masing-masing.Untuk Web Almanac, kami baru-baru ini memilih penyimpanan lokal Google Fonts, dan pengujian menunjukkan perubahan dramatis:
Gambar yang lebih rendah berisi font lokal pada server pengujian kami, dan Anda dapat melihat bahwa waktu pengunduhan dibelah dua - dari 6 hingga 3 detik! Setelah analisis yang lebih dalam, saya melihat bahwa produktivitas meningkat lebih banyak lagi (penghematan 3 β
detik)!Apa yang tidak begitu jelas (tetapi apa yang akan kita lihat nanti) - pada titik ini, font tidak sepenuhnya dimuat pada salah satu gambar - dengan penyimpanan lokal dibutuhkan 7,5 detik dan 10,5 detik saat menggunakan Google Font. Namun, font yang digunakan sangat mirip dengan yang standar, dan tidak ada lompatan yang terlihat dalam tata letak. Ini bisa dilihat pada diagram di bawah ini:
Diagram menunjukkan bahwa halaman dengan penyimpanan lokal (merah) hampir sepenuhnya dimuat dalam 2,4 detik, dan kemudian diperbarui beberapa kali saat gambar dimuat, setelah itu font juga ditampilkan. Ya, saya ingin membuat semuanya lebih lancar, tetapi tetap saja tidak mungkin untuk mengoptimalkan beberapa biaya unduhan font.Alasan bahwa perbaikannya benar-benar nyata adalah karena satu hal lagi yang tidak saya perhitungkan pada awalnya: CSS memblokir rendering. Jadi, jika ada tautan ke Google Fonts CSS, peramban tidak hanya menunda tampilan teks - tetapi juga memperlambat tampilan seluruh konten halaman! Fon merupakan peningkatan progresif, sehingga kami dapat dengan aman membuat sisa halaman, dan bahkan teks itu sendiri (dengan font standar / fallback), tetapi browser tidak - hanya melihat bahwa ada beberapa CSS dan mencoba memuatnya, menunda pengunduhan sisa halaman. Tidak ada pemuatan asinkron untuk CSS- tapi mungkin harus untuk kasus seperti itu? Namun demikian, kami berisiko jika terjadi masalah saat menyambung ke Google Font, seluruh situs Anda tidak akan dapat diakses hingga browser berhenti mencoba memproses tautan!
Dalam bagan perbandingan di atas, garis hijau vertikal Mulai Render muncul paling cepat 6 detik - karena harus menunggu hingga Google Font memuat CSS di baris 12, menghabiskan separuh waktu menghubungkan ke domain dan separuh lainnya benar-benar memuat.Bandingkan ini dengan versi lokal:
Di sini kita dapat mulai render segera setelah CSS situs dimuat dan diproses dalam 2,5 detik. Ini karena tidak ada penundaan dalam menghubungkan ke domain Google Fonts.Dalam kedua kasus, kita melihat bahwa permulaan rendering terjadi sebelum font dimuat, dan berkat keajaiban font-display: swap, teks masih terlihat. Oleh karena itu, setidaknya ketika menggunakan font-display: swap, akan lebih baik jika Font Google tidak dimuat menggunakan rendering pemblokiran CSS, tetapi, misalnya, dimuat melalui JavaScript asinkron, yang menyisipkan font CSS ke halaman hanya setelah bagaimana mereka diunduh. Jika proses diimplementasikan seperti ini, rendering penundaan tidak akan terjadi, namun, masih ada penundaan saat menghubungkan dan menunggu lama untuk teks ditampilkan dengan benar.UPD: Saya membuat masalah pada GitHub Google Fonts dengan proposal untuk menambahkan cara mengunduh Google Fonts tanpa memblokir render - pilih suara jika Anda menginginkannya juga!Zach Leatherman menganjurkan pendekatan ini untuk mengurangi jumlah redraws , dan menunjukkan bahwa ini juga dimungkinkan dengan JavaScript saja, tanpa perlu file CSS. Kemudian itu menunjukkan keuntungan lain dari mengelola font Anda dengan JavaScript, misalnya, Anda dapat menolak untuk mengunduh font sama sekali jika situs terbuka dari jaringan yang lambat (menggunakan API Informasi Jaringan ), atau jika pengguna mengaktifkan pengaturan Save-Data atau Prefers-Reduced-Motion yang diaktifkan. . Fitur menarik!Prapemuat Font
Setelah Anda pindah dari URL hash Google, Anda dapat memuat ulang font untuk lebih meningkatkan kinerja. Namun, opsi ini memiliki beberapa kelemahan potensial, seperti yang dibahas Andy Davies dalam artikel Preloading Fonts dan Puzzle of Priorities . Pada dasarnya, dengan mem-preloading font dan memindahkannya dalam urutan prioritas, Anda secara implisit menurunkan prioritas unduhan penting lainnya (misalnya, CSS), dan karena kesalahan pada Chrome, font bahkan dapat melompati beberapa di antaranya.Selain itu, preloading ketika font tidak akan digunakan akan menyebabkan beban berlebihan yang tidak perlu - misalnya, jika versi lokal ada dan dapat digunakan dengan prioritas, atau jika browser tidak mendukung format font ini (walaupun semua browser yang mendukung preloading juga mendukung WOFF2 ) Seiring dengan rekomendasi untuk menggunakan pra-muat, Google dengan jelas memperingatkan Anda tentang hal ini , dan senang melihat mereka memperhatikannya.Saat menggunakan font-display: fungsi swap, kebutuhan untuk preload mungkin tidak sekuat itu. Meskipun dalam hal ini, Anda masih bisa mendapatkan waktu dengan mengunduh jumlah font minimum yang diperlukan dan dengan demikian menghindari FOUT dan menggambar ulang. Saat ini, kami tidak menggunakan preloading di Web Almanac dan sebelum kami mulai, kami perlu beberapa tes lagi, tetapi untuk saat ini saya puas dengan apa yang ada.Kesimpulan
Menjawab pertanyaan dalam judul artikel: ya, itu sangat berharga, karena peningkatan kinerja sangat signifikan. Tentu saja, hasil Anda dapat bervariasi, karena semuanya tergantung pada situs tertentu, jadi uji, uji, dan uji lagi. Tapi, saya pikir, ini masih merupakan pilihan terbaik, dalam hal kinerja, untuk sebagian besar situs.Namun, Google Font bukan hanya tempat penyimpanan ratusan font gratis - Google Fonts juga merupakan mekanisme pengiriman pintar yang menggunakan banyak teknik pengoptimalan terbaru untuk membuat font yang paling sesuai dengan upaya minimal dari pemilik situs. Beralih ke self-host, idealnya Anda harus menerapkan kembali banyak perbaikan yang bermanfaat, seperti tampilan font: swap, penghapusan rujukan font (setidaknya untuk beberapa browser), atau sebaliknya, Anda hanya dapat membahayakan kinerja yang berat file font.Ini bukan tugas yang mudah (dan Google Font melakukannya untuk Anda, ya). Tetapi karena sekarang hanya menggunakan format WOFF2 adalah satu-satunya pilihan yang realistis, dan browser sangat mendukung sebagian besar teknik optimasi, semuanya menjadi jauh lebih mudah daripada sebelumnya. Namun demikian, ada baiknya memiliki pengetahuan tentang font web sebelum mengatur semuanya (saya harap posting ini membantu dalam hal ini!), Dan pada saat yang sama mengawasi perubahan baru di dunia font, karena pasti akan ada perbaikan lebih lanjut.Yah, mungkin kami terlalu tertarik pada optimasi dan dengan penyimpanan lokal kami mampu menggunakan font lengkap, tanpa berlangganan dan dengan mengisyaratkan? Di situs web Google Fonts, Anda dapat mengunduh font apa saja dan itu relatif sederhana, walaupun aneh bahwa arsip tidak menyertakan format WOFF dan WOFF2saat menggunakan metode pemuatan ini, yang benar-benar tidak bisa dipahami oleh saya! Namun, jika Anda benar-benar tertarik untuk meningkatkan kinerja (dan Anda harus tertarik!), Maka Anda harus mencoba melakukan hal yang benar. Artikel ini hanya menunjukkan bahwa ini sedikit lebih rumit daripada hanya mengunduh dan menempatkan font di situs Anda, seperti yang selalu saya harapkan.Wow, sesuatu teks ternyata lebih panjang dari yang saya harapkan! Tapi saya harap Anda juga tertarik untuk memahami topik seperti Anda dan sekarang Anda memiliki beberapa ide baru untuk mempercepat unduhan font di situs Anda. Saya sangat menyarankan Anda mengikuti Jason dan Zach di Twitter untuk mempelajari lebih lanjut tentang font, dan Andy untuk mempelajari lebih lanjut tentang kecepatan aplikasi web secara keseluruhan.