Embed Size (px)
DESCRIPTION
Оптимизация часто показываемых страниц. Александр Моисеев [email protected]. Введение. Главная страница и страница с результатами поиска Яндекса за последний месяц показывались 1,5 миллиарда раз. - PowerPoint PPT Presentation
Citation preview
Введение
Главная страница и страница с результатами поиска Яндекса за последний месяц показывались 1,5 миллиарда раз.
Очевидно, что такая посещаемая страница должна быть очень легкой, ведь пользователям комфортнее работать с быстро загружающимся ресурсом, а нам приятно экономить пользовательский трафик.
Пути оптимизации:
• Оптимизация разметки
• Оптимизация стилей
• Оптимизация скриптов
• Другие способы оптимизации
Оптимизация разметки
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 писать без
значений
2. Значения атрибутов по умолчанию
Не использовать атрибуты, значения которых подразумевается по умолчанию: method="get", target="_self", type="text"
Оптимизация разметки
3. Заменять мнемонические сущности на их представление
Например, для документа в кодировке windows-1251 замена 109 сущностей на символ с кодом 160 уменьшает документ на 545 байт.
Для кодировки windows-1251 можно, таким образом, заменить самые распространенные сущности: , —, «, »
Оптимизация разметки
4. Вырезание из документа не значащих символов
Переводы строк, незначащие пробелы и комментарии необходимо вырезать.
Оптимизация разметки
5. Использование специально оптимизированной разметки
вместо универсальной
Часто в крупных проектах используются универсальные шаблоны, которые применяются на очень многих страницах. Как правило, это решения, в которых больше внимания уделено универсальности, а не размеру кода.
Оптимизация разметки
Удобнее всего писать в шаблоне нормальный html, а оптимизацию производить над шаблоном, который будет выкладываться в production.
Ваша разметка по прежнему будет оставаться валидной как в рамках HTML 4.01 Transitional, так и более жёсткого HTML 4.01 Strict.
Оптимизация разметки
Оптимизация стилей
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
Оптимизация скриптов
1. По возможности вынести все встроенные (embeded) и инлайновые (inline) скрипты в js-файл
2. Давать переменным и функциям по возможности короткие, но понятные названия
3. Использовать один js-файл на странице/проекте
4. «Сжимать» js-файлыДля этих нужд можно использовать утилиты JSMin, Dojo shrinksafe, Packer и YUI Compressorhttp://compressorrater.thruhere.net/
ПримерБета версткиИспользуются «несжатые» project.css и project.js
Бета проектаИспользуются «сжатые» _project.css и _project.js
make - собирает файлы _project.css и _project.js на бете верстки
make install - копирует собранные файлы на бету проекта
Пример project.css
@import url(global.css);@import 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) { ...}...
1. Оптимизация графики
Необходимо осознанно выбирать графический формат. Количество цветов для изображений с фиксированной палитрой и степень сжатия для изображений с большим количеством цветов.
Для оптимизация графики можно использовать программы Adobe Fireworks, Adobe Image Ready, GIMP и консольную программу optipng.
Другие способы оптимизации
2. Объединение небольшиx картинок в один файл
Если позволяет разметка, стоит объединять небольшие картинки в один файл
и отрисовывать их как css background с разными значениями background-position
Другие способы оптимизации
QuickTime™ and a decompressor
are needed to see this picture.
3. Ресурсы, которым не нужны куки, вынести в другой
доменОчевидно, что картинкам (как и css и js-файлам) куки не нужны, поэтому, положив их в другой домен, мы дешевым способом экономим трафик пользователей.
Другие способы оптимизации
Примердомен yandex.ru (ставятся куки)GET /i/blank.gif HTTP/1.1Host: img.yandex.ruUser-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.5Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3Accept-Encoding: gzip,deflateAccept-Charset: windows-1251,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveCookie: 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.17a1934d6a7fa251d98db8e6250d1d93If-Modified-Since: Thu, 09 Oct 2003 13:42:05 GMTIf-None-Match: "1731116325"Cache-Control: max-age=0
Другие способы оптимизации
домен yandex.net (куки не ставятся)GET /i/blank.gif HTTP/1.1Host: img.yandex.netUser-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.5Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3Accept-Encoding: gzip,deflateAccept-Charset: windows-1251,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveIf-Modified-Since: Thu, 09 Oct 2003 13:42:05 GMTIf-None-Match: "1731116325"Cache-Control: max-age=0
4. Включить кэширование статики на сервере
Современные страницы содержат очень много подключаемых файлов: картинки, скрипты, стили... При первой загрузке страницы могут выполняться десятки запросов к серверу. Чтобы при следующих обращениях к странице редко изменяемые (статические) данные загружались из кеша браузера, необходимо применять кеширование. Время жизни файла в кеше браузера указывается с помощью заголовков Expires или Cache-Control (появился в HTTP 1.1).
Другие способы оптимизации
Пример
Другие способы оптимизации
Expires: Thu, 15 Apr 2010 20:00:00 GMT
или
Cache-Control: max-age=315360000
5. Включить «зипование» html, css, js файлов на
сервереПри помощи плагина для Firefox – Live HTTP Headers (https://addons.mozilla.org/en-US/firefox/addon/3829) можно посмотреть, отдает ли сервер «зипованные» данные
Другие способы оптимизации
Пример
Другие способы оптимизации
В этом случае ответ сервера «зипуется» В этом случае ответ сервера НЕ «зипуется»
Благодарности
Спасибо Александру Ермолаеву и Виталию Харисову за помощь в подготовке этого материала.
Александр Моисеев
адрес: 111033, Россия, Москва,ул. Самокатная д.1, стр. 21.телефон: +7 (495) 739-22-22факс: +7 (495) 739-23-32
эл. почта: [email protected]
