Андрей Кулешов Деловые решения

Про что мы говорим? Страница И множество связанных с ней ресурсов

Зачем городить огород?

Насколько терпеливы пользователи? * Why Web Performance Matters (Richard Campbell)

Три числа терпения 0.1 секунды После этой границы человек начинает замечать задержку 1 секунда На этой границе человек начинает подозревать, что с системой что-то не так. Теряется чувство прямого взаимодействия с компьютером 10 секунд «Время смерти» – человек начинает подозревать, что система не работает. Перезагружает страницу второй раз, переключается на другие задачи, идёт делать чай

Изменение показателей при увеличении времени ожидания * Why Web Performance Matters (Richard Campbell)

На что тратится время? Networking HTML CSS Collections JavaScript Marshalling DOM Formatting Block Building Layout Rendering 50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber) Подсистемы Internet Explorer

На что тратится время? 50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber) Средние значения для пяти новостных сайтов

На что тратится время? 50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber) Средние значения для нескольких AJAX-сайтов

Кто же побеждает? Побеждают не лучшие в чем-то одном Побеждают те, кто последовательно хороши во всём: - объём информации для скачивания; - количество DOM-элементов; - количество CSS-правил - количество изображений; - количество блоков JavaScript-кода; - количество строк JavaScript-кода; - и те, кто всё это правильно использует.

Начинается всё с Сети… Несмотря на рост пропускной способности каналов, она все равно остаётся ограниченной Особенно если учесть стремительно растущий рынок мобильных устройств Поэтому два основных принципа: - уменьшаем количество ресурсов - уменьшаем размер ресурсов

Чем меньше нужно скачать – тем лучше Минимизируйте количество используемых ресурсов Не следует множить сущее без необходимости Уильям Оккам

Избегайте перенаправлений Request GET / HTTP/1.1 Host: getdev.net Response HTTP/ See Other Location:

Демо Request? Response? Headers?

Сжатие на сервере Response details HTTP/ OK Content-Encoding: gzip Server: Microsoft- IIS/7.5 Все современные браузеры поддерживают приём сжатого содержимого (gzip, deflate) Резко уменьшается объем передаваемых по сети данных Поддерживается всеми основными серверами (IIS, Apache, nginx) Единственный минус – процессорное время. Но он с лихвой перевешивается выигрышем в траффике.

Кэширование Response details HTTP/ OK Content-Type: image/jpeg Expires: Sat, 31 Oct :00:00 GMT Last-Modified: Mon, 10 Oct :55:14 GMT ETag: "1fc57257e871:0 Response details HTTP/ Not Modified Last-Modified: Mon, 10 Oct :55:14 GMT Все ваши ресурсы с меняющимся содержим не должны быть закэшированы Все ваши ресурсы с постоянным содержим должны быть закэшированы навсегда ETag и Last-Modified Регистр в названиях ресурсов icon.png и Icon.png – один файл, но два скачивания…

Демо Кэширование и сжатие на IIS

Вынесение ресурсов на несколько доменов Большинство современных браузеров загружают с одного домена одновременно ресурсов Распределив ресурсы по нескольким доменам – получим больше одновременных загрузок Маленькая прибавка к производительности – на эти домены не будут пересылаться cookies при каждом запросу 50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber) getdev.net img1.getdev.net

Использование Content Delivery Network (CDN) Может быть использовано для статического контента (логотипы, картинки), и при некотором усердии – для динамического Пользователь скачивает ресурс с сервера, наиболее близкого к нему Если это популярная JS-библиотека – есть шанс, что у пользователя она уже скачана, и её не придётся качать заново

Использование спрайтов ImageSprite – одна большая картинка, которая содержит в себе множество маленьких И множество CSS-правил, которые хранят координаты и размер каждой из них Общий размер для скачивания уменьшается Нужно скачать только один файл

Демо Использование спрайтов Использование нескольких доменов

Скачали данные – рендерим страницу Что тоже нужно делать быстро И иногда достаточно казаться, а не быть

