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

1. Оптимизация часто показываемых страниц Александр Моисеев moiseyev@yandex-team.ru

2. Введение Главная страница и страница с результатами поиска Яндекса за последний месяц показывались 1,5 миллиарда раз. Очевидно, что такая посещаемая страница должна быть очень легкой, ведь пользователям комфортнее работать с быстро загружающимся ресурсом, а нам приятно экономить пользовательский трафик.

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

4. Оптимизация разметки 1. Использование HTML вместо XHTML • Элементы, не требующие закрывающего тега, нужно писать без «/» – area, base, br, col, hr, img, input, link, meta, param • Не указывать элементы body, head, html, tbody • Не указывать закрывающие теги colgroup, dd, dt, li, option, p, td, tfoot, th, thead, tr • В некоторых случаях возможно писать значения атрибутов без кавычек • Не использовать пробел для разделения значений атрибутов, если значение взято в кавычки • Атрибуты checked, selected, disabled писать без значений

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

6. Оптимизация разметки 3. Заменять мнемонические сущности на их представление Например, для документа в кодировке windows-1251 замена 109 сущностей   на символ с кодом 160 уменьшает документ на 545 байт. Для кодировки windows-1251 можно, таким образом, заменить самые распространенные сущности:  , —, «, »

7. Оптимизация разметки 4. Вырезание из документа не значащих символов Переводы строк, незначащие пробелы и комментарии необходимо вырезать.

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

9. Оптимизация разметки Удобнее всего писать в шаблоне нормальный html, а оптимизацию производить над шаблоном, который будет выкладываться в production. Ваша разметка по прежнему будет оставаться валидной как в рамках HTML 4.01 Transitional, так и более жёсткого HTML 4.01 Strict.

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

11. Оптимизация скриптов • По возможности вынести все встроенные (embeded) и инлайновые (inline) скрипты в js-файл • Давать переменным и функциям по возможности короткие, но понятные названия • Использовать один js-файл на странице/проекте • «Сжимать» js-файлы Для этих нужд можно использовать утилиты JSMin, Dojo shrinksafe, Packer и YUI Compressor http://compressorrater.thruhere.net/

12. Пример Бета верстки Используются «несжатые» project.css и project.js Бета проекта Используются «сжатые» _project.css и _project.js make - собирает файлы _project.css и _project.js на бете верстки make install - копирует собранные файлы на бету проекта Пример project.js include("global.js") include("common.js") function init(focus) { ... } ... Пример project.css @import url(global.css); @import url(common.css); /* Header (begin) */ .b-head a, .b-head .service .exit a { color:#000; } ...

13. Другие способы оптимизации 1. Оптимизация графики Необходимо осознанно выбирать графический формат. Количество цветов для изображений с фиксированной палитрой и степень сжатия для изображений с большим количеством цветов. Для оптимизация графики можно использовать программы Adobe Fireworks, Adobe Image Ready, GIMP и консольную программу optipng.

14. Другие способы оптимизации 2. Объединение небольшиx картинок в один файл Если позволяет разметка, стоит объединять небольшие картинки в один файл и отрисовывать их как css background с разными значениями background-position

15. Другие способы оптимизации 3. Ресурсы, которым не нужны куки, вынести в другой домен Очевидно, что картинкам (как и css и js-файлам) куки не нужны, поэтому, положив их в другой домен, мы дешевым способом экономим трафик пользователей.

16. Другие способы оптимизации Пример домен yandex.ru (ставятся куки) GET /i/blank.gif HTTP/1.1 Host: img.yandex.ru User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.3) Gecko/20061201 Firefox/2.0.0.3 (Ubuntu-feisty) Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: windows-1251,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: YX_HIDE_SPAMBOX=1; yabs-frequency=/1/xBqc0D41F1Tm9W3H0JnytIK0qG4dThic0D01F6Lg9G3G0IS7C2G0q04ye3mV0D01FFXw9G3G0JpTs1y0q04yn74H0Cy1FERD9G3F0SSQ82O0pm4kniibGCy1Gm6AGYP0pm770aFJ9K3F0GS1HWCb0Cy19z169W3C0Jp0FYO0om6yv2SO0Ci1VFpB9G390JmdhGi0n04yQwSZ0CG1NBwL6C340Vp___y0/f0BH0GwC0G00/fGBH0GuG9pM15GSR3XE12Wa0; mail_tag=yandex.ru; YX_SEARCHPREFS=lang:all,family:,gamma:,numdoc:10,target:_blank,banners:1,search_form:,charset:,ton:1,shsd:,url:1,wstat:,t:2,hltitle:1,favicons:1,hltext:1,extradoc:,size:1,tose:1,relev:1,date:1,desc:sometimes; yandexuid=4462161175173775; yafolder=49754947%3A1590000000002319964; mesort=date; L=EF8fVwJ8f3oKUWEPYllyYVtde0tWQVd6MyclVwtYLnU4N3FZMih+IwUIKR8cHWMaYQMlITg+USUjHG1KNyF+Zg==.1176294427.494.269853.95de5458b4817a01b9345b28a834ab8d; yandex_fio=boochie%20snoochie; yandex_login=snoogans; yandex_nickname=; yandex_mail=snoogans; Session_id=1176294427.872.0.7086205.2:15608594:14.39549.52250.17a1934d6a7fa251d98db8e6250d1d93 If-Modified-Since: Thu, 09 Oct 2003 13:42:05 GMT If-None-Match: "1731116325" Cache-Control: max-age=0 домен yandex.net (куки не ставятся) GET /i/blank.gif HTTP/1.1 Host: img.yandex.net User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.3) Gecko/20061201 Firefox/2.0.0.3 (Ubuntu-feisty) Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: windows-1251,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive If-Modified-Since: Thu, 09 Oct 2003 13:42:05 GMT If-None-Match: "1731116325" Cache-Control: max-age=0

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

18. Другие способы оптимизации Пример Expires: Thu, 15 Apr 2010 20:00:00 GMT или Cache-Control: max-age=315360000

19. Другие способы оптимизации 5. Включить «зипование» html, css, js файлов на сервере При помощи плагина для Firefox – Live HTTP Headers (https://addons.mozilla.org/en-US/firefox/addon/3829) можно посмотреть, отдает ли сервер «зипованные» данные

20. Другие способы оптимизации Пример В этом случае ответ сервера «зипуется» В этом случае ответ сервера НЕ «зипуется»

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

22. Александр Моисеев адрес: 111033, Россия, Москва, ул. Самокатная д.1, стр. 21. телефон: +7 (495) 739-22-22факс: +7 (495) 739-23-32 эл. почта: moiseyev@yandex-team.ru