- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ
Экспертная оценка Адмитад
Оксана Мамчуева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Коллеги, решил более детально разобраться с вопросом подгрузки Google шрифтов для сайта.
Раньше для меня было два рабочего состояния: либо используем стандартный системный шрифт и страница грузится быстрее, но выглядит привычно "стандартно", либо используем более изысканные шрифты от Гугла - это визуально интересней, но доп. трафик при загрузке страницы. В плане использования доп. шрифтов я всегда доверял базовым настройкам шаблона и никогда не редактировал.
Сейчас, анализируя Waterfall рабочей страницы возникло желание более детально разобраться в подгружаемых внешних файлах и отсечь те, которые не используются. Насколько я понимаю, я нашёл доп. css файл, который отвечает за подгрузку внешних шрифтов, секция выглядит следующим образом:
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal }
Можно конечно опытным путём поступательно отсекать внешние файлы, перегружать страницы, фиксировать изменения и делать необходимые рабочие выводы, но для начала хочу попросить коллег, которые более осведомлены в этом вопросе, ответить на вопрос - нужны ли все эти файлы и не лучше ли явным способом описать один файл и всё?
Я понимаю, что разнообразие этих файлов отвечает за размерности и способы начертания кегля шрифта, но буду рад любой внятной и конструктивной информации, чтобы разобраться в этом вопросе и оптимизировать загрузку внешних шрифтов. А может быть и вообще хранить их у себя, подгружать со своего сервера и только то, что фактически используется, не таща лишние те, которые и не используются.
Вообще-то представленный вами код подгружает шрифт иконок. Я не знаю, как вы не могли это не загуглить:
https://fontawesome.com/
Если вы не используете все иконки, можно сделать свой набор через разные сервисы:
https://webref.ru/layout/font-awesome/fontello
Вообще-то представленный вами код подгружает шрифт иконок.
Хорошо, спасибо за пояснение. Иконки действительно используются.
Я не знаю, как вы не могли это не загуглить:
https://fontawesome.com/
Нашёл некоторое множество информации, но захотелось получить конкретные рабочие ориентиры по готовому примеру, чтобы долго не блуждать, выискивая нужное, а сразу получить уточнения по текущему контексту.
Если вы не используете все иконки, можно сделать свой набор через разные сервисы:
https://webref.ru/layout/font-awesome/fontello
Понятно, благодарю. Давайте попробуем с другой стороны зайти - я приведу данные из Waterfall-а, чтобы конкретно дать информацию, что используется:
+ Request 21: http://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2
+ Request 22: http://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2
+ Request 23: http://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOVuhpOqc.woff2
+ Request 24: http://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOVuhpOqc.woff2
+ Request 25: http://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhp.woff2
+ Request 26: http://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2
+ Request 28: http://site.ru//templates/shaper_helixultimate/fonts/fontawesome-webfont.woff2?v=4.7.0
+ Request 29: http://site.ru//plugins/system/jsnframework/assets/3rd-party/font-icomoon/fonts/IcoMoon.woff
Из вышеуказанного, правильно ли я понимаю, что базовый шрифт загружается fontawesome-webfont.woff2?v=4.7.0 а все остальные файлы отвечают за загрузку используемых на странице иконок? Из чего, наверное, следует вывод, что ничего лишнего тут в общем-то нет?
Из вышеуказанного, правильно ли я понимаю, что базовый шрифт загружается fontawesome-webfont.woff2?v=4.7.0 а все остальные файлы отвечают за загрузку используемых на странице иконок? Из чего, наверное, следует вывод, что ничего лишнего тут в общем-то нет?
21-26 = Основные шрифты оптимизированные от гугла
28-29= Просто наборы иконок
21-26 = Основные шрифты оптимизированные от гугла
По данному набору, где можно получить более детализированную информацию - какие используются наверняка, а какие просто подгружаются довеском?
По данному набору, где можно получить более детализированную информацию - какие используются наверняка, а какие просто подгружаются довеском?
В урле загрузки гугл шрифтов прописано какие шрифты подгружаются. Если ничего не указанно, значит все.
Только определённые виды начертания можно выбрать на сайте Google Fonts
В урле загрузки гугл шрифтов прописано какие шрифты подгружаются. Если ничего не указанно, значит все.
Только определённые виды начертания можно выбрать на сайте Google Fonts
Да, нашёл где это. Благодарю.
Вопрос закрыт.
Я понимаю, что разнообразие этих файлов отвечает за размерности и способы начертания кегля шрифта
Nein. Разные типы файлов для одного шрифта нужны для поддержки загружаемых шрифтов в разных клиентских браузерах. Но, поскольку полный набор учитывает и сильно outdated и практически не встречающиеся в дикой Сети браузеры, если есть желание и возможность забить на некий процент юзеров, сидящих на археологических экспонатах из музея, то полный список из
eot|svg|woff|woff2|ttf
можно радикально сократить, оставив только woff+woff2 (или вообще только woff ), потому как
Из вышеуказанного, правильно ли я понимаю, что базовый шрифт загружается fontawesome-webfont.woff2?v=4.7.0 а все остальные файлы отвечают за загрузку используемых на странице иконок?
Nein . Тянутся файлы (все форматные вариации) 3 независимых шрифтов (OpenSans, FontAwesome, IcoMoon). И я все загружаемые шрифты предпочитаю держать локально и минимально необходимый набор