Здравствуйте! Продолжаю оптимизировать свой блог и на очереди стоят файлы 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 файлы, в итоге они оказались абсолютно работоспособными, функциональность не пострадала. Это был еще один шаг по оптимизации блога, впереди не мало работы)
В этой статье рассмотрим 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("")} 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 файл вернуть опять в удобочитаемый вид воспользуемся онлайн сервисом
Стоит все же осветить наиболее характерные проблемы этого самого сжатия и объединения.
Начнем с простого: как JS-сжатие способно испортить нам настроение. И как его поднять обратно:)
UPD стартовал конкурс ускорения сайтов . В призах: монитор, веб-камера, мышь. Все гипер-быстрое.
JavaScript-сжатие
Вообще стоит сразу упомянуть, что сжатие JavaScript-файлов даст нам всего лишь 5-7% уменьшение размера относительно обычного gzip, который можно использовать везде (нет, реально, везде - начиная от конфигурации Apache через.htaccess и заканчивая статическим сжатием через mod_rewrite + mod_mime и конфигурацией nginx (или LightSpeed). Но вернемся к теме топика: мы хотим минимизировать JavaScript-файлы, как это лучше всего сделать?Два года назад был произведен обзор текущих инструментов , за это время ситуация не сильно изменилась (разве что появился Google Compiler). Но все по порядку.
- Начнем с простого. JSMin (или его клон, JSMin+). Работает очень универсально (по принципу конечных автоматов). Почти всегда минимизируемый файл даже исполняется. Дополнительный выигрыш (здесь и далее относительно простого gzip) - до 7% в случае продвинутой версии, т.е. совсем мало. Процессор кушает умеренно (продвинутая версия, JSMin+ сильнее, и память значительно), но не анализирует область видимости переменных, в связи с чем не умеет сокращать их длину. В принципе, может применяться почти для всех скриптов, но иногда возможны нюансы. Например, удаляются условные комментарии (это лечится) или неверно распознаются различные конструкции (например, + + преобразуется в ++ , это ломает логику), это тоже лечится, но сложнее.
- YUI Compressor . Наиболее известный (до недавнего времени еще и наиболее мощный) инструмент для сжатия скриптов. Базируется на движке Rhino (насколько известно, корни движка где-то рядом с фреймворком Dojo, т.е. очень-очень давно). Сжимает скрипты отлично, работает над областью видимости (может уменьшать длину переменных). Степень сжатия - до 8% сверх gzip, однако, процессор кушает будь здоров (в связи с использованием виртуальной машины Java), так что с использованием в режиме онлайн стоит быть осторожным. Также в связи с уменьшением длин переменных возможны различные проблемы (и их даже потенциально больше, чем для JSMin).
- Google Closure Compiler появился недавно, но уже завоевал доверие общественности. Базируется на том же движке Rhino (ага, нет ничего нового под луной), но использует более продвинутые алгоритмы уменьшения размера исходного кода (отличный обзор во всех деталях), до 12% относительно gzip. Но тут стоит быть втройне острожным: может быть вырезана весьма существенная часть логики, особенно при агрессивных преобразованиях. Однако для jQuery уже используется этот инструмент . По процессорным издержкам он, видимо, еще тяжелее YUI (данный факт не проверялся).
- и Packer . Данный инструмент уже уходит в прошлое в связи с развитием каналов связи и отставанием процессорных мощностей: ибо сжатие в нем (алгоритм, аналогичный gzip) производится за счет JavaScript-движка. Это обеспечивает очень значительное (до 55% без gzip) уменьшение размера кода, но дополнительные издержки вплоть до 500-1000 мс на распаковку архива. Естественно, это становится не актуальным, если процессорные мощности ограничены (привет, IE), а скорость соединения весьма высока (+ gzip уже почти везде применяется и поддерживается). Дополнительно, данный метод оптимизации наиболее склонен к различным багам после минимизации.
Проблемы объединения JavaScript-файлов
После того как мы разобрались со сжатием JavaScript-файлов, хорошо бы затронуть тему их объединения. Средний сайт имеет 5-10 JavaScript-файлов + несколько встроенных (inline) кусков кода, которые могут так или иначе вызывать подключаемые библиотеки. В итоге - 10-15 кусков кода, которые можно объединить вместе (плюсов от этого море - начиная от скорости загрузки на стороне пользователя и заканчивая отказоустойчивостью сервера под DDoS - тут каждое соединение будет на счету, даже статическое).Но вернемся к баранам. Сейчас мы будем разговаривать про некоторую автоматизацию объединения «сторонних» скриптов. Если вы имеете к ним полный доступ (и разбираетесь в веб-разработке), то не составляет большого руда пофиксить проблемы (или исключить ряд проблемных скриптов из объединения). В противном случае (когда набор скриптов никак не хочет объединяться без ошибок) нижеследующий подход как раз для вас.
Итак, у нас есть 10-15 кусков кода (часть из них в виде встроенного кода, часть - в виде внешних библиотек, которые мы можем так же «слить» вместе). Нам нужно гарантировать их независимую работоспособность. В чем она заключается?
Если у нас есть JavaScript-ошибка в файле, то браузер прекращает выполнение этого файла на ошибке (некоторые наиболее древние еще и прекращают выполнение всех JavaScript-файлов на странице в этом случае, но мы не совсем про это разговариваем). Соответственно, если первая же библиотека, которую мы хотим объединить в общий файл, выдает ошибку, то во всех браузерах у нас клиентская логика после объединения развалится. Грустно.
Дополнительно стоит отметить, что встроенный (inline) код достаточно тяжело отлаживать. Его можно либо исключить из объединения (например, расположив вызов объединенного файла до или после кода), или же при его использовании вообще отменить объединение файлов.
Обратная совместимость
Что мы можем с этим поделать? Наиболее простой путь: исключать проблемные файлы (при этом ошибки могут проявляться только на этапе объединения, отдельные же файлы могут отрабатывать на ура) из логики объединения. Для этого нужно будет отслеживать, в каком месте происходить ошибка, и собрать конфигурацию для объединения для каждого такого случая.Но можно поступить несколько проще. Для JavaScript мы можем воспользоваться конструкцией try-catch . Ага, мысль уловили? Еще нет? Мы можем все содержимое файлов, которые объединяем, заключать в try {} , а в catch(e) {} вызывать подключение внешнего файла примерно следующим образом:
try { ... содержимое JavaScript-библиотеки... } catch (e) { document.write("исходный вызов JavaScript-файла"); // или console.log("нужно исключить из объединения JavaScript-файл"); }
При этом у нас у пользователя загрузится один-единственный файл, если никаких проблем не возникло. Если же ошибки были, то подключатся все внешние проблемные файлы в прежнем порядке. Это и обеспечит обратную совместимость.
Проблемы производительности
Очевидно, что данный подход не является «самым правильным». Наиболее логичным было бы определить JavaScript-ошибки, их устранить, и загружать для всех пользователей один файл. Но не всегда это возможно. Также стоит учесть, что try-catch конструкция тяжеловата для исполнения в браузерах (добавляет 10-25% ко времени инициализации), стоит быть с ней осторожным.Но описанный подход может замечательно применяться для отладки конкретно объединения JavaScript-файлов: ведь он позволяет точно определять, какие файлы «сыпятся» (если файлов несколько десятков, это очень и очень полезно).
Небольшое резюме
После дополнительной минимизации 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. Однако, не следует забывать о частных небольших примерах, где сервисы могут пригодиться. И как можно чаще занимайтесь чисткой и оптимизацией кода. Особенно при высоких нагрузках на сервис!)
Минификация CSS , JS , HTML файлов (не путать со сжатием CSS ) включает в себя удаление любых ненужных символов из файла, чтобы уменьшить его размер и тем самым ускорить загрузку.
Ниже приведены примеры того, что удаляется во время минификации файла:
- Символы пробелов;
- Комментарии;
- Разрывы строк;
- Разделители блоков.
В большинстве случаев процесс минификации не влияет на файл, а оптимизирует его для загрузки. Особенно полезна минификация CSS , JS и HTML-файлов . Кроме этого Google при ранжировании учитывает быстродействие ресурса, а минификация помогает ускорить работу сайта.
Чтобы различать минифицированные файлы, в их имена добавляется расширение .min (например: foobar.min.css ).
Разница между минификацией и сжатием
Минификация и сжатие CSS файлов – это не одно и то же. Хотя оба этих метода предназначены для уменьшения времени загрузки. Различие заключается в том, как они работают. Сжатие используется для уменьшения размера файла при помощи алгоритмов сжатия, таких как Gzip или brotli . Файлы сжимаются перед отправкой клиенту.
Следовательно, процесс сжатия осуществляется следующим образом:
- Файл сжимается с помощью алгоритма сжатия;
- Выполняется запрос для сжатой версии файла;
- Сжатый файл отправляется от сервера к клиенту;
- Клиент распаковывает файл и считывает информацию.
Поддерживаемые алгоритмы сжатия могут варьироваться в зависимости от сервера, а также браузеров. Когда браузер отправляет запрос серверу, он сообщает ему, какой метод сжатия поддерживает, так что сервер может оптимизировать отклик для этого браузера.
Если браузер не поддерживает конкретный алгоритм сжатия, сервер будет отправлять данные в первоначальном виде (без обработки ).
Пример минификации
В следующем примере показано, как 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 файлов предоставляет преимущества, как пользователям сайта, так и его владельцу. Использование минификации — это отличный способ оптимизировать ваш сайт, и это легко реализовать с помощью рассмотренных инструментов и плагинов.
