Ростелеком ТВ 

Сжатие js файлов. Сжатие Javascript. Проблемы объединения JavaScript-файлов

В этой статье рассмотрим online способы сжатия js (jаvascript ) файлов для уменьшения их размеров. Сейчас очень много веб-ресурсов используют, как сторонние java скрипты (например, та же jQuery библиотека и многочисленные плагины к ней), так и собственной разработки. Сжатие позволит уменьшить размер загружаемой страницы сайта, а соответственно и время его загрузки. Это один из этапов оптимизации, который желательно проделать всем.
Даже если на сервере используется gzip сжатие, которое несомненно уменьшит размер, не стоит пренебрегать оптимизацией файлов, так как и на распаковку файлов из архива требуется время.
Рассмотрим два наиболее распространенных и эффективных способа сжатия: YUI Compressor и Google Closure Compiler.

YUI Compressor

Использует парсер jаvascript , написанный на языке java , который называется Rhino .
Патченный Rhino сжимает за счет двух основных операций:

  • убирает лишние пробельные символы и комментарии
  • заменяет имена локальных переменных на более короткие

Официльный сайт Yahoo не предоставляет возможности онлайн сжатия скриптов, но в сети есть сервис
предоставляющий эту возможность.
Сжимать, для примера, будем скрипт мигающего текста:

