Форум Сайтостроение Веб-строительство

Настройте показ всего текста во время загрузки веб-шрифтов

J
На сайте с 30.11.2005
Offline
125
Juggernaut
4794

Помогите обойти эту приблуду в Google Page Speed:

Настройте показ всего текста во время загрузки веб-шрифтов
Чтобы пользователь мог видеть текст, пока веб-шрифты не загрузились, используйте функцию отображения шрифтов CSS. Подробнее….
URL
Потенциальная экономия данных (КБ)
…v18/KFOlCnqEu….ttf(fonts.gstatic.com)
140 ms
…v18/KFOmCnqEu….ttf(fonts.gstatic.com)
160 ms
…v18/KFOlCnqEu….ttf(fonts.gstatic.com)
60 ms
…v18/KFOmCnqEu….ttf(fonts.gstatic.com)
70 ms

Уже несколько дней читаю статьи про всякие swap и т.д., но нигде нет пошагового примера, какой код нужно воткнуть в php шаблон страницы.

В шаблоне стоит следующая следующая ссылка для шрифтов:

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap" rel="stylesheet">

Причем стоит в подвале, вроде бы используется параметр swap, но гуглу все не нравится. Какой конкретно код и куда нужно вставить, чтобы убрать это предупреждение?

suffix
На сайте с 26.08.2010
Offline
331
suffix
#1

А тупо скачать шрифты с гугла и отдавать их со своего сервера не поможет ?

Клуб любителей хрюш (https://www.babai.ru)
Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#2
suffix:
А тупо скачать шрифты с гугла и отдавать их со своего сервера не поможет ?

поможет :).

ME
На сайте с 03.07.2017
Offline
66
MkrtElion
#3
Juggernaut:
Помогите обойти эту приблуду в Google Page Speed:

Настройте показ всего текста во время загрузки веб-шрифтов
Чтобы пользователь мог видеть текст, пока веб-шрифты не загрузились, используйте функцию отображения шрифтов CSS. Подробнее….
URL
Потенциальная экономия данных (КБ)
…v18/KFOlCnqEu….ttf(fonts.gstatic.com)
140 ms
…v18/KFOmCnqEu….ttf(fonts.gstatic.com)
160 ms
…v18/KFOlCnqEu….ttf(fonts.gstatic.com)
60 ms
…v18/KFOmCnqEu….ttf(fonts.gstatic.com)
70 ms


Уже несколько дней читаю статьи про всякие swap и т.д., но нигде нет пошагового примера, какой код нужно воткнуть в php шаблон страницы.

В шаблоне стоит следующая следующая ссылка для шрифтов:

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap" rel="stylesheet">

Причем стоит в подвале, вроде бы используется параметр swap, но гуглу все не нравится. Какой конкретно код и куда нужно вставить, чтобы убрать это предупреждение?

Вот такой код нужен: 


@font-face {

  font-family: 'Saira Condensed';

  src: url(fonts/sairacondensed.woff2) format('woff2');

  font-display: swap;

}

Это пример для наглядности.

Вам нужно конкретно: 

font-display: swap;
J
На сайте с 30.11.2005
Offline
125
Juggernaut
#4
suffix:
А тупо скачать шрифты с гугла и отдавать их со своего сервера не поможет ?

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

Тут дело совсем не в том, что шрифты грузятся, они грузятся быстро. Просто нужно установить параметр, чтобы браузер начинал прорисовку текста сразу стандартным шрифтом, а потом уже подключал загруженный шрифт. Вроде бы это и есть swap, но как это правильно отобразить в коде я не понимаю.

---------- Добавлено 01.08.2019 в 19:47 ----------

MkrtElion:
Вот такой код нужен: 

@font-face {

  font-family: 'Saira Condensed';

  src: url(fonts/sairacondensed.woff2) format('woff2');

  font-display: swap;

}


Это пример для наглядности.
Вам нужно конкретно: 
font-display: swap;

Эти конструкции я видел. Куда это вставляется? В <head><style></style></head> ?

Можно код конкретно на моем примере?

Добавляете ли вывод IP Можно ли сделать нестандартный XHTML + CSS +
Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#5

Juggernaut, оно есть в коде. Попробуйте так:


<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=fallback" rel="stylesheet">
J
На сайте с 30.11.2005
Offline
125
Juggernaut
#6
Gerga:
Juggernaut, оно есть в коде. Попробуйте так: 

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=fallback" rel="stylesheet">

Практически тоже самое, гугл продолжает визжать:

URL

Потенциальная экономия данных (КБ)

…v18/KFOlCnqEu….ttf(fonts.gstatic.com)

90 ms

…v18/KFOmCnqEu….ttf(fonts.gstatic.com)

90 ms

Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#7

Juggernaut, может у вас кэширование сайта влючено? Если вы откроете файл https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap, вы увидите, что там прописывается

font-display: swap;

Я только что проверил с параметром display=swap и без. Если без - ругается, иначе - все ок.

Микроформаты - Missing required Inferno Solutions: невероятные скидки Как поднять тиц и
J
На сайте с 30.11.2005
Offline
125
Juggernaut
#8

Конечно кеширование включено. Но я думал, что Page Speed Insights при каждой новой проверке берет свежий вариант.

В итоге этот линк ок?

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap" rel="stylesheet">

Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#9
Juggernaut:
Конечно кеширование включено. Но я думал, что Page Speed Insights при каждой новой проверке берет свежий вариант.

Нет, кэш нужно очищать.

Juggernaut:
В итоге этот линк ок?

можете его, но мне больше нравится fallback.

R
На сайте с 25.01.2018
Offline
12
Ryshev
#10
Juggernaut:
Конечно кеширование включено. Но я думал, что Page Speed Insights при каждой новой проверке берет свежий вариант.

В итоге этот линк ок?

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap" rel="stylesheet">

Всем добрый день!) :)Подскажите пожалуйста, куда в итоге вставлять этот линк, и работает ли он? удалось ли победить гугл пейдж спид по этому параметру?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий