Оптимизация часто показываемых страниц

Страница с результатами поиска Яндекса за последние 12 месяцев показывалась почти 7 миллиардов раз (а за последний месяц — полтора миллиарда). Очевидно, что такая посещаемая страница должна быть очень легкой, ведь пользователям комфортнее работать с быстро загружающимся ресурсом, а нам приятно экономить пользовательский трафик.

Пути оптимизации:

• Оптимизация разметки
• Оптимизация стилей
• Оптимизация скриптов
• Другие способы оптимизации

Оптимизация разметки

1. Использование HTML вместо XHTML

XHTML, являясь подмножеством XML, имеет более строгие требования к синтаксису, HTML допускает более свободную запись, этим можно воспользоваться

• Элементы не требующие закрывающего тэга нужно писать без «/» — area, base, br, col, hr, img, input, link, meta, param (все элементы у которых указано F в столбце End Tag в таблице http://www.w3.org/TR/html4/index/elements.html).
• Не указывать элементы body, head, html, tbody (все элементы у которых указано O в столбце Start Tag в таблице http://www.w3.org/TR/html4/index/elements.html).
• Не указывать закрывающие тэги colgroup, dd, dt, li, option, p, td, tfoot, th, thead, tr (все элементы у которых указано O в столбце End Tag в таблице http://www.w3.org/TR/html4/index/elements.html).
• В некоторых случаях возможно писать значения атрибутов без кавычек: в таких случаях атрибуты могут содержать только английские буквы, цифры, дефис (ASCII код 45), точку (ASCII код 46), подчеркивание (ASCII код 95) и двоеточие (ASCII код 58) (http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2).
• Не использовать пробел для разделения значений атрибутов, если значение взято в кавычки, т.е. вместо title="На главную страницу" alt="Логотип" использовать title="На главную страницу"alt="Логотип".

2. Значения атрибутов по умолчанию

Не использовать атрибуты значения которых подразумевается по умолчанию: method="get", target="_self", type="text".

3. Заменять мнемонические сущности

Заменять мнемонические сущности &имя; или &#NNNN; на их действительное представление.

Например, для документа в кодировке windows-1251 замена 109 сущностей   на символ с кодом 160 уменьшает документ на 545 байт.

Для кодировки windows-1251 можно, таким образом, заменить самые распространенные сущности:  , —, «, ».

А, например, сущность • мы не сможем заменить в документе в с кодировкой windows-1215, так-как её нет в кодовой таблице windows-1251, но если кодировка документа utf-8 мы сможем заменить любую сущность на её представление.

4. Вырезание из документа ненужных символов

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

5. Использование специально оптимизированной разметки вместо универсальной

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

Удобнее всего писать в шаблоне нормальный html, а оптимизацию производить над шаблоном, который будет выкладываться в production.

Ваша разметка по прежнему будет оставаться валидной как в рамках HTML 4.01 Transitional, так и более жесткого HTML 4.01 Strict.

Оптимизация стилей

• Очистка разметки от inline стилей, перенос их в css файл
• Давать именам классов короткие названия
• Использовать более специфичные селекторы в css, нежели давать имена классов большому количеству элементов
• Использовать один css-файл на странице/проекте. Если это не подходит, то собирать автоматически несколько css файлов в один. Один файл быстрее загружается, так как браузеру необходимо делать меньше http-запросов.
• «Сжимать» css файл. При «сжатии» из файла удаляются незначащие пробельные символы переводы строк и комментарии. Мы для этих нужд используем утилиту, которая написана Виталием Харисовым. Пример «сжатого» файла: http://css.yandex.net/css/_images.css. Из общедоступных утилит для сжатия css можно порекомендовать YUI Compressor.
• Оформлять css правила наиболее лаконично:
  • color:#006600; -> color:#060;
  • избавиться от rgb() в пользу #hex
  • использовать, где это уместно, сокращенные формы записи: background, border, font, margin, padding

Оптимизация скриптов

• По возможности, вынести все встроенные (embeded) и инлайновые (inline) стили в JS-файл
• Давать переменным и функциям, по возможности, короткие, но понятные названия, в некоторых местах уместно писать 0 и 1 вместо false и true
• Использовать один JS-файл на странице/проекте
• «Сжимать» JS-файлы. При «сжатии» из файла удаляются незначащие пробельные символы, символы переводы строк и комментарии. Для этих нужд можно использовать утилиту JSMin либо YUI Compressor. YUI Compressor может не только вырезать лишние пробелы и переводы строк, но и делать обфускацию переменных, сокращая их.

Другие способы оптимизации

1. Оптимизация графики

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

Для оптимизация графики можно использовать программы Adobe Fireworks, Adobe Image Ready, GIMP и консольную программу optipng.

2. Объединение небольшиx картинок в один файл

Если это позволяет разметка, объединять небольшие картинки в один файл и в разметки отрисовывать их как css background с разными значениями background-position.

3. Ресурсы которым не нужны куки вынести в другой домен

Очевидно, что картинкам (как и CSS- и JS-файлам) куки не нужны, поэтому, положив их в другой домен, мы дешевым способом экономим трафик пользователей.

Посмотрите на http GET-запрос картинки из домена yandex.ru (ставятся куки) и из домена yandex.net (куки не ставятся).

4. Включить кэширование статики на сервере

Современные страницы содержат очень много подключаемых файлов: картинки, скрипты, стили... При первой загрузке страницы могут выполняться десятки запросов к серверу. Чтобы при следующих обращениях к странице редко изменяемые (статические) данные загружались из кеша браузера, необходимо применять кеширование. Время жизни файла в кеше браузера указывается с помощью заголовков Expires или Cache-Control (появился в HTTP 1.1).

5. Включить «зипование» html, css, js файлов на сервере

При помощи плагина для Firefox — Live HTTP Headers — можно посмотреть, отдает ли сервер «зипованные» данные.

Благодарности

Спасибо Александру Ермолаеву и Виталию Харисову за помощь в подготовке этого материала.