Иван Карев — Клиентская оптимизация
•
1 like•1,299 views
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Иван Карев — Клиентская оптимизация
- 6. Что делать? • Использовать чужой опыт 6
- 7. Что делать? • Использовать чужой опыт • Придумать что-то свое 7
- 8. Время отображения Первый байт Браузер 8
- 9. Интернет бывает разный • У пользователя он всегда хуже, чем у разработчика 9
- 10. Интернет бывает разный • У пользователя он всегда хуже, чем у разработчика • Региональная удаленность 0.371/0.199 (MSK) - 0.627/0.576 (USA) 10
- 11. Интернет бывает разный • У пользователя он всегда хуже, чем у разработчика • Региональная удаленность • Мобильный интернет 11
- 12. Уменьшаем сетевые расходы • Несколько ДЦ 12
- 13. Уменьшаем сетевые расходы • Несколько ДЦ • CDN (Content Delivery Network) – общие библиотеки 13
- 14. Бэкенд + Фронтенд • Нужно измерять время работы 14
- 15. Отображение страницы • Сокращаем RTT (round trip time) • Сокращаем размер ресурсов • Устанавливаем порядок подключения ресурсов 15
- 16. DNS lookups • Пути в url вместо поддоменов – для небольших проектов – для ускорения первого показа 16
- 17. DNS lookups • Пути в url вместо поддоменов – для небольших проектов – для ускорения первого показа • Контролируем число различных доменов – параллельная загрузка – не больше 5 17
- 18. Пример 18
- 19. Редиректы • Оставляем только необходимые – авторизация – синхронизация куки – счетчики ссылок 19
- 20. Редиректы • Оставляем только необходимые – авторизация – синхронизация куки – счетчики ссылок • Http редиректы вместо meta/js редиректов 20
- 21. Кэширование • Статика – домен без кук – нужные заголовки – версионирование //yandex.st/project/file.js //yandex.st/project/1.0/file.js – инвалидация //yandex.st/project/1.1/file.js 21
- 22. Пример из жизни <div class="infopanel" id="infopanel_post_153001">! ! ! ! ! <div class="voting ">! ! ! ! <span class="plus" title="Голосовать могут только зарегистрированные пользователи."></span>! ! ! <div class="mark">! 22
- 23. Пример из жизни /**! * В этом файле описан функционал, который реализует плавающий баннер в правой части сайта :) */! ! $(document).ready(function(){! ! !if( $('.similar_questions').size() ) {! ! !show_float_block('.similar_questions')! !}else if( $('.daily_best_posts').size() ) {! ! !show_float_block('.daily_best_posts')! !}! !! !! ! !! })! 23
- 24. Пример из жизни /* ==forms== */! /**! * Стили для элементов форм Базовые стили. Большие формы (width: 100%)! */ ! input, select, textarea{font-family:'arial', sans- serif;font-size:12px;}! ! form{}! ! /* Многострочное текстовое поле */! form .item textarea{height:200px;width:99%;}! 24
- 25. Сжатие • Минификация и обфускация js/css/html – YUI Compressor, GCC, UglifyJS, ... – оптимизация html (кавычки, пробелы, переводы строк) 25
- 26. Сжатие • Минификация и обфускация js/css/html • Gzip js/css/html 26
- 27. Сжатие • Минификация и обфускация js/css/html • Gzip js/css/html • Оптимизация картинок – optipng, imgo, svgo, ... – веб-сервисы 27
- 28. Пример из жизни <link href="/styles/1349162592/_parts/posts.css" rel="stylesheet"/>! <link href="/styles/1349162592/highlight.css" rel="stylesheet"/>! <link href="/styles/1349162592/forms.css" rel="stylesheet"/>! <link href="/styles/1349162592/posts/index.css" rel="stylesheet"/>! <link href="/styles/1349162592/hubs/all.css" rel="stylesheet"/>! <script src="/javascripts/1349162592/all.js"></script>! <script src="/javascripts/1349162592/_parts/posts.js"></script>! <script src="/javascripts/1349162592/libs/jquery.form.js"></script>! <script src="/javascripts/1349162592/libs/highlight.js"></script>! <script src="/javascripts/1349162592/hubs/all.js"></script>! <script src="/javascripts/1349162592/posts/all.js"></script>! 28
- 29. Объединение файлов • Встроенные стили/скрипты <head> <style> .selector {...} </style> <script> function init() {...} </script> </head> 29
- 30. Объединение файлов • Встроенные стили/скрипты • Склеиваем внешние стили/скрипты – 2-3 файла 30
- 31. Пример 31
- 32. Объединение файлов • Встроенные стили/скрипты • Склеиваем внешние стили/скрипты – 2-3 файла • Сжимаем картинки – спрайт – base64 background-image:url(data:image/png;base64,iVBORw0KG... 32
- 33. Порядок стилей и скриптов • Стили сверху (в head) • Скрипты снизу (в конце body) 33
- 34. Порядок стилей и скриптов • Стили сверху (в head) • Скрипты снизу (в конце body) • Подключать ресурсы по необходимости 34
- 35. Измерение времени загрузки • Базовые оптимизации делаем без измерений • Эксперименты только с измерениями 35
- 36. Инструменты • Средства разработчика в браузере – Сеть – Timeline – ... 36
- 37. Пример 37
- 38. Инструменты • Средства разработчика в браузере – Сеть – Timeline – ... • Плагины – YSlow – ... 38
- 39. 39
- 40. Инструменты • Средства разработчика в браузере – Сеть – Timeline – ... • Плагины – YSlow – ... • Сервисы – WebPageTest – ... 40
- 41. 41
- 43. Тестирование • Тестовое окружение 43
- 44. Тестирование • Тестовое окружение • На стороне пользователей – скрипты на странице – анализ результатов – Navigation timing API 44
- 45. Разработчик интерфейсов должен • Принимать любые решения с оглядкой на пользователей 45
- 46. Разработчик интерфейсов должен • Принимать любые решения с оглядкой на пользователей • Следить за временем отображения страниц 46
- 47. Разработчик интерфейсов должен • Принимать любые решения с оглядкой на пользователей • Следить за временем отображения страниц • Делать это постоянно 47
- 48. Ссылки • http://developer.yahoo.com/performance/rules.html • https://developers.google.com/speed/docs/best-practices • http://w3c-test.org/webperf/specs/NavigationTiming/ 48
- 49. Иван Карев Разработчик интерфейсов ivan-karev@yandex-team.ru Спасибо