Оптимизация CSS, JS и решение проблемы.

опросы про оптимизацию

 
Посетитель
small user social cms
Медаль
Сообщений: 881
Час Всем Добрый!
Подскажите чайнику про оптимизацию CSS, JS на сайте.
То есть делаю анализ сайта выдает ошибку:

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Количество блокирующих скриптов на странице: 11. Количество блокирующих ресурсов CSS на странице: 20. Они замедляют отображение контента. Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Удалите код JavaScript, препятствующий отображению:
Ниже приведены ссылки не посредственно на JS
templates/default/js/jquery.js
templates/default/js/jquery-modal.js
templates/default/js/core.js
templates/default/js/modal.js
templates/default/js/jquery-cookie.js
и т. д.

Оптимизируйте работу CSS на следующих ресурсах:
Ниже приведены ссылки не посредственно на CSS
…ontrollers/groups/widgets/list/style.css
templates/default/css/widget_count.css
…templates/news/css/adaptive-fluid-12.css
templates/news/css/theme-text.css
templates/news/css/theme-layout.css
templates/default/css/theme-gui.css
и т. д.

Оптимизацию CSS это понятно, гугл в помощь, нашел но все тоже самое.
А вот как без болезненно удалить JS вот это я не понял.

Просьба ГУРУ Инстанта подскажите. Как отложить загрузку этих ресурсов или загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Как это сделать?
Ростов 161 - Городской портал
Посетитель
small user social cms
Медаль
Сообщений: 539
MegaRostov:

Час Всем Добрый!
Подскажите чайнику про оптимизацию CSS, JS на сайте.
То есть делаю анализ сайта выдает ошибку:

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Количество блокирующих скриптов на странице: 11. Количество блокирующих ресурсов CSS на странице: 20. Они замедляют отображение контента. Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Удалите код JavaScript, препятствующий отображению:
Ниже приведены ссылки не посредственно на JS
templates/default/js/jquery.js
templates/default/js/jquery-modal.js
templates/default/js/core.js
templates/default/js/modal.js
templates/default/js/jquery-cookie.js
и т. д.

Оптимизируйте работу CSS на следующих ресурсах:
Ниже приведены ссылки не посредственно на CSS
…ontrollers/groups/widgets/list/style.css
templates/default/css/widget_count.css
…templates/news/css/adaptive-fluid-12.css
templates/news/css/theme-text.css
templates/news/css/theme-layout.css
templates/default/css/theme-gui.css
и т. д.

Оптимизацию CSS это понятно, гугл в помощь, нашел но все тоже самое.
А вот как без болезненно удалить JS вот это я не понял.

Просьба ГУРУ Инстанта подскажите. Как отложить загрузку этих ресурсов или загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Как это сделать?

Рекомендую сильно не заморачиваться с подобными проблемами...

https://validator.w3.org/nu/?doc=https%3A%2F%2Fyandex.ru%2F
https://validator.w3.org/nu/?doc=http%3A%2F%2Fedition.cnn.com%2F

... (без комментариев).
instantcms.su - официальная поддержка SiteKreator, UserPay, SiteStroi, ForumKreator
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 881
Это конечно понятно, НО хочется что бы сайт быстрее загружался, а то он немного притормаживает.
Ростов 161 - Городской портал
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2592
MegaRostov:
Это конечно понятно, НО хочется что бы сайт быстрее загружался, а то он немного притормаживает
Ну переместите все скрипты вниз сайта)
Будет сначала каша загружаться потом может быть соберется страница какой вы её задумывали.
На вид бред, но гугл спид тестер будет доволен может быть)

nmsk, поскольку это гугл несет бред, то я бы привел другой пример

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.youtube.com%2F&tab=mobile

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Количество блокирующих скриптов на странице: 1. Количество блокирующих ресурсов CSS на странице: 4. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Удалите код JavaScript, препятствующий отображению:
https://www.youtube.com/…s/jsbin/scheduler-vflFMss6b/scheduler.js
Оптимизируйте работу CSS на следующих ресурсах:
https://www.youtube.com/yts/cssbin/www-core-webp-vflu4vxpV.css
https://www.youtube.com/…ts/cssbin/www-home-c4-webp-vflKPF9of.css
https://www.youtube.com/…/cssbin/www-pageframe-webp-vfl4FZ1R8.css
https://www.youtube.com/yts/cssbin/www-guide-webp-vflMF99u3.css
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2592
MegaRostov:

