Перенос онлайн-платформы на Nuxt.js, ускорение работы сайта на 37%, автоматизация сбора заявок из форм без потери данных

Эти решения обеспечивают сохранность данных и положительный пользовательский опыт, ведь теперь все заявки доходят до адресата.

Задача 2. Перенести сайт на современный стек с сохранением дизайна

ПРОБЛЕМА

Сайт заказчика был разработан на PHP 5.4 + October CMS на базе Laravel v5. Из-за устаревшего ПО было сложнее работать с сайтом, и у программистов уходило больше времени на то, чтобы внедрить новый функционал.

РЕАЛИЗАЦИЯ

Мы обновили стек до PHP 8.1 + Laravel v9 и Nuxt.js, заново написали код и оптимизировали структуру сайта.

Этапы работы:

1. Пересмотрели архитектуру сайта.

В разделе webinar.ru/articles лежит больше сотни статей. Раньше они хранились в файлах, которые могли создавать и редактировать только программисты, а сотрудники без технических навыков не могли управлять контентом. Теперь, благодаря новой админ-панели, контент-менеджеры могут самостоятельно создавать новые статьи или редактировать старые.

2. Применили компонентный подход.

Мы сохранили внешний вид, а frontend и backend переписали на современные фреймворки с использованием компонентного подхода. На старом сайте все стили и скрипты хранились в общих файлах. Из-за этого внесение изменений в одном месте приводило к поломкам в другом. Кроме того, на каждой странице сайта загружались стили и скрипты с остальных страниц, из-за чего увеличивался вес страницы, которую загружает клиент. Сейчас у сайта нет таких недостатков, так как каждый компонент имеет собственные стили и скрипты, которые подгружаются только там, где это необходимо.

3. Разработали удобную систему редактирования.

Мы взяли за основу готовое решение для создания «админок» от Laravel — пакет Laravel Breeze. Оставили базовый функционал (общий интерфейс и компоненты регистрации/авторизации) и добавили то, что нам нужно. В частности, разделы, которые часто меняются: тарифы, статьи, авторы статей.

Также функционал системы позволяет управлять лендингами на Tilda: находить нужные страницы, удалять их, редактировать текст. В задаче 4 подробно описали возможности новой системы для управления контентом на Tilda.

4. Сравнили новую и старую версию сайта webinar.ru в Google Page Speed.

Замеры делали для страниц, которые чаще всего посещают: «Главная страница», «Тарифы», «Полезные статьи», «Преимущества платформы», «Функционал платформы». Новая версия сайта webinar.ru на Nuxt.js работала быстрее на 26% на всех устройствах, но мы хотели ещё улучшить показатели. Проанализировали возможные варианты доработок, учли рекомендации Google Page Speed и определили задачи:

• Актуализировать скрипты счетчиков, метрик, GTM и отключить те, которые не нужны.
• Настроить загрузку изображений.Мы настроили асинхронную загрузку изображений при скроллинге, везде сделали заглушки, максимально сжали вес картинок с сохранением качества, добавили прогрессивные форматы изображений для тех браузеров, которые их поддерживают. Сделали отдельные, небольшие картинки для мобильной версии, чтобы страница загружалась быстрее и уходило меньше трафика.
• Перенести исполнение части JS-скриптов в отдельные потоки (использовать веб-воркеры).

Такой подход позволяет выполнять JS в фоновом потоке, что помогает основному потоку (обычно это пользовательский интерфейс) работать без замедления. Мы вынесли из основного потока внешние скрипты (аналитика, метрики, реклама, A/B-тестирование, трекеры и т. д.), что повысило его производительность.

РЕЗУЛЬТАТ

Скорость загрузки страниц выросла, количество запросов сторонних скриптов на этапе загрузки страницы снизилось, производительность по оценке Google Page Speed увеличилась:

• в десктопной версии — на 25%;
• в мобильной версии — на 64%.

Как выросла производительность у страниц на ПК:

• Главная страница — на 4% (или 4 пункта);
• Тарифы — на 12,5% (или 9 пунктов);
• Полезные статьи — на 17% (или 14 пунктов);
• Преимущества платформы — на 50% (или 31 пункт);
• Функционал платформы — на 52% (или 32 пункта).

