Скорость загрузки сайта яндекс: Время загрузки страниц — Метрика. Справка

Время загрузки страниц — Метрика. Справка

Отчет позволяет проанализировать скорость, с которой загружаются страницы сайта. Браузер загружает страницы в несколько этапов. Скорость загрузки может снижаться на любом из них.

Посмотреть отчет: .

Пример отчета можно увидеть на демосчетчике Яндекс.Метрики.

Узнать среднее время загрузки сайта

Показателем полной загрузки страницы является метрика Время до загрузки DOM. Чтобы узнать время загрузки всех страниц сайта, на которых установлен счетчик, обратите внимание на строку Итого и средние.

Узнать время загрузки отдельной страницыПоказателем полной загрузки страницы является метрика Время до загрузки DOM. Чтобы узнать время загрузки отдельной страницы, нужно выделить сегмент по интересующей вас странице:

1. В группе условий Скорость загрузки сайтов, для которых нажмите кнопку .

2. Выберите условие и в строке укажите адрес страницы.

Чтобы увидеть динамику загрузки страницы, выберите диаграмму «Линии».

Проверить скорость загрузки Турбо-страниц сайта Если на обычную версию и его Турбо-страницы установлен один счетчик Метрики, нужно выделить сегмент:

1. В группе условий Скорость загрузки сайтов, для которых нажмите кнопку .

2. Выберите условие Турбо.

Определить скорость загрузки сайта в разных регионах мира

В отчете данные оцениваются с помощью квантиля. По умолчанию выбран квантиль 50%. Это означает, что в 50% случаев время загрузки страниц будет не больше, чем указанное в отчете. Квантиль 90% означает, что время загрузки не будет превышать указанное в 90% случаев.

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

Вы можете сами указывать нужное значение квантиля. Чем оно больше, тем выше вероятность, что посетитель может загрузить страницу за указанное в отчете время.

Метрики в отчете соответствуют этапам загрузки страницы, а также показывают время загрузки.

• DNS (обработка запросов к DNS) — время, потраченное на отработку запросов к DNS-серверу при загрузке страницы. Учитываются только значения с ненулевым временем.

  На этот параметр влияет скорость работы DNS-серверов, обслуживающих запросы к домену сайта.

• Редиректы (обработка редиректов) — время, потраченное на отработку HTTP-переадресации при загрузке страницы. Учитываются только значения с ненулевым временем.

• Продолжительность установки соединения — время, в течение которого браузер ожидал подключения к HTTP-серверу при получении содержимого страницы. Учитываются только значения с ненулевым временем.

  На этот параметр влияют задержки в интернет-каналах между посетителем и сайтом, а также степень загруженности сайта входящими запросами.

• Ответ сервера — время, в течение которого был отправлен запрос и был получен ответ с содержимым страницы от HTTP-сервера к браузеру. Учитываются только значения с ненулевым временем.

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

• Время загрузки и парсинга HTML — время, в течение которого браузер обрабатывает содержимое страницы после ее загрузки с сервера и до начала отрисовки.

  На этот параметр влияет размер и сложность (количество и вложенность тегов) HTML-страницы.

• Время до загрузки DOM — то время от начала перехода на страницу до полной загрузки страницы со всеми ее компонентами (изображения, CSS, скрипты и т. п.). Это время, через которое страница становится доступна для взаимодействия с пользователем.

• Время до отрисовки — это время от начала перехода на страницу до момента, когда страница начинает отрисовываться в браузере. Именно это значение субъективно воспринимается посетителем как скорость загрузки сайта. Обычно оно занимает не более двух секунд.

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

О том, как настроить отчет, смотрите в разделе Настройки отчета.

Проверка юзабилити десктопной версии сайта — Яндекс для рекламных агентств

Работоспособность сайта
Навигация по сайту
Важные разделы сайта
  •  Контакты
  •  Оплата и доставка
  •  Гарантия и обмен
Элемент «Корзина»
Форма заказа/заявки
Оформление текста
Качество информации/наполнение сайта
Качество фото и видео на сайте
Мобильная версия сайта

Чем займемся

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

Какие задачи решим

• Рост % конверсий
• Снижение % отказов

Чтобы оценить эффективность сделанных обновлений, стоит провести А/Б тестирование. Обратите внимание: чтобы получить корректные данные, важно менять за один раз только один элемент на посадочной странице, а затем анализировать результаты. Так вы будете уверены, что на поведение пользователей на сайте повлияло именно это изменение, а не другие факторы.

 

Работоспособность сайта

Перед тем, как приступить к анализу оформления сайта и поведения пользователей, убедитесь, что все страницы работают корректно в разных браузерах и на разных типах устройств: в этом помогут отчеты Яндекс.Метрики «Устройства» и «Браузеры». Для этого кликните на иконку «Отчеты по счетчику» рядом с нужным счетчиком и сформируйте их в разделе «Стандартные отчеты» → «Технологии».

Обратите внимание на скорость загрузки страниц: большинство пользователей интернета ожидают мгновенного ответа от сайта. Мы рекомендуем сократить время до загрузки до 5 секунд.

Проверить скорость загрузки страниц можно в отчете Яндекс.Метрики «Время загрузки страниц». Для этого кликните на иконку «Отчеты по счетчику» рядом с нужным счетчиком и сформируйте его в разделе «Стандартные отчеты» → «Мониторинг».

 

Навигация по сайту

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

1. Ключевые разделы меню должны соответствовать основным потребностям пользователя.

2. Принципы навигации не должны меняться на разных страницах.

