Ускорение загрузки сайта (оптимизация js и css скриптов)

3408
Приветствую.

На любом современном сайте подгружается множество скриптов. Применительно к инстанту - почти каждый компонент, модуль или плагин добавляет свой скрипт, без которого его работа невозможна. Количество подключаемых файлов может достигать несколько десятков (я у себя насчитал 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. И подключать в шаблоне как
Код PHP:
<link href="/min/g=css" rel="stylesheet"  />
Где css - это название группы в файле groupsConfig (в файле есть пример создания такой группы).

Плагин качать тут
Библиотеку прямо с гуглкода
Хак Компонента iChat (от Maxisoft) | Доработка для каталога статей "Версия для печати"
Комментарии (66)
abasia 29 мая 2012 в 17:15 0
Полезно, отправил бы спасибо на кошелёк, но где координаты?
letsgo 29 мая 2012 в 17:44 0
Молодец Sjen всегда откопаешь что нить интересное) плюсую.
ivanish 29 мая 2012 в 17:55 0
Если набрать домен/min можно кое-что увидеть :)
SJen 29 мая 2012 в 18:07 0
Если в конфиге поставить $min_enableBuilder = false;, то можно будет увидеть только редирект на главную.
В конфиге можно еще увеличить время кэширования, там стоит 30 минут по умолчанию - можно выставить, скажем неделю.
Black-Raven90 29 мая 2012 в 18:12 0
А папки min_extras и min_unit_tests нужны? Или загружать только min?
SJen 29 мая 2012 в 18:19 0
одна папка для тестирования, вторая с какими-то дополнениями похоже..

для работы хватит одной min
Anonim 29 мая 2012 в 19:05 0
Минимизация js и css файлов

Вот так в UTF отображается название плагина в админке
Def 29 мая 2012 в 19:11 -1
аналогично.

и не совсем понял как у куда вставлять CSS и скрипты?

можно пример файла?

ятак понял файлы CSS и скрипты надо вынести из шаблона вообще?
Tarhun 29 мая 2012 в 19:43 0
кодировку файла plugin.php на нужную поменяйте через блокнот, потом заного установите.
SJen 29 мая 2012 в 20:38 0
значит надо у plugin.php сменить кодировку
вообще я собирался указать cp1251 - но мог пропустить..

у меня сайт уже работает на UTF, и плагин использую под эту кодировку
Anonim 29 мая 2012 в 19:08 0
Каким образом в файле http://pechenuka.ru/min/groupsConfig.php вы подключали все js и css?
SJen 29 мая 2012 в 20:41 +2
return array(
'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" />
"//" - в начале именно две кавычки, это важно
Tarhun 29 мая 2012 в 19:20 0
Как я понял, можно не объединять скрипты в группу, т.е. никуда не вставлять css и скрипты. Это по желанию. Если просто установить как написано в посте, выполнив все 4 пункта, все будет работать, т.е. сайт будет быстрее грузиться.

Я правильно понял?)
Anonim 29 мая 2012 в 19:33 0
Вы пробовали установить???
Tarhun 29 мая 2012 в 19:40 0
Да, но все равно ссылки к css и js файлам не изменились в исходном коде сайта, пришлось ручками прописать до такого вида - http://example.ru/min/?f=themes/default/style.css, что бы скрипт работал
Anonim 29 мая 2012 в 19:50 0
А можете подробнее рассказать где прописали?
Tarhun 29 мая 2012 в 19:57 0
удалил плагин, закинул папку "min" в корень сайта, зашел по адресу - http://сайт.ru/min/builder/
добавил все js файлы таким образом, затем и css файлы:

Нажал "update" и получил ссылку

Которую и вставил вместо своих ссылок на js и css фалов
Tarhun 29 мая 2012 в 20:11 0
лучше было бы через плагин, но хз почему он не работает у меня...
SJen 29 мая 2012 в 21:01 0
плагин просто на лету готовит ссылки, скажем установите вы новый компонент - и плагин все новые скрипты тоже обработает.. не руками же править код компонента, чтобы поменять вызов скрипта или css
Anonim 29 мая 2012 в 21:18 0
Тоесть прописывать ничего не нужно?
SJen 29 мая 2012 в 21:20 0
все будет работать и без прописывания
SJen 29 мая 2012 в 20:44 0
да, все верно.
Поясню зачем объединять в группы - вот например у вас в template.php прописаны несколько скриптов и они плагином не обработаются, потому что он работает только с теми, что загружаются процедурой <?php cmsPrintHead(); ?> .

И вот эти скрипты, которые в template.php можно и объединить в одну группу и подгружать за один 1 раз (1 файл для js, 1 файл для css)

