Оптимизация загрузки тяжелых страниц

(для медленных соединений)

Откуда я?• Зовут: Кучмин Илья • Лаборатория Свободных Решений • Должность: Ведущий инженер • Общий стаж в отросли: 11 лет • Twitter: @ikuchmin • GitHub: https://github.com/ikuchmin • Mail: ikuchmin@gmail.com

Почему мне можно?..

• 2 года продавцом-консультантом • 2 года специалистом AnyKey • 3 года системным администратором • 3 года разработчиком

Зачем и почему?• В мире много «хороших» пользователей на медленных каналах

• Формирует позитивное отношение пользователя к сайту

• Формирует позитивное отношение заказчика к исполнителю

• Это интересно. Развивает специалистов. ;-)

План оптимизаций

• Постановка задачи.

• Определение точек приложения силы.

• Реализация основных идей и анализ (замер) результатов

• Рефакторинг, рефакторинг, тесты

Постановка задачи

Постановка задачи• Отдача и рендеринг важного контента пользователю в течении первых 2 секунд.

• Акцент на первое посещение пользователя

Определение точек приложения силы

Определение точек приложения силы

• Приоритизация контента, определение наиболее/наименее важного. Формирование внешнего вида страницы по окончании 2 сек.

• Построение плана загрузки страницы, с точностью до …

• Приоритизация и разделение технологических ресурсов страницы (css, image, js)

• Обеспечение контроля над загрузкой ресурсов

• Использование эффектов для незаметной подмены загруженных ресурсов

2 секунды

6 секунд

10 секунд (ну а что?)

12 секунд

23 секунды

53 секунды

1,6 минуты

Demo

В первую очередь!• Поставьте NGINX. Включите сжатие трафика

• Сделайте минификацию для ресурсов. Будете спать лучше. ;-) Теоретическая экономия ресурсов сервера.

• Сделайте in-line css. Gulp -> inline css

• <script … async></script>

• Избавьтесь, если это возможно, от крупных css, js библиотек. Плохо работает inline, большой размер…

Проблемы

• Параллельная загрузка

• Много CSS. > 10 Kb

• Бинарные объекты. Основное изображение, палитра в конце страницы

Решения• Последовательную загрузка. Контроль сетевого канала и последовательности загрузки ресурсов

• Добавление блоков по готовности

• Разделение HTML на блоки с их подгрузкой по готовности

• Разделение CSS на блоки с их подгрузкой по требованию

• Для повторяющихся блоков используем ES6 String

• Для изображений обеспечиваем поэтапную загрузку

Поехали…

Последовательная загрузка

Управления загрузкой ресурсов

• Что есть в браузере - ничего. Возможно вы мне подскажете. ;-)

• Зато есть XMLHttpRequest. Но…

Queue, lock…

ListenBlockingQueue

Listener & Destructuring

Example Sequence CSS -> JS

Template…

Features

Works & Generated index

Portfolio & Eval

Stepping image load…

Skipping elements

SlidingQueue || Java

Listener

Load Portfolio

Немного сахара

Load main image

Demo

Event WTF!!!

Houston, we have a problem…

Efficiency vs Manhours

Что дальше?• Организация процесса:

• Минификация отдельно загружаемых блоков

• Сборка на CI

• Рефакторинг

• Тесты

• WebSocket

Спасибо за внимание https://github.com/ikuchmin/homeworks2

Обо мне.

• Зовут: Кучмин Илья • Twitter: @ikuchmin • GitHub: https://github.com/ikuchmin • Mail: ikuchmin@gmail.com