CSS-файлы – в начале страницы Сразу же по получении CSS файла браузер начинает рендерить красивую картинку Пользователь быстрее получает сайт, приближенный по виду и разметке к финальному состоянию Загрузка других ресурсов при этом не блокируется

Не делайте вложенных и встроенных CSS-стилей Test.item { color:#009900;} MyItem MyItem 2 Это очень просто и быстро – сделать стиль для одного- единственного элемента встроенным в страницу Но на этапе рендеринга это ухудшает производительность

Используйте PNG, JPEG и JPEG-XR JPEG – для фотографий PNG – для всего остального GIF – устаревший формат – занимает больше места, потребляет больше CPU JPEG-XR – для фотографий высокого разрешения. Действительно высокого

… и показывайте их в реальном размере Скачиваем больше, чем нужно Тратим процессорное время на изменение размера А ведь достаточно всего один раз изменить размер

Используйте CSS 3 и HTML5 -ms-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333)) -webkit-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333)) -moz-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333)) Для градиентов border-radius:18px; -webkit-border-radius: 100px; -moz-border-radius: 100px; Для скругления углов Для рисования на канве Поддерживается большинством современных браузеров

И теперь можно запускать скрипты Запускать их лучше всего в тот момент, когда DOM уже полностью скачан. Внешние ресурсы в это время, скорее всего, ещё грузятся, но ждать их не имеет смысла

JS-файлы – в конце страницы Пока загружается и исполняется JavaScript файл – не производится ни скачивание, ни выполнение никаких других ресурсов (по стандарту. На практике, большинство браузеров скачивают ресурсы, но не выполняют их) Поэтому сначала лучше дать загрузиться всему остальному, чтобы пользователь увидел страницу, и лишь затем лезть со своим программированием Если очень-очень надо в начале – то помечаем аттрибутом defer (откладывающем выполнение)

Кэшируйте обращение к DOM $(.class1).show(); $(.class1).hide(); - два раза проходит по всему (возможно, очень большому!) дереву var x = $(.class1); x.show(); x.hide(); - почти в два раза эффективнее

Изменение DOM Если нужно внести изменения в страницу – сначала всё подготовьте, а потом уже один раз меняйте var content = getTitle() + getBody() + getFooter(); myControl.innerHtml = content; innerHtml – самый быстрый способ сделать изменение

Минимизируйте JavaScript /* this function is used to calculate sum of two numbers */ Function sumFunction (value1, value2) { var sum = value1 + value2; Return sum; } function sum(a, b){return a + b;} Минимизированный скрипт: можно делать вручную (удачи) можно делать в момент выкладывания приложения можно делать во время исполнения приложения

Используйте Web Workers var worker = new Worker("worker_script.js"); worker.postMessage("Hello World!"); Могут быть использованы для долговременных расчетов или для фоновых операций Не замедляют пользовательский интерфейс

Демо Минифицированный ЯваСкрипт Cassette for ASP.NET MVC by Andrew Davey

А можно как-то вот это всё автоматизировать? Есть инструменты. Встроенные средства разработчика во всех браузерах Плагины от Гугла и Яху plugin-for-improving-website-performance/ YSlow plugin-for-improving-website-performance/ Инструменты минимизации AjaxMin - YUI Compressor - JSMin … и многие другие

Вопросы? Внимательно слушаю! Андрей Кулешов «Деловые решения» Директор akuleshov.tula Специально для

Интересное чтение Best Practices for Speeding Up Your Web Site – Yahoo Steve Souders – эксперт из Google Top 10 Client-Side Performance Problems in Web side-performance-problems-in-web-2-0/ side-performance-problems-in-web-2-0/

Интересное видео Why Web Performance Matters - Richard Campbell /2011/DEV344 /2011/DEV Performance Tricks to Make Your HTML5 Web Sites Faster - Jason Weber (Principal Program Manager Lead for Internet Explorer) Повышение производительности клиентской части сайта с высокой нагрузкой – Евгений Чигиринский