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

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

1
2
3
Следующая
Показаны 1-15 из 36

#1 30 июня 2017 в 18:16

Час Всем Добрый!
Подскажите чайнику про оптимизацию 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 - Городской портал

#2 30 июня 2017 в 18:42

Час Всем Добрый!
Подскажите чайнику про оптимизацию 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.

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

MegaRostov

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

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

… (без комментариев).

instantcms.su - официальная поддержка SiteKreator, UserPay, SiteStroi, ForumKreator

#3 30 июня 2017 в 19:15

Это конечно понятно, НО хочется что бы сайт быстрее загружался, а то он немного притормаживает.

Ростов 161 - Городской портал

Сегодня в 13:23

#4 30 июня 2017 в 19:56

Это конечно понятно, НО хочется что бы сайт быстрее загружался, а то он немного притормаживает
MegaRostov

Ну переместите все скрипты вниз сайта)
Будет сначала каша загружаться потом может быть соберется страница какой вы её задумывали.
На вид бред, но гугл спид тестер будет доволен может быть)

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

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

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

#5 30 июня 2017 в 19:59

Удалите код 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
и т. д.

MegaRostov

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

templates/default/js/jquery-modal.js
templates/default/js/modal.js

#6 30 июня 2017 в 20:16

Ну при желании все цсс можно положить в один файл, но если придется править? Так что не в этом главное для сайта

Учусь творить

#7 30 июня 2017 в 21:31

Это конечно понятно, НО хочется что бы сайт быстрее загружался, а то он немного притормаживает.
MegaRostov

Самые большие тормоза для Инстанта — это большой размер изображений!!!
Если у вас нет проблем и все изображения оптимизированы, то с остальным не стоит заморачиваться, прирост скорости загрузки будет, но не значительный.

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#8 30 июня 2017 в 21:37

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 - Городской портал

#9 30 июня 2017 в 21:38

vikont, А вот с изображениями нужно тоже что то думать…

Ростов 161 - Городской портал

#10 30 июня 2017 в 21:57

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

Учусь творить

#11 30 июня 2017 в 22:07

А что с изображениями не так на инстанте?
Знаю только одну проблему, в первой ветке, это изображения из блогов если их выводить в модуле новые посты на главной странице или в блоке похожие посты то они выводятся как есть, в полном размере, что действительно неоправданно нагружает страницу. Ради присутствия превью 100 на 100 пикселей в модуле пихать туда полную картинку 800 на 600 пикселей сжатую исключительно средствами css — не очень правильно. Я у себя сделал превью тут instantcms.ru/blogs/sekretnye-materialy/prveyu-izobrazhenii-iz-blogov-dlja-modulja-blog-i-plagina-pohozhie-posty.html описал для первой ветки.
Других проблем с изображениями в контексте данной темы не припомню.

Ребята тогда подскажите как это минимизировать и оптимизировать?
MegaRostov

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

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

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

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|pdf)$">
  Header set Cache-Control "max-age=2592000"
</FilesMatch>

JS — кэшировать не хочу, подозреваю что это может иногда привести к неожиданным последствиям, когда какой то код может отработать не так как нужно. Не помню с чего это взял).

MegaRostov,
Из вашего списка я думаю точно можно поместить вниз всё что относится к вызову модального окна, и далее пробуйте другие скрипты и стили загрузка которых не влияет на отрисовку самой страницы. Вроде карусель и слайд можно вниз, photos.js не знаю за что отвечает, пробуйте смотрите как загружается страница.

#12 30 июня 2017 в 22:18

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

Capitan

Не думаю что целесообразно… весить будет потом всё гораздо больше чем сейчас..
Икмс ведь при посещении определенной страницы подгружает не все css и js, а только те, которые используются на ней.
Если всё собрать в одну "кучу", можно всё только усугубить…

instantcms.su - официальная поддержка SiteKreator, UserPay, SiteStroi, ForumKreator

#13 1 июля 2017 в 00:31

vikont, А вот с изображениями нужно тоже что то думать....
MegaRostov

С изображениями немного проще, хотя и геморно… Я скачиваю полностью папку с изображениями и пропускаю все файлы через программу FastStone Image Viewer в пакетном режиме. Качество выставляю 60% (кстати и в настройках сайта загрузка изображений тоже с качеством 60%), а остальные характеристики по вашему усмотрению, все зависит от желаемого качества. И не оставляйте на сайте ОРИГИНАЛЫ — если конечно они не главный контент сайта.
Потом обработанная папка копируется назад на хостинг..
Существуют некие скрипты для сжатия прямо на хостинге, но ни с одним пока не удалось разобраться. Гугл конечно жмет очень сильно и практически без потери видимого качества, но где ж взять тот скрипт.
Еще можно скачать предложенный гуглом вариант оптимизации… НО! Он подлец складывает все в одну папку и поди потом разберись что и откуда developers.google.com/speed/pagespeed/insights/ — проверка оптимизированности сайта и там же скачать оптимизированные файлы.

Кстати. Еще раз про оптимизацию CSS и JS после их оптимизации редактирование крайне затруднительно! Оптимизация заключается в удалении пробелов!!!

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#14 1 июля 2017 в 02:41

Самые большие тормоза для Инстанта — это большой размер изображений!!!
vikont

Самые большие тормоза для InstantCMS, это не желающие разбираться пользователи joke

Тормоза — это не пользователи, а объединённые ситуации и профанские мнения.
Что мешает настроить пресеты изображений как вам нужно? 100% качества — это большой размер фото, высокое качество изображения. Скажем, 70% — уже меньший размер фото и чуть меньшее качество. Всё это настраивается в админке.

Подскажите чайнику про оптимизацию CSS, JS на сайте
MegaRostov

Не нужно заниматься ненужным. Занимайтесь тем, чтобы ваш сайт был интересен людям, а не тестам. Оптимизацией занимаются ТОЛЬКО, если в этом возникла необходимость и вы получите от этого очевидную выгоду. То, что вы понравитесь всяким тестам, ровным счетом ничего не значит.

🛠 docs.instantcms.ru

#15 1 июля 2017 в 09:46

MegaRostov, некоторые вещи можено решить достаточно просто.
К примеру, тот же гугловский тест предлагает воспользоваться всем готовым. На скрине внизу.
С картинками не рекомендую возиться (лучше систему донастроить). А вот скрипты и стили заменить на сервере займёт пару минут.

Украинский для инстант

1
2
3
Следующая
Показаны 1-15 из 36

Связи и инстантмапс 2 (instant

InstantCMS version 2.7.

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

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

Похожие темы

Оптимизация таблицы _ratings

Можно ли в админке добавить css-стиль без заливки дополнительного css файла?

Шаблон три колонки и решение Знакомства

[ЕСТЬ РЕШЕНИЕ] как Изолировать блок от css системы ?

Нужна помощь в решении проблемы

[ЕСТЬ РЕШЕНИЕ] Ошибка Неизвестный столбец 'w.image_hint_path' в 'field list'

InstantCMS Team

О проекте

Поддержка

Дополнения