Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Производительность  
Client-­‐Side
Александр  Бойченко  
@banzalik
О  чем  сегодня  поговорим?
• О  HTML  и  CSS  
• Как  ускорить  ваш  сайт  
• Как  создавать  быстрые  сайты
2
Когда  пора  думать  про  скорость?
• Когда  Hi-­‐Load  
• Когда  сайт  приносит  деньги  
• Стоит  задача  подняться  в  ...
Почему  именно  Business?
• 100  ms  задержка  =  на  1%  падение  продаж  (Amazon)  
• 400  ms  задежка  =  5-­‐9%  умень...
Чем  мерять  скорость  загрузки?
• Dev  Tools,  вкладки  ресурсы,  сеть.  
• Google  page  speed  
• YSlow  
• http://www....
Что  влияет  на  скорость  загрузки?
• Сервер  (Back-­‐End)  
• Сеть  (Internet)  
• Клиентский  код  (Front-­‐End)
6
Сервер
• Настройка  кеширования  
• Настройка  сжатия  
• Уменьшение  количества  перенаправлений  
• Использование  CDN  ...
Настройка  кеширования
• HTML  
• CSS  
• Медиа/Картинки  
• JavaScript  
• Файлы  храним  в  виде  MD5(file.ext).ext  или...
Настройка  кеширования
• Настроить  ETags  
• Настроить  Expires  или  Cache-­‐Control  Header  
• По  возможности  кеширо...
Настройка  сжатия
• Gzip  
• Уровень  сжатия  6-­‐8  
• Сжимать  можно  как  на  лету,  так  и  создавать  .gzip  файлы  
...
Использование  CDN
• Не  использовать  для  ресурсов  внутри  <head>...</head>  
• Не  более  4х  доменов  
• Контролирова...
Уменьшение  времени  ответа  сервера
• Пинать  программистов  и  админов  
• Использовать  проксирующие  сервера  такие  к...
Оптимизация  сети
• Использование  CDN  
• Скорость  не  так  важна,  как  пинг  
• Старайтесь  размещать  сервера  ближе ...
Оптимизация  клиентского  кода
• HTML  
• CSS  
• Графика
14
Оптимизация  HTML
• CSS  и  JS  -­‐  должны  подключаться  как  внешние  файлы  
• CSS  внутри  <head>  
• JS  перед  закр...
Оптимизация  HTML
• Не  используйте  <img  src=""  />  с  пустым  атрибутом  src  
• Минимизируйте  количество  CSS  файло...
Оптимизация  CSS
17
Как  работает  CSS  парсер?
#header  ul  li  a  {  color:  red  }  
!
• Справа  на  лево  
• Находим  все  ссылки  на  стр...
Каскад  -­‐  это  дорого
• Старайтесь  минимизировать  каскад  
• Используйте  BEM  или  его  аналоги  
• Не  используйте ...
Методы  оптимизации  CSS
• Не  используйте  reset.css,  normalizer.css  или  их  аналоги  
• Не  используйте  теги,  чьи  ...
Методы  оптимизации  CSS
• Избегайте  глобальных  классов  на  <body>  и  их  переключения  
• Минимизируйте  длинну  имен...
Спрайты  или  data:uri?
• Если  не  мобильные  -­‐  то  предпочтительней  data:uri  
• CSS  файл  с  data:uri  может  быть...
Оптимизация  картинок
• Чаще  всего  требуется  только  3  формата  графики:  PNG,  JPG  и  SVG
23
PNG
• Иконки  
• Полупрозрачность,  в  том  числе  и  для  PNG8  
• Мало  цветов  
• Картинки  с  текстом  
• Градиенты  
...
JPG
• Фотографии  
• Изображения  большого  размера  
• Допустима  потеря  качества
25
SVG
• Векторная  графика  
• Иконки  
• Есть  возможность  взаимодействовать  с  CSS  и  JS  
• Нет  проблем  с  масштабир...
Сжатие  графики
• Photoshop  
• Svgo  -­‐  для  svg  
• JpegMini  -­‐  для  jpg  
• ScriptPNG  или  imgo  -­‐  для  png  и...
Favicon.ico
• Всегда  должен  лежать  в  корне  проекта  http://site.name/favicon.ico  
• Некоторые  браузеры  запрашивают...
И  еще  немного  про  графику
• Всегда  вставляйте  картинки  на  страницу  в  их  реальном  размере  
• Background-­‐size...
Некоторые  вещи  легко  автоматизируются
• Grunt-­‐  и  Gulp-­‐таски  для  оптимизации  производительности  (http://
front...
Спасибо!
31
Александр  Бойченко  
banzalik@gmail.com  
@banzalik
Upcoming SlideShare
Loading in …5
×

Производительность Client-Side

711 views

Published on

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Производительность Client-Side

  1. 1. Производительность   Client-­‐Side Александр  Бойченко   @banzalik
  2. 2. О  чем  сегодня  поговорим? • О  HTML  и  CSS   • Как  ускорить  ваш  сайт   • Как  создавать  быстрые  сайты 2
  3. 3. Когда  пора  думать  про  скорость? • Когда  Hi-­‐Load   • Когда  сайт  приносит  деньги   • Стоит  задача  подняться  в  поисковой  выдаче 3
  4. 4. Почему  именно  Business? • 100  ms  задержка  =  на  1%  падение  продаж  (Amazon)   • 400  ms  задежка  =  5-­‐9%  уменьшение  трафика  (Yahoo!)   • 500  ms  задержка  =  20%  уменьшение  трафика  (Google) 4
  5. 5. Чем  мерять  скорость  загрузки? • Dev  Tools,  вкладки  ресурсы,  сеть.   • Google  page  speed   • YSlow   • http://www.webpagetest.org   • JavaScript  (Navigation  Timing  API,  сторонние  утилиты) 5
  6. 6. Что  влияет  на  скорость  загрузки? • Сервер  (Back-­‐End)   • Сеть  (Internet)   • Клиентский  код  (Front-­‐End) 6
  7. 7. Сервер • Настройка  кеширования   • Настройка  сжатия   • Уменьшение  количества  перенаправлений   • Использование  CDN   • Уменьшать  размер  cookie   • Уменьшение  времени  ответа  сервера 7
  8. 8. Настройка  кеширования • HTML   • CSS   • Медиа/Картинки   • JavaScript   • Файлы  храним  в  виде  MD5(file.ext).ext  или  SHA256(file.ext).ext   • Например:  608333adc72f545078ede3aad71bfe74.css 8
  9. 9. Настройка  кеширования • Настроить  ETags   • Настроить  Expires  или  Cache-­‐Control  Header   • По  возможности  кешировать  Ajax   • По  возможности  для  Ajax  использовать  GET  запросы 9
  10. 10. Настройка  сжатия • Gzip   • Уровень  сжатия  6-­‐8   • Сжимать  можно  как  на  лету,  так  и  создавать  .gzip  файлы   • Создавать  .gzip  файлы  предпочтительней   • Сжимаем  все,  кроме  медиа  и  картинок 10
  11. 11. Использование  CDN • Не  использовать  для  ресурсов  внутри  <head>...</head>   • Не  более  4х  доменов   • Контролировать,  чтобы  конкретный  ресурс  всегда  грузился  с   одного  домена 11
  12. 12. Уменьшение  времени  ответа  сервера • Пинать  программистов  и  админов   • Использовать  проксирующие  сервера  такие  как  Ngnix   • Page-­‐Speed  модули  для  веб  серверов  от  Google 12
  13. 13. Оптимизация  сети • Использование  CDN   • Скорость  не  так  важна,  как  пинг   • Старайтесь  размещать  сервера  ближе  к  клиентам   • Минимизируйте  количество  сетевых  запросов 13
  14. 14. Оптимизация  клиентского  кода • HTML   • CSS   • Графика 14
  15. 15. Оптимизация  HTML • CSS  и  JS  -­‐  должны  подключаться  как  внешние  файлы   • CSS  внутри  <head>   • JS  перед  закрытием  тега  </body>   • Страница  должна  уметь  работать  c  отключенным  JS   • Минимизируем  количество  <iframe>   • Следите  за  доступностью  ресурсов,  404  не  допустимо   • Для  таблиц  table-­‐layout:  fixed    +  width 15
  16. 16. Оптимизация  HTML • Не  используйте  <img  src=""  />  с  пустым  атрибутом  src   • Минимизируйте  количество  CSS  файлов  до  одного   • Минимизируйте  количество  JS  файлов  до  одного   • Минимизируйте  HTML   • Внешний  код  (FB  like,  Google  analytics  и  др.)  дожен  быть   асинхронным   • Избегайте  большой  вложенности  тегов 16
  17. 17. Оптимизация  CSS 17
  18. 18. Как  работает  CSS  парсер? #header  ul  li  a  {  color:  red  }   ! • Справа  на  лево   • Находим  все  ссылки  на  странице   • Находим  все  li,  сожержащие  ссылки   • Находим  все  ul,  сожержащие  li  c  ссылками   • Находим  элементы  с  заданным  ID,  содержащим  ul  li  a 18
  19. 19. Каскад  -­‐  это  дорого • Старайтесь  минимизировать  каскад   • Используйте  BEM  или  его  аналоги   • Не  используйте  селектор  *  (звездочка)   • Селекторы  только  по  классам   • Никаких  ID   • Никаких  tagName   • Никаких  [attr="something"]   • Селектор  по  .className  очень  быстрый  почти  как  по  #id 19
  20. 20. Методы  оптимизации  CSS • Не  используйте  reset.css,  normalizer.css  или  их  аналоги   • Не  используйте  теги,  чьи  стили  требуется  сбрасывать  (ul,  p,  i  and   etc)   • Не  используйте  @import   • Не  используйте  IEшные  фильтры  или  кешируйте  их   • Некоторые  фичи  CSS3  медленные   • Спрайты  и  data:uri   • Вендроные  префиксы,  браузерные  хаки  (определять  браузер  на   сервере  и  отдавать  ему  нужный  CSS) 20
  21. 21. Методы  оптимизации  CSS • Избегайте  глобальных  классов  на  <body>  и  их  переключения   • Минимизируйте  длинну  имен  классов   • Острожно  относиться  к  кастомным  шрифтам   • Пользуйтесь  минификаторами  CSS,  например  CSSO   • Autoprefixer  поможет  с  вендорными  префиксами  и  с  генерацией   стилей  для  отдельных  браузеров 21
  22. 22. Спрайты  или  data:uri? • Если  не  мобильные  -­‐  то  предпочтительней  data:uri   • CSS  файл  с  data:uri  может  быть  отдельным,  не  обязательно   data:uri  включать  в  основной  CSS  файл 22
  23. 23. Оптимизация  картинок • Чаще  всего  требуется  только  3  формата  графики:  PNG,  JPG  и  SVG 23
  24. 24. PNG • Иконки   • Полупрозрачность,  в  том  числе  и  для  PNG8   • Мало  цветов   • Картинки  с  текстом   • Градиенты   • Служебная  графика   • Недопустима  потеря  качества 24
  25. 25. JPG • Фотографии   • Изображения  большого  размера   • Допустима  потеря  качества 25
  26. 26. SVG • Векторная  графика   • Иконки   • Есть  возможность  взаимодействовать  с  CSS  и  JS   • Нет  проблем  с  масштабируемостью  и  retina   • Иногда  «Мылится»  в  не  Retina 26
  27. 27. Сжатие  графики • Photoshop   • Svgo  -­‐  для  svg   • JpegMini  -­‐  для  jpg   • ScriptPNG  или  imgo  -­‐  для  png  и  jpg   • punypng.com,  kraken.io,  jpegmini.com,  smush.it   • Есть  еще  десятки  инструментов  на  любой  вкус 27
  28. 28. Favicon.ico • Всегда  должен  лежать  в  корне  проекта  http://site.name/favicon.ico   • Некоторые  браузеры  запрашивают  http://site.name/favicon.ico   даже  если  он  не  обьявлен  в  HTML   • Иконки  для  мобильных 28
  29. 29. И  еще  немного  про  графику • Всегда  вставляйте  картинки  на  страницу  в  их  реальном  размере   • Background-­‐size  -­‐  может  тормозить   • Не  делайте  спрайты  очень  большими  (не  более  60  Kb)   • Не  забывайте  оптимизировать  спрайты 29
  30. 30. Некоторые  вещи  легко  автоматизируются • Grunt-­‐  и  Gulp-­‐таски  для  оптимизации  производительности  (http:// frontender.info/performance-­‐optimization/) 30
  31. 31. Спасибо! 31 Александр  Бойченко   banzalik@gmail.com   @banzalik

×