Телевизор 

Сжатие 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 файл вернуть опять в удобочитаемый вид воспользуемся онлайн сервисом

Здравствуйте, уважаемые коллеги веб-мастера, читатели сайт.

Продолжая цикл обучающего материала по ускорению загрузки страниц сайта по рекомендациям сервиса PageSpeed Insights от Google, затронем животрепещущую тему о сокращении JavaScript.

"Сжатие кода JavaScript (сокращенно JS) позволяет сократить объем данных, чтобы ускорить загрузку, обработку и выполнение " – так говорит нам сам сервис. Ваш сайт тоже нуждается в таком улучшении? Если ответ утвердительный, тогда читайте дальше. Инструкция будет короткой и очень простой.

Ну что же, надо так надо. Выигрыш в скорости конечно небольшой, зато мы увеличим свой рейтинг в PageSpeed Insights (сокращенно PSI) и, как следствие - слегка улучшим свои позиции в ТОПе. Как говорится: "Маленькая бородавка – все сайту прибавка".

В прошлый раз в статье " " мы оптимизировали внутренние JavaScript, принадлежащие шаблону проекта или его плагинам. Рекомендация по сокращению теперь может возникнуть в основном для внешних системных скриптов, которые подгружаются со стороны чужого сервера.

Кликните по ссылке "Как исправить? " под рекомендацией PSI и чуть ниже всплывут URL всех JS, нуждающихся в сжатии. Внутренние несжатые JS будут иметь URL адрес вашего ресурса а внешние (как на первом скриншоте), соответственно, не вашего:-). Начнем с последних.

Сокращение внешних JavaScript

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

  • Скачайте уже оптимизированные JS по ссылке в самом низу страницы PageSpeed Insights.

  • На своем сервере через создайте папку с именем js и залейте туда скачанный сжатый сервисом скрипт.

  • В коде формы измените путь к JS на свой в папке js.

    • Не забудьте добавить директиву "Disallow: /js/ " в robots.txt.

    Сокращение внутренних JavaScript

    Тут все гораздо проще. Скачанные в первом пункте предыдущей инструкции сжатые JS закачайте с заменой туда, где находятся их неоптимизированные близнецы. И забудьте про них до следующего обновления шаблона или наших подопытных плагинов.

    Проверьте результат, наслаждайтесь выполненной работой.

    P.S. Возможно, из-за врожденного косноязычия или лени я не все доступно объяснил. Поэтому, если у кого останутся вопросы, спрашивайте в комментариях.

    Всем-всем привет!

    Продолжаем оптимизировать и сегодня на очереди у нас оптимизация JS (JavaScript) и CSS кода. Напомню, вчера мы работали с изображениями, если Вы все еще не оптимизировали их, то как раз для Вас (обязательно примените то, что написано там).

    Урок получится коротким, поэтому скорее начнем. Погнали!

    Что такое JS и CSS код?

    В настоящее время сайт, созданный исключительно на HTML и CSS, уже является отстающим, ведь на этих языках нельзя написать какие-то удобные, полезные штуки, которые облегчили бы взаимодействие с ним. Пользователям, в свою очередь, необходимо преподнести максимально удобный продукт (веб-ресурс). Осуществить данное требование помогут различные языки программирования, к которым относится и JavaScript.

    JavaScript — язык программирования, позволяющий создавать различные скрипты (приложения), которые встраиваются в HTML-страницы. Скрипты выполняются в браузере пользователя.

    Чтобы вывести даже тот самый пресловутый счетчик времени потребуется JS. Так что, думаю, и на Вашем сайте присутствует данный язык программирования.

    CSS — язык описания внешнего вида любого элемента сайта. То есть то, как выглядит Ваш сайт, мой сайт, да любой другой, написано на этом языке.

    Для чего нужно оптимизировать JS и CSS код?

    Задача данного мероприятия одна — снизить время загрузки страниц сайта. К сожалению, JS-скрипты и CSS код зачастую несут в себе очень много символов, пробелов, чем и замедляют загрузку веб-ресурса. Оптимизация подобных файлов направлена на то, чтобы отсечь лишние символы, лишние пробелы, тем самым снижая их размер и, как следствие, облегчая загрузку веб-страниц. По сути происходит обычное сжатие файла. Можно сделать и более глубокую оптимизацию, если, конечно, Вы разбираетесь в программировании и сайтостроении.

    Оптимизация JS и CSS кода

    В Интернете, как и в случае с оптимизацией изображений, существует несколько онлайн-сервисов, которые выполняют то, что написано выше:


    Ваша задача: скопировать код файла, вставить его в один из перечисленных сервисов, получить оптимизированный код и вставить его в исходный файл. Вот и все.

    Предупреждаю: после оптимизации код станет не читабельным, поэтому дальнейшая работа с ним будет немного затруднена.

    Оптимизируя свой , я попробовал оба сервиса: в первый залил проблемный файл JS, а во второй CSS () и буквально через 5 секунд код оптимизировался и уже можно было заливать, что я и сделал.

    Здравствуйте! Продолжаю оптимизировать свой блог и на очереди стоят файлы 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 файлы, в итоге они оказались абсолютно работоспособными, функциональность не пострадала. Это был еще один шаг по оптимизации блога, впереди не мало работы)

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

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

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

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

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

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

  • скачиваем библиотеку для php5;
  • загружаем файлы class.JavaScriptPacker.php и example-file.php на ваш сайт;
  • в строке 5 файла example-file.php прописываем путь к вашему js файлу; $src = "/js/myScript-src.js";
  • в строке 6 файла example-file.php прописываем путь к файлу на выходе: $out = "/js/myScript.js";
  • Запускаем файл 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—файлов использовался парсер и оптимизатор . Принцип его работы также прост:

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

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

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

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

  • скачайте скрипт compress.php ;
  • скачайте скрипты cssmin.php и jsmin.php ;
  • создайте папку (давайте для примера назовем её section_for_gz) для этих файлов compress.php , cssmin.php и jsmin.php (в результате работы этих скриптов архивы создадутся в папке min , которая будет находится на уровень вложенности выше, чем созданная вами папка);
  • создайте в папке section_for_gz файл compress_timestamp.php и установите на него права, чтобы скрипт compress.php мог этот файл перезаписывать. В этот файле будет хранится переменная, содержащая время запуска скрипта. Это время будет записано в название выходных файлов, чтобы «обмануть» кэш;
  • В тег head в шапке вашего сайта пропишите следующий код: require_once("/section_for_gz/compress_timestamp.php"); if (stripos($_SERVER["HTTP_ACCEPT_ENCODING"], "GZIP")! == false) { $gz = "gz"; } else { $gz = null; } echo "", PHP_EOL; echo "", PHP_EOL;
    В строках 3-6 скрипт проверяет, поддерживает ли браузер сжатие. Если поддерживает, то будут подключены gz—файлы, если нет, то будут подключены сжатые css и js—файлы.
  • Отредактируйте файл 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"));
  • Запустите файл 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 ExpiresActive On ExpiresDefault A604800 Header unset ETag Header set Cache-Control "max-age=604800, public" который надо вставить в ваш.htaccess в корне сайта.

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

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

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