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