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