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

1 Оптимизация часто показываемых страниц Александр Моисеев

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

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

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

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: ) Gecko/ Firefox/ (Ubuntu-feisty) Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,im age/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/xBqc0D41F1Tm9W3H0JnytIK0qG4dThic0D01F6Lg9G3G0IS7C2 G0q04ye3mV0D01FFXw9G3G0JpTs1y0q04yn74H0Cy1FERD9G3F0SSQ82O0 pm4kniibGCy1Gm6AGYP0pm770aFJ9K3F0GS1HWCb0Cy19z169W3C0Jp0FY O0om6yv2SO0Ci1VFpB9G390JmdhGi0n04yQwSZ0CG1NBwL6C340Vp___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,e xtradoc:,size:1,tose:1,relev:1,date:1,desc:sometimes; yandexuid= ; yafolder= %3A ; mesort=date; L=EF8fVwJ8f3oKUWEPYllyYVtde0tWQVd6MyclVwtYLnU4N3FZMih+IwUIKR8c HWMaYQMlITg+USUjHG1KNyF+Zg== de5458b48 17a01b9345b28a834ab8d; yandex_fio=boochie%20snoochie; yandex_login=snoogans; yandex_nickname=; yandex_mail=snoogans; Session_id= : : a1934 d6a7fa251d98db8e6250d1d93 If-Modified-Since: Thu, 09 Oct :42:05 GMT If-None-Match: " " 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: ) Gecko/ Firefox/ (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 :42:05 GMT If-None-Match: " " Cache-Control: max-age=0

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

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

19 5. Включить «зипование» html, css, js файлов на сервере При помощи плагина для Firefox – Live HTTP Headers ( можно посмотреть, отдает ли сервер «зипованные» данные Другие способы оптимизации

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

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

22 Александр Моисеев адрес: , Россия, Москва, ул. Самокатная д.1, стр. 21. телефон: +7 (495) факс: +7 (495) эл. почта: