FrontendConf

Ускоряем показ сайта с помощью App Shell. Как Service Worker ухудшает метрики

Технологии

Single page application, толстый клиент
Мобильные приложения без native (PWA, AMP)
React, Vue, Angular и другие JavaScript-фреймворки
Производительность и мониторинг фронтенда
Web Vitals

Доклад принят в программу конференции

Целевая аудитория

Фронтенд-разработчики и техлиды, интересующиеся улучшением производительности приложений, а также интеграцией PWA.

Тезисы

Не весь RnD проходит успешно, и не всегда даже самые тяжелые в разработке фичи доходят до прода.

AppShell — это подход к разработке приложений, когда пользователь при входе сразу видит скелет сайта, в который потом будет встраиваться контент. Я 2 года занимался добавлением этой технологии в мобильную веб-версию ВКонтакте, но в итоге от неё было решено отказаться.

Я расскажу про особенности реализации AppShell. Покажу, как реализовать его в React и как это сделано у нас на серверном рендеринге в kPHP. Обсудим результаты А/В-экспериментов, интересные особенности и фишки работы с Service Worker.

В конце доклада я поделюсь, как мы в нашей команде относимся к RnD и как нам удается даже неуспешные эксперименты завершать без больших потерь.

Егор Смирнов

VK, ВКонтакте

Техлид в команде инфраструктуры мобильной версии ВКонтакте. Ему нравится идея PWA и приближения мобильных веб-приложений к нативным, и он активно ищет способы, как это сделать. За годы работы в компании успел глубоко погрузиться в работу Service Worker и получить много опыта при попытках внедрения в проект.

VK, ВКонтакте

ВКонтакте — крупнейшая социальная сеть в России и странах СНГ. Миссия ВКонтакте — соединять людей, сервисы и компании, создавая простые и удобные инструменты коммуникации. VK — это более 200 технологичных проектов, больше 15 000 сотрудников и миллион возможностей проявить себя. Делают современные и быстрые интернет-сервисы, доступные каждому.

Видео

Мнение Программного комитета о докладе

Фото куратора

Алексей Авдеев

Егор расскажет о технологии AppShell. Покажет, как её реализовать. Поделиться опытом внедрения AppShell в мобильной версии VK. Расскажет о сложностях работы с Service Workers.

Другие доклады секции

Технологии