Оптимизация загрузки шрифтов Google и кеширование

Тест скорости страницы Google показывает только одну проблему:

Удалите JavaScript и CSS, блокирующие отрисовку, в верхней части страницы На вашей странице есть 1 блокирующий CSS-ресурс. Это приводит к задержке рендеринга вашей страницы.
Ни один из элементов верхней части страницы не может быть рендерен без ожидания загрузки следующих ресурсов. Попробуйте отложить или асинхронно загрузить блокирующие ресурсы или встроить важные части этих ресурсов непосредственно в HTML.
Оптимизируйте доставку CSS следующего:
https://fonts.googleapis.com/css?family=Roboto:300,400

Шрифты, загружаемые в соответствии с рекомендациями fonts.google.com:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">

Внутри тега <head />.

Насколько я знаю, нет никакого способа контролировать кэширование шрифтов Google, а также вывод этого URL-адреса зависит от пользовательского агента, поэтому не имеет смысла распространять шрифты локально. Итак, вопрос: что мне с этим делать? Как пройти тест скорости Google?

stkvtflw 27.05.2017 источник

comment

Вы видели эту библиотеку github.com/typekit/webfontloader? Возможно, это может вам помочь - пример шрифтов Google находится первым в разделе «Начало работы». - Stanislav Kvitash 30.05.2017

comment

Вы тестировали метод @import? Это могло бы быть более эффективным для вашего приложения — оно явно пинговало «контент выше сгиба». Если нет, то здесь может быть что-то еще; пожалуйста, покажите больше кода этой страницы. - fred randall 31.05.2017

comment

Видимо, никто не знает, как использовать тег стиля. - Zekrom_Vale 01.06.2017

comment

Я не уверен, но ИМХО предупреждение касается положения тега ‹link›. Вы можете поместить его перед окончанием ‹/body› и предупреждением о закрытии. Но у вас будет рендеринг flash после загрузки сайта. - Eduard Void 01.06.2017

comment

Кэшируемые шрифты Google: stackoverflow.com/a/57073920/369005 - Hamid Sarfraz 17.10.2019

Ответы (4)

arrow_upward
1
arrow_downward

На данный момент я знаю, что это лучшее решение на сегодняшний день, если вы используете Fontloader. Сначала загружается короткий скрипт .js, а затем асинхронный шрифт.
Совет: Use font-family: 'Roboto', 'sans serif'; у асинхронного режима есть проблема, связанная с переключением типа шрифта после рендеринга сайта. Таким образом, пользователь видит короткое переключение шрифта, похожее на вспышку. Если вы используете шрифт без засечек в качестве запасного варианта, переключение не такое большое.
Или используйте .wf-active

Lovntola 06.06.2017

comment

Имейте в виду: fonts.gstatic.com/xxx кэшируется многими браузерами в течение нескольких месяцев. fonts.googleapis.com/xxx только на 24 часа для быстрой поддержки изменений шрифта. - Lovntola; 06.06.2017

arrow_upward
1
arrow_downward

data:font требуется запасной вариант, загрузите нижний колонтитул. Это даст результат, подобный моему:

Это пример CSS для отката, иначе на некоторых устройствах может произойти сбой:

@font-face {
 font-family: 'Arial'; /* Do Proper Naming */
 src: url('Arial.eot'); /* For IE 5-8 */
 src: local('?'), /* It is called smile hack to promote CSS to UTF-16 */
 url(data:font/truetype;charset=utf-8;base64,) format('truetype'), /*base64 encoded font IE9, Safari 3.1+ FF 3.5+ Chrome 4.0+*/
 url('Arial.svg#123XYZ') format('svg'); /* iPad, iPhone with OS less than or equal to 4.1 */
 font-weight: normal;
 font-style: normal;
}

Я написал это -- https://thecustomizewindows.com/2013/10/base64-encoding-and-font-css/ Этот CSS от опытного разработчика шрифтов, которому я заплатил. Прочтите мое руководство, протестируйте исходный код этого веб-сайта, используйте его таким же образом.

Abhishek Ghosh 06.06.2017

arrow_upward
0
arrow_downward

Я предполагаю, что асинхронная загрузка шрифтов может решить проблему. Я нашел интересную статью, может быть, она поможет вам асинхронная загрузка шрифта.

vijayscode 01.06.2017

arrow_upward
0
arrow_downward

Поскольку вы не можете контролировать заголовки Google (включая заголовки срока действия), я вижу только одно решение — загрузить эти две таблицы стилей и шрифты на свой собственный сервер хостинга, соответствующим образом изменить HTML-теги.

Затем вы можете установить заголовки истечения срока действия по своему усмотрению.

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/0eC6fl06luXEYWpBSJvXCBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Fl4y0QdOxyyTHEGMXX8kcRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/-L14Jk06m6pUHB-5mXQQnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/I3S1wsgSg9YCurV6PUkTORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/NYDWBdD4gIq26G5XYbHsFBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Загрузите этот файл .woff2 и сохраните его в любом месте на своем веб-сервере. Скопируйте и вставьте этот фрагмент таблицы стилей в любой из ваших собственных файлов CSS или HTML. Измените ссылку с https://fonts.googleapis.com на новый URL.

Vignesh PV 03.06.2017

comment

Не делай этого. Этот тип файлов зависит от браузера и его поддержки шрифтов. Там четыре шрифта типа системного переключателя в зависимости от браузера. - Lovntola; 06.06.2017

comment

Извините, сегодня пять типов шрифтов: WOFF, OTF, TTF, SVG, EOT - Lovntola; 06.06.2017

comment

Этот ответ почти дословно скопирован с stackoverflow.com/a/29091105/2838033. - mechalynx; 15.09.2017

Оптимизация загрузки шрифтов Google и кеширование

Ответы (4)

Похожие вопросы