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

Что такое JavaScript и как происходит сжатие.js-файлов

JavaScript - это один из наиболее известных объектно-ориентированных языков программирования. А это значит, что .js -файл в первую очередь представляет из себя продукт программирования. Это важно знать, чтобы понимать суть сжатия кода JavaScript. Допустим, что перед нами некий код, который написан на JavaScript и выполняет определенные действия. Для примера приведем банальную программу вывода слов «Hello World» в браузере:

document.write(«Hello World»);

Какими способами можно сократить.js-файл?

  • Изменить алгоритм . Каждая программа работает по некоторому алгоритму. В некоторых случаях можно найти алгоритм, который будет работать быстрее и при этом меньше весить. Но обычная программа не сможет изменить алгоритм другой программы. Для этого нужен искусственный интеллект. Либо естественный, в виде программиста.
  • Убрать все комментарии, пробелы и пропуски. Редкий программист не будет использовать пробелы, пропуски и комментарии в своём коде. Комментарии помогают не заблудиться, пробелы помогают создать древовидный код, а целые пропуски могут отделить логически различающиеся участки кода. Всё это хорошо, пока программист пишет код. Но когда код дописан и программа работоспособна, то все эти ненужные символы можно убрать и тем самым сократить объем js-файла.
  • Изменить переменные. Одним из ключевых элементов программирования являются переменные - названия определенных элементов. С помощью переменных программист обращается к данным, которые скрыты за ним. И чтобы понимать какая переменная что хранит, программисты частенько дают переменным достаточно длинные имена, в которых содержится подсказка по поводу того, что за данные тут лежат. Во время программирования это очень удобно, а во время оптимизации сайта они не сильно необходимы. Например, переменную с именем тут_хранится_количество_записей_сайта можно без проблем для функциональности сайта заменить на переменную а . Вы сократите объем .js -файла сразу на 20± 10 байтов. И данное число можно смело умножать на количество вхождений данной переменной. К тому же переменных может быть очень много.
  • Закодировать код . Это последний и, наверное, самый действенный способ сжать .js -файл. Инструмент, который я хочу Вам презентовать, производит кодировку с использованием технологии Base62 . Данная технология использует 62 символа ASCII - символы A-Z, a-z и 0–9 - для кодирования информации. Этот инструмент мы и рассмотрим более подробно.
    • Инструмент для сжатия JavaScript

    Javascriptcompressor.com

    можно произвести три из четырех приведенных способов для сжатия кода JavaScript. Данный онлайн инструмент не позволяет выполнить первый пункт - он не может проанализировать Ваш алгоритм и заменить его на аналогичный. С остальными же тремя он справляется на ура.

    Интерфейс сайта весьма прост. В первое окно Вы должны ввести JavaScript код, а во втором окне Вы получите его сжатую версию. Так же, на странице имеются два checkbox`а:

  • Base62 Encode
  • Shrink variables

    • Если Вы отметите первый из них, то сжатие Вашего кода будет происходить с использованием технологии Base62 . Ну, а второй checkbox будет по-возможности заменять длинные переменные на более короткие. В любом случае - отметите Вы хотя бы один checkbox, оба или вообще не отметите - произойдет сжатие кода JavaScript путем удаления комментариев, пропусков и пробелов. В дополнение к этому, Вы можете увидеть размер кода до сжатия и после сжатия.

    Что еще нужно знать про сжатие JavaScript

    Ресурсов, которые предлагают те же услуги, предостаточно. Я остановился на данном инструменте потому, что другие ресурсы производили сжатие с ошибками. Не следует отрицать возможность наличия ошибок в сжатом js-коде. Поэтому, перед сжатием javascipt кода, создайте резервную копию .js -файла. Сразу после сжатия кода, лучше протестировать работоспособность сайта. Ещё лучше будет, если Вы проведете испытания на тестовом сайте.

    Так же хочу сказать, что кодирование маленьких по объему .js -файлов почти что бессмысленно. Очень часто после кодирования таких файлов, их объем только увеличивается. Удачи Вам в ваших попытках сократить и сжать 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 файл вернуть опять в удобочитаемый вид воспользуемся онлайн сервисом

    Зачем нужно сжимать и кодировать код? Сжимать следует для снижения веса файла или сокращения занимаемого места. Что касается кодировки, то это нужно для тех, кто хочет воспользоваться Вашим готовым кодом без согласия или как минимум слова спасибо) Шифровка делает его нечитабельным.
    Таким образом, кстати, можно закодировать не только код Java Script, но ещё и CSS. Перейдём к сервисам.

    Список онлайн сервисов для сжатия и кодирования JS

    1. JS Crunch
    http://www.cfoster.net/jscrunch/
    Автор: Charles Foster
    Оптимальное шифрование и сжатие. Поддерживает UTF-8. Из минусов: не выводит никакой информации о проделанной работе - коэффицент сжатия, исходные, конечные размеры. Не всегда выдает рабочий зашифрованный код, поэтому проверяйте.

    2. JavaScript Compressor
    http://javascriptcompressor.com/
    Автор: Dean Edwards
    Онлайн компрессор. Предоставляет возможность закодировать код несколькими способами.

    3. CSS & JavaScript Compressor
    http://www.creativyst.com/Prod/3/
    Онлайн компрессор. Довольно дубовый, без каких либо наворотов, вычищает лишние пробелы, табуляцию и пустые переводы строк.

    Да, есть современные формы сжатия и считывания: прочитайте про gzip. Однако, не следует забывать о частных небольших примерах, где сервисы могут пригодиться. И как можно чаще занимайтесь чисткой и оптимизацией кода. Особенно при высоких нагрузках на сервис!)

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

    Продолжая цикл обучающего материала по ускорению загрузки страниц сайта по рекомендациям сервиса 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. Возможно, из-за врожденного косноязычия или лени я не все доступно объяснил. Поэтому, если у кого останутся вопросы, спрашивайте в комментариях.

    Современная вёрстка без таблиц, отказ от использования инлайновых стилей и сжатие 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-файлов ForceType text/javascript Header set Content-Encoding: gzip 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-файлов ForceType text/css Header set Content-Encoding: gzip 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 :

  • Очистите кеш
  • Откройте окошко плагина, очистите лог, убедитесь, что стоит галочка напротив Capture
  • Не закрывая окна Live HTTP Headers, перезагрузите сайт
  • В ответах сервера на 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).