Сжатие js и css-файлов

Александр Стерхов

Веб-разработчик

Сжатие js и css-файлов

Скорость загрузки является одним из наиболее значимых факторов, определяющих конверсию сайта. Поэтому это одна из самых важных проблем, которую нужно решать в первую очередь. Есть множество факторов, влияющих на этот параметр — от удаленности сервера до качества разработки. Также существуют множество методов по уменьшению скорости загрузки сайта. Один из них — сжатие файлов js и css.

Описание проблемы

CMS 1С-Битрикс пока не предоставила функционала по сжатию js и css файлов. Она позволяет только объединить эти файлы в один js и css файл. Поэтому нужно решать эту проблему самостоятельно.

Проблема скорости загрузки сайта остро встала перед одним из наших постоянных клиентов — сайт tiremax.ru, которому мы оказываем услугу поддержка сайтов при появлении сезонного спроса на их товар. После проверки сайта Google Page Speed, сервис указал нам на большой объем js и css файлов. Решили эту проблему в два этапа:

  1. Минимизация файлов js и css;
  2. Сжатие их в архив *.gz.

Минимизация js-файлов

Для минимизации файлов js была выбрана библиотека Dean Edwards. Она очень проста в использовании:

  1. скачиваем библиотеку для php5;
  2. загружаем файлы class.JavaScriptPacker.php и example-file.php на ваш сайт;
  3. в строке 5 файла example-file.php прописываем путь к вашему js файлу;
    $src = '/js/myScript-src.js';
  4. в строке 6 файла example-file.php прописываем путь к файлу на выходе:
    $out = '/js/myScript.js';
  5. Запускаем файл example-file.php.

В результате на этом шаге получились следующие результаты*:

Название файла Размер до сжатия, байт Размер после сжатия, байт
common.js 30918 13002
jquery.cookie.js 2817 1483
jquery.easing.1.3.js 8097 3204
jquery.equalheights.js 2395 752
jquery.maskedinput.js 12397 3540
jquery.stickem.js 4499 2098
scripts.js 7572 4490
video_slider.js 9737 4297

* в таблице не приведены файлы библиотек, которые уже поставляются в сжатом виде.

Но, есть одно требование, которое предъявлено к вашим файлам js. Иначе после минимизации браузер будет выдавать ошибку. И это требование — правильная расстановка запятых в исходном js. Вот пример правильной расстановки запятых:


var input, output;

// notice the semi-colon at the END of function expressions
onload = function() {
  input = document.getElementById("input");
  output = document.getElementById("output");
  clearAll(true);
};

function packScript() {
  output.value = pack(input.value);
}

function clearAll(focus) {
  output.value = input.value = "";
  // the "if" statement is NOT terminated with a semi-colon
  if (focus) {
    input.focus();
  }
}

Минимизация css-файлов

Для минимизации css—файлов использовался парсер и оптимизатор CSSTidy. Принцип его работы также прост:

  1. копируем библиотеку на сайт;
  2. запускаем файл css_optimiser.php;
  3. копируем свой css—файл или прописываем путь к нему;
  4. выбираем уровень сжатия (по умолчанию — средний);
  5. нажимаем кнопку Progress CSS.

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

Название файла Размер до сжатия, байт Размер после сжатия, байт
style.css 93136 68366
bootstrap.css 85328 65080
jquery.fancybox.css 4224 3416
jquery.formstyler.css 7905 6800
jquery.rating.css 1653 1555
nouislider.fox.css 1728 1446
nouislider.space.css 1987 1594

Сжатие js и css-файлов

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

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

  1. скачайте скрипт compress.php;
  2. скачайте скрипты cssmin.php и jsmin.php;
  3. создайте папку (давайте для примера назовем её section_for_gz) для этих файлов compress.php, cssmin.php и jsmin.php (в результате работы этих скриптов архивы создадутся в папке min, которая будет находится на уровень вложенности выше, чем созданная вами папка);
  4. создайте в папке section_for_gz файл compress_timestamp.php и установите на него права, чтобы скрипт compress.php мог этот файл перезаписывать. В этот файле будет хранится переменная, содержащая время запуска скрипта. Это время будет записано в название выходных файлов, чтобы «обмануть» кэш;
  5. В тег head в шапке вашего сайта пропишите следующий код:
    
    require_once("/section_for_gz/compress_timestamp.php");
    
    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;
    

    В строках 3-6 скрипт проверяет, поддерживает ли браузер сжатие. Если поддерживает, то будут подключены gz—файлы, если нет, то будут подключены сжатые css и js—файлы.
  6. Отредактируйте файл compress.php начиная со строки 130, и перечислите свои скрипты и стили:
    
    file_compress('css_schedule.css', array(
            '/css/style.css',
            '/css/bootstrap.css', 
            '/css/bootstrap.min.css',
            '/css/ie7.css',
            '/css/ie8.css',
            '/css/ie9.css',
            '/css/jquery.fancybox.css',
            '/css/jquery.formstyler.css',
            '/css/jquery.rating.css',
            '/css/nouislider.fox.css',
            '/css/nouislider.space.css',
            '/css/style.css'
          ));
    
    file_compress('js_schedule.js', array(
            '/js.min/jquery.easing.min.1.3.js',
            '/js.min/common.min.js',
            '/js/bootstrap.min.js',
            '/js/jquery.carouFredSel-6.1.0.min.js',
            '/js/jquery.formstyler.min.js',
            '/js/jquery.masonry.min.js',
            '/js.min/jquery.equalheights.min.js',
            '/js/jquery.nouislider.min.js',
            '/js/jquery.rating.pack.js',
            '/js/jquery.placeholder.min.js',
            '/js.min/jquery.stickem.min.js',
            '/js/jTweener-0.2.js',
            '/js.min/video_slider.min.js',
            '/js/jquery.fancybox.pack.js',
            '/js.min/jquery.maskedinput.min.js',
            '/js.min/jquery.cookie.min.js',
            '/js/scripts.js'
          ));
    
  7. Запустите файл compress.php.

