Download to read offline
Uploaded byFrontDays
FrontDays #1. Илья Кучмин, Оптимизация загрузки тяжелых страниц
Документ описывает стратегию оптимизации загрузки тяжелых страниц для пользователей с медленными интернет-соединениями. Основное внимание уделяется быстрому отображению важного контента, приоритизации ресурсов и применению технологий, таких как минимизация и последовательная загрузка. Также представлены детали реализации плана оптимизации и рекомендации по улучшению пользовательского опыта.
More Related Content
![Web performance 101 [GDG nsk webdev meetup #3]](https://cdn.slidesharecdn.com/ss_thumbnails/gdg-web-pref-170821085937-thumbnail.jpg?width=640&height=640&fit=bounds)
FrontDays #1. Илья Кучмин, Оптимизация загрузки тяжелых страниц
- 1. Оптимизация загрузки тяжелых страниц (длямедленных соединений)
- 2. Откуда я? • Зовут:Кучмин Илья • Лаборатория Свободных Решений • Должность: Ведущий инженер • Общий стаж в отросли: 11 лет • Twitter: @ikuchmin • GitHub: https://github.com/ikuchmin • Mail: ikuchmin@gmail.com
- 3. Почему мне можно?.. •2 года продавцом-консультантом • 2 года специалистом AnyKey • 3 года системным администратором • 3 года разработчиком
- 4. Зачем и почему? •В мире много «хороших» пользователей на медленных каналах • Формирует позитивное отношение пользователя к сайту • Формирует позитивное отношение заказчика к исполнителю • Это интересно. Развивает специалистов. ;-)
- 5. План оптимизаций • Постановказадачи. • Определение точек приложения силы. • Реализация основных идей и анализ (замер) результатов • Рефакторинг, рефакторинг, тесты
- 6.
- 7. Постановка задачи • Отдачаи рендеринг важного контента пользователю в течении первых 2 секунд. • Акцент на первое посещение пользователя
- 8.
- 9. Определение точек приложения силы •Приоритизация контента, определение наиболее/ наименее важного. Формирование внешнего вида страницы по окончании 2 сек. • Построение плана загрузки страницы, с точностью до … • Приоритизация и разделение технологических ресурсов страницы (css, image, js) • Обеспечение контроля над загрузкой ресурсов • Использование эффектов для незаметной подмены загруженных ресурсов
- 10.
- 11.
- 12. 10 секунд (нуа что?)
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. В первую очередь! •Поставьте NGINX. Включите сжатие трафика • Сделайте минификацию для ресурсов. Будете спать лучше. ;-) Теоретическая экономия ресурсов сервера. • Сделайте in-line css. Gulp -> inline css • <script … async></script> • Избавьтесь, если это возможно, от крупных css, js библиотек. Плохо работает inline, большой размер…
- 19. Проблемы • Параллельная загрузка •Много CSS. > 10 Kb • Бинарные объекты. Основное изображение, палитра в конце страницы
- 20. Решения • Последовательную загрузка.Контроль сетевого канала и последовательности загрузки ресурсов • Добавление блоков по готовности • Разделение HTML на блоки с их подгрузкой по готовности • Разделение CSS на блоки с их подгрузкой по требованию • Для повторяющихся блоков используем ES6 String • Для изображений обеспечиваем поэтапную загрузку
- 21.
- 22.
- 23. Управления загрузкой ресурсов • Чтоесть в браузере - ничего. Возможно вы мне подскажете. ;-) • Зато есть XMLHttpRequest. Но…
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. Works & Generatedindex
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. Houston, we havea problem…
- 42.
- 43. Что дальше? • Организацияпроцесса: • Минификация отдельно загружаемых блоков • Сборка на CI • Рефакторинг • Тесты • WebSocket
- 44.
- 45. Обо мне. • Зовут:Кучмин Илья • Twitter: @ikuchmin • GitHub: https://github.com/ikuchmin • Mail: ikuchmin@gmail.com