Всё в одну строку

Доклад для WebHiTech2009, СДК МАИ, Москва, 8 декабря 2009

Автор: Шильников Дмитрий, Тел: 8-985-975-92-04, dmitry.shilnikov@gmail.com

Вступление

Прежде чем я начну выступление, хочу поблагодарить Артемия Ломова за предоставленную возможность участвовать в данном мероприятии в качестве докладчика и за одобрение темы, которую я решил представить.

А тема называется «Всё в одну строку».

Получение веб-страницы

Как известно, всё, что видит пользователь в окне браузера, находясь в интернете, является результатом работы сервера.

Если вкратце рассмотреть процесс захода на страничку, то это выглядит следующим образом:

1. Пользователь набирает адрес сайта или заходит на сайт по ссылке.
2. Браузер отправляет запрос на сервер:
   1.   GET / HTTP 1.1
   2.   Host: domain.tld
   (получить корневой документ от сайта domain.tld по версии HTTP-протокола 1.1) Соответственно, когда пользователь посещает страничку index.html, запрос будет выглядеть как
   1.   GET /index.html HTTP 1.1
3. HTTP-сервер, найдя запрошенный документ, отправляет его содержимое браузеру:
   1.   HTTP/1.1 200 OK
   2.   ...
   3.   Content-Length: 1024
   4.   Connection: close
   5.   Content-Type: text/html; charset=UTF-8
4. Браузер, в меру своих возможностей, отображает документ пользователю.

Современный веб-документ

Однако современный документ состоит не только из html-кода, но и содержит изображения, каскадные таблицы стилей (CSS [Си Эс Эс]), javascript-код, иногда flash-объекты.

За их корректное отображение и выполнение отвечает не только разработчик сайта, но и браузер пользователя. Браузер, пожалуй, даже больше.

И когда в документе содержится масса указанных объектов, то браузер, сервер, и интернет-канал получают чрезмерную нагрузку из-за необходимости обработки целой серии запросов:

1. GET /index.html
2. GET /template/style.css
3. GET /template/style_common.css
4. GET /template/style_custom.css
5. GET /lib/jquery.js
6. GET /images/logo.png
7. GET /images/header.png
8. GET /images/footer.png

Проблемы современного веб-документа

Неоправданно большое количество запросов является проблемой как с технической, так и с экономической точек зрения. Не случайно одно из первых действий специалистов по оптимизации интернет-трафика, специалистов по нагрузочному тестированию является сокращение количества запросов. И об этом же говорится в одном из наиболее часто цитируемом своде рекомендаций от специалиста Стива Саудерса (Steve Souders) из Yahoo! Development Network.

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

Запись кода в одну строку

Как показала практика, этот приём позволяет сократить объем кода, загружаемого клиентской стороной, на 15, а то и на 40%.

Ознакомившись с приведенным способом оптимизации, у вас, возможно, появилась мысль: почему я говорю об этом? Разве все веб-разработчики не занимаются оптимизацией уже в течение многих лет? Ответом на этот вопрос будет решительное «нет», даже если это вас удивит.

Лишь немногие разработчики сайтов используют данный прием.

Процент использования «в одну строку»

Проведя собственное исследование более 1000 сайтов самой различной тематики, как российских, так и зарубежных, с помощью разработанной мною системы тестирования сайтов testsistema.ru, я получил следующие данные:

• HTML в одну строку — 53 шт. или 5,3%
• CSS в одну строку — 57 шт. или 5,7%
• Javascript в одну строку — 4 шт. или 0,4%

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

При дальнейшем изучении статистики оказалось, что среди этой 1000 сайтов нет ни одного, использующего все три способа одновременно, кроме двух моих сайтов testsistema.ru и at-free.net.

Как сделать код в одну строку

Как же сделать код в одну строку? В основе этого лежат два действия:

1. Агрегирование кода
2. Оптимизация кода

Агрегирование (объединение)

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

Можно выделить два способа агрегирования. Начну с наиболее оптимального:

