Fon subsetting hebat untuk meningkatkan prestasi

Font Awesome adalah perpustakaan ikon yang popular, tetapi ia dapat dengan mudah membawa kepada prestasi yang buruk dalam cara ia digunakan. Dengan memilih fon hebat dengan subset, kita boleh mengeluarkan sebarang glyphs yang tidak digunakan dari fail font. Ini akan mengurangkan bilangan bait yang dihantar oleh rangkaian, dengan itu meningkatkan prestasi.

Mari kita ambil pemilihan subset fon dalam projek font yang mengagumkan dan lihat perubahan yang boleh dibuat. Dalam proses berikut, saya menganggap anda mengimport fail CSS yang disediakan oleh Font Awesome dan menggunakan font webnya untuk memaparkan ikon.

Tetapan Projek

Untuk demonstrasi, saya hanya mempunyai satu fail HTML yang mengimport fail CSS asas font hebat. Untuk mendapatkan sampel ikon yang munasabah, saya telah menyenaraikan setiap ikon yang saya gunakan dalam projek sampingan.

Berikut adalah bagaimana fail HTML kami kelihatan dalam penyemak imbas sebelum memilih font dalam subset:

Berikut adalah tab rangkaian DevTool, yang memaparkan kandungan yang dimuatkan.

Sekarang mari kita lihat berapa banyak bait yang diperlukan untuk fail font kami untuk menjadikan semua ini.

Penandaarasan

Kami mahu melihat cara yang paling langsung dan terburuk menggunakan font hebat. Dalam erti kata lain, kami mahu melaksanakan penyelesaian pengoptimuman yang paling lambat dan tidak. Saya mengimport fail All.min.css yang disediakan oleh Font Awesome.

Seperti yang ditunjukkan di atas, saiz fail termampat adalah 33.4kb, yang tidak buruk. Malangnya, perkara semakin teruk apabila kita melihat tab Fon Devtool.

Walaupun fail fon tidak mahal seperti JavaScript untuk pelayar, mereka masih bait yang perlu dimuat turun oleh pelayar, hanya untuk beberapa ikon kecil. Pertimbangkan bahawa sesetengah pengguna anda boleh melayari laman web anda pada peranti mudah alih, menjauhkan diri dari sambungan internet yang kuat atau cepat.

Percubaan pertama dengan PurifyCss

Font Stylesheet utama Font Awesome mengandungi beribu -ribu definisi ikon. Tetapi bagaimana jika kita hanya memerlukan berpuluh -puluh ikon? Kita pasti dapat menghapuskan perkara yang tidak diingini?

Terdapat banyak alat untuk menganalisis kod anda dan mengeluarkan gaya yang tidak digunakan dari lembaran gaya. Saya kebetulan menggunakan PurifyCSS. Walaupun perpustakaan ini tidak lagi aktif dikekalkan, falsafahnya adalah sama, dan pada akhirnya, bukan penyelesaian yang kita cari. Tetapi mari kita lihat apa yang berlaku apabila kita memangkas CSS untuk hanya mengandungi kandungan yang diperlukan, kita boleh melaksanakannya menggunakan skrip berikut:

 <code>const purify = require("purify-css"); const content = ["./dist/**/*.js"]; // Vite 构建的内容purify(content, ["./css/fontawesome/css/all.css"], { minify: true, output: "./css/fontawesome/css/font-awesome-minimal-build.css" });</code>

Apabila kita memuatkan fail CSS yang baru dibina, bilangan bait CSS yang kita pindahkan melalui rangkaian menurun dengan ketara, dari 33KB hingga 7.1KB!

Malangnya, fail fon fon kami yang lain tidak berubah.

Apa yang berlaku? PurifyCSS melakukan tugasnya. Ia mengeluarkan peraturan CSS untuk semua ikon yang tidak digunakan. Malangnya, ia tidak boleh memasukkan fail fon sebenar untuk memangkas glyphs, serta peraturan CSS.

Ia akan menjadi lebih baik jika terdapat alat seperti PurifyCSS yang boleh mengendalikan fail fon ...

Alat pemilihan subset untuk menyelamatkan!

Sudah tentu, terdapat alat yang boleh mengeluarkan kandungan yang tidak digunakan dari fail fon, dan mereka dipanggil alat pemilihan subset . Alat pemilihan subset menganalisis laman web anda, melihat fail fon anda, dan memangkas aksara yang tidak digunakan. Terdapat banyak subset alat untuk memilih fon, seperti Glyphhanger Zach Leatherman. Ternyata fon hebat sangat mudah untuk memilih subset kerana ia dilengkapi dengan alat pemilihan subset terbina dalam. Mari kita lihat.

Fon Pemilihan Subset Automatik

Pemilihan subset automatik saya yang akan datang dan alat pemilihan subset manual memerlukan langganan pro yang hebat.

