nauchivse
@nauchivse
Scientist

Как оптимизировать загрузку стилей по ссылке https://fonts.googleapis.com/css.....?

Какие есть варианты для оптимизации загрузки шрифтов по ссылкам

https://fonts.googleapis.com/css?family=Open+Sans:...
https://fonts.googleapis.com/css?family=Fjalla+One...

5c8ccdf052f80230019216.jpeg
  • Вопрос задан
  • 449 просмотров
Пригласить эксперта
Ответы на вопрос 3
@archelon
Для начала:
1. Подумайте об уменьшении количества используемых шрифтов. Вам точно нужны все 5 шрифтов на сайте?
2. Скачать шрифты, сконвертировать их через transfonter, оптимизировав используемые сабсеты, начертания, символы, и подключить шрифты локально.
Ответ написан
Комментировать
@olegchabak
Frontend developer
archelon прав. Действительно надо аж 5 шрифтов? В идеале 2, край 3. Часто подключают целый шрифт, чтобы логотип или слово в одном блоке были правильного начертания. Попробуйте заменить такие места на картинку (если лого), а для сео пропишите там невидимый текст. Или бывает дизайнер просто не учитывает нагрузку шрифтовую и фигачит в макете разными шрифтами, тут надо подумать как обойтись парочкой шрифтов.

А вообще касаемо PageSpeed Insights, еще не все по ходу знают:
Чтоб система не ругалась, она хочет при подключении шрифтов ленивую загрузку - font-display: swap, т.е. сначала всё отобразится дефолтными шрифтами, а потом когда загрузятся кастомные, подключатся уже они.
Типа того:
@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display:  swap;
}
Ответ написан
@sendruck
Меня такая штука однажды спасла.
https://github.com/typekit/webfontloader
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы