Downloaded 10 times
![Каскад -‐ это дорого
• Старайтесь минимизировать каскад
• Используйте BEM или его аналоги
• Не используйте селектор * (звездочка)
• Селекторы только по классам
• Никаких ID
• Никаких tagName
• Никаких [attr="something"]
• Селектор по .className очень быстрый почти как по #id
19](https://image.slidesharecdn.com/client-side-140707111034-phpapp02/85/Client-Side-19-320.jpg)
Uploaded byAleksandr Boichenko
Производительность Client-Side
Документ посвящен оптимизации производительности клиентской стороны веб-сайтов, освещая важность скорости загрузки и ее влияние на продажи. Обсуждаются методы улучшения скорости, включая настройку кеширования, сжатие данных, использование CDN и оптимизацию клиентского кода, таких как HTML и CSS. Также рассматриваются форматы изображений и инструменты для их сжатия, а также советы по автоматизации процесса оптимизации.
Производительность Client-Side
- 1.
- 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
- 14. Оптимизация клиентского кода •HTML • CSS • Графика 14
- 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
- 17.
- 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
- 23. Оптимизация картинок • Чаще всего требуется только 3 формата графики: PNG, JPG и SVG 23
- 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
- 31.