Font Awesome membolehkan anda menubuhkan apa yang dipanggil toolkit , yang diterangkan dalam dokumentasi Font Awesome sebagai "ransel yang dengan mudah boleh meletakkan semua ikon dan kandungan yang indah yang anda perlukan dalam pakej yang bersih dan ringan yang memudahkan anda menambahnya ke projek anda." Oleh itu, bukannya mengimport mana -mana dan semua fail CSS, toolkit menyediakan anda dengan yang boleh ditambah ke fail HTML

Tag skrip tunggal dari mana toolkit menghantar hanya glyphs font yang anda perlukan dari fail font. Ia mengambil masa kira -kira satu minit untuk membuat toolkit. Anda akan mendapat tag skrip yang serupa dengan ini:

<code></code>

Apabila skrip dimuatkan, kami kini tidak mempunyai fail CSS sama sekali, manakala fail JavaScript hanya 4KB. Mari kita lihat tab Fon DevTools sekali lagi untuk melihat fail fon mana yang dimuatkan selepas kami membuat beberapa pilihan subset.

Kami telah jatuh dari 757KB ke 331KB. Dikurangkan lebih daripada 50% . Tetapi kita masih boleh berbuat lebih baik, terutamanya jika kita hanya membuat 54 ikon. Di sinilah alat pemilihan subset font font font Awesome dimainkan.

Fon pemilihan subset manual

Bukankah itu hebat jika Font Awesome memberi kita alat yang membolehkan kita memilih ikon yang tepat yang kita mahu dan kemudian memberikannya dengan binaan tersuai? Ya, mereka lakukan. Atas sebab tertentu, mereka tidak gembar -gembur ini, tetapi mereka sebenarnya mempunyai aplikasi desktop yang didedikasikan untuk pemilihan fon subset manual. Aplikasi ini boleh dimuat turun dari laman web mereka - bagaimanapun, seperti alat pemilihan subset automatik, aplikasi ini memerlukan langganan font yang hebat untuk digunakan.

Cari ikon, pilih siri ini, tambahkan apa yang anda mahu, dan klik butang binaan biru besar. Ini benar -benar semua kerja yang perlu anda lakukan untuk menghasilkan subset adat ikon fon hebat.

Selepas mengklik butang, Font Awesome akan bertanya di mana ia harus menyimpan binaan tersuai, dan kemudian ia akan membuang fail zip dengan semua yang anda perlukan. Malah, struktur yang anda akan dapat adalah sama seperti muat turun font biasa yang biasa, yang menjadikan perkara -perkara yang sangat mudah. Sudah tentu, ia membolehkan anda menyimpan binaan tersuai anda sebagai fail projek supaya anda boleh membuka semula kemudian untuk menambah atau mengeluarkan ikon seperti yang diperlukan.

Kami akan membuka DevTools untuk melihat saiz akhir ikon yang kita muatkan, tetapi pertama, mari kita lihat fail fon sebenar itu sendiri. Custom Builds Buat pelbagai jenis, bergantung kepada apa yang digunakan oleh penyemak imbas anda. Mari fokus pada fail .woff2, yang dimuatkan oleh Chrome. Cahaya yang sama, biasa, duotone, pepejal dan jenama yang wujud sebelum masih wujud, tetapi kali ini tiada satu pun daripada mereka yang lebih besar daripada 5KB ... dan ini sebelum mereka dimampatkan oleh GZIP!

Bagaimana dengan fail CSS? Ia menyusut hanya 8KB. Selepas mampatan menggunakan GZIP, ia hanya mempunyai 2KB!

Berikut adalah statistik akhir di DevTools:

Sebelum kami pergi, jika anda tertanya -tanya jika alat GUI subset font desktop mempunyai CLI yang boleh diintegrasikan dengan CI/CD untuk menghasilkan fail -fail ini pada masa membina, jawapannya ... belum. Saya menghantar e -mel kepada kakitangan font yang hebat dan mereka berkata mereka merancang. Jika ia diterbitkan, ini akan membolehkan pengguna mempermudah proses membina mereka.

Seperti yang anda lihat, ia sangat sejuk untuk menggunakan alat seperti Font Awesome untuk memaparkan ikon. Tetapi penggunaan lalai tidak semestinya cara terbaik untuk melakukannya untuk projek anda. Untuk mendapatkan saiz fail terkecil yang mungkin, memilih fon untuk subset adalah sesuatu yang boleh kita lakukan untuk memotong apa yang kita tidak perlukan dan hanya memberikan apa yang kita perlukan. Itulah persembahan yang kita mahu, terutamanya apabila memuatkan fon, yang secara tradisinya sukar dikendalikan.

Atas ialah kandungan terperinci Fon subsetting hebat untuk meningkatkan prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!