3. Выбирайте точные и конкретные названия для ключевых разделов сайта (например, «Как добраться» будет лучше, чем «Наш офис на карте».

4. Желательно, чтобы с основного экрана можно было перейти ко всем ключевым разделам сайта.

5. Группировка разделов меню должна быть произведена по очевидной для конечного пользователя логике: не следует выносить на один уровень общий и частный заголовок, например, «Женская одежда» и «Платья».

6. Логотип в шапке сайта должен быть кликабельным и вести на главную страницу.

 

Важные разделы сайта

  •  Контакты

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

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

  •  Оплата и доставка

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

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

  •  Гарантия и обмен

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

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

 

Элемент «Корзина»

Удобное расположение блока корзины поможет пользователю совершить конверсионное действие.

1. Необходимо располагать корзину в привычном для пользователей месте (в основном это верхний правый угол сайта).
2. Корзина должна быть доступна со всех страниц сайта.
3. Рекомендуется использовать привычные иконки (тележки, корзины и т.д.), контрастного по отношению к фону цвета.
4. Элемент «Корзина» следует отображать достаточно крупно, чтобы пользователь легко мог найти его при необходимости.
5. Рекомендуется отображать сумму заказа и количество товаров в корзине.
6. Для повышения конверсии на сайте можно предложить пользователю перейти в корзину сразу после нажатия на кнопку «Купить»/«Заказат» — например, добавив соответствующие кнопки либо всплывающее окно.

Эффективность работы корзины можно проверить при помощи отчета «Конверсии» Яндекс.Метрики, предварительно настроив цели. Также может помочь «Карта кликов» и «Вебвизор». Чтобы подключить эти инструменты, нужно выбрать их в настройках счётчика — а затем обновить полученный код на всех страницах сайта.

 

Форма заказа/заявки

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

Чтобы сделать форму более удобной, рекомендуем использовать автозаполнение полей. Желательно, чтобы при переходе на форму со страницы модели (либо аналогичной страницы) соответствующие параметры заполнялись по умолчанию. Это значительно ускоряет ввод данных и уменьшает ошибки пользователей.

Рекомендации по оформлению формы заказа/заявки:

• Указывайте формат полей в форме — это поможет свести к минимуму ошибки пользователей при вводе данных.

• Отмечайте обязательные для заполнения поля звездочками.

• Зачастую пользователям не удается правильно ввести капчу с первой попытки, что может стать причиной ухода с сайта. В таких случаях мы рекомендуем использовать невидимую капчу.

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

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

• После заполнения формы рекомендуем отображать статус заявки (страница «Спасибо»). Пользователь, понимающий в каком статусе находится его заявка, с меньшей вероятностью будет искать и выбирать другие предложения.

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

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

 

Оформление текста

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

Избегайте чрезмерного выделения текста шрифтами (большая часть сайтов строится на основе одного-трех шрифтов), а также «кричащих» цветов фона, текста и изображений.

 

Качество информации/наполнение сайта

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

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

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

 

Качество фото и видео на сайте

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

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

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

 

Мобильная версия сайта

Сегодня 29% всех визитов на сайты совершается с мобильных устройств, а 19% пользователей выходят в интернет только с мобильного или планшета.

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

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

 

Скорость загрузки сайта – новая функция Яндекс.Метрики

• Главная
 / Статьи / Скорость загрузки сайта – новая функция Яндекс.Метрики

В сервисе Яндекс.Метрика появился новый отчет «время загрузки страниц». Он позволяет точно определить, насколько быстро содержимое сайтов отображается на экранах пользователей и какие проблемы с загрузкой на каких этапах возникают. Скорость загрузки сайта – один из важных критериев, который нужно учитывать при разработке сайтов. Она зависит от следующих факторов:

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

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

• скорость открытия страницы позволяет оценить лояльность посетителей сайтов,
• есть возможность выявить процент конверсии.

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

• используемый браузер,
• местоположение пользователя сайта.

Благодаря такому отчету у разработчиков есть возможность оценить, насколько быстро пользователям предоставляется контент на сайте. А это позволяет своевременно дорабатывать ресурс, чтобы пользование им было более эффективным. В целом и GA, и Яндекс.Метрика – это веб-сервисы, позволяющие определить уровень и качество посещаемости сайтов, проводить анализ поведения пользователей на нем.

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

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

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

Как повысить скорость загрузки страницы сайта.

В процессе разработки несложного сайта на Bootstrap 4, скорость загрузки самой тяжелой страницы (~2.5 мегабайта) была на достаточно хорошем уровне:

Загрузка страницы сайта. Вкладка Network браузера Хром

Ничто не предвещало проблем. Измерение скорости загрузки сайта для мобильных устройств на известном сервисе PageSpeeds Insight от Гугля …
… показало отличные результаты для недорогого хостинга, на котором сайт размещается:

Оценка скорости загрузки страницы без скриптов Яндекс.Метрика и Google Аналитика

Но пришло время вставить в страницы коды Яндекс.Метрики и Google Analytics и «что-то пошло не так»:

• Оценка скорости загрузки страницы со скриптами Яндекс.Метрика и Google Аналитика в секции

Потери в скорости загрузки от 10-ти строчек кода скриптов составили 11%! Определенную погрешность вносит {мгновенная} нагрузка на сервер хостера в дата-центре, но все же этот оранжевый «недокруг», он так бесит…

Мне нравится оранжевый! Это же цвет солнца и апельсинов! В чем дело?»

А дело вот в чем. Поисковые системы…

• учитывают скорость загрузки страниц при их ранжировании в выдаче,
• медленная загрузка для коммерческих сайтов — это потеря выручки от посетителей (где-то даже оценили цену каждой последующей секунды после первых 4-х в тысячах долларов в месяц).

Таким образом хорошая работа SEO-оптимизатора может быть крепко подпорчена вебмастером-программистом (ну и медленным или перегруженным сервером хостера).

Что произошло и как быть с низкой скоростью загрузки страницы?

Поисковые системы Яндекс и Google в рекомендациях для вебмастеров советуют размещать коды своих скриптов аналитики как можно ближе к открывающему тегу <head>. Собственно, большинство вебмастеров так и поступает. Где-то встречалось обоснование, мол так посещение страницы будет зарегистрировано даже если пользователь не дождался загрузки страницы до конца…

Но далее рекомендации по оптимизации загрузки советуют отложить выполнение некритических скриптов страницы «на потом» при помощи

• атрибута async у тега <script>,
• размещения скриптов в коде страницы ближе к ее окончанию.

Явное противоречие, если мы имеем ввиду скрипты Яндекс.Метрики или Google Analytics…

Как же быть? Относить ли скрипты аналитики к критическим? Где их место на самом деле?

На помощь приходит здравый смысл. Если пользователь не дождался загрузки контента, то имеет место ситуации:

1. страница ему не интересна или/и
2. у вас проблема с длительной загрузкой контента.

Будет ли в сводке аналитики показатель отказов 87.35% (точно измеренный скриптом вначале кода страницы) или скажем 83% (приближенное значение без учета пользователей-«торопыг» или «нетерпеливых») — очевидно что на странице существует проблема.

Решение проблемы (1) выходит за рамки этой статьи. Проблему (2) легко диагностировать и устранить на этапе разработки страницы и больше к ней не возвращаться.

Так стоит ли знание показателя отказов с высокой точностью потери потенциальных «очков» которые поисковик «снимет» за медленную страницу?

Я полагаю что нет. В моем случае я ставлю на скорость и возвращаю 8% из потерянных 11% вот таким образом…

Экспериментальным путем было определено что атрибут “async” для тега <script>, когда дело касается скриптов аналитики, не приводит к какому либо заметному увеличению скорости загрузки страницы. Более ощутимый результат — успокаивающую «зелень» — приносит правильное место расположение скриптов.

Оценка скорости загрузки страницы со скриптами Яндекс.Метрика и Google Аналитика в конце секции <body>

Если вы хотите повысить скорость загрузки сайта, то есть смысл разместить скрипты аналитики ближе концу файла т.е. закрывающему тегу </body>, после всего контента:

Размещение кода Яндекс.Метрика и Google Аналитика перед закрывающим тегом </body>

В моем случае установка скриптов аналитики подобным образом стоила мне всего лишь 3% оценки скорости Google PageSpeeds Insight.

PS: Дополнительные пару процентов к оценке можно выиграть если использовать на странице только один инструмент для анализа посещаемости. Яндекс.Метрика показала себя более «тяжелой» как в выполнении своей задачи сбора статистики так и в плане загрузки самой себя в браузер. Вот, например, браузер ждет (и не дожидается) какую-то картинку advert.gif почти четверть секунды…

Зачем нам загружать эту гифку!?

Жмите кнопки, чтобы поблагодарить автора, улучшить карму и украсить ленту соц.сети.

Другие статьи похожей тематики

Как скорость загрузки сайта влияет на эффективность его продвижения

Ещё в апреле 2010 г. Компания Google объявила, что фактором ранжирования теперь считается и время загрузки страниц веб-сайта.
Спустя два года и «Яндекс» официально признал, что учитывает этот показатель, в систему веб-аналитики «Яндекс.Метрика» были добавлены и инструменты по анализу.

Почему это важно?

• Во-первых, скорость влияет на показатели конверсии и на уровень отказов. Медленный сайт  снижает конверсию, и если ниша более-менее конкурентна, пользователь уходит к другому поставщику услуг/товаров. Отношение количества полезных целевых действий к трафику снижается.
• Во-вторых, поисковые системы (ПС) напрямую заинтересованы в позитивном user experience аудитории. Поисковые результаты (SERP) хотят решать задачу пользователя полно, достоверно и быстро. Сама SERP-страница формируется «на лету» из индекса ПС, задержка пользовательского запроса, которые вносит площадка, фиксируется и обрабатывается.

ПС стараются не пускать в топ «нерасторопные» сайты в интересах пользователя, который не хочет (и не должен) ждать.

За последние 5 лет средний размер веб-страниц вырос втрое, а за последний год – в полтора раза. Характерное время ожидания составляет 4 секунды. Если за это время сайт загружается у 90 % пользователей, вы счастливый владелец быстрого интернет-ресурса.
Основное время при загрузке страниц сайта уходит на клиентскую часть. Серверные затраты малы, 50 — 500 мс. Среднему пользователю всё равно, сколько страница будет создаваться на сервере, если работать с ней можно уже через полсекунды. В этом случае фокус смещается  на клиентскую, а не серверную оптимизацию.

Под скоростью загрузки страницы понимают совокупность параметров:

• Время до отрисовки – от начала перехода на страницу до начала прорисовки на экране.
• Время до загрузки DOM – от начала перехода на страницу до загрузки DOM и окончания обработки события onLoad.

DOM – это объектная модель документа (Document Object Model), структура, используемая браузером для представления данных. Проще говоря, это время от начала перехода на страницу до полной загрузки страницы со всеми её компонентами (тексты, таблицы, изображения, CSS, скрипты и т. п.). Значение субъективно воспринимается посетителем как «качество» или «скорость» страницы.
Оценить эти показатели можно в стандартном отчёте «Яндекс.Метрики» – «Время загрузки страниц»

Время до отрисовки и время до загрузки DOM в отчёте «Яндекс.Метрики»

«Время до отрисовки» характеризует хостинговую составляющую и скорость обработки DNS-запроса.
«Время до загрузки DOM» — качество веб-проекта: совместимость сайта с браузерами, скорость работы сайта на стороне браузера, размер загружаемых объектов, объём и качество кода. Если сайт собран на «студийной» CMS сайт не тестировался на полную совместимость с наиболее распространёнными браузерами, не удивляйтесь, если он начнет «прорисовываться» некорректно и с задержками.
Чтобы определить недостаточно оптимизированные с точки зрения скорости загрузки страницы сайта, нужно в фильтре колонки «Время до загрузки DOM» установить условие «Показать страницы с временем загрузки более 4 секунд».

Скорость загрузки страниц сайта. Определение «самых задумчивых» страниц сайта в отчёте «Яндекс.Метрики».

Аналогичный функционал заложен и в сервисе Google PageSpeed Insights для разработчиков.

Google PageSpeed Insights

Существует ряд независимых от ПС сервисов, измеряющих скорость загрузки:

• https://tools.pingdom.com/ – оценивает скорость, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно показывает данные по каждому запросу к серверу (стили, скрипты, изображения и др). Это позволяет выявить причину долгой загрузки.
• http://www.webpagetest.org/ – комплексно тестирует скорость проекта, варьируя локацию клиента (континент, страна), тип устройства (десктоп, мобайл, операционная система), браузер и способ подключения к серверу. Позволяет осуществлять сравнение скорости проектов – конкурентов в нише.
• http://whichloadsfaster.co/ – даёт возможность загружать два сайта для сравнения (свой и конкурента), а затем визуально наблюдать, какой проект загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.
• http://pr-cy.ru/speed_test/ – пакетная проверка скорости до 10 адресов URL. Сравнивается время загрузки и размер index-документа для каждого из ресурсов. Входит в состав пакета инструментов для веб-мастеров.
• http://sitespeed.me/ru/ – посылает запросы к анализируемому документу на сайте от 30 серверов, расположенных на значительном расстоянии, и определяет скорость доступа для каждого из них. Подсвечивает лучшие, худшие и средние показатели по скорости доступа

Мы рекомендуем для анализа скорости загрузки сайта и дальнейшей оптимизации использовать встроенные в системы веб-аналитики «Яндекс» и Google-отчёты.

Конечно, стоит прислушаться и к мнению «сторонних экспертов», но прежде всего интернет-проект должен понравиться ПС. Внешние же сервисы просто необходимы для сравнения «скорострельности» вашего сайта с сайтами конкурентов в топе. Не имея доступа к счётчикам «Яндекс.Метрика» и Google Analytics, получить эту важную информацию можно только «на стороне». Нужно помнить, что методика сбора данных сторонними сервисами может существенно отличаться, результатом будут некорректные выводы и рекомендации для разработчиков по оптимизации скорости загрузки.

Итак, аудит проведён, запаздывающие документы выявлены. Что дальше: как увеличить скорость загрузки сайта?
Приступаем к выполнению чётко регламентированного алгоритма действий, который включает следующие этапы:

• Уменьшение размера загружаемых объектов

Минимизация кода происходит за счёт удаления избыточных пробелов, табуляций, переносов строк, комментариев, дублирующегося кода. Минимизация применима к коду HTML, CSS и JS и, в зависимости от размера и содержимого кода, достигает результатов, близких к gzip-сжатию – уменьшать файлы до 20–30 % от исходного размера. При использовании ещё и gzip-сжатия предварительная минимизация увеличивает степень сжатия в среднем на 3–5 %. Используя gzip-сжатие, важно убедиться в том, что процедура отключена для изображений и других двоичных файлов. Поскольку эти файлы уже сжаты, а их размер существенно превышает размеры типичных текстовых файлов, применение gzip-сжатия не принесёт никакого выигрыша в клиентском быстродействии веб-страниц, зато увеличит нагрузку на сервер.

1. Оптимизация изображений

За счёт использования подходящих графических форматов и сжатия без потерь суммарный объём страницы уменьшается до 50 % и более. Изображения, полученные с фотоаппаратов или сохраненные в некоторых графических редакторах, содержат массу дополнительной информации (метаданные, избыточная цветовая палитра и пр.). Существует несколько графических форматов, поддерживаемых  современными браузерами: PNG-8, PNG-24, JPEG, GIF. Каждый из них позволяет получить значительный выигрыш в размере. Вот наглядный пример, где видна проведённая оптимизация графики средствами Adobe Photoshop без потери качества, позволившая в 4,5 раза сократить исходный объём файла с 904 до 203 кБайт:

Результаты оптимизации графики для web

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

В случае, когда для верстки требуются полупрозрачные изображения, используется формат PNG-24, поддерживающий альфа-каналы.
Для изображений с ограниченной палитрой применяем PNG-8. Этот формат, как и GIF, позволяет использовать прозрачность, но в большинстве случаев превосходит GIF. Достигается это за счёт более совершенной методики сжатия, которая охватывает и горизонтальные, и вертикальные повторения, а также адекватно работает с градиентами.

Единственным кросс-браузерным форматом, который отображает анимацию в изображениях, является GIF. Хотя уже в ближайшем будущем ему составит конкуренцию развивающийся APNG.

Устранение избыточного кода

Для уменьшения размера кода применяются способы вёрстки, требующие минимум тегов HTML и правил CSS. Так, семантическая вёрстка с применением независимых блоков  предпочтительна по отношению к вёрстке вложенными таблицами с использованием тегов. Избыточного кода в CSS можно также избежать, приняв стандарт отображения типовых элементов на веб-страницах, таких как заголовки, параграфы, списки, ссылки и т. д. Один раз определив стиль оформления ссылки и параграфа, больше не придётся описывать для каждого нового блока.

Устранение встроенного в разметку кода

Суммарный объём кода можно также сократить за счёт устранения встроенного на веб-странице CSS и JS- кода. Множество атрибутов style=”” в HTML-тегах можно заменить за счёт использования классов единственным, общим для всех элементом – селектором, а множество javascript-обработчиков (например, обработчиков onclick=””, onmouseover=”” и др.) – одним единственным обработчиком. Изменить вёрстку и JavaScript (логику) в подобных ситуациях, как правило, не сложно.

• Неиспользуемый код

Нередко на веб-страницах присутствует некоторое количество неиспользуемого кода, находящегося как непосредственно в HTML-документе, так и во внешних файлах. Время загрузки этих страниц увеличивается на время загрузки неиспользуемых внешних файлов из сети или из кэша браузера и на время, необходимое для разбора всех элементов DOM-дерева и CSS-правил, которые могут быть к ним применены. В случаях, когда размер веб-страницы и файлов ресурсов измеряется в сотнях килобайт, задержка становится существенной. Если в файлах CSS и JS, подключаемых на веб-странице, объем кода относится исключительно к другим страницам, его перераспределяют по нескольким файлам, подключая их на страницах по необходимости.

• Устранение фреймов

Старайтесь отказаться от использования фреймов. При невозможности совсем отказаться от них, минимизируйте количество. Среди минусов фреймов: избыточные запросы к серверу, блокирование события onload, а также затруднения при поисковой индексации и сохранении адресов и состояний веб-страниц. Использование фреймов, как правило, оправдано только тогда, когда требуется безопасно вставить блок стороннего содержимого, например рекламный. Можно избежать применения фреймов благодаря разумному использованию серверных скриптов и техник AJAX.

1. Объединение файлов CSS

Уменьшить количество запросов к серверу можно за счёт минимизации количества вызовов CSS-файлов. Оптимальное количество таких вызовов – не более двух на страницу. Не подключайте на каждой веб-странице все использующиеся на сайте CSS-файлы. Пусть тот код, который нужен на ограниченном числе страниц, вызывается только на них.

1. Объединение файлов JavaScript

На странице часто подключается несколько файлов JavaScript. Уменьшив их количество, можно увеличить итоговую скорость загрузки страниц. Код JS объединяется в одном файле, загруженном и кэшированном единожды. Это решение сработает, если кода JavaScript на сайте немного (до 100 килобайт в сжатом виде). В ситуации, когда сайт представляет собой сложное веб-приложение и объем кода превышает 100–150 килобайт в сжатом виде, у объединения всего кода в одном файле будет отрицательная сторона: при запросе первой страницы пользователь будет загружать часть кода, которую мог бы не загружать вовсе.

Популярные решения для того, чтобы повысить скорость загрузки сайта на самых распространенных движках, в том числе на базе CMS WordPress – системы управления сайтами, на которой работает каждый 3–4 сайт в мире:

• Для оптимизации страниц применяется плагин Optimize DB из пакета Yoast. Он позволит уменьшить размер таблиц mySQL и оптимизировать их структуру.
• Для кэширования запросов к базе данных — WP Super Cache от Automattic.

Направление кэширования востребовано среди разработчиков плагинов для WordPress. Достаточно ввести запрос «Cache» в разделе «Плагины» —> «Добавить новый», и вашему вниманию предстанет выдача из 3323 виджетов. Есть из чего выбрать!

Следующий момент – это адаптивная вёрстка сайта. Сегодня во всех нишах растёт доля пользователей с мобильных устройств. Ни в коем случае нельзя пренебрегать этой частью аудитории. Сайт должен быть удобен, понятен и решать задачи пользователя не только на декстопах. По нашей статистике, сегодня 70–75 % сайтов, приходящих в работу по SEO-продвижению, не имеет адаптивной версии. В оставшейся части «передовых» проектов мобильная версия есть, но её эффективность и конверсионность оставляет желать лучшего с точки зрения «заточенности» на выполнение бизнес-задач клиента и позитивного опыта взаимодействия посетителя с площадкой.

Если сайт не адаптирован к мобильным устройствам, то успех SEO-продвижения сомнителен!

Обращаясь в агентство по продвижению сайтов, поинтересуйтесь, как будут работать с сайтом в плане улучшения скорости работы, доступности и удобства для мобильных устройств. Сразу при специалистах пройдите Google PageSpeed Insights Test, распечатайте полученные результаты теста скорости загрузки и перечень рекомендуемых Google улучшений. Это станет отправной точкой в процессе работы подрядчика, а вы сможете пару раз в месяц отслеживать, выполняются ли выданные поисковиком рекомендации и стал ли сайт больше нравиться Google в плане технической грамотности и скорости работы.

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

Скорость загрузки сайта: как проверить и улучшить?

Скорость загрузки сайта означает время, за которое сайт полностью загрузится в браузере пользователя, отобразятся все элементы страницы. Обычно время загрузки сайта измеряется в секундах или миллисекундах. Например, в Яндекс.Метрике данный показатель рассчитывается в миллисекундах (мс).

Оптимальная скорость загрузки

Идеальное время загрузки – от 1 до 2 секунд. Оптимальным можно считать показатели до 3-4 секунд. Если скорость ниже – пользователь может не дождаться отображения сайта и закрыть окно браузера. Либо «медленный» сайт начнет его раздражать.

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

Инструменты для измерения скорости загрузки

Данный показатель измеряют системы аналитики, например, Яндекс.Метрика. В данной системе скорость загрузки сайта можно посмотреть в отчете «Мониторинг» – «Время загрузки страниц». При этом Метрика раскладывает процесс загрузки на составляющие: ответ сервера, подключение к серверу, DNS, время полной отрисовки и т.д. Это позволяет понять, на каком этапе идут основные временные потери.

Плюс Метрики – возможность отследить скорость загрузки сайта в динамике. Например, сравнить этот показатель до оптимизации кода сайта и после.

Если вам нужно измерить текущее время загрузки сайта, можно использовать различные онлайн-инструменты. Они бесплатны и не требуют регистрации:

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

Как ускорить загрузку сайта?

1. Оптимизируйте количество элементов и скриптов на сайте.
2. Осторожно используйте сторонние виджеты, информеры. Они могут замедлять загрузку сайта.
3. Оптимизируйте размер фотографий и графики, особенно для мобильных пользователей.
4. Используйте встроенные в систему управления системы для ускорения загрузки сайта, например, кеширование.
5. Используйте качественный хостинг.

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

Оптимизация времени загрузки с помощью PageSpeed Insights

Сервис PageSpeed Insights предоставляется Google. Расположен по адресу: https://developers.google.com/speed/pagespeed/insights/. Сервис выдает рекомендации по ускорению загрузки сайта на компьютерах и мобильных устройствах. Также он показывает уровень текущей оптимизации сайта с точки зрения скорости загрузки.

Инструмент рассматривает только независимые от сети аспекты, так как у каждого пользователя разная скорость подключения. Каждая рекомендация имеет индикатор приоритета, соответствующий ее важности.

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

Топвизор проверил новый код Я.Метрики — Топвизор-Журнал

Закончилось тестирование нового кода Метрики. Яндекс говорит, что код Метрики стал быстрее и не влияет на скорость загрузки сайта:

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

Это практически полностью обновлённая сборка: разработчики переработали код Вебвизора и переписали js-код Метрики с нуля. 

Чтобы подключить быстрый код, скрипт обновлять не нужно. Специалисты смогут лучше понимать статистику: сколько визитов оказались непродолжительными и почему. Быстрый код доступен всем пользователям Яндекс.Метрика. 

Мы не стали верить на слово и проверили. 

Наши наблюдения

Ранее tags.js и вправду весил на 45% больше, чем сейчас. Сжатый код (а именно такой используется при передаче по сети) весит примерно в три раза меньше, поэтому скорость загрузки должна быть улучшена на 15%.

Но файл tag.js всё ещё в два раза тяжелее классической версии watch.js и в пять раз тяжелее файла Google Analytics. Об этой проблеме разработчики Топвизора каждый год пишут Яндексу в Идеи для Метрики. Правда, мы не анализировали сам код, возможно, он сильно изменился в лучшую сторону. 

Скорость записи кликов действительно улучшилась. За последний год отправка данных в ClickHouse стала работать быстрее.

ClickHouse – столбцовая база данных для аналитики с открытым кодом, позволяющая работать с большим объёмом данных в режиме реального времени. Собственная разработка Яндекса.

Мы не сразу нашли, где взять новую версию, поэтому вот Инструкция по обновлению счётчика на старых сайтах:

Инструкция по обновлению счётчика Я.Метрики

Новая версия нужна для Вебвизор 2.0. Это указано в Яндекс.Справке.

Топвизор провёл тест на мобильных устройствах с помощью инструмента PageSpeed Insight. Оказалось, что новая версия Метрики по-прежнему сильно грузит сайт. Индекс производительности нашего сайта мобильных устройств при включении новой версии опускается на 15%:

Производительность сайта на классической версии watch.jsВремя загрузки страниц с новой версией tag.js

Для открытия сайта требуется от 600 ms до 800 ms процессорного времени, которое тратится на счётчики метрики. Если открыть 60 страниц – это почти целая минуты работы процессора. Представьте сколько тепла выработает телефон, работая в течение минуты на всю мощь, и сколько заряда батареи он потратит.

Раньше счётчик грузил страницу примерно за 1000 ms. Если пользователь закрывал страницу быстрее – визит не фиксировался. Сейчас время загрузки и исполнения сократилось примерно до 700 ms и визитов будет фиксироваться больше. Но пользователей, которые закрывают страницу быстрее, чем за 1 секунду, не так много, поэтому значительно количество визитов не изменится.

Ещё интересное замечание:

Если поставить галочку «Альтернативный CDN», то время статического кеша увеличится с 1 часа до 7 суток. Яндекс пишет, что это не рекомендуется, так как использование этой опции может снизить скорость загрузки счётчика. Но в этом случае при посещении сайтов счётчик будет грузиться только один раз в неделю, а не каждый час.

Время загрузки страницы — Яндекс.Метрика. Справка

Этот отчет позволяет анализировать скорость загрузки страниц сайта. Браузер загружает страницы в несколько этапов. Скорость загрузки может снизиться на любом из этапов.

Для просмотра отчета:.

Пример этого отчета доступен для демо-тега Яндекс.Метрики.

Узнайте среднее время загрузки веб-сайта

Чтобы определить, сколько времени требуется для полной загрузки отдельной страницы, проверьте метрику времени загрузки DOM.Чтобы узнать общее время загрузки для всех страниц вашего веб-сайта с установленным тегом, проверьте поле с надписью «Общее и среднее».

Определите, сколько времени требуется для загрузки одной страницы Чтобы определить, сколько времени требуется для полной загрузки одной страницы, проверьте метрику времени загрузки DOM. Чтобы определить время, необходимое для загрузки определенной страницы, выберите сегмент, соответствующий этой странице:

1. Найдите скорость загрузки сайтов, для которой группа условий и щелкните.

2. Выберите условие и введите адрес вашей страницы в поле.

Для просмотра динамики загрузки страницы выберите график «Линии».

Определите скорость загрузки ваших Турбо-страниц. Если на исходном сайте и Турбо-странице установлен один и тот же тег Яндекс.Метрики, вам нужно выбрать сегмент:

1. Найдите скорость загрузки сайтов, для которых группа условий и нажмите.

2. Выберите режим Turbo.

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

В отчете данные интерпретируются с использованием квантиля . По умолчанию выбран квантиль 50%. Это означает, что в 50% случаев время загрузки страницы меньше, чем показано в отчете. Квантиль 90% означает, что время загрузки не будет превышать время, указанное в 90% случаев.

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

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

Показатели в отчете соответствуют этапам загрузки страницы и отображают время загрузки.

• DNS (обработка DNS-запросов) — время, затраченное на обработку запросов к DNS-серверу при загрузке страницы. Учитываются только значения с ненулевым временем.

  На этот параметр влияет скорость DNS-серверов, обрабатывающих запросы к домену сайта.

• Перенаправления (обработка перенаправлений) — время, затраченное на обработку перенаправлений HTTP при загрузке страницы. Учитываются только значения с ненулевым временем.

• Время установления соединения — сколько времени браузер ждал соединения с HTTP-сервером при получении содержимого страницы. Учитываются только значения с ненулевым временем.

  На этот параметр влияет задержка в сети между пользователем и сайтом, а также то, насколько сильно сайт загружен входящими запросами.

• Ответ сервера — сколько времени потребовалось для отправки запроса и получения ответа с содержимым страницы от HTTP-сервера в браузер. Учитываются только значения с ненулевым временем.

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

• Время загрузки и анализа HTML — время, которое требуется браузеру для обработки содержимого страницы после его загрузки с сервера и до рендеринга.

  На этот параметр влияет размер и сложность HTML-страницы (сложность включает количество тегов и количество уровней вложенности).

• Время загрузки DOM — это время между началом сеанса на странице и моментом полной загрузки страницы вместе со всеми ее компонентами (такими как изображения, CSS и скрипты). Это время, необходимое для того, чтобы страница стала полностью доступной для пользователя.

• Время до рендеринга — время от начала перехода на страницу до начала рендеринга страницы в браузере.Это значение, которое пользователи субъективно воспринимают как скорость загрузки сайта. Обычно это занимает менее 2 секунд.

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

Для получения информации о настройке отчетов см. Настройки отчетов.

Причины, по которым скорость загрузки сайта важна?

12 марта 2021 г. | Автор: Алина Николаевна | 29

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

В случае медленной загрузки сайта или конкретной страницы возникнут сразу 2 проблемы:

Поисковые системы, такие как Google и Яндекс, не отображают ресурсы со временем отклика более 1–3 секунд и более в верхнюю часть результатов поиска.

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

Тот факт, что посетители покидают страницы вашего сайта через несколько секунд после его открытия, является поводом для тщательного анализа со стороны Google и Яндекс. Поисковые системы принимают факт большого количества «отказов» (очереди посетителей) и в результате опускают ваш сайт еще ниже в обычных результатах поиска.

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

Причины медленной скорости загрузки сайта

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

Примеров услуг:

• Инструменты Pingdom
• Google PageSpeed ​​Insights -Sitespeed.ru

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

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

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

Ниже приведены причины отрицательных показателей при тестировании скорости вашего ресурса.

Плохой хостинг

Все сайты и веб-ресурсы «хранятся» на специальных «хостинговых» серверах. В случае выбора медленного или некачественного хранилища отрицательный результат теста будет очевиден.

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

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

Желательно проверить и протестировать хостинг, который вы собираетесь использовать.

Неоптимизированный контент на сайте

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

Мультимедийные файлы: количество и размер

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

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

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

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

Файлы CSS и JS

Большое количество файлов CSS и JS замедляет загрузку веб-сайта так же сильно, как и мультимедиа.

JS — элементы программного кода JavaScript, они отвечают за анимацию на сайте.

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

Использование внешних библиотек на низкой скорости

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

У многих пользователей еще есть платный трафик, поэтому они могут отказаться от посещения сайтов с «тяжелыми» элементами дизайна. Скорость вашего сайта всегда должна зависеть от внимания пользователя.

Заключение

В результате измерение скорости загрузки веб-сайта чрезвычайно важно.

Необходимо регулярно анализировать сайт в связи с изменением показателей с течением времени.

При обнаружении проблем можно понять, на стороне сервера они или на самом ресурсе.

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

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

509 Превышен предел пропускной способности

509 Превышен предел пропускной способности Сервер временно не может обслуживать ваш запрос из-за того, что владелец сайта достиг своего ограничение пропускной способности.Пожалуйста, повторите попытку позже.

Яндекс Браузер, легкий веб-браузер из России

В следующей статье мы рассмотрим Яндекс.Браузер . Так называется поисковая система из России. В свою очередь, это самый посещаемый веб-портал в этой стране, который может иметь аудиторию более 12 миллионов пользователей из России, Украины и других стран региона за один рабочий день. Яндекс начал свой путь в 1997 году, так что это не новый браузер, хотя и интересный.Его название происходит от английского « Еще один индексатор » (Еще один индексатор).

Яндекс-браузер — бесплатная, кроссплатформенная программа, основанная на Chromium . Это интернет-браузер, разработанный российской поисковой системой. Браузер проверяет безопасность сайта с помощью системы безопасности Яндекса и проверяет загруженные файлы с помощью антивируса. Он также использует технологию Turbo программного обеспечения Opera. С его помощью он ускоряет просмотр веб-страниц при медленных соединениях, и я должен сказать, что делает это довольно хорошо.

Общие характеристики Яндекс.Браузера

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

Es совместим с Chrome Web Store и надстройками Opera , поэтому никогда не будет недостатка в хороших надстройках для работы с этим браузером. Автоматически включает режим Opera Turbo для более быстрой загрузки при медленном интернет-соединении.Когда скорость интернета падает, включается турбо-режим, и с его помощью мы сможем увеличить скорость загрузки страниц.

Хорошая функция, которую этот браузер собирается предоставить нам, — это защита от спуфинга DNS. Благодаря технологии DNSCrypt , с которой он работает, Яндекс.Браузер обеспечивает безопасную связь с разрешением DNS, шифрованием данных и предотвращением спуфинга DNS или атак на кэш.

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

Если вы ищете последние курсы валют или прогноз погоды, браузер предоставит вам соответствующий ответ. Если вы хотите посетить сайт, но не помните точный адрес, вам просто нужно ввести его название, а Яндекс Браузер сделает все остальное.

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

Установить Яндекс.Браузер на Ubuntu 16.04 LTS 64 бит

Для получения последних обновлений программы ее разработчики рекомендуют установить Яндекс браузер из вашего официального репозитория . Также вы можете использовать пакет .deb , который любой может загрузить по следующей ссылке. На этот раз я собираюсь установить его на Ubuntu 16.04, используя репозиторий.Для этого вам нужно открыть терминал (Ctrl + Alt + T), и первое, что мы сделаем, это создадим файл исходного списка для браузера Яндекс с помощью следующей команды:

 sudo nano /etc/apt/sources.list.d/yandex-browser.list 

Когда он откроется, мы собираемся добавить во вновь созданный файл следующую строку:

 deb [arch = amd64] http://repo.yandex.ru/yandex-browser/deb beta main 

Если вы использовали nano, нажмите CTRL + O, чтобы сохранить файл, и CTRL + X, чтобы выйти из файла.Нам также потребуется загрузить и импортировать ключ GPG, чтобы пакеты, загруженные из этого репозитория, могли быть аутентифицированы. Мы сделаем это с помощью следующих команд, которые мы также напишем в терминале:

 wget https://repo.yandex.ru/yandex-browser/YANDEX-BROWSER-KEY.GPG

sudo apt-key добавить YANDEX-BROWSER-KEY.GPG 

После всего этого остается только обновить локальный индекс пакета и установить Яндекс браузер. С этого же терминала напишем следующее:

 sudo apt update && sudo apt install yandex-browser-beta 

После установки мы сможем запускать наш новый веб-браузер из Ubuntu Unity Dash, меню любимых приложений каждого.Мы также можем запустить его из командной строки:

 яндекс-браузер 

Google против Яндекс против Baidu

Скорость веб-сайта чрезвычайно важна не только для SEO (скорость является фактором ранжирования), но и для удобства пользователей. Согласно исследованию Kissmetrics, 40% людей покидают веб-сайт, если он загружается более трех секунд.

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

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

В этом сообщении блога будет рассказано, как три из этих поисковых систем решили проблему: Google, Яндекс и Baidu.

1. Ускоренные мобильные страницы в Google

Accelerated Mobile Pages, или AMP-страницы, основаны на библиотеке с открытым исходным кодом, которая обеспечивает простой способ создания привлекательных, плавных, реактивных и почти мгновенно загружаемых веб-страниц для пользователей.Страницы AMP лишены сложных решений для кодирования и сохраняют код веб-сайта максимально компактным и простым, что делает его чрезвычайно быстрым. Архитектура AMP состоит из двух необходимых компонентов и третьего необязательного: AMP HTML, AMP JS и AMP CDN.

2. Турбо-страницы на Яндексе

Турбо-страницы — это ответ Яндекса на технологию AMP. Изначально они были запущены для YaBrowser в 2016 году и автоматически активируются, когда скорость соединения 3G или Wi-Fi пользователя падает ниже 128 кбит / с. Яндекс утверждает, что Turbo Pages проще реализовать, чем Instant Articles в Facebook, и они также предлагают монетизацию «из коробки» с рекламным контентом.Турбо-страницы Яндекса работают как с Google Analytics, так и с Яндекс Метрикой.

3. Индексные страницы для мобильных устройств на Baidu

Китайский поисковый гигант Baidu представил собственную версию AMP, которая называется Mobile Index Pages или MIP. Эта технология является зеркальной версией AMP Google, немного адаптированной к китайским веб-стандартам. На данный момент Baidu проиндексировано более 1 миллиарда страниц MIP. В 2017 году Baidu заявила, что также признала технологию Google AMP. Детали сотрудничества Google и Baidu еще не объявлены, но с технологической точки зрения имеет смысл объединить усилия, когда технологии так похожи, чтобы обеспечить более быструю работу Интернета во всем мире.

Я надеюсь, что это дало вам полезное представление об ускоренных мобильных страницах в Google, турбо-страницах на Яндексе и индексных страницах для мобильных устройств на Baidu. Для получения более подробной информации прочтите наше бесплатное руководство здесь.

Следующие две вкладки изменяют содержимое ниже.

Наталья — внештатный SEO-стратег, специализирующийся на цифровых стратегиях для малых и средних предприятий из Польши, Великобритании и Испании. Ее интересы лежат в области технического SEO и веб-аналитики, и она всегда ищет наиболее эффективные и масштабируемые решения.Она прошла сертификацию по входящим данным и индивидуальную квалификацию Google Analytics и твердо верит в подход, основанный на данных. Наталья уделяет большое внимание пониманию языковых и культурных нюансов, которые влияют на успех цифровых маркетинговых кампаний. Наталья родом из Польши, в настоящее время проживает в Испании.

Что такое турбо-режим браузера и как его включить / отключить

Что такое турбо-режим в браузере?

Это технология в браузерах Opera, Chrome, Yandex для ускорения загрузки веб-страниц.Когда турбо-режим включен, соединение устанавливается через серверы компании-браузера, поэтому поток данных может быть сжат до 80%. Это позволяет сократить время загрузки сайта, если у вас медленное интернет-соединение, а также использовать Turbo в качестве анонимайзера.

Турбо анонимен?

Нет, это не так. Ведь при установлении зашифрованного соединения с сайтом SSL-трафик передается напрямую, а не через серверы браузера. Поскольку большинство сайтов и сервисов используют защищенные технологии передачи данных, использование Turbo в качестве анонимайзера бесполезно.

Кроме того, можно отследить использование турбо режима.

Как включить / отключить Turbo в Opera:

1. Откройте меню «Opera», найдите и включите / отключите опцию «Opera Turbo».

Как включить / отключить Турбо в Яндекс.Браузере:

Турбо-режим в Яндекс.Браузере включается автоматически при снижении скорости загрузки ниже 128 Кбит / с и отключается при увеличении скорости более 512 Кбит / с.

Вручную Турбо можно включить / выключить в настройках.

1. Откройте кнопку меню в правом верхнем углу окна браузера и выберите «Настройка».

2. В нижней части страницы «Настройка» нажмите кнопку «Показать дополнительную настройку».

3. В блоке Turbo укажите настройки режима.
   

Как включить / отключить Turbo в Chrome:

В Google Chrome Turbo режим называется Data Saver .

Как включить функцию экономии трафика:

1. Добавьте расширение «Экономия трафика» из «Интернет-магазина Chrome».

2. «Экономия данных» будет включена по умолчанию. Если он не включен, нажмите «Включить экономию трафика».

Как отключить функцию экономии трафика:

1. В меню нажмите кнопку «Экономия трафика».

2. Щелкните «Отключить экономию данных».

Лучшее программное обеспечение для тепловых карт — Plerdy

Наша команда побывала на многочисленных выставках и конференциях, посвященных лучшим инструментам и программам для анализа кликов по кликам.На некоторых из них мы были гостями, на других — участниками. Мы всегда подводим итоги и оцениваем итоги каждого мероприятия. Помимо прочего, мы также создаем рейтинг самых популярных вопросов. Обычно это 10-12 вариантов, относящихся к современным программным альтернативам.

Наиболее частыми вопросами были:

• Почему ваши инструменты лучше, чем программное обеспечение ваших конкурентов?
• Зачем мне вообще нужна тепловая карта?
• Может ли тепловая карта заменить Google Analytics?
• Могу ли я записывать экраны пользователей с помощью тепловой карты?
• Сложно ли читать результаты тепловой карты?

В конце года мы проанализировали собранные рейтинги, чтобы определить, какой вопрос задают чаще всего.Удивительно, но это был вопрос: «Почему ваши инструменты лучше, чем программное обеспечение ваших конкурентов?»

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

Также часть интернет-маркетологов задала более точный вопрос: «Ну, например, чем Plerdy лучше Hotjar или Яндекс.Альтернативы метрике? ». В таких случаях было ясно, что они уже знали плюсы и минусы тепловых карт и ожидали некоторых практических случаев.

Поскольку на конференциях и выставках не хватает времени для подробного объяснения различий между программами теплового картирования сайтов Plerdy, Hotjar и Яндекс.Метрика, мы подготовили отдельную статью об этих альтернативах. Он включает в себя примеры того, как каждый из инструментов тепловой карты работает в одной и той же ситуации. Все тесты проводились на отдельном ресурсе — демо.plerdy.com.

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

СОДЕРЖАНИЕ

• Как работает программа тепловой карты?
• Что такое программа Hotjar для карты кликов? Hotjar, Plerdy, Яндекс.Метрика как три основных альтернативы ПО для тепловых карт
• Сравнение альтернативных программ для тепловых карт: преимущества и недостатки тепловых карт

Как работает программное обеспечение для тепловых карт?

Программа Heatmap записывает поведение пользователя на веб-сайте, собирая различные виды взаимодействий, такие как клики, прокрутки и наведение курсора.Такие инструменты обрабатывают данные в режиме реального времени, чтобы мгновенно отображать любые важные события на тепловых картах в цветовой кодировке. Чем больше посетителей взаимодействует с определенным элементом, тем горячее он становится на тепловой карте. Холодные цвета, такие как синий или зеленый, означают, что посетители неактивны в этой области и не обращают внимания на ее содержание.

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

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

Объединив данные из этих тепловых карт, веб-маркетологи и владельцы веб-сайтов могут получить представление о поведении пользователей с высоты птичьего полета. Программа показывает, что люди делают на страницах, когда и как.

Что такое программа Hotjar Heatmap

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

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

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

Hotjar Pricing

Это программное обеспечение для тепловых карт предлагает три платных тарифных плана и бесплатную подписку. Бесплатная подписка позволяет собирать около 2000 просмотров страниц в день и пользоваться 365-дневным хранилищем данных. Самая дешевая цена, называемая планом Personal Plus, стоит 39 евро в месяц. Стоимость корпоративных и агентских аккаунтов зависит от количества просмотров страниц и других дополнительных услуг.

Альтернативы Hotjar

Разнообразие инструментов веб-аналитики поражает. Некоторые из них предоставляют эффективные альтернативы Hotjar и предлагают расширенные возможности, которых у него нет. В списке лучших альтернатив особенно выделяются инструменты Plerdy и Яндекс.Метрика. Подробнее об этих лучших конкурентах читайте ниже.

Программа Heatmap: Plerdy vs. Hotjar

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

Итак, в чем разница между этими конкурентами программного обеспечения для тепловых карт? Во-первых, инструмент Plerdy позволяет владельцам веб-сайтов записывать данные о динамических объектах с точностью 99%, чего не может сделать программное обеспечение Hotjar. Он также отправляет оповещения SEO, чтобы держать вас в курсе важных изменений на вашем сайте. Во-вторых, стандартный план Plerdy дешевле, чем эквивалентный план подписки Hotjar.

С другой стороны, Hotjar имеет более богатую функциональность, чем Plerdy, и более сильную поддержку сообщества. Этот инструмент может похвастаться более длинной историей и уже выпустил множество учебных пособий и документов, доступных в Интернете. Тем не менее, поскольку команда Plerdy постоянно совершенствует свой инструмент, есть вероятность, что очень скоро они восполнят этот пробел.

Plerdy Pricing

Это программное обеспечение для тепловой карты доступно в 6 тарифных планах, от бесплатной до корпоративной. Для наиболее доступной подписки вам будет предложено платить 14 долларов в месяц.Планы Growth, Business и Premium стоят 29, 59 и 99 долларов соответственно. Если вам нужно программное обеспечение для тепловых карт для корпоративного использования, вы можете связаться с командой Plerdy, чтобы обсудить ваши потребности.

Программа для тепловых карт: Яндекс.Метрика vs Hotjar

В то время как Hotjar — это в основном программа для тепловых карт, Яндекс.Метрика предназначена для общей аналитики веб-сайтов. Он предоставляет отчеты с описанием и отслеживает действия конкретных посетителей. С помощью Яндекс.Метрики вы также можете узнать, откуда идет трафик, и сегментировать записанную информацию по различным атрибутам.Несмотря на то, что, как и Hotjar, он включает в себя несколько альтернатив тепловых карт, они не являются основными функциями программного обеспечения.

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

Если вам нужны функции отчетности, сегментированная статистика и более общие данные о производительности вашего сайта, рассмотрите возможность использования Яндекс.Метрика. Этот абсолютно бесплатный инструмент поможет вам понять, что происходит с вашим интернет-ресурсом.

Яндекс.Метрика Стоимость

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

Сравнение программных альтернатив тепловых карт: преимущества и недостатки тепловых карт

В этом обзоре мы сравним лучших конкурентов программного обеспечения для тепловых карт на основе следующих характеристик и функций:

• Скорость обновления данных
• Запись щелчков по признаку динамических элементов
• Данные о пустых кликах
• Запись кликов со смартфонов
• Прокрутка тепловой карты
• Как отображаются данные о поведении пользователя после изменения дизайна
• Экранная запись поведения пользователя
• Как отображаются тепловые карты
• Какие решения Plerdy отсутствуют в Яндекс.Тепловые карты метрики?
• Какие решения Plerdy отсутствуют в тепловых картах Hotjar?

1. Скорость обновления данных

Начнем со сравнения скорости обновления данных в проанализированных альтернативах.

Чтобы увидеть отчет тепловой карты в личном кабинете Яндекс.Метрики, нужно подождать от 3 до 10 минут. В течение этого времени инструменты записывают и обрабатывают данные для отображения следующего результата:

На снимке экрана показаны координаты щелчков и относительная температура, которая соответствует частоте щелчков по элементу по сравнению с другими взаимодействиями на странице.

Отображение данных на панели управления Hotjar занимает примерно столько же времени:

Инструмент Plerdy отображает данные на каждой странице в реальном времени независимо от ее объема. Таким образом, вы можете видеть клики сразу после того, как они сделаны:

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

2.Функция записи кликов по динамическим элементам

На многих сайтах используются динамические элементы, такие как раскрывающиеся меню, всплывающие формы, интерактивные объекты, масштабирование при наведении курсора и т. Д.

Сравним альтернативы Plerdy и Яндекс.Метрики на основе на примере всплывающего окна фильтра, которое открывается после взаимодействия с плавающей кнопкой:

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

Вот отчет по тепловой карте Яндекс.Метрики:

Как видите, инструмент отображает клики в основной части страницы, а не во всплывающей форме, охватывающей всю страницу.

Теперь откроем аналогичный отчет в Plerdy:

В этом отчете показаны все щелчки по фильтрам.

Другой тип динамического содержимого — это текст, отображаемый после наведения курсора.

В дашборде Яндекс.Метрики данные выглядят так:

Давайте посмотрим, как эта же информация отображается в программе тепловой карты Plerdy:

Этот инструмент собрал 31 клик по тексту, который отображается только после парение.

Обратите внимание, что в этом случае посетители нажимали текст, а не изображение. Если текст не отображался (например, пользователь просто не наводил курсор на элемент), клики не отображались.

Мы провели аналогичный анализ в Hotjar. Мы перешли на страницу веб-сайта с несколькими динамическими элементами и щелкнули по ним:

Инструмент записал взаимодействие с элементами (кнопками), но проигнорировал все, что происходило дальше (например, открытие всплывающей формы, выбор фильтра и т. Д.)).

