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