Страница с результатами поиска Яндекса за последние 12 месяцев показывалась почти 7 миллиардов раз (а за последний месяц — полтора миллиарда). Очевидно, что такая посещаемая страница должна быть очень легкой, ведь пользователям комфортнее работать с быстро загружающимся ресурсом, а нам приятно экономить пользовательский трафик.
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).title="На главную страницу" alt="Логотип" использовать title="На главную страницу"alt="Логотип".Не использовать атрибуты значения которых подразумевается по умолчанию: method="get", target="_self", type="text".
Заменять мнемонические сущности &имя; или &#NNNN; на их действительное представление.
Например, для документа в кодировке windows-1251 замена 109 сущностей на символ с кодом 160 уменьшает документ на 545 байт.
Для кодировки windows-1251 можно, таким образом, заменить самые распространенные сущности: , —, «, ».
А, например, сущность • мы не сможем заменить в документе в с кодировкой windows-1215, так-как её нет в кодовой таблице windows-1251, но если кодировка документа utf-8 мы сможем заменить любую сущность на её представление.
Вырезание из документа незначащих пробелов, переводов строк и комментариев возможно организовать после того как страница сформировалась шаблонизатором или непосредственно в шаблоне перед выкладкой в production.
Часто в крупных проектах используются универсальные шаблоны, которые применяются на очень многих страницах. Как правило, это решения, в которых больше внимания уделено универсальности, а не размеру кода.
Удобнее всего писать в шаблоне нормальный html, а оптимизацию производить над шаблоном, который будет выкладываться в production.
Ваша разметка по прежнему будет оставаться валидной как в рамках HTML 4.01 Transitional, так и более жесткого HTML 4.01 Strict.
color:#006600; -> color:#060;rgb() в пользу #hexbackground, border, font, margin, paddingfalse и trueНеобходимо осознанно выбирать графический формат, количество цветов для изображений с фиксированной палитрой и степень сжатия для изображений с большим количеством цветов.
Для оптимизация графики можно использовать программы Adobe Fireworks, Adobe Image Ready, GIMP и консольную программу optipng.
Если это позволяет разметка, объединять небольшие картинки в один файл и в разметки отрисовывать их как css background с разными значениями background-position.
Очевидно, что картинкам (как и CSS- и JS-файлам) куки не нужны, поэтому, положив их в другой домен, мы дешевым способом экономим трафик пользователей.
Посмотрите на http GET-запрос картинки из домена yandex.ru (ставятся куки) и из домена yandex.net (куки не ставятся).
Современные страницы содержат очень много подключаемых файлов: картинки, скрипты, стили... При первой загрузке страницы могут выполняться десятки запросов к серверу. Чтобы при следующих обращениях к странице редко изменяемые (статические) данные загружались из кеша браузера, необходимо применять кеширование. Время жизни файла в кеше браузера указывается с помощью заголовков Expires или Cache-Control (появился в HTTP 1.1).
При помощи плагина для Firefox — Live HTTP Headers — можно посмотреть, отдает ли сервер «зипованные» данные.
Спасибо Александру Ермолаеву и Виталию Харисову за помощь в подготовке этого материала.