Но, конечно, можно и без групп
Tarhun 29 мая 2012 в 21:03 0
Т.к. у меня что то не стал работать плагин, пришлось прописывать ссылки самому ссылки. Можно узнать, в стандартном шаблоне в хеадере от куда-то подгружаются
<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 29 мая 2012 в 21:30 +1
core/classes/page.class.php
тут
Tarhun 29 мая 2012 в 21:38 0
Спасибо!
eoleg 29 мая 2012 в 19:22 0
MySt1art.class Обнаружено: Exploit.Java.CVE-2012-0507.ho 29.05.2012 19:20:32
SJen захожу на сайт и каспер ругается
SJen 29 мая 2012 в 20:47 0
в личку написал
eoleg 29 мая 2012 в 19:23 0
еще в фаербаге xmlns:og="http://ogp.me/ns#"
SJen 29 мая 2012 в 21:06 0
eoleg:
еще в фаербаге xmlns:og="http://ogp.me/ns#"
это для opengraph, Яша попросил обязательно добавить - иначе он не воспринимает opengraph разметку
Dorimen 29 мая 2012 в 21:16 0
Немного куцая документация по использованию. :))) Ребята, не все же программируют. Многие просто обычные более-менее продвинутые юзеры. Можно ли попросить ТС расписать более подробнее вариант с подключением? Ну вроде как выполнили 4 шага, которые Вы указали, то какого-то толка особого нет. Файлы стилей и джава-скриптов грузятся отдельно.
SJen 29 мая 2012 в 21:18 0
если плагин включен в админке, то должно работать
никаких познаний в областях программирования не требуется. Для более тонкой настройке - нужны какие-то знания, а для простой установки плагина - ничего не надо..

киньте в личку ссылку, посмотрю.
Anonim 29 мая 2012 в 21:24 0
Так что получается - нужно включить плагин и он автоматом все JS из модулей и компонентов, а также css ?
SJen 29 мая 2012 в 21:29 0
да, все - ну кроме jquery.js и тех, что руками прописаны в template.php
плагин обработает только то, что возвращает функция cmsPrintHead(), вызываемая в шаблоне
Dorimen 29 мая 2012 в 21:32 0
Если включить Ваш плагин, но не грузятся объекты на iMaps.
Def 29 мая 2012 в 21:43 0
Код PHP:
 и тех, что руками прописаны в template.php
т.е их не удалять?

напиши плиз в аську если не сложно
SJen 29 мая 2012 в 23:32 0
плагин не сможет обработать то, что прописано руками в шаблоне
он обрабатывает только те вещи, что добавили через функцию addHeadJS (так добавляют скрипты компоненты, модули, некоторые плагины)

PS в аську стукну
Anonim 29 мая 2012 в 21:34 0
Что было сделано:

1. закачан плагин в папку с плагинами
2. Включен в админке.
3. положить папку min/ в корень сайта (библиотека minify)

Как проверить, что все работает "как надо"?
Anonim 29 мая 2012 в 21:35 0
а если jquery.js прописать в page.class

Код PHP:
    //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";
и там же прописать styles.css Главный, шаблона?
SJen 29 мая 2012 в 23:33 +1
Как проверить, что все работает "как надо"?

если сайт открывается как раньше, косяков нет и среди загруженных скриптов есть файл такого вида "min/f=" - значит все как надо.

Если что-то не работает, то не "как надо")
ivanish 29 мая 2012 в 21:46 0
Как обычно МАПС сказал нет

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)
SJen 29 мая 2012 в 23:30 0
в вашем примере кривые параметры - ",," - две запятых подряд
проверю, как у меня работает
letsgo 29 мая 2012 в 22:01 -2
Вот Sjen всегда так) Напишет нужное, но видно в голове уже процесс понял и не распишет как сделать. Ок открыл, конвертнул в 1251, закинул папку min из того пакета скачанного, установил плагин. Все как было так и осталось. Смущает момент папки min, я правильно понял что не всю папку а именно только min вытащить и кинуть в корень, права итд ничего не надо?
SJen 29 мая 2012 в 23:28 +1
правильно понял что не всю папку а именно только min вытащить и кинуть в корень

2. положить папку min/ в корень сайта (библиотека minify)

я наивно полагал, что второй пункт моей инструкции как раз однозначно и говорит о том, какую папку надо положить в корень сайте:))
letsgo 29 мая 2012 в 23:42 -3
Это все хорошо) так что ложить то? всю библиотеку или только папку min
SJen 29 мая 2012 в 23:58 +1
только папку min - это и есть все, что нужно
еще две папки для разработки, тестирования, ну и еще может для каких-то целей... описание и тд
Там кстати инструкция где-то есть (MIN.txt или Readme.txt) и там тоже написано, что нужно положить папку min/ в корень.


