Минификация кода

Минификация это что-то вроде оптимизации, только сам код как таковой не изменяется, а из него убирается всё лишнее: пробелы, табуляции, какие-то не нужные символы. Ещё к ним можно отнести много чего.

magnifier-zoom-icons-2365

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

Когда искал информацию о том как и что можно минифицировать, то натыкался на форумы, в которых некоторые личности писали, что это абсолютный бред. Они мотивировали такое отношение к этому делу тем, что сейчас у каждого в доме есть высокоскоростной интернет со скоростями превышающими 5-10 мегабит/с. Но они похоже не думали о том, что не все хостинг-провайдеры предоставляют своим клиентам широкий канал больше 10 мегабит/с. Чаще всего, особенно если это дешевый хостинг до 300 рублей в месяц, средняя ширина канала для одного клиента в лучшем случае будет 10 Мб/с, но иногда и этого не вытягивают. Вот поэтому и встаёт вопрос о том, как снизить размер страницы, которую загружают посетители сайтов. Тут на помощь приходит минификация.

Что же можно минифицировать? Да много чего. Сейчас постараюсь перечислить и объяснить всё по пунктам.

1. Использование минифицированных ява скриптов. Они обычно помечаются в названии файлов как, например, в файле jQuery — jquery-1.4.1.min.js. Отличие от не минифицированной версии этого файла в том, что он абсолютно не читабелен, т.к. там не пробелов, табуляций и весь скрипт записан в одну строку.

2. Комментарии к коду. В зоне PHP кода он заключён между символами /* комментарий */ или всё после не экранируемых // комментарий. Это всё комментарии и они по сути не нужны, только увеличивают размер выполняемого скрипта. В HTML, кстати, они заключены вкомментарий —>, но с ними надо быть осторожнее.

3. Следующими на очереди лишние пробелы (иногда встречается 2 пробела подряд), табуляции и переводы строки. Чисто для справки: 1 пробел или табуляция весит 1 байт, а 1 перевод строки 2 байта.

4. В PHP коде, особенно в том что создаётся программой Artisteer когда она генерирует шаблон для движка WP. Заключается он в том, что там очень часто используется связка из ?>

Заменить на:

Или даже вот так:

И вроде разницы никакой, но экономия на лицо: первый вариант имеет длину 85 байт, второй 63 байта, а третий 50 байт. Экономия между первым и последним вариантом почти в 2 раза. 35 байт — это фигня, скажите вы. А вы подумайте, если у вас стоит генерация этих строк в цикле, который выполняется, скажем, 1000 раз. В этом случае экономия будет 35 килобайт и это учитывая то, что кроме этих строк больше ничего генерироваться не будет.

5. Всеми любимые лишние пробелы и переводы строк в PHP коде. Приведу пример:

Можно было записать вот так:

Плюс ко всему ещё эти модные табуляции при вхождениях в циклы, условия и вообще всё что заключается в фигурные скобки.

Когда можно было написать так:

Первый вариант весит 216 байт, второй 193 байта, а третий 157 байт. Делаем выводы 😉

Ещё есть один момент — оптимизация самого кода. Это не совсем даже для снижения размера страниц, а больше для облегчения жизни процессору на серваке. Так же можно заменить некоторые динамические части на статические. Например, вместо:

Можно написать:

Это описание самого клёвого блога в мире.

В общем, надеюсь идея ясна.

Ну и там ещё по мелочи. А теперь реальные цифры.

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

Статистика по тесту будет собираться по трём параметрам:

Размер страницы по браузеру (в моём случае это FF). После загрузки страницы ищем пункт «Информация о странице» в контекстном меню.
Объём передаваемых данных при загрузке страницы. Данные по плагину «SpeedPage» от Google. Раздел Resources суммарный объём.
Объём трафика при загрузке страницы. Оттуда же откуда и 2-ой пункт.
Оба сайта сделаны на движке WordPress и все изменения можно проделать через админку. Буду писать сначала статистику по первому сайту, а потом по второму. Приступаем.

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

3 файла стилей. В общем они похудели на 5667 байт.
так же 3 файла. В общем похудели на 1268 байт.
2. JS. Так же есть готовые решения. Я всё ещё использую встроенную функцию расширения для FireFox под названием PageSpeed, которое мне выдаёт готовые минифицированные файлы.

Было найдено 7 файлов. После минификации в общей сложности они похудели на 65013 байта. Не плохо, да?)
Все ява скрипты уже были минифицированы.
3. PHP. Убираем из кода шаблона всё лишнее.

13 файлов похудели на 7955 байт.
17 файлов, выигрыш составил 5328 байт.
И тут такая штука случилась, второй сайт обновился и испортил мне всю статистику… Так что итоги подведём только по первому сайту.

Ну и вот теперь подводим скромные итоги (смотрим выше по каким параметрам, всё соответственно):

Было 50,04 КБ (51 236 байт), стало 46,9 КБ (48 024 байт). Выиграли 3212 байта.
Было 988kB, стало 922,5kB. Выиграли 65,5кБ.
Было 935,9kB, стало 870,4kB. Выиграли 65,5кБ.
Сайты не то, чтобы начали стали грузиться быстрее, к сожалению я разницы не заметил… Жаль, что я не делал замеры по скорости загрузки сайта до и после изменений. Но вы наверно понимаете, что, чем меньше файл весит, тем быстрее он загружается. К сожалению из минифмкации, наверно, больше не выжать. Но у нас ещё есть настройка кешев и оптимизация самого кода. Так что можно сделать свой блог на WP молниеносным.

Добавить комментарий

Ваш e-mail не будет опубликован.

четыре × два =

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>