Как выросла производительность у страниц на мобильных устройствах:

• Главная страница — на 29% (или 10 пунктов);
• Тарифы — на 61% (или 25 пунктов);
• Полезные статьи — на 113% (или 26 пунктов);
• Преимущества платформы — на 30% (или 8 пунктов);
• Функционал платформы — на 114% (или 25 пунктов).

Подробную таблицу с показателями производительности страниц до и после переезда на Nuxt.js можно посмотреть logema.org/projects/webinar.

Задача 3. Добавить в процесс поддержки сайта SEO-специалиста и внедрить его рекомендации

ПРОБЛЕМА

Подрядчик со стороны заказчика регулярно проводит аудит и составляет рекомендации по SEO. Их нужно оперативно внедрять.

РЕАЛИЗАЦИЯ

Внедрение SEO-рекомендаций — это непрерывный процесс. Ниже мы перечислили несколько типичных задач, которые поставили SEO-специалисты.

1. Все изображения сжать в формат WebP, чтобы сократить время загрузки страниц сайта.

2. Создать системы автоматической генерации карты сайта, чтобы помочь поисковым системам правильно индексировать страницы.

3. Добавить системы генерации JSON-разметок для статей в блоге, что улучшит их позиции в поисковой выдаче.

4. Внедрить разметку Open Graph, которая отвечает за привлекательный вид репостов. Теперь при расшаривании в соцсетях ссылка на сайт дополняется картинкой и заголовком.

РЕЗУЛЬТАТ

Благодаря внедрению SEO-рекомендаций, выросла скорость загрузки страниц и улучшились позиции сайта в поисковой выдаче.

Задача 4. Автоматизировать обновление контента на лендингах, которые сделаны на Tilda

ПРОБЛЕМА

У клиента есть около 400 лендингов на Tilda под разные сегменты. Они проксируются на основной сайт с помощью NGINX. Благодаря этому пользователь не замечает переходов между основным сайтом и Tilda. Однако, если на стороне Tilda возникают проблемы, становятся недоступны все проксированные страницы. Также проксирование плохо влияет на SEO-продвижение.

Нужно было предложить другое решение. Вместо проксирования мы решили скачивать страницы Tilda и показывать их с сервера сайта webinar.ru.

РЕАЛИЗАЦИЯ

У конструктора Tilda есть API, которое запускает внешние механизмы после каждой публикации страницы. Мы разработали решение, которое получает сигнал от Tilda, скачивает изменённую страницу и размещает её на сервере с сайтом.

РЕЗУЛЬТАТ

Теперь все лендинги редактируются в самой Tilda, а размещаются на сервере webinar.ru. В административной панели есть интерфейс, с помощью которого можно управлять всеми страницами, в том числе лендингами на Tilda (задача 2). Он позволяет:

• отслеживать статус страниц;
• управлять данными;
• находить страницу на Tilda по названию и ключевым словам;
• переходить к редактированию нужной страницы в Tilda одним кликом;
• быстро синхронизировать контент страниц Tilda с сайтом webinar.ru;
• удалять устаревшие страницы со своих серверов.

Также новое решение позволяет синхронизировать информацию — теперь изменения на Tilda отображаются на основном сайте. Сверка актуальных страниц, обновление информации и чистка удалённых на стороне Tilda страниц происходят по определенному расписанию. Но, если возникнет форс-мажор, обновить контент можно вручную одним кликом.

Для проекта Webinar.ru мы выбрали стратегию динамичного роста и развития. А чтобы реализовать задуманное, нам нужен был подрядчик, который бы смог постоянно закрывать пул работ — от автоматизации процессов до сложных задач по веб-разработке. Компания «Логема» отлично справляется с этой ролью: быстро формирует команду специалистов под текущие задачи. В таком темпе работаем с 2020 года: наш ИТ-отдел ставит задачи, ребята предлагают варианты, как сделать это быстрее и лучше для проекта.
Из последних задач хочется отметить оптимизацию работы с формами на сайте: ежедневно обрабатываются сотни клиентских запросов, даже небольшой сбой в работе сайта — риск потерять часть данных. Веб-разработчики «Логема» решили эту проблему с помощью специального шлюза с API.

Колпаков Максим, директор по онлайн-маркетингу Webinar Group