Один из вердиктов developers.google.com следующий: Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение
Количество блокирующих скриптов на странице: 12. Количество блокирующих ресурсов CSS на странице: 4. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Удалите код JavaScript, препятствующий отображению:
.../hostcmsfiles/jquery/jquery.js
.../hostcmsfiles/jquery/jquery.validate.js
...
.../hostcmsfiles/ajax/JsHttpRequest.js
.../hostcmsfiles/ajax/ajax.js
.../hostcmsfiles/main.js
.../…tcmsfiles/jquery/bbedit/jquery.bbedit.js
.../…tcmsfiles/jquery/stars/jquery.ui.core.js
.../…msfiles/jquery/stars/jquery.ui.widget.js
.../…cmsfiles/jquery/stars/jquery.ui.stars.js
.../templates/balu/js/shoppica.js Оптимизируйте работу CSS на следующих ресурсах:
.../…emplates/template13/style.css?1439027748
.../…emplates/template14/style.css?1439027748 - этот имеет одну запись /*index*/
.../templates/balu/stylesheet/screen.css - шаблон
.../templates/balu/stylesheet/color.css - шаблон
Есть некие пояснения -
но честно говоря не ясно ....
как прокомментируют спецы это дело!?
Спасибо.
Итак. Речь здесь идёт об оптимизации вашего фронтенда. И если это все предложенные вам изменения, то он уже у вас достаточно неплох. Но попробуем улучшить.
Первое: склейте весь ваш css в один файл. Это сократит количество запросов.
Второе: cклейте весь ваш js в файлы не более 150кб. 150кб не догма и это значение для меня оказалось оптимальным. Тоже сократит запросы.
Третье: JS библиотеки с CDN. Возможно они уже закешированы в браузере.
Теперь интереснее.
После того как браузер получает html с сервера, он начинает строить DOM дерево. Скрипты и стили в шапке замедляют загрузку дерева тк на их обработку тоже требуется время. Все они загружаются последовательно. Чтобы этого избежать я рекомендую перенести скрипты в подвал.
Также, можно выделить код который не взаимодействует с DOM деревом и загрузить его асинхронно. Прогуглите на тему script async. Только не добавляйте этот атрибут бездумно. Тест гугла вы пройдёте конечно, но на устройствах с плохим качеством соединения (и не только на них) периодически могут возникать проблемы вроде неотработавших/неправилно отработавших скриптов.
Теперь css. Неплохо его оптимизировать. Минификация + mq_packer + uncss. Если вы работаете под windows, то уверяю, вас ждёт увлекательный квест по установке и настройке всего этого. Иконки тоже кодировать в css (если шрифт не используете).
Про блокирующий css - это скорее миф чем правда. Если следовать инструкциям, то нужно будет в идеале разбить css на несколько частей: "критически важный для отображения" и "весь остальной". Критически важный (гриды и бекграунды например) вкладываем в шапку (в <style> в идеале) а остальной перед закрывающим тегом body. Также помнится гугл советовал заинлайнить некоторые стили (привет 90-e), но это, кажется мне, уже на грани маразма.
PS
Все эти манипуляции не принесут вам сильного прироста к скорости загрузки страницы.
Как показывает практика, гораздо больше времени грузятся картинки....