Геннадий Жиляев
23 года, Россия
1 сообщение
#2 месяца назад
Недавно закончил с основным наполнением своего первого интернет-магазина и решил заняться оптимизацией. Проблемы с блокирующими css удалось решить с помощью операторов preload таким образом:

<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">

Как javascript, помещал таблицы стилей в самый низ кода страницы. Скорость загрузки возросла до 96/100 по данным PageSpeed Insights. Но! Появилась новая проблема, которую я не могу решить по сей день, а именно: вообще не загружаются таблицы стилей при просмотре сайта через смартфон (также Google бот не загружает стили)! Менял самые основные на обычный link rel="stylesheet" type="text/css"-загружается, но скорость загрузки существенно падает. 
Может, preload не работает на мобильных устройствах? Информации по этой части в интернете не нашёл...

Вот сайт. Rel='preload' с onload использовал только на страницах мужских часов и на главной странице. Буду рад любой помощи и совету!
Николай С.
28 лет, США
273 сообщения
#2 месяца назад
Css наоборот нужно размещать как можно выше.
Иван Попович
26 лет, Украина
60 сообщений
#2 месяца назад
Попробуйте такую функцыю, если у вас подключен jQuery 
$(window).load(function() {$('html head').append('<link href="style.css" rel="stylesheet">')});




P.S ваш сайт не грузится в fireFox 
Приложения:
  • 538 КБ
Андрей В.
26 лет, Украина
664 сообщения
онлайн
#2 месяца назад
Грузите в голове <head> хотя бы основные стили структуры... а js подкл.  остальное...
Жандос Мукатаев
20 лет, Казахстан
117 сообщений
#2 месяца назад
Доброе утро!

Можете ссылку на сайт скинуть?

Насчет блокирующих стилей. Надо стили 1 экрана вставить между <head></head>. Все остальное в обычном файле .css.

По Javascript. Все в футер + async or defer прописать на все ссылки.