Удалите код JavaScript, препятствующий отображению:
Ниже приведены ссылки не посредственно на JS
templates/default/js/jquery.js
templates/default/js/jquery-modal.js
templates/default/js/core.js
templates/default/js/modal.js
templates/default/js/jquery-cookie.js
и т. д.

Из этого списка судя по названию скриптов возможно можно переместить вниз

templates/default/js/jquery-modal.js
templates/default/js/modal.js
Посетитель
small user social cms
Медаль
Сообщений: 925
Ну при желании все цсс можно положить в один файл, но если придется править? Так что не в этом главное для сайта
Анапа объявления
Быстрый хостинг
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 2223
MegaRostov:
Это конечно понятно, НО хочется что бы сайт быстрее загружался, а то он немного притормаживает.
Самые большие тормоза для Инстанта - это большой размер изображений!!!
Если у вас нет проблем и все изображения оптимизированы, то с остальным не стоит заморачиваться, прирост скорости загрузки будет, но не значительный.
Лучшее место для вашего сайта!
Посетитель
small user social cms
Медаль
Сообщений: 881
vikont, Capitan, Нил™, nmsk, Ребята тогда подскажите как это минимизировать и оптимизировать?

<link rel="stylesheet" type="text/css" href="/templates/default/controllers/groups/widgets/list/style.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/widget_count.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/adaptive-fluid-12.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/theme-text.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/theme-layout.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/theme-gui.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/theme-widgets.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/theme-content.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/theme-modal.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/add.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/styles-lists.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/wiki.css">
<link rel="stylesheet" type="text/css" href="/templates/default/controllers/photos/styles.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/jquery-owl.carousel.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/my-owl-two-style.css">
<link rel="stylesheet" type="text/css" href="/templates/default/pgw/pgwslider.css">
<link rel="stylesheet" type="text/css" href="/templates/default/controllers/problems/problem-wdg.css">
<link rel="stylesheet" type="text/css" href="/templates/default/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/templates/default/controllers/datecalendar/css/datecalendar.css">
<script type="text/javascript" src="/templates/default/js/jquery.js"></script>
<script type="text/javascript" src="/templates/default/js/jquery-modal.js"></script>
<script type="text/javascript" src="/templates/default/js/core.js"></script>
<script type="text/javascript" src="/templates/default/js/modal.js"></script>
<script type="text/javascript" src="/templates/default/js/jquery-cookie.js"></script>
<script type="text/javascript" src="/templates/default/js/wiki.js"></script>
<script type="text/javascript" src="/templates/default/js/photos.js"></script>
<script type="text/javascript" src="/templates/default/js/jquery-flex-images.js"></script>
<script type="text/javascript" src="/templates/default/js/jquery-owl.carousel.js"></script>
<script type="text/javascript" src="/templates/default/pgw/pgwslider.js"></script>
<script type="text/javascript" src="/templates/default/js/jquery-ui.js"></script>
<script type="text/javascript">


Так что бы быстрее загружался сайт?
Ростов 161 - Городской портал
Посетитель
small user social cms
Медаль
Сообщений: 881
vikont, А вот с изображениями нужно тоже что то думать....
Ростов 161 - Городской портал
Посетитель
small user social cms
Медаль
Сообщений: 925
Поместь все цсски в один файл, но его потом нужно прописать там куда подключались объединенные цсски и все. Но опять же напоминаю, если вы будите обновлять компоненты или править что-то это вызовет некоторые сложности.
Анапа объявления
Быстрый хостинг
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2592
А что с изображениями не так на инстанте?
Знаю только одну проблему, в первой ветке, это изображения из блогов если их выводить в модуле новые посты на главной странице или в блоке похожие посты то они выводятся как есть, в полном размере, что действительно неоправданно нагружает страницу. Ради присутствия превью 100 на 100 пикселей в модуле пихать туда полную картинку 800 на 600 пикселей сжатую исключительно средствами css - не очень правильно. Я у себя сделал превью тут http://instantcms.ru/blogs/sekretnye-materialy/prveyu-izobrazhenii-iz-blogov-dlja-modulja-blog-i-plagina-pohozhie-posty.html описал для первой ветки.
Других проблем с изображениями в контексте данной темы не припомню.

