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

Question

[Da ta]

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

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

Comments

[Сергей delphinpro]

Перейдите по своим ссылкам, копируйте код, вставьте себе в css файл

[Da ta]

Сергей delphinpro, в коде по ссылкам также встроены ссылки на fonts.gstatic.com

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OX-hpOqc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OVuhpOqc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OXuhpOqc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

[Сергей delphinpro]

nauchivse, и? шрифты в любом случае будут загружаться отдельно, с серверов гугла, или с вашего, не важно. А вот на парочке блокирующих запросов вы сэкономите, убрав css в общий файл.

Answer 1

[archelon]

Для начала:
1. Подумайте об уменьшении количества используемых шрифтов. Вам точно нужны все 5 шрифтов на сайте?
2. Скачать шрифты, сконвертировать их через transfonter, оптимизировав используемые сабсеты, начертания, символы, и подключить шрифты локально.

Answer 2

[Oleg]

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;
}

Comments

[archelon]

Меня однажды дизайнер заставил подключать отдельный шрифт для одного (!) символа в заголовке. Один этот символ и подключил.

Answer 3

[sendruck]

Меня такая штука однажды спасла.
https://github.com/typekit/webfontloader