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

+57
4.17K
Приветствую.

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

Плагин качать тут
Библиотеку прямо с гуглкода
0
abasia abasia 10 лет назад #
Полезно, отправил бы спасибо на кошелёк, но где координаты?
0
letsgo letsgo 10 лет назад #
Молодец Sjen всегда откопаешь что нить интересное) плюсую.
0
ivanish ivanish 10 лет назад #
Если набрать домен/min можно кое-что увидеть :)
0
SJen SJen 10 лет назад #
Если в конфиге поставить $min_enableBuilder = false;, то можно будет увидеть только редирект на главную.
В конфиге можно еще увеличить время кэширования, там стоит 30 минут по умолчанию - можно выставить, скажем неделю.
0
Black-Raven90 Black-Raven90 10 лет назад #
А папки min_extras и min_unit_tests нужны? Или загружать только min?
0
SJen SJen 10 лет назад #
одна папка для тестирования, вторая с какими-то дополнениями похоже..

для работы хватит одной min
0
Anonim Anonim 10 лет назад #
Минимизация js и css файлов

Вот так в UTF отображается название плагина в админке
-1
Def Def 10 лет назад #
аналогично.

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

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

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

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

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

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

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

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

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

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

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

PS в аську стукну
0
Anonim Anonim 10 лет назад #
Что было сделано:

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

Как проверить, что все работает "как надо"?
0
Anonim Anonim 10 лет назад #
а если 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 Главный, шаблона?
+1
SJen SJen 10 лет назад #
Как проверить, что все работает "как надо"?

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

Если что-то не работает, то не "как надо")
0
ivanish ivanish 10 лет назад #
Как обычно МАПС сказал нет

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

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

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


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

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

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

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

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

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

Ну а насчет "включения многих компонентов" - аудитория пока не готова к полному погружению, будем постепенно включать.
-1
letsgo letsgo 10 лет назад #
После добавления плагина половина скриптов стала показывать кракозябры в utf8, у кого возникает такое, отключите плагин проверьте.
0
Def Def 9 лет назад #
нифига не понял что и куда прописывать) библиотеку надо разархиыировать на серваке или нет?)
0
Def Def 9 лет назад #
сделал, но ппц попа получается)
0
jane_devil jane_devil 9 лет назад #
а работает с версией 1.10 ?

Еще от автора

Обновление компонента "Мне нравится"
Приветствую. Закончил версию с исправлением ошибок и багов, всем пользователям обновление выслано на электронку.
Обновление компонента  "Каталог дополнений в админку"
Приветствую. Обновление самого популярного аддона из официального каталога дополнений.
Обновленный парсер Яндекс.Карт
Приветствую Изменения довольно значительны, поэтому имеет смысл оформить их отдельным постом.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.