MegaRostov:
Ребята тогда подскажите как это минимизировать и оптимизировать?
Минимизировать код можно сократив его.
В Notepad удалить все пустые строки и переносы строк, комментарии. Но обычно это даёт всего 5-10 килобайт экономии, что в наше время не серьёзно называть.

В принципе, если вы не колдуете постоянно над сайтом и не делаете мелкие правки каждый день как это делаю я) можно css в список кэшируемых файлов.

Я у себя кэширую только изображения на месяц

Код PHP:
  1. <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|pdf)$">
  2. Header set Cache-Control "max-age=2592000"
  3. </FilesMatch>
JS - кэшировать не хочу, подозреваю что это может иногда привести к неожиданным последствиям, когда какой то код может отработать не так как нужно. Не помню с чего это взял).

MegaRostov,
Из вашего списка я думаю точно можно поместить вниз всё что относится к вызову модального окна, и далее пробуйте другие скрипты и стили загрузка которых не влияет на отрисовку самой страницы. Вроде карусель и слайд можно вниз, photos.js не знаю за что отвечает, пробуйте смотрите как загружается страница.
Посетитель
small user social cms
Медаль
Сообщений: 539
Capitan:

Поместь все цсски в один файл, но его потом нужно прописать там куда подключались объединенные цсски и все. Но опять же напоминаю, если вы будите обновлять компоненты или править что-то это вызовет некоторые сложности.

Не думаю что целесообразно.. весить будет потом всё гораздо больше чем сейчас..
Икмс ведь при посещении определенной страницы подгружает не все css и js, а только те, которые используются на ней.
Если всё собрать в одну "кучу", можно всё только усугубить...
instantcms.su - официальная поддержка SiteKreator, UserPay, SiteStroi, ForumKreator
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 2223
MegaRostov:
vikont, А вот с изображениями нужно тоже что то думать....
С изображениями немного проще, хотя и геморно... Я скачиваю полностью папку с изображениями и пропускаю все файлы через программу FastStone Image Viewer в пакетном режиме. Качество выставляю 60% (кстати и в настройках сайта загрузка изображений тоже с качеством 60%), а остальные характеристики по вашему усмотрению, все зависит от желаемого качества. И не оставляйте на сайте ОРИГИНАЛЫ - если конечно они не главный контент сайта.
Потом обработанная папка копируется назад на хостинг..
Существуют некие скрипты для сжатия прямо на хостинге, но ни с одним пока не удалось разобраться. Гугл конечно жмет очень сильно и практически без потери видимого качества, но где ж взять тот скрипт.
Еще можно скачать предложенный гуглом вариант оптимизации..... НО! Он подлец складывает все в одну папку и поди потом разберись что и откуда https://developers.google.com/speed/pagespeed/insights/ - проверка оптимизированности сайта и там же скачать оптимизированные файлы.

Кстати. Еще раз про оптимизацию CSS и JS после их оптимизации редактирование крайне затруднительно! Оптимизация заключается в удалении пробелов!!!!!
Редактировалось: 1 раз (Последний: 1 июля 2017 в 00:33)
Лучшее место для вашего сайта!
InstantCMS Team
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 4336
vikont:
Самые большие тормоза для Инстанта - это большой размер изображений!!!
Самые большие тормоза для InstantCMS, это не желающие разбираться пользователи joke Тормоза - это не пользователи, а объединённые ситуации и профанские мнения.
Что мешает настроить пресеты изображений как вам нужно? 100% качества - это большой размер фото, высокое качество изображения. Скажем, 70% - уже меньший размер фото и чуть меньшее качество. Всё это настраивается в админке.

MegaRostov:
Подскажите чайнику про оптимизацию CSS, JS на сайте
Не нужно заниматься ненужным. Занимайтесь тем, чтобы ваш сайт был интересен людям, а не тестам. Оптимизацией занимаются ТОЛЬКО, если в этом возникла необходимость и вы получите от этого очевидную выгоду. То, что вы понравитесь всяким тестам, ровным счетом ничего не значит.
Видео каталог для InstantCMS | Аудио каталог для InstantCMS | Мы Вконтакте | Предложение для спонсоров
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2781
MegaRostov, некоторые вещи можено решить достаточно просто.
К примеру, тот же гугловский тест предлагает воспользоваться всем готовым. На скрине внизу.
С картинками не рекомендую возиться (лучше систему донастроить). А вот скрипты и стили заменить на сервере займёт пару минут.
Украинский для инстант
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.