Информация Ускорение и оптимизация престашоп

[wellrun5]

Кстати... всем использующим тему warehouse. На странице Pagespeed есть пункт (у всех, кто не переделал) : "Настройте показ всего текста во время загрузки веб-шрифтов". Открываем файл font-awesome.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;
}

Просто после строки @font-face { добавляем новую строку с таким содержимым: font-display: swap; Должно выглядеть вот так:

@font-face {
  font-display: swap;
  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;
}

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


Что дает эта строка? она позволяет подгружать кастомный шрифт уже после загрузки страницы и повышает скорость загрузки видимого контента.
Чем это грозит сайту? При слабом интернете вместо иконок от font-awesome будут квадратики. Пропадут сразу после загрузки шрифта.
Если у меня не тема warehouse, можно так сделать? Вообще не вопрос. Этот шрифт сейчас максимально распространен. Он используется почти во всех темах и во многих модулях. Просто придется воспользоваться поиском данного css файла. У меня этот шрифт был подключен в модуле блога. Чтобы 2 раза его не грузить, я просто удалил строку, где он подключался.

Не помогает решение. Даже хуже становится. В чем причина может быть?

 

[xonar]

Не помогает решение. Даже хуже становится. В чем причина может быть?

Вытащи
@font-face { всё содержмое } из файл и подключи в шапке внутри. Тогда проблема исчезнет, проверено.

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

</style>

 

[alpi]

Вроде тема "Ускорение и оптимизация", а даются вредные советы, как в и без того раздутый ненужным вархаус добавить еще шрифтов ))
С точки зрения юзера - изменение шрифтов во время загрузки сайта - всегда коряво.
Хотите оптимизировать шрифты - выкиньте подгрузку font awesome, храните локально.
Для просмотра ссылки Войди или Зарегистрируйся

 

[wellrun5]

выкиньте подгрузку font awesome, храните локально.

Так речь про локальные и идет.