Подробные инструкции, которые даются на code.google позволят вам:
- Сжать все многочисленные скрипты JS и стили CSS
- Соединить все полученные файлы в один JS и в один CSS
- Сжать полученные два файла в формат GZIP, который понимают почти все браузеры и умеют распаковывать на лету
- Прописать такой .htaccess, который заставляет браузеры кэшировать данные два файла
Всё это будет происходить при запуске единственного скрипта compress.php
Для примера, результат сжатия скриптов моего сайта:
- JS: сжато в gz 26698 b, сжато без gz 95796 b, было 120147 b
- CSS: сжато в gz 46049 b, сжато без gz 160001 b, было 281870 b
Получается, что экономия трафика составляет 329270 b. Но основной выигрыш для скорости загрузки в том, что теперь загружается не 14 файлов, а всего 2. (а это намного быстрее, так как браузер не тратит время на запросы)
В итоге, получится:
<link rel="stylesheet" type="text/css" href="min/styles_1349888114.cssgz" />
<script src="min/all_1349888114.jsgz" /></script>
Инструкции на удивление просты:
- Скачайте скрипт compress.php
- Скачайте скрипты cssmin.php, jsmin.php
- Загрузите эти 3 скрипта в корень своего сайта*
- Создайте в корне сайта файл compress_timestamp.php и установите на него права, чтобы скрипт compress.php мог этот файл перезаписывать*
- Создайте пустую папку min в корне своего сайта
- В свой index.php включите в header следующий код:
require_once('compress_timestamp.php'); //загрузить timestamp сохранённый в файле, чтобы обмануть кэширование. Устанавливает $compress_stamp=unix_timestamp if (stripos($_SERVER['HTTP_ACCEPT_ENCODING'],'GZIP')!==false) $gz='gz'; else $gz=null; echo '<script src="min/js_schedule_'.$compress_stamp.'.js'.$gz.'" />',PHP_EOL; echo '<link rel="stylesheet" type="text/css" href="min/css_schedule_'.$compress_stamp.'.css'.$gz.'" />',PHP_EOL; - Отредактируйте файл compress.php, и перечислите свои скрипты и стили в соответствующем месте:
file_compress('css_schedule.css',array('./CSS/menu.css', './CSS/ThreeColumnFixed.css', './CSS/sprite.css', './CSS/iCal.css')); file_compress('js_schedule.js',array('./js/all1.js', './js/jquery.js', './js/love_habrahabr.js', './love_4pda.js'));Именно ради этих волшебных функций (пакующих в один файл и сжимающих его) мы всё и затевали. Необходимые файлы создадутся в папке MIN в варианте GZipped и обычном. Если браузер старый, будет выдаваться обычный формат JS и CSS, если новый то JSGZ и CSSGZ.
- Удалённо запустите скрипт compress.php и всё произойдёт автоматически
- Загружайте сайт для проверки
*для простоты мы сохраняем все файлы в корень сайта, но лучше этого не делать в целях безопасности
Теперь ваш сайт загружается быстрее, код ваших JS и CSS труднее расшифровать любителям чего нибудь поломать.
Каждый раз, когда вы меняете скрипты на сайте, нужно запустить compress.php перед загрузкой сайта, всё остальное происходит автоматически.
Не забывайте, что ссылки на картинки в ваших стилях CSS теперь должны вызываться с учётом того, что CSS находится в папке MIN.
Если хотите ещё больше ускорить сайт, есть простое решение. Установите заголовки статических файлов такими, чтобы браузеры их кэшировали на долго. Это можно сделать, если положить в корень сайта файл .htaccess:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType audio/mp3 "access 1 year"
ExpiresByType audio/wav "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
Послесловие: Статья нацелена на новичков, так как профи уже всё это делают при помощи сложных громоздких платформ. Надеюсь кому то из новичков пригодится и сайты в интернете станут быстрее, экономя нам драгоценные секунды. Если что не так, пишите в комментариях.
Автор: imater
