Как ускорить загрузку своего сайта при помощи compress.php…

….который объединит и сожмёт JS + CSS в Gzip

• Сжать все многочисленные скрипты JS и стили CSS
• Соединить все полученные файлы в один JS и в один CSS
• Сжать полученные два файла в формат GZIP, который понимают почти все браузеры и умеют распаковывать на лету
• Прописать такой .htaccess, который заставляет браузеры кэшировать данные два файла

Всё это будет происходить при запуске единственного скрипта compress.php

Для примера, результат сжатия скриптов моего сайта:

• JS: сжато в gzip 26 698 B, сжато без gzip 95 796 B, было 120 147 B
• CSS: сжато в gzip 46 049 B, сжато без gzip 160 001 B, было 281 870 B

Получается, что экономия трафика составляет 329 270 B. Но основной выигрыш для скорости загрузки в том, что теперь загружается не 14 файлов, а всего 2 (а это намного быстрее, так как браузер не тратит время на запросы). Причём делается это один раз, а не динамически силами самого сервера (тем более, что не все сервера поддерживают подобное конфигурирование сжатия для экономии ресурсов процессора).

В итоге, получится:

<link rel="stylesheet" type="text/css" href="min/styles_1349888114.cssgz" />
<script src="min/all_1349888114.jsgz" /></script>

Инструкции на удивление просты:

1. Скачайте скрипт compress.php
2. Скачайте скрипты cssmin.php, jsmin.php
3. Загрузите эти 3 скрипта в корень своего сайта*
4. Создайте в корне сайта файл compress_timestamp.php и установите на него права, чтобы скрипт compress.php мог этот файл перезаписывать*
5. Создайте пустую папку min в корне своего сайта
6. В свой index.php включите в header следующий код:

   <?php
   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;
   ?>
   

7. Отредактируйте файл compress.php, и перечислите свои скрипты и стили в соответствующем месте:

   <?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.

8. Удалённо запустите скрипт compress.php и всё произойдёт автоматически
9. Загружайте сайт для проверки

*для простоты мы сохраняем все файлы в корень сайта, но лучше этого не делать в целях безопасности

Теперь ваш сайт загружается быстрее, код ваших 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 ##

Послесловие: Статья нацелена на новичков, так как профи всё это уже делают при помощи (со сложными в настройках для новичков) громоздких платформ. Я не призываю пользоваться именно compress.php, но вы с его помощью можете убедиться в необходимости объединять и сжимать JS скрипты и CSS стили.

Источник на code.google