3. Данные о пустых кликах

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

Например, в этой части сайта мы совершили несколько взаимодействий, которые можно считать пустыми:

Давайте проверим отчет в программе теплового картографирования Яндекс.Метрики:

Вы можете увидеть пустые клики.

Теперь попробуем открыть тот же отчет, но на экране с другим разрешением:

Данные значительно отошли в сторону. Если у UX-специалиста такое же разрешение экрана, он может запутаться в CTR элемента.

Вот тот же отчет, открытый на третьем устройстве с разрешением экрана, отличным от двух предыдущих:

Точки кликов сместились еще больше.

На панели управления Plerdy результаты отображаются по другому принципу.Щелчки без целевого действия или намерения по умолчанию считаются неважными и не отражаются:

Вы также можете встретить пустые щелчки в инструменте Hotjar.

Например, при тестировании дашборда в мобильной версии веб-сайта мы заметили щелчок сбоку:

Это взаимодействие бесполезно, поскольку действие (в данном случае несколько щелчков подряд), скорее всего, было случайным. Для небольшого сайта это не проблема. А вот серьезный ресурс с огромной посещаемостью — это совсем другое дело.Если несколько тысяч посетителей намеренно или непреднамеренно щелкают слепое пятно (зону за пределами функциональной области веб-сайта) или другое место, где взаимодействия кажутся бессмысленными, такие данные практически не будут иметь никакой ценности.