В папке min создались 5 файлов: js_schedule.js, css_schedule.css, js_schedule.jsgz, css_schedule.cssdz и .htaccess с кодом:


AddType text/css cssgz
AddType text/javascript jsgz
AddEncoding x-gzip .cssgz .jsgz
# for all files in min directory
FileETag None
# Cache for a week, attempt to always use local copy
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault A604800
</IfModule>
<IfModule mod_headers.c>
  Header unset ETag
  Header set Cache-Control "max-age=604800, public"
</IfModule>
который надо вставить в ваш .htaccess в корне сайта.

Запускаем сайт — работа закончена.

В результате объем файла css_schedule.cssgz стал 41604 байта (изначально суммарный вес всех css—файлов был более 300000 байт), а файла js_schedule.jsgz — 51059 байт (суммарный вес — более 400000 байт)..

Таким образом, при помощи сторонних библиотек удалось сократить размеры файлов js и css. Стоит заметить, что после повторного тестирования сайта tiremax.ru на Google Page Speed оценка скорости загрузки подросла на 6 пунктов. В дальнейшем, для увеличения скорости загрузки нашего партнера, мы установили ему композитный сайт. Будем надеяться, что хорошая скорость загрузки привлечет к нему много клиентов.

Похожие посты

Мы подобрали посты, которые могут быть вам интересны

Комментарии

Тут без вас никак. Поделитесь с нами вашими мыслями

  • Многие ссылки заключены в двойные кавычки, из-за чего не удается перейти по ним
  • Иван, долго думали про двойные кавычки и сегодня нас осенило, спасибо, поправили.
  • 130 строчка? тупизм
  • Леонид, вы про что?
  • Отредактируйте файл compress.php начиная со строки 130, и перечислите свои скрипты и стили. В 130 строчке совсем иное
  • Подскажи пожалуйста, делаю всё на локальном компе, подключаю compress.php и вылазит такие ошибки Warning: file_get_contents(../CSS/menu.css) [function.file-get-contents]: failed to open stream: No such file or directory in W:\OpenServer\domains\cherneenet\compress.php on line 174
  • Прописываете неверный путь к файлу menu.css, попробуйте через $_SERVER['DOCUMENT_ROOT'] http://stackoverflow.com/questions/11927968/document-root-php
  • Здравствуйте, все сделал, но не работает. При запуске compress.php (ошибок нет) в папке min появляются файлы как положены (css_schedule_1477393698.css, css_schedule_1477393698.cssgz, js_schedule.js_1477393698, js_schedule.js_1477393698.jsgz), но на странице отображается все без стилей, т.е как обычная html разметка В head код: ',PHP_EOL; echo '',PHP_EOL; ?> И на странице путь к ранее подключенным скриптам удалять или оставлять... т.е такая вот ситуация, на файл compress_timestamp.php права на перезапись, файлы в папке min создаются, ошибок нет, а отображается страница как без стилей. просьба помочь, в чем может быть проблема, пути вроде верно прописаны ...
  • Здравствуйте! Дайте ссылку на страницу.
  • Здравствуйте, сайт тестируется на локальном сервере (OpenServer), т.е еще в разработке, поэтому пока нет возможности посмотреть... Путь к ранее подключенным скриптам удалять или оставлять... Как понимаю проблема только сейчас в подключении файлов в папке min, кстати создались все файлы за исключением .htaccess, т.е 5 файла нет... Сам код ',PHP_EOL; echo '',PHP_EOL; ?> уже пробовал вставлять и в header и в head, но не работает... Думаю именно этот код и не может подключить файлы в папке min Буду благодарен за помощь...
  • Если удалить код: ',PHP_EOL; echo '',PHP_EOL; ?> то страница работает нормально, в "штатном" режиме, но стоит мне добавить, то стили не работают...
  • Алексей, подключаемые файлы не должны дублироваться. Если вы подключаете через скрипт те, что были прописаны руками, то их нужно удалить. Если файл не подхватывается — проблема с путями (вы говорите, что в папке они есть). Попробуйте со слеша начать
    Горячие вакансии