Prapemuat Font

Penulis artikel, terjemahan yang kami terbitkan hari ini, ingin berbicara tentang mengapa ia memuat font bahkan ketika ia tidak seharusnya.

Ketika dia membuat situs di mana asli dari bahan ini diterbitkan, dia tidak akan menggunakan font-nya sendiri. Ini pasti akan mempengaruhi kinerja situs, walaupun tidak terlalu banyak. Penulis artikel tersebut mengatakan bahwa ia berusaha untuk membuat situs web cepat. Namun, pada akhirnya, diputuskan untuk menggunakan satu font khusus untuk judul halaman dan pada saat yang sama mencoba membuat solusi ini sesedikit mungkin mempengaruhi kinerja proyek.

Memulai

Untuk memulai, saya memutuskan untuk membuat file font sekecil mungkin. Jadi saya membuat subset font ini. Dengan kata lain, saya memilih dari font hanya karakter-karakter yang diperlukan untuk kata-kata dalam judul.

Hasilnya, saya mendapat file yang sangat ringkas, yang ukurannya kurang dari 2 Kb. Selain itu, saya meletakkannya di tempat yang sama dengan semua materi lain di situs, yang memungkinkan saya untuk menghilangkan ketergantungan pihak ketiga dan waktu yang dihabiskan untuk menghubungkan ke domain lain.

Dan akhirnya, tautan ke file font ditempatkan di kode CSS yang tertanam di halaman, di bagian atas kode HTML, dan bukan di file CSS eksternal.

Ini berarti bahwa browser dapat mendeteksi dan mengunduh file font tanpa harus mengunduh stylesheet eksternal. Omong-omong, ini adalah alasan umum bahwa font memuat lebih dari yang diperlukan.

Kejutan

Karena font khusus diperlukan untuk menampilkan teks, browser harus memperlakukannya sebagai sumber daya prioritas tinggi.

Akibatnya, saya berharap file font dimuat dengan sangat cepat. Halaman-halaman sumber daya saya, dalam hal apapun, cukup "ringan", jadi saya pikir tidak ada yang bisa mencegah pemuatan file font.

Ketika saya menganalisis situs, saya sedikit terkejut.

Jadi, melihat situs menggunakan alat pengembang Chrome dan memeriksanya di Webpagetest, saya menemukan bahwa font prioritas tinggi dimuat setelah gambar - sumber daya prioritas rendah.


Gambar diunduh sebelum unduhan font

Bagiku itu omong kosong.

Saya tahu pasti bahwa browser, sebelum mengunduh font, dapat menunggu hingga mengetahui bahwa font tersebut diperlukan untuk menampilkan halaman. Tetapi elemen tempat font saya digunakan terletak di bagian paling atas halaman, di dalam <header> , jauh lebih tinggi daripada tag dengan gambar yang dimuat sebelum font diunduh. Elemen yang sesuai tidak hanya terletak di kode halaman, tetapi juga di pohon DOM.

Memulai font sebagai solusi untuk masalah tersebut

Atribut preload memberitahu browser bahwa perlu preload sumber yang sesuai yang diperlukan untuk menampilkan halaman saat ini.

Menggunakan atribut ini adalah cara yang baik untuk mengunduh awal sumber daya penting yang jika tidak akan ditemukan oleh browser nanti.

File font adalah contoh yang bagus untuk menggunakan mekanisme ini. Jika tautan ke file font dibuat dalam style sheet eksternal, browser tidak akan mendeteksi font sampai ia memuat style sheet ini.

Menggunakan atribut preload diterapkan ke file font memberitahu browser bahwa itu akan membutuhkan font yang sesuai ketika menampilkan halaman.
Selain itu, mekanisme ini sangat mudah diimplementasikan menggunakan elemen <link> .

 <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin> 

Sebagai alternatif, Anda dapat menambahkan arahan preload ke header respons (meskipun, kecuali ditentukan lain, beberapa server atau CDN dapat mengartikan desain ini sebagai permintaan yang diprakarsai server untuk mentransfer sumber daya ke klien).

Saya tidak berharap bahwa di situs ini saya harus menggunakan mekanisme preloading sumber daya. Kode CSS saya sangat sederhana, saya menyematkannya dalam kode HTML halaman, melakukannya sehingga halaman akan ditampilkan lebih cepat oleh browser ketika mereka pertama kali mengunjungi situs. Karena font saya tidak tergantung pada pemuatan file CSS eksternal, browser, dalam hal apa pun, harus mendeteksinya sangat awal dan tanpa "petunjuk" tentang preloading.

Namun, saya menemukan bahwa preloading font menyebabkan pemulihan keadilan, fakta bahwa file font sekarang dimuat sebelum file gambar diunduh.

Berikut adalah diagram air terjun dari Webpagetest - Saya menyoroti tempat-tempat di mana pekerjaan dengan file font ditampilkan. Di bagian atas gambar, preloading tidak digunakan. Di bagian bawah - digunakan.


Preloading dan bekerja dengan file font.