1. Список вызываемых файлов объединяется в единый набор. Например, если где-то в начале использовался файл `common.css`, а для нижеследующего блока новостей использовался файл `news.css`, то конечный единый набор может быть представлен в виде строки `common,news`. Затем эта строка помещается в атрибут src единственного в html-коде тега style:
   1. style src="aggr.php?files=common,news,…"
   Способ хорош тем, что выполняется очень быстро и не требует кэширования. А все действия по объединению кода вынесены в отдельный файл.
2. Задействованные файлы постепенно загружаются в переменную (это может быть объект, массив или просто строковая переменная), потом содержимое переменной сохраняется в файл под неким уникальным именем. И далее это имя помещается в атрибут src:
   1. style src="1227685253.css"
   Этот способ более сложен, требует механизма кэширования, реализованного в самом «движке» сайта, а также требует дополнительных настроек сервера для правильного кэширования CSS- и javascript-файлов.

Примерная схема работы агрегатора

Схема может быть дополнена в зависимости от конкретных требований.

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

Некоторые из действий по оптимизации кода:

• Убрать все комментарии. Ваши комментарии в коде не нужны ни браузеру, ни посетителю. Хотя specialist.ru в своих тестах считает, что нужны. Но я останусь при своем мнении.
• Заменить символы новой строки на пробел или убрать их вовсе (кроме содержимого тегов `<pre>`, `<textarea>` — в них могут содержаться данные, критичные к символам новой строки). В Microsoft Windows для символа новой строки нужно два байта. Убрав эти два байта, мы уменьшим страницу примерно на 5%. Казалось бы немного, но сэкономленный объем постепенно накапливается.
• Убрать все лишние пробелы. Это тоже уменьшает размер страницы примерно от 2 до 15%. Эффект особенно заметен, когда у нас есть «тяжелая» страница, килобайт на 200.
• Использовать сокращенный синтаксис. Например, для CSS: использовать свойство `font` вместо `font-family`, `font-size`. Свойство `border`. Для javascript: сокращенное объявление переменных `var a = [];` вместо `var a = new Array();`, `return 0;`.

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

Инструментарий

Я не привожу ссылки потому, что все они довольно длинные. Адреса можно нагуглить.

• Первый инструмент в этом списке — PHP Speedy. Пожалуй, одна из самых простых программ для вашего сайта. В примерах использования говорится: было 14 запросов, которые выполнялись за 4,4 секунды, а стало 4 запроса, выполняемые за 1,1 сек.
• Drupal Smartcache. Как видно из названия, это модуль для CMS Drupal. Достаточно обстоятельный, учитывает многие мелочи.
• Drupal Javascript Aggregator. Решение встроено по умолчанию, начиная с 6-ой версии CMS.
• Smarty (HTML-шаблонизатор). «Движок» для HTML-шаблонов, позволяющий агрегировать используемые CSS- и javascript-файлы.
• CssJsCompress для популярной CMS Joomla. Тоже агрегирует javascript и CSS.
• JSMin (Javascript minifier). Простой оптимизатор javascript-кода.
• YUI Compressor (Java). Более «продвинутый» инструмент для оптимизации javascript-кода.
• Dojo Compressor (Java) Оптимизатор и обфусикатор javascript-кода. (Преобразует читаемые имена переменных к виду `_1`, `_2`).

Все инструкции, способы подключения доступны в документации к проектам и на их форумах.

Эффект использования

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

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

Рекомендации

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

