На своём первом рабочем месте разработчик столкнулся с огромными задержками загрузки главной страницы e-commerce проекта. QA регулярно сообщали о задержках в 3 секунды и более, которые отталкивали пользователей.
Контекст ситуации
После окончания университета с дипломом по компьютерным наукам молодой специалист понимал основы, но практическое применение знаний оказалось сложнее. Стек, который использовался в проекте, включал S3, CloudFront и SPA, но реальность оказалась далека от теории. Использование iframe для модульного построения архитектуры добавило значительных проблем.
Проблемы с производительностью
Проблема началась с избыточной загрузки кода. Вместо того чтобы загружать только необходимые компоненты, браузер загружал весь SPA, который превысил разумные пределы. Это приводило к увеличению времени загрузки и потребления памяти, особенно на устройствах с низкими характеристиками.
Каждый iframe инкапсулировал целую экосистему React, вместо того чтобы быть лёгким и целевым модулем. Пользователю приходилось терпеть полную нагрузку от огромного приложения, даже посещая один маленький раздел с акцией.
Влияние на индексируемость контента
Кроме проблемы с производительностью, возникают и сложности с индексацией для поисковых систем. SPA по умолчанию затрудняет индексацию, а наличие iframe лишь усугубляет ситуацию, разбивая контент на множество вложенных страниц, что делает его труднодоступным для поисковых роботов.
Решением оказалось не просто исключение iframe, а полная серверная рендеринг-система, что позволяет устранять проблемы с видимостью контента.
Практические выводы для разработчиков
Для команд разработчиков в России и СНГ важно помнить, что использование iframe может привести не только к ухудшению скорости загрузки, но и к проблемам с SEO. Рекомендуется тщательно оценивать архитектуру приложений и избегать избыточной сложности.
Следующий шаг — пересмотр принципов проектирования SPA и активное использование серверного рендеринга для улучшения как пользовательского опыта, так и поисковой оптимизации.