Добавить в корзинуПозвонить
Найти в Дзене

Разработчики сталкиваются с медленными страницами из-за iframe

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

На своём первом рабочем месте разработчик столкнулся с огромными задержками загрузки главной страницы e-commerce проекта. QA регулярно сообщали о задержках в 3 секунды и более, которые отталкивали пользователей.

Контекст ситуации

После окончания университета с дипломом по компьютерным наукам молодой специалист понимал основы, но практическое применение знаний оказалось сложнее. Стек, который использовался в проекте, включал S3, CloudFront и SPA, но реальность оказалась далека от теории. Использование iframe для модульного построения архитектуры добавило значительных проблем.

Проблемы с производительностью

Проблема началась с избыточной загрузки кода. Вместо того чтобы загружать только необходимые компоненты, браузер загружал весь SPA, который превысил разумные пределы. Это приводило к увеличению времени загрузки и потребления памяти, особенно на устройствах с низкими характеристиками.

Каждый iframe инкапсулировал целую экосистему React, вместо того чтобы быть лёгким и целевым модулем. Пользователю приходилось терпеть полную нагрузку от огромного приложения, даже посещая один маленький раздел с акцией.

Влияние на индексируемость контента

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

Решением оказалось не просто исключение iframe, а полная серверная рендеринг-система, что позволяет устранять проблемы с видимостью контента.

Практические выводы для разработчиков

Для команд разработчиков в России и СНГ важно помнить, что использование iframe может привести не только к ухудшению скорости загрузки, но и к проблемам с SEO. Рекомендуется тщательно оценивать архитектуру приложений и избегать избыточной сложности.

Следующий шаг — пересмотр принципов проектирования SPA и активное использование серверного рендеринга для улучшения как пользовательского опыта, так и поисковой оптимизации.

The post Разработчики сталкиваются с медленными страницами из-за iframe appeared first on iTech News.