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