Пользователь
0,0
рейтинг
11 октября 2012 в 09:38

Администрирование → Как ускорить загрузку своего сайта при помощи compress.php, который объединит и сожмёт JS + CSS в Gzip

Ускоряем сайт при помощи GoogleПодробные инструкции, которые даются на code.google позволят вам:

  • Сжать все многочисленные скрипты 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
Автор: Arn Burkhoff
Евгений @imater
карма
86,5
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Администрирование

Комментарии (50)

  • +6
    > CSS: сжато в gz 46049 kB

    Ничего себе у вас стилей на 45 мегабайт…
    • +1
      fixed
  • +1
    А при чем тут Google? Или вы считаете все проекты на code.google.com принадлежащими гуглу?
  • +3
    Далеко не все указали в htaccess. Хотя бы вот так:
    Спойлер
    <IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault                          "access plus 1 month"
    ExpiresByType text/cache-manifest       "access plus 0 seconds"
    ExpiresByType text/html                 "access plus 0 seconds"
    ExpiresByType text/xml                  "access plus 0 seconds"
    ExpiresByType application/xml           "access plus 0 seconds"
    ExpiresByType application/json          "access plus 0 seconds"
    ExpiresByType application/rss+xml       "access plus 1 month"
    ExpiresByType image/x-icon              "access plus 1 week" 
    ExpiresByType image/gif                 "access plus 1 year"
    ExpiresByType image/png                 "access plus 1 year"
    ExpiresByType image/jpg                 "access plus 1 year"
    ExpiresByType image/jpeg                "access plus 1 year"
    ExpiresByType video/ogg                 "access plus 1 year"
    ExpiresByType audio/ogg                 "access plus 1 year"
    ExpiresByType audio/mp3                 "access plus 1 year"
    ExpiresByType video/mp4                 "access plus 1 year"
    ExpiresByType video/webm                "access plus 1 year"
    ExpiresByType text/x-component          "access plus 1 month"
    ExpiresByType font/truetype             "access plus 1 year"
    ExpiresByType font/opentype             "access plus 1 year"
    ExpiresByType application/x-font-woff   "access plus 1 year"
    ExpiresByType image/svg+xml             "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
    ExpiresByType text/css                  "access plus 2 months"
    ExpiresByType application/javascript    "access plus 2 months"
    ExpiresByType text/javascript           "access plus 2 months"
    <IfModule mod_headers.c>
    Header append Cache-Control "public"
    </IfModule>
    </IfModule>
  • 0
    Статья нацелена на новичков, так как профи уже всё это делают при помощи сложных громоздких платформ.

    Ну если веб-сервер, умеющий сжимать весь необходимый контент сразу — это громоздкая платформа…
    • 0
      Верно, nginx, при правильной настройке, умеет и минифицировать и сжимать в GZ.
      • 0
        Да-да, у меня как раз так и сделано. Не понимаю, на кой возиться с кучей пых-костылей сугубо для сжатия.
        • 0
          Он это делает на лету каждый раз или раз и навсегда, до модификации скриптов? Если да, то дайте ссылку на описание скриптов для nginx.
          • 0
            Какие скрипты, там всё один раз в конфиге пишется. Всё делается на лету, после чего выставляются экспайры, и всё успешно кешируется на стороне клиента.

            Навскидку, статику можно пожимать примерно так, предварительно отдавая, минуя бекенд:

            location ~* ^.+\.(css|htc|js|htm|html)$ {
            root /var/www/site.ru;
            gzip_static on;
            expires 30d; # caching for 30 days
            add_header Cache-Control private;
            add_header Vary Accept-Encoding;
            }
            • +1
              Тьфу, мисбаттон. Забыл указать, что это для конфига виртхоста.
              В самом nginx.conf до кучи нужно сделать примерно так:

              gzip on;
              gzip_min_length 1000;
              gzip_proxied any;
              gzip_vary on;
              gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
              gzip_disable «msie6»;
              gzip_comp_level 8;

              Степень компрессии подбирать на вкус, в зависимости от мощности сервера и потребностей. Больше восьми смысла ставить в принципе не вижу.

              После, собственно, всего этого, на уровне скриптов можно gzip выключить, и забыть про него через PHP навсегда.
              • –1
                Налету — это дополнительная нагрузка на сервер. А при помощи скрипта, это делается один раз и потом все пользователи получают уже заранее сжатый файл.
                • +3
                  Слово «кеширование» вы понимаете? В примере блока конфига для виртхоста указан экспайр — т.е. сколько времени nginx при совпадении чексумм будет считать файл не устаревшим.

                  Костыль, который предлагаете вы, имеет право на существование только при условии, что он будет использоваться где-нибудь на шареде, где нет полноценного доступа к настройкам сервера.
            • 0
              Остаётся вопрос, как объединить несколько JS в один файл (+CSS) средствами nginx.
              • +2
              • 0
                Если разобрались с тем, как конфигурировать nginx, запустить простой скриптец типа такого вам уже не составит труда:

                cat fileuploader.js json2.js highslide.js order.js > .order.js
                java -jar /data/yui/yuicompressor.jar --type js --nomunge .order.js -o order.min.js --charset utf-8
                rm .order.js
                
              • 0
                Интересно, а вы про HTTP Keep-Alive соединения слышали?
      • 0
        дефолтный конфиг Apache для debian тоже сжимает
        • –4
          Апач может идти в ад бодрым строевым шагом. Сжимать фронтом надо, даже если эта хрень в качестве бекенда работает.
  • 0
    Что люди не придумают, когда есть assets pipeline (-:
  • 0
    Не лишним будет ввести версионность стилей и скриптов. Чтоб изменения на сайте отображались у пользователей раньше чем через год.
    • 0
      Что-то я недосмотрел, временные метки есть, но в каком-то неочевидном месте. Обычно их приписывают как static-file.js?timestamp
  • +4
    • 0
      Меня тоже удивила данная версия. Что он пытается этим сжатием добиться?
      • 0
        Меньше байт, меньше считываний с диска, быстрее загрузка, быстрее выполнение. Перфекционизм из всех щелей.
        • 0
          Тогда стоило бы и пробелы поудалять, где это возможно.
  • 0
    Как можно сделать такое без PHP? Я пишу на Java и использую google closure compiler для автоматической компиляции js при сборке проекта. Хотел бы подобную вещь для объединения js и css в один файл и сжатия.
  • +1
    Вот посмотрите мой .htaccess. Там есть правила для сжатия для кеширования и еще пара полезных, все с комментариями.
  • –2
    Для пользователей MODX Revolution есть компонент MinifyX, который склеивает и минифицирует javascript и css.

    При очистке кэша сайта они генерируются заново, только если были изменения. Настраивается за 1 минуту. Кому интересно — исходный код тут.
    Используются Minify_CSS_Compressor и JSMin.

    Настройки сервера менять не нужно.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Критика должна быть конструктивная. Расскажите, как делать правильно.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Комментарий тянет на статью. Особенно на фоне основной статьи. Спасибо за развернутый ответ.
        • 0
          Для статики хранить на диске сжатый gzip вполне себе вариант, у nginx даже есть для этого модуль ngx_http_gzip_static_module
          • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Что значит не нужно минифицировать свои js, вы что считаете в них нет тех же комментов как в других либах. К тому же если вы это делаете автоматизировано, через тот же closure-compiler.appspot.com/home, во время deploy, то особых телодвижений вам делать не придется. Сделать на автомате gz версию тоже проблем не составит.

          Правила для gz сжатия сервером нужны, но как резервный вариант, так как проще один раз все ужать и отдавать тем же ngx_http_gzip_static_module.

          • НЛО прилетело и опубликовало эту надпись здесь
            • +1
              Если вы говорите про контекст статьи, то я не пойму зачем вы говорите про картинки про асинхронную загрузку (для которой придется скорей всего еще и код подстроить). В статье только про css и js, для которых сделать оптимизацию перед выкладкой проекта на боевой сервер дело одной секунды. Если вы правите код на боевом сервере и вам лень, то это не есть хорошо.

              > Собрать его с этим модулем
              Насколько я помню он идет в стандарте.

              >видимо, и при разработке по F5 предусмотреть обход этого дела

              Господи, при разработке вам это зачем. Думаю мы друг-друга не понимаем, лучше будет окончить этот бесполезный диалог.
        • 0
          Напишите статью о простейшей оптимизации, что и как стоит делать и что не стоит.
          Из Вашего комментария лично я почерпнул достаточно, что бы знать, что гуглить. Поэтому предлагаю Вам действительно написать по этому вопросу статью. Статью.
    • +2
      Признайтесь честно, вы не понимаете о чем говорите или не читали статью. Видно же, что вся оптимизация проходит один раз и файлы отдаются стандартными средствами сервера.

      Так что про уродов и не понимающих в клиентской оптимизации вы перегибаете.
  • 0
    А как мобильные браузеры (opera mini, ios safari, android и прочие) дружат с форматом gzip?
    • 0
      ios точно дружит и грузит в 4 раза быстрее.
  • 0
    Я правильно понимаю, что если надо будет изменить хотя бы одно значение переменной то придется заного генерить файл и пользователю выкачивать все это добро?
    • 0
      При любых изменениях в js или css — да
  • –1
    Не затронута проблема отладки сжатого и минимизированного кода, а это происходит на 90% проектах

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.