Например, эти данные вам ничего не говорят:

Основная цель Plerdy — упростить оптимизацию веб-сайтов.

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

Следующий пример доказывает важность этой функции. Мы намеренно взаимодействуем с неактивными частями страницы (на скриншоте эти места выделены красными квадратами):

Теперь посмотрим на результаты в программе тепловой карты Plerdy:

Поскольку взаимодействия не привели к целевому действию, инструмент автоматически их не отображает.

С другой стороны, программа Hotjar отображает такие данные:

И добавляет их к общему количеству переходов на сайт:

4.Запись кликов со смартфонов

Отслеживание кликов с мобильных устройств является наиболее важной частью аудита удобства использования. Во многих отраслях более 50% трафика приходится на смартфоны.

Давайте сравним отчеты в различных вариантах тепловых карт, показывающие клики, сделанные на адаптивной версии веб-сайта. Например, мы нажимаем на этот элемент:

Открыв отчет в программе Яндекс.Метрика, мы видим, что инструмент фиксировал клики, но не сегментировал их должным образом.Несмотря на то, что они были созданы на адаптивной версии веб-сайта, отчет выглядит так, как будто посетители взаимодействовали с основной версией:

Даже если вы перейдете на другие страницы адаптивной версии, отчет будет продолжать показывать эти клики:

Как видите, на эту страницу сместились координаты абсолютно не связанных кликов, которых здесь не было.

Как правило, Яндекс.Метрика, в отличие от своих альтернатив, не подходит для анализа поведения пользователей смартфонов.После открытия режима для мобильных устройств в браузере вы увидите эту страницу:

В следующем окне мы открываем отчет, созданный инструментом Plerdy:

Даже когда вы переходите на другие страницы адаптивная версия сайта, отображаемые данные соответствуют кликам:

На дашборде также отображается соотношение кликов, сделанных на разных типах устройств:

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

Давайте сравним два скриншота с данными о мобильных пользователях.

В программе тепловой карты Plerdy элемент навигации с фильтрами не фиксировал мобильные клики:

В то время как программа Яндекс.Метрика показывает нам, что кто-то перешел на страницу:

Дело в том, что Яндекс.Метрика report просто смешивает действия, выполненные на мобильных устройствах и ПК. У этого элемента высокий CTR, но на основной версии сайта.

Разберем другой случай. Мы сделали несколько кликов на iPhone, чтобы проверить результат.

Программа для тепловых карт Яндекс.Метрика ничего не отображает:

Вот та же страница, но с результатами, отображаемыми в отчетах тепловых карт Plerdy:

Следующий случай явно показывает неточности в отчетах Hotjar. Тестирование проводилось с помощью iPhone.

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