Var blink_text="Blink Text?" var speed=700 var n=navigator.appName var ns=(n=="Netscape") var ie=(n=="Microsoft Internet Explorer") if (ns){ document.write(""+blink_text+"")} else if (ie){ var verify = 1; document.write("

") blink()} function blink(){ if (verify == 1){ document.all.blink.innerText=blink_text; verify=0;} else { document.all.blink.innerText=""; verify=1;} setTimeout("blink()",speed); } Вставляем код в текстовое поле, выбираем тип файла JS (можно сжимать, также и CSS файлы) и жмем Compress .

В результате получим:

  • Размер до 489 байт
  • После сжатия 417 байт
  • Процент сжатия 15%
  • После сжатия и упаковки в gzip 270 байт
  • Процент сжатия и упаковки в gzip 45%

Google Closure Compiler

Данный инструмент от Google и также, как и YUI эффективно справляется со своей задачей. В отличие от YUI Compressor он имеет официальный онлайн сервис сжатия
Для сжатия используем всё тот же код. Вставляем его в текстовое поле и жмем Compile .

В правой части окна получим сжатую версию

  • Размер до 439 байт
  • После сжатия 390 байт
  • Процент сжатия 11,16%
  • После сжатия и упаковки в gzip 255 байт
  • Процент сжатия и упаковки в gzip 6,25%

Google Closure Compiler , если судить по размерам файла после сжатия, 390 байт против 417 байт у YUI Compressor уменьшает более эффективно. Эффективнее (в данном примере) на 6,5 % , однако странно, что исходный размер скрипта, оба сервиса определяют по разному.
Использовать можете любой сервис.

Восстановление скрипта в исходное состояние

А чтобы ваш сжатый jаvascript файл вернуть опять в удобочитаемый вид воспользуемся онлайн сервисом

Минификация CSS , JS , HTML файлов (не путать со сжатием CSS ) включает в себя удаление любых ненужных символов из файла, чтобы уменьшить его размер и тем самым ускорить загрузку.

Ниже приведены примеры того, что удаляется во время минификации файла:

  • Символы пробелов;
  • Комментарии;
  • Разрывы строк;
  • Разделители блоков.

В большинстве случаев процесс минификации не влияет на файл, а оптимизирует его для загрузки. Особенно полезна минификация CSS , JS и HTML-файлов . Кроме этого Google при ранжировании учитывает быстродействие ресурса, а минификация помогает ускорить работу сайта.

Чтобы различать минифицированные файлы, в их имена добавляется расширение .min (например: foobar.min.css ).

Разница между минификацией и сжатием

Минификация и сжатие CSS файлов – это не одно и то же. Хотя оба этих метода предназначены для уменьшения времени загрузки. Различие заключается в том, как они работают. Сжатие используется для уменьшения размера файла при помощи алгоритмов сжатия, таких как Gzip или brotli . Файлы сжимаются перед отправкой клиенту.

Следовательно, процесс сжатия осуществляется следующим образом:

  1. Файл сжимается с помощью алгоритма сжатия;
  2. Выполняется запрос для сжатой версии файла;
  3. Сжатый файл отправляется от сервера к клиенту;
  4. Клиент распаковывает файл и считывает информацию.

Поддерживаемые алгоритмы сжатия могут варьироваться в зависимости от сервера, а также браузеров. Когда браузер отправляет запрос серверу, он сообщает ему, какой метод сжатия поддерживает, так что сервер может оптимизировать отклик для этого браузера.

Если браузер не поддерживает конкретный алгоритм сжатия, сервер будет отправлять данные в первоначальном виде (без обработки ).

Пример минификации

В следующем примере показано, как CSS файл выглядит до и после минификации.

ДО CSS минификации:

Entry-content p { font-size: 14px !important; } .entry-content ul li { font-size: 14px !important; } .product_item p a { color: #000; padding: 10px 0px 0px 0; margin-bottom: 5px; border-bottom: none; }

ПОСЛЕ CSS минификации:

Entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}

После минификации CSS-файл стало сложнее читать, поскольку отсутствуют переносы строк, разделители и т.д. Но оптимизированный вариант имеет меньший размер, что ускоряет его загрузку, как и сжатие CSS онлайн .

Минификация CSS

Онлайн

  • csscompressor.com — позволяет выбрать уровень минификации и размер файла на выходе:


  • cssminifier.com — инструмент довольно легкий в понимании. Введите существующий CSS и уменьшенная версия создается автоматически. После этого можно загрузить сжатый код CSS в виде файла:


Инструменты разработки

  • yui.github.io : позволяет осуществлять процесс сборки в среде разработки, которая уменьшает, переименовывает и сохраняет оптимизированный файл в рабочем каталоге;
  • phpied.com : инструмент использует возможности минификации CSS и YUI Compressor, но он применяет JavaScript вместо Java.

Минификация JS

Онлайн

  • closure-compiler.appspot.com : можно использовать как онлайн-инструмент и как API-интерфейс. Этот инструмент позволяет настроить оптимизацию и форматирование:


  • jscompress.com : позволяет минимизировать JS путем копирования/вставки кода. Дополнительно можно загрузить JavaScript-файл и выполнить процесс минификации нескольких файлов одновременно:


  • javascript-minifier.com : создан теми же разработчиками, что и cssminifier . JS Minifier позволяет скопировать минимизированный код или скачать его в виде файла. А также осуществить сжатие CSS и JS онлайн :


Инструменты разработки

  • yui.github.io : предоставляет возможность минимизировать JS файлы для веб-проектов.

Минификация HTML

  • htmlcompressor.com : предоставляет возможность выбора между различными уровнями минификации HTML и встроенного в него кода CSS и JS :


  • minifycode.com : представляет собой текстовое поле, куда нужно вставить код HTML и сгенерировать его уменьшенную версию:


Существует множество инструментов для минификации файлов. Многие CMS также предлагают плагины и расширения для минификации CSS , JS и HTML — файлов.

WordPress плагины для минификации

  • Better WordPress Minify ;
  • Autoptimize .

Многие плагины кэширования также предлагают возможность минификации. Например, Cache Enabler поставляется с возможностью включения минификации HTML и JS . Использование этой функции позволяет уменьшить время загрузки веб-страниц, но в некоторых случаях это может привести к конфликту с другим плагином сжатия CSS WordPress .

Drupal модуль минификации

В сообществе Drupal популярным вариантом для минификации является модуль Minify . Он позволяет минимизировать HTML , JavaScript файлы и использует компилятор Google Closure , чтобы проанализировать минификацию. Конфигурация данного модуля проходит быстро.

Joomla! Расширение для минификации

CMS Joomla также предлагает расширение для оптимизации сайта под названием JCH Optimize , которое уменьшает размер JavaScript и производит сжатие CSS файлов . Оно также предоставляет возможность включить GZIP сжатие для агрегированных файлов.

Преимущества уменьшения файлов

Решение уменьшить размер CSS , JS и HTML файлов предоставляет преимущества, как пользователям сайта, так и его владельцу. Использование минификации — это отличный способ оптимизировать ваш сайт, и это легко реализовать с помощью рассмотренных инструментов и плагинов.

Здравствуйте! Продолжаю оптимизировать свой блог и на очереди стоят файлы javascript. Java скрипты используются на большинстве веб-ресурсов и создают интерактивную среду.

Наполняя блог функциональностью зачастую приходится использовать сторонние скрипты, которые входят в состав различных баннеров, счетчиков и прочих элементов. ВордПресс также содержит в своей структуре подключаемые скрипты. Не всегда они оптимизированы 🙁 и очень часто содержат в себе лишние символы, пробелы, переводы строк…

— скриптовый язык программирования, ориентированный на программный доступ к объектам.

Размер данных скриптов порой очень впечатляет, а ведь он в значительной степени влияет на скорость загрузки страниц. И с этим нужно что-то делать. Конечно, если на сервере применяется gzip сжатие, то размер подключаемых скриптом уменьшается, но тратится время на распаковку. Поэтому лучше уделить внимание и оптимизировать javascript .

Сделать это можно с помощью различных технологий: JSMin, Packer, YUI Compressor, Google Closure Compiler. На примере разберу два последних варианта, как наиболее распространенных.

YUI Compressor — компрессор, разработанный Yahoo, который гарантирует сохранение работоспособности 😉 кода наряду со снижением веса файла. Для примера я воспользуюсь вот этим сервисом , предоставляющим функционал YUI Compressor в режиме онлайн. К сожалению, сам Yahoo не предоставляет такой возможности, ограничиваясь файлом, доступным для свободного скачивания. Итак, для проведения эксперимента по сжатию javascript я буду использовать вот такой код:

1 2 3 4 5 6 7 function r_out01() { var b= ; b[ 0 ] = "Test-1" ; b[ 1 ] = "Test-2" ; var i= Math .floor (Math .random () * b.length ) ; document.write ( b[ i] ) ; }

function r_out01() { var b=; b="Test-1"; b="Test-2"; var i=Math.floor(Math.random()*b.length); document.write(b[i]); }

Он отвечает за и был рассмотрен в одной из предыдущих статей.

Для его сжатия вставляю в текстовое поле и нажимаю кнопку «Compress». Для наглядности привожу скрин:

В результате на выходе получаю вот такой код:

1 function r_out01() { var a= ; a[ 0 ] = "Test-1" ; a[ 1 ] = "Test-2" ; var c= Math .floor (Math .random () * a.length ) ; document.write (a[ c] ) } ;

function r_out01(){var a=;a="Test-1";a="Test-2";var c=Math.floor(Math.random()*a.length);document.write(a[c])};

И что получилось? Как видно, были удалены переводы строк, лишние пробелы, переменные заменены на другие в алфавитном порядке (в примере были использованы переменные из одного символа, если исходники будут содержать переменные из нескольких символов (например, слов на транслите), то они также будут минимизированы). При наличии комментариев они также удаляются. Суммарный выигрыш составил 11%.

Вторым на очереди эксперимента стоит инструмент по сжатию javascript от Google, хорошо себя зарекомендовавший. В отличие от YUI Compressor он имеет официальный онлайн инструмент для сжатия , что очень радует.

В эксперименте участвует все тот же код. Пройдя по ссылке в текстовое поле сервиса вставляю javascript и нажимаю кнопку «Compile»:

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

Т.е. на выходе получилось:

1 function r_out01() { var a= ; a[ 0 ] = "Test-1" ; a[ 1 ] = "Test-2" ; document.write (a[ Math .floor (Math .random () * a.length ) ] ) } ;

function r_out01(){var a=;a="Test-1";a="Test-2";document.write(a)};

Суммарный выигрыш составил 12.6%, что выше YUI Compressor на 1,6%. Были удалены пробелы, заменены переменные, но отличия в полученном коде заметны. Правда мне показалось странным, что оба сервиса по разному подсчитали оригинальный размер кода 💡

На своем блоге я воспользовался и сжал подключаемые локальные javascript файлы, в итоге они оказались абсолютно работоспособными, функциональность не пострадала. Это был еще один шаг по оптимизации блога, впереди не мало работы)

Дамы и господа, давайте включим параною:

Однако, если рассматривать средний результат, то с достаточно большим отрывом выделяются 2 инструмента:

1. cssresizer.com (84,13%);

whois спойлер

nikitas@pentagon:~$ whois cssresizer.com

Whois Server Version 2.0

Domain names in the .com and .net domains can now be registered
with many different competing registrars. Go to http://www.internic.net
for detailed information.

Domain Name: CSSRESIZER.COM
Registrar: REGISTRAR OF DOMAIN NAMES REG.RU LLC
Sponsoring Registrar IANA ID: 1606
Whois Server: whois.reg.com
Referral URL: http://www.reg.ru
Name Server: NS1.MCHOST.RU
Name Server: NS2.MCHOST.RU
Name Server: NS3.MCHOST.RU
Name Server: NS4.MCHOST.RU
Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
Updated Date: 21-apr-2016
Creation Date: 08-apr-2016
Expiration Date: 08-apr-2017

For more information on Whois status codes, please visit https://icann.org/epp

NOTICE: The expiration date displayed in this record is the date the
registrar"s sponsorship of the domain name registration in the registry is
currently set to expire. This date does not necessarily reflect the expiration
date of the domain name registrant"s agreement with the sponsoring
registrar. Users may consult the sponsoring registrar"s Whois database to
view the registrar"s reported date of expiration for this registration.

TERMS OF USE: You are not authorized to access or query our Whois
database through the use of electronic processes that are high-volume and
automated except as reasonably necessary to register domain names or
modify existing registrations; the Data in VeriSign Global Registry
Services" ("VeriSign") Whois database is provided by VeriSign for
information purposes only, and to assist persons in obtaining information
about or related to a domain name registration record. VeriSign does not
guarantee its accuracy. By submitting a Whois query, you agree to abide
by the following terms of use: You agree that you may use this Data only
for lawful purposes and that under no circumstances will you use this Data
to: (1) allow, enable, or otherwise support the transmission of mass
unsolicited, commercial advertising or solicitations via e-mail, telephone,
or facsimile; or (2) enable high volume, automated, electronic processes
that apply to VeriSign (or its computer systems). The compilation,
repackaging, dissemination or other use of this Data is expressly
prohibited without the prior written consent of VeriSign. You agree not to
use electronic processes that are automated and high-volume to access or
query the Whois database except as reasonably necessary to register
domain names or modify existing registrations. VeriSign reserves the right
to restrict your access to the Whois database in its sole discretion to ensure
operational stability. VeriSign may restrict or terminate your access to the
Whois database for failure to abide by these terms of use. VeriSign
reserves the right to modify these terms at any time.

The Registry database contains ONLY .COM, .NET, .EDU domains and
Registrars.

Domain name: cssresizer.com
Domain idn name: cssresizer.com
Status: clientTransferProhibited http://www.icann.org/epp#clientTransferProhibited
Registry Domain ID:
Registrar WHOIS Server: whois.reg.com
Registrar URL: https://www.reg.com/
Registrar URL: https://www.reg.ru/
Registrar URL: https://www.reg.ua/
Updated Date:
Creation Date: 2016-04-08T14:01:10Z
Registrar Registration Expiration Date: 2017-04-08
Registrar: Registrar of domain names REG.RU LLC
Registrar IANA ID: 1606
Registrar Abuse Contact Email: [email protected]
Registrar Abuse Contact Phone: +7.4955801111
Registry Registrant ID:
Registrant ID:
Registrant Name: Protection of Private Person
Registrant Street: PO box 87, REG.RU Protection Service
Registrant City: Moscow
Registrant State/Province:
Registrant Postal Code: 123007
Registrant Country: RU
Registrant Phone: +7.4955801111
Registrant Phone Ext:
Registrant Fax: +7.4955801111
Registrant Fax Ext:
Registrant Email: [email protected]
Admin ID:
Admin Name: Protection of Private Person
Admin Street: PO box 87, REG.RU Protection Service
Admin City: Moscow
Admin State/Province:
Admin Postal Code: 123007
Admin Country: RU
Admin Phone: +7.4955801111
Admin Phone Ext:
Admin Fax: +7.4955801111
Admin Fax Ext:
Admin Email: [email protected]
Tech ID:
Tech Name: Protection of Private Person
Tech Street: PO box 87, REG.RU Protection Service
Tech City: Moscow
Tech State/Province:
Tech Postal Code: 123007
Tech Country: RU
Tech Phone: +7.4955801111
Tech Phone Ext:
Tech Fax: +7.4955801111
Tech Fax Ext:
Tech Email: [email protected]
Name Server: ns1.mchost.ru
Name Server: ns2.mchost.ru
Name Server: ns3.mchost.ru
Name Server: ns4.mchost.ru
DNSSEC: Unsigned
URL of the ICANN WHOIS Data Problem Reporting System: http://wdprs.internic.net/
>>> Last update of WHOIS database: 2016-07-27T00:49:39Z <<<

For more information on Whois status codes, please visit
https://www.icann.org/resources/pages/epp-status-codes-2014-06-16-en.

% By submitting a query to REG.RU Whois Service
% you agree to abide by the following terms of use:
% http://www.reg.ru/whois/servpol (in Russian)
% http://www.reg.com/whois/servpol (in English)

И снова:

с достаточно большим отрывом выделяются 2 инструмента

чуть не забыл

Современная вёрстка без таблиц, отказ от использования инлайновых стилей и сжатие html-страниц позволяют достаточно серьёзно уменьшить трафик сервера и повысить скорость загрузки сайта для пользователей, работающих на «узких» каналах. Выигрыш в трафике может составлять 60-80% (для HTML)!

Несмотря на это, всё равно остаётся ряд достаточно больших файлов, которые браузер посетителя должен будет загрузить: основной css с вёрсткой (от 10 до 30КБ), javascript-фреймворк (mootools - 70-80КБ, prototype.js - 120КБ и т.д.) Конечно, эти файлы кешируются браузером и грузятся только при первом посещении, но не мне вам объяснять, насколько важно, чтобы после перехода из выдачи поисковика пользователь увидел загруженный сайт как можно быстрее…

Сжимать эти файлы можно при каждом обращении, прогоняя через mod_gzip (mod_deflate). Но это неизбежно приведёт к дополнительной нагрузке на сервер, которая может оказаться критической для посещаемого сайта на недорогом виртуальном хостинге.

Другой способ, который и будет рассмотрен в данной статье, — хранить сжатые (.gz) файлы на сервере наряду с исходными и с помощью директив mod_rewrite выдавать.js.gz и.css.gz вместо.js и.css соответственно. Итак, приступим.

Сначала нужно определиться, какие файлы требуют сжатия. Для типичного шаблона Joomla!, например, это будут, как правило, /media/system/js/mootools.js и template_css.css активного шаблона.

Теперь нужно подготовить сжатые версии файлов. Это можно сделать в Windows с помощью бесплатного архиватора 7-ZIP , выбрав GZip в качестве формата при создании архива. Обратите внимание: каждый файл в отдельном архиве. В консоли UNIX-сервера это можно сделать с помощью команды gzip:

gzip mootools.js -c > mootools.js.gz

После этого требуется разместить.js.gz и.css.gz в тех же директориях на сервере, где расположены их несжатые версии (если сжатие делалось в Windows с помощью 7-Zip).

Если.htaccess в корне сайта не существует, создаём его и добавляем следующие строки:

Вариант 1

### Ассоциируем расширение.gz с gzip AddEncoding gzip .gz ### Задействуем mod_rewrite RewriteEngine On ### Отдаём foo.bar.gz вместо файла foo.bar, если foo.bar.gz присутствует в той же директории, ### что и foo.bar. Если браузер - Safari, отдаём foo.bar RewriteCond %{ HTTP:Accept-encoding} gzip RewriteCond %{ HTTP_USER_AGENT} !Safari RewriteCond %{ REQUEST_FILENAME} .gz -f RewriteRule ^(.*) $ $1 .gz [ QSA,L]

Вариант 2

Однако это способ иногда не работает. Сервер устанавливает HTTP-заголовок Content-Type в application/x-gzip и браузеры, определяющие тип данных по нему (например, Firefox), а не по содержимому (IE) «не видят» скрипты и css. Чтобы решить эту проблему, нужно принудительно устанавливать Content-Type в text/javascript или text/css. В этом случае надо добавить в.htaccess такой код («вариант 1» надо убрать или закомментировать!):

AddEncoding gzip .gz ### 1. Обработка js-файлов \. js.gz$" > ForceType text/javascript Header set Content-Encoding: gzip \. js$" > RewriteEngine On RewriteCond %{ HTTP_USER_AGENT} !".*Safari.*" RewriteCond %{ HTTP:Accept-Encoding} gzip RewriteCond %{ REQUEST_FILENAME} .gz -f RewriteRule (.*) \.js$ $1 \.js.gz [ L] ForceType text/javascript ### 2. Обработка css-файлов \. css.gz$" > ForceType text/css Header set Content-Encoding: gzip \. css$" > RewriteEngine On RewriteCond %{ HTTP_USER_AGENT} !".*Safari.*" RewriteCond %{ HTTP:Accept-Encoding} gzip RewriteCond %{ REQUEST_FILENAME} .gz -f RewriteRule (.*) \.css$ $1 \.css.gz [ L] ForceType text/css

Всё, никаких изменений больше не нужно !

Проверить корректность работы метода можно в Firefox с установленным плагином Live HTTP Headers :

  1. Очистите кеш
  2. Откройте окошко плагина, очистите лог, убедитесь, что стоит галочка напротив Capture
  3. Не закрывая окна Live HTTP Headers, перезагрузите сайт
  4. В ответах сервера на GET-запросы для сжатых файлов должно быть примерно следующее:

    Запрос браузера

    http://сайт/templates/vectora/css/template.css GET /templates/vectora/css/template.css HTTP/1..0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14 Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive

    Ответ сервера

    HTTP/1.x 200 OK Server: nginx/0.5.35 Date: Sat, 19 Apr 2008 18:01:45 GMT Content-Type: text/css Connection: keep-alive Keep-Alive: timeout=20 Last-Modified: Tue, 01 Jan 2008 22:56:51 GMT Etag: "40bc5ff-131d-477ac533" Accept-Ranges: bytes Content-Length: 4893 Content-Encoding: gzip

История изменений:

  • 19.04.2008 — первичная публикация;
  • 14.11.2008 — добавление альтернативного варианта (FilesMatch);
  • 21.03.2009 — исправлена опечатка в примере альтернативного варианта (FilesMatch).