Следующая статья поможет вам: Ваш мобильный сайт вызывает у людей стресс? Простое руководство по сокращению времени загрузки страницы
Когда вы в последний раз посещали веб-сайт со своего смартфона и вам приходилось ждать, пока загрузится страница?
По словам Акамаи, 73% мобильных пользователей говорят, что сталкивались с медленной загрузкой веб-сайта. Часто это происходит, когда пользователи не используют Wi-Fi и полагаются на сотовую связь.
Но когда загрузка веб-страницы занимает несколько секунд, кажется, что время ползет медленно. Чем дольше этот веб-сайт загружается, тем больше мы расстраиваемся. И кто мог винить нас? Не следует использовать мобильные веб-сайты грузиться так же быстро как их настольные аналоги?
Да, должны. Ваш мобильный веб-сайт включен.
Итак, как сегодня работают мобильные сайты? Чтобы найти эталон, HubSpot Research провела исследование, в котором анализировала производительность более 26 000 веб-сайтов.. Исследование не только рисует не очень красивую картину того, как сегодня работают многие мобильные веб-сайты, но и точно показывает, как медленная загрузка влияет не только на вашу прибыль, но и на частоту сердечных сокращений посетителей.
Давайте углубимся в некоторые результаты этого исследования, почему медленная загрузка так плоха и как вы можете сделать свой сайт быстрее.
Как работает ваш мобильный сайт?
Скорее всего, это едва проходит.
Согласно исследованию HubSpot Research, большинство веб-сайтов работают так хорошо. Фактически, среднее время загрузки, которое мы обнаружили при просмотре этих веб-сайтов, составляло почти четыре секунды. – что само по себе достаточно, чтобы заставить многих посетителей искать в другом месте.
Есть много причин, по которым веб-сайты в среднем получили оценку D- за эффективность в исследовании. Один из главных факторов медленной загрузки — изображения и видео. Часто это происходит из-за того, что изображения или видео не были оптимизированы для веб-страницы, особенно для мобильного интернета.
Найдите минутку, чтобы подумать о том красивом изображении с высоким разрешением, которое вы, вероятно, имеете на главной странице своего веб-сайта. Это просто идеальное представление вашего бренда или продукта, не так ли?
Что ж, это изображение, вероятно, великолепно, но его большой размер файла может привести к медленной загрузке вашего веб-сайта, из-за чего вашим мобильным посетителям будет плохо работать с пользователем.
Почему быстрое время загрузки имеет значение
Прежде чем мы перейдем к тому, как ускорить загрузку вашего веб-сайта, давайте немного поговорим о том, почему так важна быстрая загрузка.
Медленная загрузка вызывает стресс у ваших посетителей
Имеет смысл, что медленная загрузка расстроит посетителей вашего сайта и повлияет на коэффициент конверсии и восприятие бренда. Но знаете ли вы, что это на самом деле приводит к увеличению частоты сердечных сокращений и повышению уровня стресса? Согласно исследованию Ericsson Mobility 2016 г., задержка загрузки одного веб-сайта приводит к увеличению частоты сердечных сокращений в среднем на 38%.
Трудно количественно определить увеличение частоты сердечных сокращений на 38%, особенно если вы не отслеживаете его активно. Вспомните, когда вы в последний раз делали что-то стрессовое, например, смотрели фильм ужасов. Задержка во времени загрузки мобильных устройств примерно эквивалентна тому, что вы чувствовали при просмотре этого фильма ужасов.
Как маркетологи, мы хотим, чтобы посетители чувствовали себя при доступе к нашему контенту или оценке нашего продукта или услуги.
Посетители могут винить вас за свой плохой опыт
В некоторых случаях, когда посетители веб-сайта сталкиваются с задержкой загрузки, они обвиняют своего сотового оператора в плохом обслуживании. Но чем дольше задержка, тем больше вина за задержку лежит на вас: поставщике контента.
В том же исследовании Ericssonисследователи провели для клиентов опрос Net Promoter Score (NPS), в ходе которого их спрашивали, в какой момент они перекладывают вину со своих поставщиков мобильных услуг на поставщика контента.
Для клиентов в исследовании, у которых не было задержек при загрузке мобильного веб-сайта, их показатель NPS резко увеличился (на 4,5 балла) для их мобильного оператора. Но клиенты, которые столкнулись с некоторыми задержками, начали обвинять поставщика услуг; и чем дольше задержка, тем меньше они обвиняли фактического провайдера и тем больше они указывали пальцем на людей, стоящих за самим веб-сайтом.
Медленные видео кажутся самыми напряженными
Использование больших изображений и фонового видео в последнее время стало более распространенным в дизайне веб-сайтов. Видео — это отличный актив, который оживляет ваш контент, но, как оказалось, он также может быть довольно напряженным.
Исследователи из Ericsson обнаружили который YouTube видео с двухсекундной задержкой загрузки повышало уровень стресса у зрителей на 3%; и как только видео начало воспроизводиться, всего одна пауза вызвала повышение уровня стресса еще на 15%:
Этот дополнительный стресс возвращает нас к тому фильму ужасов — чувство, которое мы, конечно, не хотим оставлять посетителям.
Зная, насколько задержки загрузки могут повлиять на посетителей физиологически, что мы можем сделать, чтобы сделать наши мобильные веб-сайты быстрее и сделать их более удобными?
5 способов сделать ваш мобильный сайт быстрее
Там много, что входит в производительность веб-сайтано давайте рассмотрим пять основных факторов, влияющих на скорость загрузки вашего мобильного сайта.
1) Определите, как настроен ваш мобильный веб-сайт.
У вас есть отдельный сайт для мобильных устройств (например, m..com) или на вашем сайте используется адаптивный дизайн?
Google рекомендует использовать адаптивный дизайн в качестве своей предпочтительной методологии, и в зависимости от того, как настроен ваш мобильный веб-сайт, существует оптимизация производительности, которую ваша команда может исследовать. Прочтите этот пост в блоге, чтобы узнать, как протестировать свой веб-сайт на совместимость с мобильными устройствами.
2) Сжимайте изображения.
Помните тот красивый образ продукта или бренда, о котором я упоминал выше, который на самом деле может замедлять работу вашего сайта? Если вы сожмете это изображение, вы можете сократить время загрузки страницы на несколько секунд. Поскольку веб-сайты обычно содержат значительное количество изображений, это часто является основной причиной медленной загрузки, поэтому мы рекомендуем решить эту проблему в первую очередь.
Например, предположим, что изображение вашего продукта отображается на странице размером 500 x 500 пикселей, но фактический размер файла изображения составляет 3500 x 3500 пикселей. Это изображение, вероятно, весит несколько мегабайт (МБ), и на многих веб-сайтах браузер посетителей будет вынужден сначала загрузить 3500-пиксельную версию изображения, а затем правильно изменить его размер до уменьшенной версии — и все это в процессе загрузки. . При подключении к рабочему столу это происходит постоянно, но обычно это происходит так быстро, что мы этого не замечаем.
Но на мобильных устройствах — особенно при сотовой связи — полноразмерное изображение может загружаться долго, что может сильно расстраивать пользователей. Чтобы исправить это, рассмотрите возможность изменения размера, кадрирования, а затем сжатие ваших изображений. (Пользователям HubSpot не нужно беспокоиться о сжатии своих изображений — изображения, загруженные в программное обеспечение HubSpot, сжимаются автоматически. Для клиентов, не являющихся пользователями HubSpot, доступны такие инструменты, как КрошечныйPNG поможет вам уменьшить размер файла изображения.)
Мы также рекомендуем сохранять изображения в таком формате, как JPG, который является относительно легким, подходящим для ваших страниц и не усложняющим работу пользователя.
3) Минимизируйте весь код, особенно JavaScript.
«Минимизация кода» — это процесс удаления ненужных символов без ущерба для функциональности веб-сайта. Это значительно влияет на время, необходимое для обработки кода веб-сайта, что ускоряет загрузку веб-сайта на любом устройстве, будь то настольный или мобильный.
Чтобы минимизировать код, вы, вероятно, захотите привлечь кого-то из команды вашего веб-сайта или команды разработчиков, потому что это связано с непосредственным изменением кода на вашем веб-сайте. Еще лучше, если вы можете удалить некоторый JavaScript (или другой код) из мобильных версий веб-страниц, чтобы еще больше ускорить их работу. (Чтобы узнать больше о минимизации кода, см. ознакомьтесь с этими инструкциями от Elegant Themes.)
4) Загружать видео в фоновом режиме (или не загружать вообще).
Видео, вероятно, является самым большим ресурсом на ваших страницах, и на его загрузку на мобильных устройствах потребуется больше всего времени. Если видео не имеет решающего значения для взаимодействия с пользователем, подумайте о том, чтобы скрыть его в фоновом режиме или вообще не загружать. Скрывая видео в фоновом режиме, они будут загружаться, это поможет восприятию быстрой загрузки вашего веб-сайта, но в конечном итоге может не решить проблему медленной загрузки мобильного веб-сайта.
Как сделать так, чтобы видео загружалось в фоновом режиме? Вы или член вашей команды разработчиков можете вставить в код CSS, чтобы видео вообще не отображалось, когда посетитель переходит на веб-сайт.
Если на вашем веб-сайте есть длинные видеоролики, описывающие ваш продукт или услугу, вы можете попробовать использовать призыв к действию вместо того, чтобы размещать видео непосредственно на веб-сайте, чтобы посетители мобильных устройств могли, например, отправить видео себе по электронной почте и просмотреть его. позже. Это сэкономит время в ближайшей перспективе, а также значительно улучшит мобильное взаимодействие для посетителей.
(Note: Если вы решите создать CTA для мобильных пользователей, подумайте о пространстве между текстовыми полями и изображениями, чтобы убедиться, что ваша веб-страница читабельна и с ней легко взаимодействовать, независимо от того, какое устройство ваши посетители используют для доступа к вашей странице. Кнопки, с которыми трудно взаимодействовать на маленьком экране, могут разочаровывать пользователя.)
5) Воспользуйтесь преимуществами кеша и скорости сети доставки контента (CDN).
Сети доставки контента (CDN) помогают кэшировать и загружать контент на серверы в разных местах, поэтому, независимо от того, откуда в Интернете приходит посетитель и какое устройство он использует, он будет быстрее и лучше. Пользовательский опыт. Если ваш сайт нет в CDNвы можете упустить ряд преимуществ производительности, которые мы настоятельно рекомендуем.
(Клиенты HubSpot: платформа веб-сайта HubSpot использует адаптивный дизайн, имеет автоматическое сжатие изображений и поддерживается нашей CDN для очень быстрой загрузки вашего веб-сайта, так что вам не нужно беспокоиться об этих вещах. На самом деле, согласно Йоттаавеб-сайты независимой компании Internet Performance в HubSpot загружаются быстрее, чем в других системах управления контентом.)
Для маркетологов многое поставлено на карту, чтобы наши веб-сайты не только хорошо выглядели, но и отлично функционировали и работали. Мобильный сайт с быстрой загрузкой гарантирует, что ваши посетители не уйдут с вашего сайта и не испытают такого стресса, как при просмотре фильма ужасов. Вы можете сразу же воспользоваться приведенными выше советами, чтобы начать повышать производительность своего настольного и мобильного веб-сайта.