• Первое и самое главное в этом списке — верстка по веб-стандартам. Очень хорошо, когда HTML-код и CSS-правила созданы с соблюдением спецификаций. Это облегчает обработку правил браузером, в высшей степени гарантирует корректное отображение заданных элементов, и, как я считаю, говорит об ответственности веб-разработчика за свою работу и о его профессионализме.
• Отказ от CSS-хаков. Так называемый CSS-хак — это когда CSS-код намеренно искажается таким образом, чтобы часть кода была недоступна некоторым браузерам. Сегодня это не актуально. Современные браузеры обрабатывают CSS-свойства очень качественно, почти по спецификации. Проблемы возникают, в основном с Internet Explorer. Но для этого браузера существует такое замечательное средство, как Conditional Comments. Более того, версию браузера можно с легкостью определить на стороне сервера, и, если вам это действительно нужно, выдавать CSS-код в зависимости от браузера.
• (Только для IE) Отказ от CSS-expressions. Expressions — динамические свойства. Разработчик браузера — компания Microsoft, уже сама отказалась от CSS-expressions, отключив их по умолчанию ещё в 8-м «Эксплорере». А уже 9-й на подходе. Об отказе от expressions было известно задолго до выхода 8-й версии. Об этом писал программный менеджер Internet Explorer Сильвейн Галиньо (Sylvain Galineau).
• И последний пункт, на который я бы хотел обратить ваше внимание — соблюдение синтаксиса. Очевидно, что комментарии вида `/* … */` существенно облегчают компоновку кода в одну строку. А при соблюдении уровней вложенности `if(){ … }`, при правильно расставленных запятых и точек с запятой, ваш javascript будет гарантированно работать как на стадии разработки, так и в оптимизированном виде в конечном продукте. (Комментарий к интервью с представителями ФИНАМ на радио Эхо Москвы: чистый код есть, я пишу его уже 8 лет, но он ни кем невостребован)

Что дальше?

Сделали вы код в одну строку или нет, вам всё равно понадобятся следующие приемы оптимизации:

• HTTP-кэширование
• GZip-сжатие
• Профилирование

HTTP-кэширование

Применение HTTP-заголовков «Expires» и «Last-Modified» помогает решить одновременно две задачи:

1. Со стороны сервера — существенно сократить исходящий трафик, так как при повторном запросе страниц данные не передаются заново.
2. Со стороны пользователя — сэкономить время загрузки при переходе по ранее посещенным страницам, так как при этом браузер даже не обращается к интернету, а всегда загружает страницу с диска, из своего кэша.

Частота применения данной технологии оставляет желать лучшего. Только 1,7% исследованных мной сайтов применяют HTTP-кэширование.

GZip-сжатие

Невероятно, но GZip-сжатие уменьшает объем страниц в среднем до 80%.

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

GZip-сжатие включено во все современные системы публикации данных (CMS), в программы создания форумов и во многие другие веб-приложения.

Как и HTTP-кэширование, этот высокоэффективный метод оптимизации используется довольно редко — всего на 2,3% сайтов, по данным testsistema.ru.

Профилирование

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

Javascript-профилирование — исключение неиспользуемых функций, переменных. Знаю, некоторые разработчики пошли дальше и создали собственные способы автоматизации подключения. Это когда функции загружаются только при обращении к ним. (Google Knol — противоположный подход. Для просмотра 10-килобайтной странички посетителю нужно загрузить более 1 МБ кода. Wikipedia — неупорядоченный javascript).

CSS-профилирование — исключение неиспользуемых CSS-свойств. Заниматься CSS-профилированием вручную довольно сложно. Но в этом нам поможет плагин Dust-Me Selectors для браузера Firefox.

Размер страницы

Приведу несколько интересных данных. Средний размер страницы составляет от 192 до 256 килобайт. Второй по популярности размер страницы — от 256 до 512 килобайт. Максимальный размер страницы, который мне встретился — 7,7 МБ на сайте navуstavke.ru.

Минимальный размер, менее 32 КБ, всего у 17 сайтов, то есть у 1,7%. В это число входит и мой сайт at-free.net с 22 килобайтами. Я делал сайт со страницей не более 4 КБ, но заказчик завесил всё баннерами, поэтому приводить не буду.

Заключение

Закончу выступление напутствием:

Разработчики, делайте всё в одну строку.

Заказчики, требуйте всё в одну строку.

Всё - в одну - строку.