Инструмент тепловой карты захватывает только первый экран (открытый с раскрывающимся меню) и добавляет к нему клики, сделанные на самом веб-сайте.

Вам нужно выяснить природу взаимодействий:

Просто закройте всплывающее окно, и вы поймете, с чем связаны собранные клики. Ниже представлена ​​тепловая карта Plerdy:

Как видите, всплывающее окно перекрывает контент веб-сайта, что, скорее всего, указывает на ошибку на анализируемом веб-сайте.Hotjar отображает клики на основе первого снимка экрана и пиллинга данных, тогда как Plerdy показывает все в реальном времени, что является лучшим вариантом.

Кроме того, если вы слегка прокрутите страницу в Hotjar, результат будет следующим:

Взаимодействия отображаются, но вы не видите элементы, с которыми они связаны. Это потому, что Hotjar использует скриншоты. Поэтому, если во время загрузки страницы меню закрывается другим элементом, тепловая карта будет неточной и нечеткой.

5. Прокрутка тепловой карты

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

Вот как это выглядит в программе тепловой карты Plerdy:

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

Яндекс.Метрика и Hotjar не предоставляют такой возможности.

6. Как отображаются данные о поведении пользователей после изменения дизайна

Возможно, каждый интернет-маркетолог или UX-специалист, использующий тепловую карту Яндекс.Метрики для аудита, потерял некоторую информацию. Вот почему тепловые карты стали дополнительным, а не основным инструментом аудита юзабилити.

