Сейчас я использую символы материалов для своего веб-сайта. Это отлично работает! Он красивый, простой в использовании и отлично сочетается с моим дизайном. Однако я заметил, что загрузка занимает ДОЛГОЕ время. Как только файл *
2,7 МБ* завершит загрузку и будет кэширован, веб-сайт загружается довольно быстро. Я загружаю файл с помощью импорта CSS:
Код: Выделить всё
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
Но загрузка с использованием тега HTML по-прежнему происходит очень медленно. Загрузка этих 2,7 МБ в режиме Fast 3G занимает до *
30 СЕКУНД*. Другие шрифты (также импортированные с помощью импорта CSS) загружаются не более 500 мс (при той же настройке 3G). Почему символы материалов загружаются так долго? Что я могу с этим поделать? Я точно знаю, что мне не нужны все эти значки, так как же мне загрузить только те значки, которые мне нужны? Или это нормально?
Я пробовал импортировать файл CSS другими способами, например, с помощью тега HTML, импортировать его с помощью JS и даже использовать статический шрифт значка вместо переменного. Хотя это все еще занимает много времени. Раньше эта проблема возникала у других шрифтов, и я решил ее, удалив курсив, потому что я их не использовал. Кажется, это решило проблему. Однако, AFAIK, вы не сможете сделать что-то подобное со шрифтом Material Symbols.
Подробнее здесь:
https://stackoverflow.com/questions/763 ... ptimize-it