Как увеличить скорость загрузки сайта: практический пример на основе обновления финансового портала «Выберу.ру»
Привет, мы – Никита Неминущий и Никита Полковников, ведущие инженеры-программисты финансового маркетплейса «Выберу.ру». В статье поделимся практическим примером повышения скорости загрузки сайта на основе обновления финансового портала.
У нас был ряд задач по увеличению скорости загрузки страниц и улучшению интерфейса для пользователей. Основные вызовы включали:
- необходимость оптимизации дизайна и облегчения главной страницы;
- ускорение работы финансовых калькуляторов;
- рост отказоустойчивости сайта;
- улучшение оценки по Google Page Speed.
Основные шаги по оптимизации
1. Оптимизация главной страницы и улучшение интерфейса
Главная страница портала была пересмотрена с точки зрения дизайна и наполнения. Чтобы сократить нагрузку, были оставлены только самые важные элементы:
- банковские калькуляторы стали скрытыми и доступны при необходимости;
- курсы валют, последние новости, рейтинги банков и советы экспертов организованы так, чтобы сразу попадаться на глаза;
- основные разделы («Вклады», «Ипотека», «Кредиты» и др.) были вынесены в виде кнопок быстрого доступа.
Эти меры позволили убрать избыточные данные с главной страницы, снизив нагрузку на браузеры пользователей и уменьшив общее время загрузки страницы на несколько десятков пунктов.
Результат: Упрощенная структура позволила пользователям быстрее находить нужные данные, а также сделала страницу легкой и отзывчивой.
2. Использование React-компонентов для банковских калькуляторов
Для ускорения работы интерактивных элементов, таких как калькуляторы, было принято решение реализовать их на основе React-компонентов. Динамические и отзывчивые элементы, созданные на React, позволяют:
- загружать только нужные части кода,
- ускорить взаимодействие и перерасчёт параметров, что особенно важно при работе с кредитными и ипотечными калькуляторами.
Результат: По сравнению с предыдущей реализацией скорость обновления данных в калькуляторах существенно увеличилась, что сказалось на общем пользовательском опыте.
3. Микросервисная архитектура
Мы разделяем монолитный код на более мелкие, независимые модули (.ts файлы). Использование ES модулей с import и export обеспечивает четкую организацию кода и
управление зависимостями.
Результат: Это позволяет браузеру загружать и обрабатывать несколько файлов одновременно вместо ожидания завершения загрузки каждого файла по очереди.
4. Модульности скриптов через маршрутизацию
Так как наш сайт работает на asp.net, мы пользуемся встроенным механизмом маршрутизации, который по определенным параметрам прекрасно описывает наши эндпоинты. Эти параметры мы храним в базе данных и относительно них мы можем определять индивидуальные файлы со скриптами для каждого маршрута отдельно. Таким образом, наш сайт с бэка подгружает конкретные скрипты на конкретные страницы.
Результат: Этот механизм препятствует загрузке лишних данных, что уменьшает размер скриптов и увеличивает скорость загрузки страниц.
Результат по Google Page Speed
После всех этих изменений скорость загрузки сайта увеличилась на несколько десятков процентных пунктов, и сейчас она составляет 89 из 100 по данным Google Page Speed. Портал стал одним из самых быстрых финансовых сервисов в своем сегменте, что положительно сказалось на удержании аудитории.
Благодаря внедренным изменениям, портал «Выберу.ру» стал удобнее, быстрее и надежнее. За год аудитория сайта удвоилась, а продолжительность визитов увеличилась благодаря быстрому доступу к нужной информации.