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

[Belena27089]

для тех, кто до сих пор обманывает себя и роботов закупкой ссылок, и не верит в силу хорошего сервера и в силу эффективной оптимизации, вот проверьте в украинском гугле присутствие сайта nasosvdom.com.ua
Для просмотра ссылки Войди или Зарегистрируйся

Не, мне не хочет показывать, все насосы в моём городе в первую очередь

 

[silenty]

как ни крути, время реакции сервера рулит (и от количества и качества соседей по винчестеру - есть зависимость)

так в том-то и дело. Соседей нет. Свой сервер. на нем 2 сайта. Диски NVMe SSD. Пока что сервер работает только на один сайт, но время загрузки очень смущает

 

[silenty]

для тех, кто до сих пор обманывает себя и роботов закупкой ссылок, и не верит в силу хорошего сервера и в силу эффективной оптимизации, вот проверьте в украинском гугле присутствие сайта nasosvdom.com.ua
Для просмотра ссылки Войди или Зарегистрируйся

Саш, вторая страница - вторая позиция... Если добить аккуратно закупками ссылок, то можно было бы и выше немного подняться.

 

[silenty]

Кстати... всем использующим тему 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 раза его не грузить, я просто удалил строку, где он подключался.

 

[Belena27089]

Так, а если font-display: swap; в шрифты тоже подставить, а то гугл спид на них тоже ругается, надо попробовать

 

[silenty]

Так, а если font-display: swap; в шрифты тоже подставить, а то гугл спид на них тоже ругается, надо попробовать

Эта строка важна только если вы подключаете кастомные. Если вы работаете изначально с системными шрифтами (те, что установлены на компах у пользователей) - лучше поставить не swap, а auto.

 

[Belena27089]

я стала из шапки убирать ссылки на гугл шрифты, и в сss подключать, пункты прибавляются в гугл спид от этого

 

[fantats]

Кто то включал профайлинг в Pande на 1,6 ? Ничего не отображает - только в админке сайта.

 

[alexeyud]

я стала из шапки убирать ссылки на гугл шрифты, и в сss подключать, пункты прибавляются в гугл спид от этого

вот как раз назрел вопрос у меня.
в дефолтном по умолчанию в header.tpl стоит подгрузка 2 шрифтов

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,600&amp;subset=latin,latin-ext" type="text/css" media="all" />
        <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons" type="text/css" media="all" />

они же тормозят загрузку

как и куда лучше их прописать и убрать из хидера?

 

[silenty]

вот как раз назрел вопрос у меня.
в дефолтном по умолчанию в header.tpl стоит подгрузка 2 шрифтов

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,600&amp;subset=latin,latin-ext" type="text/css" media="all" />
        <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons" type="text/css" media="all" />

они же тормозят загрузку
Посмотреть вложение 103099
как и куда лучше их прописать и убрать из хидера?

попробуйте сначала добавить к ним preload

<link rel="preload" href="//fonts.googleapis.com/css?family=Open+Sans:300,600&amp;subset=latin,latin-ext" as="style" />

Должно помочь ускорить загрузку. только последовательность не спутайте. Сначала как загружаем, потом откуда и потом что...