Mungkin akan lebih bermanfaat untuk mempertimbangkan storyboard dari proses pemuatan halaman (di sini, untuk kejelasan, tiruan dari koneksi yang sangat lambat digunakan).


Di papan cerita teratas, preloading tidak digunakan. Di bagian bawah - digunakan

Secara sepintas, saya perhatikan bahwa saya menggunakan font-display: fallback handle. Yaitu, judul awalnya ditampilkan menggunakan font cadangan jika font saya dimuat perlahan. Namun, untuk pengujian ini, saya mematikan fitur ini, karena kalau tidak, akan sangat sulit untuk membedakan antara langkah-langkah dalam memuat halaman.

Mengapa ini berhasil?

Untuk menampilkan halaman web, browser perlu membangun pohon DOM dan pohon CSSOM, yang kemudian digunakan untuk membangun pohon rendering.

preload menggunakan elemen <link> dengan atribut preload untuk mengunduh font memungkinkan browser untuk mulai membangun CSSOM sebelum DOM selesai.

Anda dapat melihat ini di gambar berikut, yang menunjukkan eksplorasi proses pemuatan halaman menggunakan alat pengembang Chrome.

Berikut adalah bagaimana bekerja dengan materi halaman tanpa menggunakan preload. Pertama, DOM dibuat dan gambar dimuat, lalu CSSOM dibuat dan font dimuat.


Bekerja dengan halaman tanpa menggunakan preload

Dan di sini sama, tetapi dengan penggunaan preloading. Di sini, browser mulai membuat CSSOM, mulai mengunduh font, dan kemudian menciptakan DOM dan mulai mengunduh gambar.


Bekerja dengan halaman menggunakan preload

Apakah ada alternatif selain prapembuatan?

Misalkan saya tidak dapat menggunakan atribut preload untuk meningkatkan prioritas file font. Apa yang bisa saya lakukan? Bagaimana Anda bisa menurunkan prioritas gambar?

Karena penasaran, saya mencoba menerapkan ide di atas dan menambahkan atribut loading="lazy" ke elemen yang menggambarkan gambar. Di Chrome 76 (satu-satunya browser yang mendukung ini pada saat penulisan), ini harus menurunkan prioritas gambar di luar area yang terlihat asli dari halaman.

Menguji ide ini dengan alat pengembang telah menunjukkan bahwa ini mengarah ke font yang diunduh lebih awal. Mungkin ini patut diingat, karena tingkat dukungan browser untuk mekanisme pemuatan yang malas meningkat dari waktu ke waktu.

Browser yang berbeda berperilaku berbeda

Saya menguji proyek di beberapa browser berbeda dan di beberapa perangkat. Dalam pengujian, saya menemukan bahwa iOS Safari (iPhone 8) menunjukkan perilaku yang sama dengan Chrome. Yaitu, font, secara default, dimuat setelah gambar, tetapi menggunakan atribut preload memungkinkan preload untuk memperbaiki situasi.

Masalah keterlambatan pemuatan font juga terjadi di Firefox, tetapi atribut preload belum didukung oleh browser ini secara default, jadi menggunakan atribut preload saat melihat situs di Firefox belum mengubah apa pun.

Di Edge, font juga memuat lebih dari yang diinginkan. Ada perasaan bahwa menggunakan Webload Pagetest menggunakan atribut preload hanya berfungsi sebagian. Yaitu, bagi saya tampak seperti unduhan font ganda. Setelah dimuat sebelumnya, kedua kalinya nanti.

Dalam paragraf sebelumnya, saya berbicara tentang fakta bahwa saya "punya sensasi", dan bahwa saya "tampak". Faktanya adalah ketika saya mencoba menguji perilaku ini menggunakan versi Edge saya sendiri, unduhan "ganda" hilang. Sekarang saya merasa bahwa menggunakan atribut preload tidak mempercepat pemuatan font. Mungkin perbedaan dalam perilaku halaman ini adalah hasil dari memperbaiki beberapa kesalahan di Edge, meskipun jika demikian, kesalahan diperbaiki dengan biaya mengubah mekanisme preloading sumber daya.

Ringkasan

Di sini kita berbicara tentang mengapa font preloading tidak sakit bahkan jika tautan ke file mereka dibuat dalam kode CSS yang tertanam di halaman.

Browser tidak selalu berperilaku seperti yang kita inginkan, atau seperti yang kita harapkan. Tetapi kami memiliki alat yang membantu mempengaruhi perilaku browser, membantu mengarahkan mereka ke arah yang kami butuhkan.

Saya dulu berpikir bahwa font preloading di situs saya sama sekali tidak ada gunanya. Dari semua yang saya bicarakan, saya belajar pelajaran penting untuk diri saya sendiri. Terdiri dari fakta bahwa Anda tidak boleh berasumsi apa pun.

Pada akhirnya, saya dapat mengatakan bahwa font preloading adalah cara yang bagus untuk mempercepat output teks pada halaman web.

Pembaca yang budiman! Apakah Anda menggunakan mekanisme preloading font di proyek web Anda?