+7 8442 96 85 66
Фоновое изображение

Как увеличить производительность сайта на 20% с помощью фасада для загрузки чат-виджета

07.08.2023

arrow

Список статей

Мы сотрудничаем с «МТС Линк» (ранее Webinar Group) — платформой для проведения вебинаров и онлайн-конференций — с 2020 года. За это время провели много работ по оптимизации сайта. Одна из последних задач, которую мы решили, — внедрение фасада для виджета онлайн-чата Intercom. В статье подробно расскажем об этом инструменте, и с какими бизнес-целями он может помочь.

Что такое фасад и зачем он нужен

На сайтах многих онлайн-магазинов, медицинских клиник, образовательных платформ и других компаний сферы услуг используются виджеты онлайн-чатов. Чат помогает собирать заявки пользователей или отвечать на частые запросы.

Когда пользователь открывает страницу, чат загружается вместе с ней, — из-за этого сайт загружается дольше. Эту проблему помогает решить подход «фасад».

Фасад — это «заглушка», которая имитирует кнопку вызова виджета. При этом сам виджет не загружается, пока пользователь не нажмёт на иконку чата или не наведёт на него мышку. С помощью фасада можно значительно сократить время загрузки страницы и увеличить показатели Google Page Speed.

Использование фасадов положительно влияет на пользовательский опыт с двух сторон:

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

Как отложить загрузку сторонних ресурсов с помощью фасада

Рекомендация Google Page Speed по использованию фасада для оптимизации сайта

Если провести аудит страниц сайта с помощью Google Page Speed, то в рекомендациях сервиса можно увидеть совет использовать фасады при загрузке сторонних объектов. В нашем случае Google Page Speed предложил применить «ленивую загрузку» чата Intercom, который используется на платформе «МТС Линк».

Общее время блокировки основного потока (TBT) — 273 мс. В течение этого времени страница не отвечает на действия пользователя. Кажется, что это не много, но норма для подобного — 50 мс. Фасады помогают уменьшить показатель TBT.

На практике работа фасада выглядит так:

  • при загрузке страницы скрипт, который отвечает за загрузку виджета чата, не подключается на страницу;
  • на место, где должна быть иконка чата, подставляется точно такая же иконка-заглушка (тот самый фасад);
  • при наведении курсора на заглушку начинается загрузка скриптов;
  • чат-виджет открывается, если пользователь кликнул на иконку

Как выглядит работа фасада с точки зрения пользователя сайта

Реализация фасадов для веб-проектов на Nuxt.js

Для решений, построенных на React’е, Google Page Speed предлагает использовать готовый модуль React Live Chat Loader. В нашем случае, сайт работает на Nuxt.js (который, в свою очередь, работает на Vue.js). Мы не нашли подходящих решений для этого фреймворка, поэтому адаптировали готовый модуль.

Как мы настраивали работу чат-виджета:

1. При загрузке сайта отображаем фасад виджета, на который будем вешать два события: mouseenter и click. Устанавливаем состояние start;

2. При событии mouseenter проверяем, загружен ли виджет, если нет — начинаем загрузку. Предварительно нужно встроить в страницу скрипт для подключения виджета, ознакомиться с API виджета и проверить текущее состояние фасада. Сразу после добавления скрипта на страницу устанавливаем состояние loaded;

3. При событии click делаем то же самое, что в пункте 2. Но, после описанных выше действий, необходимо отправить команду «Открыть чат» через API виджета. Состояние оставляем loaded;

4. При наступлении состояния loaded (т.е. после начала загрузки скрипта), нужно периодически проверять, не загрузился ли скрипт. Для этих целей подойдёт requestIdleCallback. Если нужен полифил, обращаемся к setTimeout и проводим необходимые настройки согласно документации. После загрузки виджета устанавливаем состояние complete;

5. При наступлении финального состояния complete можно отключать фасад.

Результат

Если всё настроено правильно, то страницы сайта будут загружаться быстрее. Использование фасадов на платформе «МТС Линк» увеличило его производительность:

  • в мобильной версии — на 32% (+15 пунктов к 46);
  • в десктопной версии — на 8% (+5 пунктов к 62).

Средняя производительность сайта выросла на 20%.

Показатели сайта на мобильных устройствах до внедрения фасадов

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

Показатели сайта на десктопах до внедрения фасадов

Показатели сайта на десктопах после внедрения фасадов

Теперь скрипт виджета не загружается, пока на него не наведешь или не кликнешь. Это помогает:

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

Всплывающие окна больше не отвлекают пользователей и не блокируют контент на сайте. Это создаёт положительный пользовательский опыт, повышает доверие к веб-проекту и увеличивает вероятность, что пользователь совершит целевое действие.