Давайте посмотрим, как вы можете потерять данные.

Протестируем кнопку, открывающую фильтр:

Удалим.В инструменте карты кликов Plerdy автоматически пропадет счетчик кликов:

В отчете Яндекс.Метрики, кроме данных об удаленном объекте, пропадает и другая информация.

Вот места, где концентрируются клики (до удаления):

Результат после удаления основного элемента:

У инструмента Hotjar аналогичная проблема.

Чтобы увидеть, как работает тепловая карта, мы выбираем элемент веб-сайта, который будет удален:

Удаляем его и проверяем результат на панели управления Plerdy:

В Hotjar данные отображаются без учтите изменения:

Мы также столкнулись с другой проблемой, которая делает отчет неточным.

Отчет Hotjar о кликах на адаптивной версии веб-сайта включает в себя взаимодействия, которые фактически были выполнены в основной версии (для ПК):

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

Например, мы сделали клики в 2 зонах:

И вот как их показывает Hotjar:

7. Экранная запись поведения пользователя

Популярный вопрос о функциях Plerdy связан с записью экрана посетителей .

В Яндекс.Метрике эту функцию предоставляет Webvisor — инструмент, который записывает видео каждого сеанса. Интернет-маркетологи и специалисты по UX знают о таком решении, но обычно им не пользуются. Почему?

