Приветствую.
На любом современном сайте подгружается множество скриптов. Применительно к инстанту — почти каждый компонент, модуль или плагин добавляет свой скрипт, без которого его работа невозможна. Количество подключаемых файлов может достигать несколько десятков (я у себя насчитал 25 файлов — js и css)...
Есть такая замечательная библиотека, как google minify. Она умеет объединять, уменьшать и кэшировать js и css файлы. Соответствующий плагин уже есть для Wordpress (называется WP-Minify).
Согласно тестам над WordPress использование библиотеки позволяет сократить количество HTTP-запросов и уменьшить объем CSS и JavaScript-файлов до 70%.
Кому интересно почитать про библиотеку, кидаю ссылки
1. http://code.google.com/p/minify/ отсюда можно скачать последнюю версию
2. htmlbook.ru
2. положить папку min/ в корень сайта (библиотека minify)
3. включить плагин в админке
4. по умолчанию он будет работать только под админом — проверить. Если все работает как надо, в настройках плагина включить его для всех (поставить ноль в поле "Режим тестирования").
Можно объединить скрипты в группу в файле min/groupsConfig.php. И подключать в шаблоне как
Где css — это название группы в файле groupsConfig (в файле есть пример создания такой группы).
Плагин качать тут
Библиотеку прямо с гуглкода
На любом современном сайте подгружается множество скриптов. Применительно к инстанту — почти каждый компонент, модуль или плагин добавляет свой скрипт, без которого его работа невозможна. Количество подключаемых файлов может достигать несколько десятков (я у себя насчитал 25 файлов — js и css)...
Есть такая замечательная библиотека, как google minify. Она умеет объединять, уменьшать и кэшировать js и css файлы. Соответствующий плагин уже есть для Wordpress (называется WP-Minify).
Ну а чем мы хуже?
Немного покопавшись, написал плагин для InstantCMS — работает на версиях 1.8 и 1.9. Его задача — перед выводом скриптов в шаблон обработать их и объединить в один.Согласно тестам над WordPress использование библиотеки позволяет сократить количество HTTP-запросов и уменьшить объем CSS и JavaScript-файлов до 70%.
Кому интересно почитать про библиотеку, кидаю ссылки
1. http://code.google.com/p/minify/ отсюда можно скачать последнюю версию
2. htmlbook.ru
Группе, к которой вы принадлежите, запрещено просматривать этот скрытый текст
Установка плагина проста до невозможности:
1. положить плагин в папку с плагинами2. положить папку min/ в корень сайта (библиотека minify)
3. включить плагин в админке
4. по умолчанию он будет работать только под админом — проверить. Если все работает как надо, в настройках плагина включить его для всех (поставить ноль в поле "Режим тестирования").
Можно объединить скрипты в группу в файле min/groupsConfig.php. И подключать в шаблоне как
Плагин качать тут
Библиотеку прямо с гуглкода
В конфиге можно еще увеличить время кэширования, там стоит 30 минут по умолчанию - можно выставить, скажем неделю.
для работы хватит одной min
Вот так в UTF отображается название плагина в админке
и не совсем понял как у куда вставлять CSS и скрипты?
можно пример файла?
ятак понял файлы CSS и скрипты надо вынести из шаблона вообще?
вообще я собирался указать cp1251 - но мог пропустить..
у меня сайт уже работает на UTF, и плагин использую под эту кодировку
'jsmain' => array(
'//includes/jquery/jquery.js',
'//core/js/common.js',
'//includes/jquery/jquery.timers.js'
),
'css' => array(
'//templates/_default_/css/nyromodal.css',
'//templates/_default_/css/reset.css',
'//templates/_default_/css/text.css',
'//templates/_default_/css/screen.css',
'//templates/_default_/css/1180.css',
'//templates/_default_/css/styles.css',
'//templates/_default_/css/last.css',
'//templates/_default_/css/pechenuka.css',
'//news/wp-content/plugins/wp-postratings/postratings-css.css',
'//search/search.css',
'//includes/jquery/jquery.cluetip.css',
'//modules/mod_leftmenu/wp-dtree-30/wp-dtree.min.css'
)
}
это в файле groupsConfig.php, ну а в шаблоне подключаю <link href="/min/g=css" rel="stylesheet" />
"//" - в начале именно две кавычки, это важно
Я правильно понял?)
добавил все js файлы таким образом, затем и css файлы:
Нажал "update" и получил ссылку
Которую и вставил вместо своих ссылок на js и css фалов
Поясню зачем объединять в группы - вот например у вас в template.php прописаны несколько скриптов и они плагином не обработаются, потому что он работает только с теми, что загружаются процедурой <?php cmsPrintHead(); ?> .
И вот эти скрипты, которые в template.php можно и объединить в одну группу и подгружать за один 1 раз (1 файл для js, 1 файл для css)
Но, конечно, можно и без групп
<script type="text/javascript" src="/includes/jquery/jquery.js"></script>
<script type="text/javascript" src="/core/js/common.js"></script>
после
<meta name="generator" content="InstantCMS - instantcms.ru"/>;
В каком файле можно править эти 2 строчки?
тут
SJen захожу на сайт и каспер ругается
никаких познаний в областях программирования не требуется. Для более тонкой настройке - нужны какие-то знания, а для простой установки плагина - ничего не надо..
киньте в личку ссылку, посмотрю.
плагин обработает только то, что возвращает функция cmsPrintHead(), вызываемая в шаблоне
напиши плиз в аську если не сложно
он обрабатывает только те вещи, что добавили через функцию addHeadJS (так добавляют скрипты компоненты, модули, некоторые плагины)
PS в аську стукну
1. закачан плагин в папку с плагинами
2. Включен в админке.
3. положить папку min/ в корень сайта (библиотека minify)
Как проверить, что все работает "как надо"?
//jQuery библиотека echo '<script type="text/javascript" src="/includes/jquery/jquery.js"></script>' ."\n"; //JS-функции ядра echo '<script type="text/javascript" src="/core/js/common.js"></script>' ."\n";если сайт открывается как раньше, косяков нет и среди загруженных скриптов есть файл такого вида "min/f=" - значит все как надо.
Если что-то не работает, то не "как надо")
GET /min/f=components/maps/systems/yandex/geo.js,components/maps/js/map.js,includes/jquery/jquery.form.js,,components/maps/city_select/nyromodal.js,components/maps/city_select/select.js 400 (Bad Request)
проверю, как у меня работает
2. положить папку min/ в корень сайта (библиотека minify)
я наивно полагал, что второй пункт моей инструкции как раз однозначно и говорит о том, какую папку надо положить в корень сайте:))
еще две папки для разработки, тестирования, ну и еще может для каких-то целей... описание и тд
Там кстати инструкция где-то есть (MIN.txt или Readme.txt) и там тоже написано, что нужно положить папку min/ в корень.
Я просто не планирую пока дописывать этот плагин, поэтому поделился "как есть". Сейчас нет на него времени, да и устраивает он и в таком варианте. А вообще, на его основе можно создать шикарную систему для оптимизации js и css файлов.
Еще момент - js скрипты ЛУЧШЕ подгружать в конце, перед закрывающимся </body>. У меня на сайте так и есть, можно увидеть в исходном коде. Большая часть грузится в конце, ну и немножко в начале (jquery.js обязательно в начале надо, иначе откажут работать некоторые скрипты, расположенные прямо в коде страницы)
2. напишите мне в личку адрес сайта, я посмотрю и отвечу в чем дело(только вам придется меня админом сделать на время, чтобы я увидел результат). Ну и предложу вариант ускорения, если не на 100% как задумано, то хотя бы максимально с учетом особенностей карты.
Но это все завтра.
если я сам буду делать универсальную версию с максимальной оптимизацией на скорость и с учетом работы всех компонентов, то версия точно будет платной) Я же наоборот хотел дать очень простое бесплатное решение, которое каждый сам сможет "помучить".
хотя и не такой хороший как вместе со скриптами
Но если добавить кэширование скриптов на сервере, то будет очень приличная штука
Сделаю кэш, вещь очень нужная, по сроками ничего не обещаю но обязательно доберусь
Ну а насчет "включения многих компонентов" - аудитория пока не готова к полному погружению, будем постепенно включать.