Я просто не планирую пока дописывать этот плагин, поэтому поделился "как есть". Сейчас нет на него времени, да и устраивает он и в таком варианте. А вообще, на его основе можно создать шикарную систему для оптимизации js и css файлов.

Еще момент - js скрипты ЛУЧШЕ подгружать в конце, перед закрывающимся </body>. У меня на сайте так и есть, можно увидеть в исходном коде. Большая часть грузится в конце, ну и немножко в начале (jquery.js обязательно в начале надо, иначе откажут работать некоторые скрипты, расположенные прямо в коде страницы)
Ramin 29 мая 2012 в 22:01 0
У меня если включен плагин то карта от instantmap не загружается
Dorimen 29 мая 2012 в 22:12 0
у всех так.
SJen 29 мая 2012 в 23:29 0
я не вхожу в число счастливых обладателей instantmap, так что на этом компоненте не проверял
Dorimen 30 мая 2012 в 00:35 0
а что же делать? :))
SJen 30 мая 2012 в 00:40 0
1. включить плагин, по умолчанию он включится только для админа - можете проверить, что это действитель так и что простые посетители не пострадают
2. напишите мне в личку адрес сайта, я посмотрю и отвечу в чем дело(только вам придется меня админом сделать на время, чтобы я увидел результат). Ну и предложу вариант ускорения, если не на 100% как задумано, то хотя бы максимально с учетом особенностей карты.

Но это все завтра.
Anonim 30 мая 2012 в 09:53 +1
Да! Оно работает! Спасибо!
fgvyguyu 30 мая 2012 в 15:36 0
После установки выросла нагрузка на хостинг. Через несколько раз загрузки одно страницы хостинг начал зависать.
fact 30 мая 2012 в 16:09 -1
компонент Видео Инстант отображается некорректно
fact 30 мая 2012 в 16:14 -1
а именно страница добавленного ролика, всё съезжает
SJen 30 мая 2012 в 21:16 0
Grisha orlov:
После установки выросла нагрузка на хостинг.
fact:
компонент Видео Инстант отображается некорректно

если я сам буду делать универсальную версию с максимальной оптимизацией на скорость и с учетом работы всех компонентов, то версия точно будет платной) Я же наоборот хотел дать очень простое бесплатное решение, которое каждый сам сможет "помучить".
GarikKR 31 мая 2012 в 01:05 0
Перестал работать редактор в клубах (..при голосовании за пост кодировка дает о себе знать.
SJen 31 мая 2012 в 02:39 0
если с js файлами не получается, то можно подправить плагин - чтобы он оптимизировал только css, выигрыш тоже будет
хотя и не такой хороший как вместе со скриптами
SJen 31 мая 2012 в 18:52 0
да, эта штука при большом траффике дает хорошую нагрузку на сервер(сегодня потестировал хорошенько на большой посещалке) - то есть уменьшая нагрузку на клиентов, вместо этого грузит сервер.. Потому что тут только клиентское кэширование, кэширования на сервере нет.

Но если добавить кэширование скриптов на сервере, то будет очень приличная штука
Dorimen 31 мая 2012 в 18:58 0
Вот если бы все это сделали и сделали так, чтобы мы все могли себе поставить, это было бы здорово. Естественно, такая работа должна быть оплачена.
SJen 31 мая 2012 в 19:16 +3
я сегодня ночью (с 30 на 31 мая) полноценно перенес на инстант сайт с посещалкой 25-27 тысяч и сам споткнулся на своем же плагине - сервер не выдержал)) Пришлось просто взять объединенные в один файл скрипты и подключить как обычные файлы, без вызова библиотеки.

Сделаю кэш, вещь очень нужная, по сроками ничего не обещаю но обязательно доберусь
Anonim 1 июня 2012 в 06:20 0
Ну не полноценно перенесли все? Статьи оставили от WP наверно многие компоненты еще просто не включили?
SJen 1 июня 2012 в 10:03 +1
"полноценно" - я имел ввиду, что весь трафик теперь попадает на движок InstantCMS, все 100% человек + поисковые роботы. Статьи переноситься не будут - им прекрасно живется в таблицах формата wordpress, для них просто написан инстантовский компонент.

Ну а насчет "включения многих компонентов" - аудитория пока не готова к полному погружению, будем постепенно включать.
letsgo 23 июля 2012 в 01:20 -1
После добавления плагина половина скриптов стала показывать кракозябры в utf8, у кого возникает такое, отключите плагин проверьте.
Def 20 ноября 2012 в 11:14 0
нифига не понял что и куда прописывать) библиотеку надо разархиыировать на серваке или нет?)
Def 20 ноября 2012 в 18:05 0
сделал, но ппц попа получается)
jane_devil 26 марта 2013 в 21:17 0
а работает с версией 1.10 ?