Как увеличить скорость загрузки сайта: практический пример на основе обновления финансового портала «Выберу.ру»

Привет, мы – Никита Неминущий и Никита Полковников, ведущие инженеры-программисты финансового маркетплейса «Выберу.ру». В статье поделимся практическим примером повышения скорости загрузки сайта на основе обновления финансового портала.

У нас был ряд задач по увеличению скорости загрузки страниц и улучшению интерфейса для пользователей. Основные вызовы включали:

  • необходимость оптимизации дизайна и облегчения главной страницы;
  • ускорение работы финансовых калькуляторов;
  • рост отказоустойчивости сайта;
  • улучшение оценки по Google Page Speed.

Основные шаги по оптимизации

1. Оптимизация главной страницы и улучшение интерфейса

Главная страница портала была пересмотрена с точки зрения дизайна и наполнения. Чтобы сократить нагрузку, были оставлены только самые важные элементы:

  • банковские калькуляторы стали скрытыми и доступны при необходимости;
  • курсы валют, последние новости, рейтинги банков и советы экспертов организованы так, чтобы сразу попадаться на глаза;
  • основные разделы («Вклады», «Ипотека», «Кредиты» и др.) были вынесены в виде кнопок быстрого доступа.
Как увеличить скорость загрузки сайта: практический пример на основе обновления финансового портала «Выберу.ру»
Как увеличить скорость загрузки сайта: практический пример на основе обновления финансового портала «Выберу.ру»

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

Результат: Упрощенная структура позволила пользователям быстрее находить нужные данные, а также сделала страницу легкой и отзывчивой.

2. Использование React-компонентов для банковских калькуляторов

Для ускорения работы интерактивных элементов, таких как калькуляторы, было принято решение реализовать их на основе React-компонентов. Динамические и отзывчивые элементы, созданные на React, позволяют:

  • загружать только нужные части кода,
  • ускорить взаимодействие и перерасчёт параметров, что особенно важно при работе с кредитными и ипотечными калькуляторами.

Результат: По сравнению с предыдущей реализацией скорость обновления данных в калькуляторах существенно увеличилась, что сказалось на общем пользовательском опыте.

3. Микросервисная архитектура

Мы разделяем монолитный код на более мелкие, независимые модули (.ts файлы). Использование ES модулей с import и export обеспечивает четкую организацию кода и

управление зависимостями.

Результат: Это позволяет браузеру загружать и обрабатывать несколько файлов одновременно вместо ожидания завершения загрузки каждого файла по очереди.

Как увеличить скорость загрузки сайта: практический пример на основе обновления финансового портала «Выберу.ру»

4. Модульности скриптов через маршрутизацию

Так как наш сайт работает на asp.net, мы пользуемся встроенным механизмом маршрутизации, который по определенным параметрам прекрасно описывает наши эндпоинты. Эти параметры мы храним в базе данных и относительно них мы можем определять индивидуальные файлы со скриптами для каждого маршрута отдельно. Таким образом, наш сайт с бэка подгружает конкретные скрипты на конкретные страницы.

Результат: Этот механизм препятствует загрузке лишних данных, что уменьшает размер скриптов и увеличивает скорость загрузки страниц.

Результат по Google Page Speed

После всех этих изменений скорость загрузки сайта увеличилась на несколько десятков процентных пунктов, и сейчас она составляет 89 из 100 по данным Google Page Speed. Портал стал одним из самых быстрых финансовых сервисов в своем сегменте, что положительно сказалось на удержании аудитории.

Как увеличить скорость загрузки сайта: практический пример на основе обновления финансового портала «Выберу.ру»

Благодаря внедренным изменениям, портал «Выберу.ру» стал удобнее, быстрее и надежнее. За год аудитория сайта удвоилась, а продолжительность визитов увеличилась благодаря быстрому доступу к нужной информации.

1212
22
Начать дискуссию
Кейс по накрутке поведенческих факторов в тематике получения сертификатов халяль

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

Кейс по накрутке поведенческих факторов в тематике получения сертификатов халяль
реклама
разместить
Оптимизация сайта: как ускорить загрузку и улучшить конверсии

Технические и визуальные аспекты эффективного сайта

Оптимизация сайта: как ускорить загрузку и улучшить конверсии
Перформанс портфеля - Диверсификация
Перформанс портфеля - Диверсификация
Укрепили имидж и сохранили традиции: как borevich.agency° сделали новый корпоративный сайт компании «Русский Свет»
Укрепили имидж и сохранили традиции: как borevich.agency° сделали новый корпоративный сайт компании «Русский Свет»

Сейчас расскажем, какой корпоративный сайт поможет укрепить имидж и показать партнерам с инвесторами масштаб компании. Будет полезно B2B-компаниям, которые ищут способ подтвердить серьезность и качество своей работы уже на этапе сайта.

33
За 12 месяцев с нуля до лидеров ниши - продвижение аутсорсингового агентства

Кейс команды «СЕО-Импульс» о том, как развивать агентство по управлению персоналом в поисковых системах. С нуля до лидеров ниши за 12 месяцев. Делимся секретами продвижения, честно пишем о наших ошибках. Подробно описываем – как провести смену CMS и организовать переезд.

За 12 месяцев с нуля до лидеров ниши - продвижение аутсорсингового агентства
66
Секреты успешного SEO: +300% трафика и стабильно высокие позиции

Сайт promweld.ru — корпоративный сайт компании, которая продаёт сварочные материалы и оборудование. Наша задача была простой, как дневной свет: сделать так, чтобы потенциальные клиенты из Кирова могли легко находить этот сайт, просто вводя нужные запросы в поисковики. В начале путь был непростым — сайт был почти незаметен для поисковиков, словно не…

Реестр контролируемых лиц: что это и как теперь жить бизнесу?
Реестр контролируемых лиц: что это и как теперь жить бизнесу?
2626
22
Как оптимально использовать кэш для полностраничной выдачи SPA-приложения при высоких нагрузках
Как оптимально использовать кэш для полностраничной выдачи SPA-приложения при высоких нагрузках
44
11
[]