Уменьшение размера страниц для ускорения их загрузки

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

Самый простой способ - использование минимизации (минификации) стилей и скриптов, входящих в HTML документ. В результате размер загружаемых страниц значительно уменьшается. Минимизация подразумевает полное удаление из кода всех комментариев, не имеющих значения пробелов, переносов строк и табуляций. Для достижения максимального эффекта, рекомендуется все однотипные файлы соединить в один. В идеале, страница должна подключать не более одного css и одного javascript файла. После применения таких простых преобразований, объем загружаемых файлов уменьшается до тридцати процентов от первоначального размера. А если к ним применить еще и gzip сжатие, результат станет еще лучшим.

Необходимо помнить, что не все css и javascript файлы можно минифировать: если код писался кривыми руками и в нужных местах не проставлялся символ точки с запятой «;», после удаления пробелов и табуляций, минимизированный код может оказаться неработоспособным. Если же разработка производилась квалифицированным программистом, проблемы возникнуть не должны.

Для усложнения изучения, изменения и банального воровства javascript используют процесс обфускации. Его предназначение — запутывание кода. При этом процессе проделывают те же шаги, что и при минимизации, но дополнительно к ним, обфускация включает в себя следующие особенности:

специальное кодирование символов;
изменение названий функций и переименование переменных;
добавление ненужного кода;

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

Большинство веб-мастеров не занимаются минимизацией HTMLа. Вместо этого, уменьшают объем страниц при помощи gzip сжатия. На сегодняшний день практически во все браузеры включена поддержка gzip. В момент запроса, браузер посылает на сервер информацию о поддерживаемых типах сжатия. Делается это при помощи специального заголовка (header) Accept-Encoding. Например: Accept-Encoding: gzip, deflate. После получения подобного заголовка веб-сервер применяет соответствующее сжатие. Сервер дает уведомление клиенту о методе сжатия, используя заголовок Content-Encoding. Это выглядит это так: Content-Encoding: gzip. Технологии сжатия можно использовать сразу после настройки сервера, достаточно просто дописать определенные команды в конфигурационные файлы. Хотя в процессе сжатия на сервер и создается нагрузка, в сегодняшних реалиях она несущественна.

Картинки чаще всего невозможно сжать. Вместо этого нужно оптимизировать их формат. Например, фотографии лучше всего хранить в jpg формате, а графику – в png. С аудио форматами немного сложнее, поскольку для их сжатия используется так называемое сжатие с потерями. И, если большинство посетителей сможет довольствоваться звучанием mp3 файлов, то настоящим меломанам подавай lossless формат.

В сети можно найти множество инструментов для оптимизации и уменьшения объема файлов различных форматов. Для Eleanor CMS существует удобное бесплатное дополнение, которое возьмет на себя сжатие javascript и css файлов. Доступно оно на странице загрузки системы.