Полностью обновили код и разработали дизайн сайта alta-profil.ru. Сделали его удобнее, быстрее и информативнее для пользователей.

«Альта Профиль» — производитель отделочных материалов из полимеров, с которым мы работаем уже много лет по разным направлениям. 

В этом кейсе рассказали об обновлении сайта: с какими проблемами столкнулись и как их решали.

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

Мы предложили провести рефакторинг с переходом на реактивный фреймворк, когда верстка и дизайн сайта рендерятся на стороне пользователя.  За счет этого загрузка происходит практически мгновенно, а у пользователя складывается впечатление, что он пользуется приложением, а не сайтом. 

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

Рефакторинг не является процессом создания нового функционала или исправления ошибок на сайте, это улучшение уже существующего кода

Изначально мы планировали остановиться на обновлении кода и архитектуры сайта,  но впоследствии параллельно провели редизайн и доработали интерфейс.

В техническом плане перед нами стояли 3 задачи:

• Переход на реактивный фреймворк, в нашем случае Vue.js 

• Серверный рендеринг, чтобы не потерять позиции в SEO при переходе на Vue.js

• Корректная маршрутизация 

Теперь подробнее о решении каждой из них.

Переход на реактивный фреймворк: почему Vue.js 

Реактивный фреймворк позволяет создавать динамические пользовательские интерфейсы, которые реагируют на изменения данных в реальном времени и автоматически меняются вместе с изменением данных.

Классическая архитектура сайта подразумевает, что каждая страница формируется заново, это и увеличивает скорость загрузки. При использовании реактивных фреймворков страница формируется (рендерится) только один раз, а остальные элементы подгружаются в нужный момент по запросу пользователя.

 На рынке сейчас два основных фреймворка:

 Vue.js —  использует систему шаблонов и двустороннюю привязку данных, чтобы позволить разработчикам создавать динамические пользовательские интерфейсы и управлять состоянием приложения.

React —  реактивный фреймворк от компании Meta* (запрещенной на территории РФ), основанный на управлении компонентами.  Компонентный подход — ключевая особенность React, которая позволяет создавать переиспользуемые компоненты для отображения интерфейса.

Для решения нашей задачи мы предпочли Vue.js, так как фреймворк:

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

• Позволяет быстро создавать прототипы из-за его естественного и простого API, умной системы компонентов и возможности решать специфичные задачи с минимальным количеством кода. Для нас это важно, так как каждый наш проект — кастомный, требующий индивидуальных решений, которые можно быстро реализовать.

Серверный рендеринг: как не потерять позиции при переходе на Vue.js

Переход на Vue.js — только одна часть работы над сайтом, которая обеспечивает быструю загрузку за счет рендеринга страниц на стороне пользователя, о чем мы говорили выше. 

Возникает другая проблема — при обходе страниц сайта поисковыми роботами сервер отдает им пустой html, а пользователи видят контент благодаря JS-приложению в браузере. Поэтому, чтобы не потерять позиции в выдаче, нужен был серверный рендеринг, который позволит передавать поисковым роботам данные страниц полностью. 

Для решения этой задачи мы использовали Nuxt.js — фреймворк на основе Vue.js, который обеспечивает серверный рендеринг

 Расширение закрыло все наши задачи в рамках разработки, о которых мы говорили выше:

Серверный рендеринг

Расширение запускается, как серверная часть, генерирует HTML-код и отправляет его браузеру. Если запрос приходит от поискового робота, то он отправляет полную версию страницы, при запросе от пользователя он передает «незаполненную верстку», а остальные динамичные данные рендерятся уже на стороне самого пользователя.

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

Роутинг

Маршрутизация внутри проекта — все, что связано с движением пользователя по сайту.

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

Nuxt.js предоставляет роутинг «из коробки» — его не нужно настраивать отдельно. В расширении используется файловая система для автоматического генерирования роутов на основе структуры файлов и каталогов, которая выглядит примерно так:

pages/
--| index.vue
--| about.vue
--| contact/
-----| index.vue
-----| email.vue

Как видно из приведенного выше примера, файлы Vue-component располагаются в директории pages. Каждый файл — маршрут, соответствующий URL-адресу. Таким образом, index.vue соответствует корневому маршруту (`/`), `about.vue` – маршруту `/about`, а `contact/index.vue` – маршруту `/contact/`.

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

Работа с метатегами

Nuxt.js позволяет управлять метатегами, автоматически генерируя их на основе текущего маршрута и текста страницы.  Также их можно установить вручную:

Глобальный <head>. Nuxt.js предоставляет <head> объект в файле `nuxt.config.js`, который используется для установки глобальных метатегов для всего сайта:

// nuxt.config.js
export default {
  head: {
    title: 'My Website',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }

Помимо дефолтных метатегов, кодировки и отображения видимой области в данном блоке настроек можно, например, внедрить различные сторонние скрипты: GTM, метрики, live-чаты и т. д.

Локальный <head>. Локальные метатеги для каждой страницы через компонент Vue.js.  Устанавливаются метатеги для любой страницы при добавлении объекта <head> в компонент:

<script>
export default {
  data() {
    return {
      title: 'My Page',
      description: 'This is my page description'
    }
  },
  head() {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: this.description },
      ]
    }
  }
}
</script>

В этом примере мы устанавливаем title и description метатеги для локальной страницы. Значение `hid` используется для предотвращения дублирования тега на странице.

Чтобы определить общие метатеги для всех страниц сайта, можно создать `layout` компонент и определить глобальные метатеги в нем.

Динамические метатеги. Основанные на динамических маршрутах. Для этого обычно используется  asyncData  для получения дополнительных данных, таких как title и description. В нашем случае, мы использовали fetch – более современное решение асинхронного получения данных, которое не ограничено компонентами страниц. При этом метод fetch расширяется свойством fetchOnServer,  указывающим  необходим ли вызов fetch при рендеринге на сервере. Тут происходит магия — для поисковых роботов fetchOnServer всегда возвращает true, а для пользователей —  значение зависит от значимости контента и требований к его показу.

Вот пример использования `fetchOnServer` в Nuxt.js:

<template>
  <div>
    <h2>{{ post.title }}</h2>
    <p>{{ post.body }}</p>
  </div>
</template>

<script>
export default {
  head () {
    return this.post
  },
  fetchOnServer () {
    return this.isSearchBot()
  },
  async fetch () {
    // Выполнение запроса и предварительное заполнение vuex store
    const post = await this.$axios.$get(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.postId}`)
    this.$store.commit('setPost', post)
  },
  computed: {
    post() {
      return this.$store.state.post
    }
  }
}
</script>

В этом примере мы определяем метод fetch, выполняется на сервере, до того, как компонент будет отрендерен, или на клиенте — в зависимости от состояния возвращаемого fetchOnServer, результат которого зависит от того, кто открывает страницу: поисковый робот или пользователь. Внутри метода мы используем `$axios` для выполнения запроса к API "jsonplaceholder". Полученные данные сохраняются в Vuex Store с помощью `store.commit`. 

Получив данные, мы можем использовать их для отображения в шаблоне Vue.js внутри метода `computed`.

Мы рефакторили сайт на Bitrix, где уже были настроены все метаданные. Чтобы их не потерять, мы написали отдельный API — метод, который по роуту генерирует и возвращает ранее сформированные шаблоны метатегов. Так мы перенесли все старые метатеги на новый сайт

Таким образом, нам удалось решить сразу несколько задач и во всех смыслах переработать ресурс клиента. Если сайт работает быстро, то вероятность, что пользователь останется и совершит целевое действие — выше. В рамках работы над сайтом мы уделяем внимание всем факторам, которые влияют на его работоспособность и конверсию.