Все зависит от реальной посещаемости сайта. Если у вас 10 посетителей в день, количество видео будет относительно небольшим. Вы можете легко наблюдать за ними, чтобы обнаружить аномалии в поведении пользователей. Когда трафик достигает нескольких тысяч (а то и десятков, сотен или тысяч) посетителей в месяц, анализировать такую ​​информацию гораздо сложнее.Вы потратите много времени на просмотр видео или просто ограничитесь несколькими записями.

Ситуация становится еще более сложной, если сеанс длится одну минуту или дольше. Для просмотра 1000 одноминутных видеороликов вам потребуется 16 часов (или 2 рабочих дня)…

Очевидно, что обработка видеозаписей делает аудит юзабилити более сложным и трудоемким.

Панель управления Plerdy помогает обрабатывать большие массивы информации с помощью этих двух решений:

1. Функция Click Path.

Эта функция показывает, какой элемент был нажат первым, вторым, третьим и так далее:

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

8.Как отображаются тепловые карты

Каждая из проанализированных альтернатив имеет разные типы отчетов. Новички в интернет-маркетинге и дизайне обычно не обращают на это внимания. Однако после того, как вы начнете работать с отчетами о тепловых картах, их дизайн становится критически важным.

Например, если вы решите использовать тепловую карту, предлагаемую Hotjar, вы получите снимок экрана анализируемой страницы с добавленным сверху слоем тепловой карты:

Вы не сможете свободно перемещаться между страницами веб-сайта. .

Аналогичным образом работают альтернативы тепловых карт в Яндекс.Метрике — слой с результатами добавляется поверх основной версии сайта.

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

9. Какие решения Plerdy отсутствуют в тепловых картах Яндекс.Метрики?

1. Яндекс.Метрика не сегментирует данные прокрутки по типу устройства:

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

2. Яндекс.Метрика не сегментирует трафик по прямым посещениям:

Означает ли это, что аудиторию, которая посещает сайт напрямую (через точный адрес сайта), невозможно проанализировать? Или эти данные входят в одну из перечисленных категорий? Что ж, точно сказать сложно.

10. Какие решения Plerdy отсутствуют в тепловых картах Hotjar?

1. Календарь для отслеживания кликов за выбранный период времени.Если вам нужен отчет за определенный период времени, вы не сможете его создать в Hotjar.

Plerdy позволяет выбрать временные рамки:

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

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

Plerdy автоматически записывает клики на всех страницах. Вам просто нужно добавить сценарий.

3. В Hotjar вы не можете свободно перемещаться между страницами веб-сайта для просмотра собранных данных. Вся информация отображается в виде отдельного слоя, добавляемого вверху скриншота страницы.

В Plerdy вы можете переключаться между страницами для анализа веб-сайта в реальном времени.

Заключение

Очевидно, что сравнивать Яндекс.Метрику, Hotjar и Plerdy не всегда уместно. Яндекс.Метрика — это аналитическая система, Hotjar в настоящее время больше ориентирована на разработку виджета обратной связи, а Plerdy совершенствует тепловые карты кликов, которые могут быть одинаково полезны для онлайн-маркетолога, специалиста по UX или SEO-эксперта.