Пусть всем кажется, что всё грузится быстро - улучшаем ощущение от загрузки
Вы сделали хорошее приложение, красивое, сложно. Но была проблемка - API тормозит и приложение грузится медленно. Решение выбрали простое - overlay с ajax-loader пока всё не загрузится.
Можно ли улучшить это решение? Можно ли сделать ваше приложение доступным, даже пока от сервера не пришли данные и показывать, казалось бы, нечего?
В докладе я расскажу как о таких, "обманных ускорениях", так и о простых техниках, которые позволяют делать контент доступным раньше. При этом условимся - трогать API с его скоростью мы не будем, все сможет сделать FrontEnd разработчик!
Доклад состоит из следующих блоков:
1. Сделать так, чтобы пользователю было ждать "не скучно" - SVG\GIF\JPG скелетоны и прелоудеры. Как их создавать, поддерживать. Как не надо делать.
2. Сделать так, чтобы пользователи получили возможность работать с контентом как можно раньше - как разделить один большой block-overlay на несколько мелких, как использовать п.1 но на уровне компонентов, не всего приложения целиком
3. Сделать так, чтобы загрузка данных действительно была быстрее. Но мы условились - скорость API такая, какая есть, её мы не будем ускорять (у всех разные BackEnd, мало общих техник). Для ускорения загрузки без ускорения работы сервера будут рассмотрены: предварительная загрузка данных на других страницах, внедрение нужных данных в index.html (минус запрос)
4. Как проверить, что всё, что мы сделали - сработало? Добавим как самописные метрики производительности (Grafana/influxDB), так и воспользуемся уже подключенными GoogleAnalytics/Y.Metrica.
Все кейсы взяты не из головы, а были опробованы и внедрены на проекте. Плюс, кроме реальных примеров из живого доступного проекта будут микро-примеры из Online-редакторов, в которых аудитория сможет поиграться после доклада.