Сжатие Javascript. Проблемы сжатия и объединения Javascript

Зачем нужно сжимать и кодировать код? Сжимать следует для снижения веса файла или сокращения занимаемого места. Что касается кодировки, то это нужно для тех, кто хочет воспользоваться Вашим готовым кодом без согласия или как минимум слова спасибо) Шифровка делает его нечитабельным.
Таким образом, кстати, можно закодировать не только код 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. Однако, не следует забывать о частных небольших примерах, где сервисы могут пригодиться. И как можно чаще занимайтесь чисткой и оптимизацией кода. Особенно при высоких нагрузках на сервис!)

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

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

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

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

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

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

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

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

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

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

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»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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