Влияет ли виджет отзывов на скорость сайта и как это проверить
Когда блок отзывов замедляет сайт, как за 10 минут проверить это в PageSpeed Insights без программиста и что делать, если страница стала грузиться дольше.
Содержание
- Короткий ответ: может замедлять загрузку, но это легко проверить
- Почему виджет может тормозить страницу
- Как проверить скорость загрузки виджета отзывов за 10 минут
- Что сделать, если страница стала медленнее
- Что спросить у сервиса перед установкой
- Как это устроено в ReviewLab
- Частые ошибки при проверке
- Если сайт делает разработчик
- Проверка в Chrome DevTools
- Чек-лист перед запуском блока отзывов
- Итог
- Частые вопросы
Отзывы на сайте помогают посетителю решиться на запись на услугу, покупку или звонок. Но показывает их обычно внешний код — виджет, и у владельца сайта появляется понятный вопрос: не начнет ли страница грузиться дольше? В статье — от чего зависит скорость загрузки виджета отзывов, как проверить ее самому за 10 минут и что делать, если страница и правда стала медленнее.
Короткий ответ: может замедлять загрузку, но это легко проверить
Виджет отзывов замедляет сайт в трех случаях: страница ждет его код, прежде чем показаться; код тяжелый и надолго занимает браузер; блок появляется позже остального, и содержимое под ним съезжает вниз. Если код загружается после основного содержимого страницы, а под блок заранее оставлено место, посетитель разницы, скорее всего, не заметит. Наиболее точно проверить, влияет ли виджет на загрузку вашего сайта, можно, сделав замер — загрузить страницу с виджетом и без него.
Почему виджет может тормозить страницу
Отзывы хранятся не на вашем сайте, а у сервиса. Поэтому при открытии страницы браузер идет за ними на чужой сервер: скачивает код, запускает его, загружает сами отзывы, фото и аватарки. Проблемы начинаются, когда что-то из этого мешает показать вашу страницу.
Страница ждет чужой код. Если код вставлен без специальной пометки, браузер останавливается и ждет, пока скачает и запустит его. Пока он ждет, посетитель видит пустой экран. Пометки async и defer (асинхронная загрузка) говорят браузеру: продолжай показывать страницу, а код подгрузи параллельно. С defer код запустится, когда страница уже собрана.
Код слишком тяжелый. Даже с правильной пометкой код все равно нужно запустить. Пока браузер занят чужим кодом, он медленнее реагирует на нажатия: посетитель нажимает на кнопку «Записаться», а она откликается не сразу.
Блок прыгает. Отзывы часто появляются на долю секунды позже текста. Если место под них заранее не оставлено, все, что ниже, съезжает вниз. Посетитель целился в кнопку, а попал в отзыв. Такой сдвиг называют скачком макета.
Как проверить скорость загрузки виджета отзывов за 10 минут
Понадобится только бесплатный сервис Google PageSpeed Insights. Программист не нужен.
- Возьмите одну страницу сайта. Лучше ту, куда собираетесь поставить отзывы.
- Замерьте ее без виджета: вставьте адрес в PageSpeed Insights и запустите проверку 3 раза. Запишите результаты вкладки «Мобильные»: телефон медленнее компьютера, и проблемы видны на нем раньше.
- Поставьте виджет на эту же страницу.
- Повторите те же 3 замера.
- Сравните три показателя из таблицы ниже.
Почему 3 раза: интернет и сервер каждый раз отвечают немного по-разному, и один замер может некорректно отобразить показатели, занизив или завысив их.
Почему не общий балл: он складывается из десятков факторов, и по одной цифре не понять, что изменил именно блок отзывов.
| Показатель | Что значит простыми словами | Если после установки стало хуже |
|---|---|---|
| LCP (Largest Contentful Paint) | Когда посетитель увидел главное на странице | Проверьте, не стоит ли блок в первом экране и не грузится ли раньше основного содержимого |
| CLS (Cumulative Layout Shift) | Прыгает ли страница при загрузке | Под блок не оставлено место. Попросите сервис или того, кто делал сайт, задать ему высоту |
| TBT (Total Blocking Time) | Сколько браузер был занят и не отвечал на нажатия | Код блока тяжелый. Уменьшите число отзывов и фото или спросите сервис, можно ли отложить загрузку |
В PageSpeed Insights есть еще показатель INP (Interaction to Next Paint) — как быстро страница реагирует на нажатия у реальных посетителей. Он появляется, только если на сайт заходит достаточно людей, и считается по данным за последние 28 дней. Для проверки до и после установки ориентируйтесь на TBT: он показывает ту же проблему сразу.
Что сделать, если страница стала медленнее
- Опустите блок ниже первого экрана. Отзывы нужны тому, кто уже заинтересовался и листает вниз. Внизу они меньше мешают главному экрану.
- Уменьшите число отзывов и фото. Чем меньше карточек с фото, тем меньше браузеру скачивать.
- Проверьте, как вставлен код. В строке с кодом должно стоять слово async или defer. Если его нет, спросите сервис, можно ли добавить асинхронную загрузку.
- Оставьте место под блок. Это убирает скачки. Если сервис сам этого не делает, понадобится тот, кто верстал сайт.
- Отложите загрузку до прокрутки. Блок начнет грузиться, только когда посетитель долистает до него. Современные CMS умеют делать отложенную загрузку. Если ваша не умеет — лучше обратиться к программисту.
Что спросить у сервиса перед установкой
Пять вопросов, которые стоит задать до того, как ставить чужой код на сайт:
- Код загружается асинхронно? Если отвечают «нет» или «не знаем», это повод насторожиться.
- Оставляет ли блок место под себя заранее? Если нет, страница будет прыгать.
- Можно ли грузить блок только при прокрутке? Важно, если отзывы стоят в середине или внизу страницы.
- Сколько весит код и как он кэшируется? Кэш — это когда браузер запоминает код и при повторном визите не скачивает его заново.
- Что будет со страницей, если сервис упадет? Правильный ответ: страница откроется как обычно, просто без отзывов.
Другие вопросы про сторонний код на сайте — про данные посетителей и поисковики — разобрали в статье «Безопасно ли устанавливать сторонний виджет отзывов».
Как это устроено в ReviewLab
ReviewLab показывает на сайте отзывы с Яндекс.Карт, 2ГИС, Google Maps и других площадок. На вопросы выше мы отвечаем так:
- код установки сразу идет с defer: страница показывается, не дожидаясь отзывов;
- пока отзывы подгружаются, на их месте стоит заглушка, чтобы страница меньше прыгала;
- фото в отзывах грузятся, только когда посетитель до них долистал;
- если сервис недоступен, страница открывается как обычно.
Отдельной настройки «грузить только при прокрутке» пока нет. Если блок стоит внизу страницы и нужна именно такая загрузка, ее может добавить программист.
Но наши ответы не заменяют замер на вашей странице, вместе с вашими счетчиками, чатом и хостингом. Проверить можно бесплатно: попробуйте ReviewLab 14 дней без карты, поставьте блок на одну страницу и сравните показатели по инструкции выше.
Частые ошибки при проверке
- Один замер или большой разброс между несколькими замерами. Делайте минимум три замера с небольшой паузой.
- Чужая демо-страница. На странице сервиса нет ваших счетчиков, чата и рекламных пикселей. Мерить нужно свою.
- Только общий балл. Он не показывает, что изменил именно блок отзывов.
- Только компьютер. На телефоне проблемы заметнее: он медленнее и интернет у него хуже.
- Винить только отзывы. Метрика, чат, пиксели рекламы тоже нагружают страницу. Если без виджета страница уже медленная, дело не в нем.
Если сайт делает разработчик
Этот раздел можно переслать тому, кто занимается сайтом. Здесь проверка глубже, чем в PageSpeed Insights.
Проверка в Chrome DevTools
- Открыть страницу, нажать F12, вкладка Network, включить Disable cache, перезагрузить.
- Отфильтровать запросы по домену виджета, посмотреть их число, вес и время.
- Вкладка Performance: записать загрузку, найти долгие задачи (long tasks) основного потока рядом с моментом появления блока.
- Сравнить, когда отрисовался основной контент (LCP-элемент) и когда — блок отзывов.
| Метрика | Что показывает | Как влияет виджет | Где смотреть |
|---|---|---|---|
| LCP | Время отрисовки самого крупного элемента | Виджет в первом экране или конкурирующий за сеть с LCP-ресурсом | PageSpeed Insights, Lighthouse |
| INP | Задержка отклика на взаимодействие (полевые данные) | Долгие задачи виджета в основном потоке | PageSpeed Insights (данные пользователей), DevTools Performance |
| CLS | Суммарный сдвиг макета | Контейнер без зарезервированной высоты | PageSpeed Insights, Lighthouse |
| FCP | Первая отрисовка | Блокирующий script до основного контента | Lighthouse, DevTools Performance |
| TBT | Суммарное время блокировки основного потока (лабораторный аналог INP) | Тяжелая инициализация виджета | Lighthouse |
| Запросы | Число сетевых обращений | Скрипт, данные, аватарки, стили | DevTools Network |
| Вес | Объем загруженных ресурсов | JavaScript и изображения в карточках | DevTools Network, Lighthouse |
Что можно сделать на стороне сайта: отложить инициализацию через IntersectionObserver для блока ниже первого экрана, задать контейнеру min-height по реальной высоте блока, убедиться, что скрипт подключен с async или defer и не стоит в head раньше критических ресурсов. Для точного замера в разных сетях подойдет WebPageTest.
Чек-лист перед запуском блока отзывов
- Страница замерена до и после установки, по 3 раза
- Проверена мобильная версия
- Код подключен с async или defer
- Под блок оставлено место, страница не прыгает
- Понятно, сколько запросов и веса добавляет блок
- Страница открывается, даже если сервис отзывов недоступен
Итог
Отзывы помогают посетителю довериться, но страница не должна ждать их, чтобы показаться. Сначала должно грузиться главное, а отзывы — следом, на заранее оставленное место. Убедиться в этом можно самому, бесплатно и без программиста.
Частые вопросы
Виджет отзывов всегда замедляет сайт?
Нет. Все зависит от того, как вставлен код, сколько он весит и где стоит блок. Если страница не ждет код виджета и не прыгает при появлении блока, разница обычно незаметна. Как это измерить — в инструкции выше.
Какой показатель важнее всего?
Три вместе: LCP, CLS и TBT в лабораторном замере, а у сайтов с заметным трафиком еще INP. Они показывают, не задержал ли блок главное на странице, не сдвинул ли содержимое и не мешает ли нажимать на кнопки.
Как понять, что сайт тормозит именно из-за виджета?
Сравните одну и ту же страницу без виджета и с ним, по три замера в одинаковых условиях. Если без виджета LCP 2,1 секунды, а с ним 2,2, виджет почти ничего не добавил.
Можно ли грузить виджет после прокрутки?
Да, если блок стоит не в первом экране. Посетитель долистывает — блок начинает загружаться. Место под него все равно стоит оставить заранее, чтобы страница не дернулась.
Что лучше: вставить отзывы прямо в код страницы или поставить виджет?
Отзывы, вписанные в страницу, грузятся быстрее, но обновлять их придется вручную. Виджет подтягивает новые отзывы сам, а его влияние на скорость проверяется замером из этой статьи.
Нужен ли программист, чтобы проверить скорость?
Для базовой проверки нет: хватит PageSpeed Insights и инструкции выше. Программист понадобится, если нужно найти, что именно тормозит внутри кода, или настроить загрузку при прокрутке.