Question

Один из пунктов проверки сайта на скорость рекомендует "Чтобы основные ресурсы загружались в первую очередь, используйте для них элемент `<link rel=preload>`"

При этом лично для моего сайта говорит, что надо rel=preload вставить в ниже показанные урлы.

URL	Потенциальная экономия
/css/style-glob.css (ex-hort.ru)	3150 мс
/fonts/fontawesome-webfont.woff2?v=4.6.3 (ex-hort.ru)	480 мс

Подскажите пожалуйста где я могу это сделать? Пересмотрел все шаблоны и не нашёл подобных ссылок на эти стили. 

 

Answer 1

Изучите статью: https://habr.com/ru/post/445264/ описано как это делается. Шрифты лучше не трогать так как сломаете отображение текстов.

Comments

Спасибо за ссылку на статью где написано, КАК это делается.

Я прошу вас подсказать, ГДЕ мне найти тот шаблон в котором я смогу подставить <link rel=preload>

Где указывается путь к файлам стилей style-glob, что бы я смог там сделать такую запись 

<link rel=preload as="style" href="/css/style-glob.css" />

Ни в одном из шаблонов нет <link rel="stylesheet" href="/css/style-glob.css" />

Или мне самому добавить? Но ведь в каких то шаблонах должен быть путь к глобальным стилям?

---

Ну чтож. Я понимаю что здесь не найти ответа, где тот шаблон, что бы прописать <link rel=preload> в  <link rel="stylesheet" href="/css/style-glob.css" />

Это первый вопрос за всё время моего общения здесь, на который знатоки не смогли ответить.

---

Фёдор Тимофеев,

Ответ на данный вопрос был дан в инструкции: https://abclinux.org/kak-uskorit-rabotu-sayta-pagespeed-insights-dlya-ucoz-i-uweb пример решения:

<link type="text/css" href="/css/style-glob.css" rel="preload stylesheet" as="style"/>

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

---

Yuri_Geruk,

Прошу прощение, если как то не верно формулирую свой вопрос. Статья предложенная Вами является одной из путеводных в деле ускорения сайта.

Как сделать я понял с первого раза.

Вот где это сделать?

Я ни в одном из шаблонов не нашёл строки <link rel="stylesheet" href="/css/style-glob.css" />, для того что бы её откорректировать нужным образом.

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

Ещё раз простите за назойливость.

---

Фёдор Тимофеев,

Все верно, с общей таблицы стилей удалить строку с import и добавить ее с помощью link.

---

Yuri_Geruk,

Я боюсь, что не совсем верно понял.

Вы рекомендуете в шаблоне по адресу "Дизайн" - "таблица стилей (CSS)" 

существующую строчку @import "/css/style-glob.css"; заменить на <link type="text/css" href="/css/style-glob.css" rel="preload stylesheet" as="style"/>

Так как на скрине?

Так?

---

Фёдор Тимофеев,

Нет так, первую строку удалить с таблицы стилей и прописать во всех шаблонах используемых модулей строку:

<link type="text/css" href="/css/style-glob.css" rel="preload stylesheet" as="style"/>

это будет решением вопроса.

---

Yuri_Geruk,

Таблица стилей имеет всего одну строку:  @import "/css/style-glob.css"; 

 

 

если я её удалю, ничего не сломается?

Ведь тогда шаблон таблицы станет совсем пуст. Это нормально? 

---

Фёдор Тимофеев,

Можете оставить эту строку, это по желанию, но в самом шаблоне подмените строку:

<link rel="stylesheet" href="/_st/my.css" media="none" onload="if(media!='all')media='all'" as="style" />
<link rel=preload href="/_st/my.css" as="style" />

на вашу:

<link type="text/css" href="/css/style-glob.css" rel="preload stylesheet" as="style"/>

ничего не сломается, просто кеш почистите после и будет все хорошо.

---

Yuri_Geruk,

Спасибо. Прошу простить за такую настойчивость. Всё получилось.