Как ускорить загрузку своего сайта при помощи 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

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Андрей

    Добрый день!
    Хорошая должно быть штука, но не получается у меня получить результат.

    Поможете немного?

    После всех манипуляций и запуска compress.php получаю вот такое:

    ../min/css_schedule_1411135603.css created length: 91351 113337
    ../min/css_schedule_1411135603.cssgz created length: 31561 91351 113337
    ../min/js_schedule_1411135603.js created length: 102805 103009
    ../min/js_schedule_1411135603.jsgz created length: 35672 102805 103009
    css_schedule_1411135203.css deleted
    js_schedule_1411135203.jsgz deleted
    css_schedule_1411135203.cssgz deleted
    js_schedule_1411135203.js deleted

    Т.е. файлы типа созданы, но по факту в папке min их нет. Она пустая.
    Что может быть не так?
    Спасибо

    • ADv

      Проверьте права на запись тех папок, куда генерируются скрипты и стили..

Scroll To Top