Изображения, это основной элемент веса страниц, которые итак в среднем весят 2.2Mb, это не позволительной роскошью для мобильных пользователей. В последнее время Google начал все больше и больше уделять внимания скорости загрузки сайта на мобильных устройствах и пользовательскому опыту мобильных пользователей.
Средний размер загружаемых данных на странице
Но как можно исправить эти проблемы? Как было уже сказано, то средняя мобильная страница весит 2.2MB , и это серьезная проблема, при загрузки страницы на мобильном устройстве.

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


Эти данные были получен сервисом httpArchive, который тестирует верхние 1 миллион сайтов несколько раз в месяц:

  • Средний размер данных пересылаемых с сервера на устройство при загрузки страницы увеличился в 4,2 раза, за пять лет, с 521kb в декабре 2011 года до 2197kb или 2,197mb в декабре 2016 года.
  • В тот же период количество запросов (т.е. количество отдельных файлов, необходимых для отображения веб-страницы) увеличилось почти в два раза с 56 до 93 запросов.
  • Общий размер изображений, отправляемых на мобильные устройства увеличилось в 4,2 раза по сравнению с 352kb в 2011 году до 1490kb в 2016 году.
  • Запросы на изображения выросли с 38 до 50. JPEGs, это наиболее загружаемый тип данных, 46% от общего количество загруженных данных приходятся на изображения.
  • Следующим по популярности стал JavaScript, который поднялся с 98kb до 381kb, а число запросов увеличилась с 8 до 21. JavaScript, это 17% от общего размера страницы по сравнению с 68% на изображения.
  • Видео, которое было редкостью в 2011 году, теперь в среднем занимает гигантские 542kb.

Самое интересное, что средний размер страницы для мобильных устройств, 2197KB (2.2mb) почти идентично среднему весу страницы для настольных компьютеров — 2469kb (2.5mb) в ноябре 2016 г.

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

Чеклист для ускорения мобильных страниц

  1. Speed test: проверьте как быстро загружается сайт на мобильном устройстве и найдите самые тяжелые элементы на странице.
  2. Аудит изображения: оценить их количество, формат, размер, положение, влияние.
  3. Обрежьте жир: удалите изображения, которые не добавляют ценности странице.
  4. Оптимизация изображений: правильный формат, размер, положение.
  5. Влияние изображений: изображение должны увеличивать конверсию.
  6. Альтернативные методы: отказ от изображений для значков и кнопок.

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

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

Нет правила об идеальной скорости, ориентируйтесь на конкурентов и лидеров ТОПа. Различные исследования и доклады, показали, что уменьшение скорости загрузки страницы улучшает конверсию. Например, исследование FT.com показало, что увеличение загрузки страницы на 3 секунды на мобильных устройствах привело к сокращению просмотров сайта за месяц на 9%.

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

#1 Проверьте скорость загрузки страниц

Регулярно проверяйте страницы, используя различные сервисы и иногда повторно, результаты тестов будут отличаться … значительно.

Я всегда начинаю с сервиса WebPagetest, наверно наиболее лучший инструмент из аналогичных, он измеряет скорость, размер страницы, единственный минус данного сервиса, он рассчитан на профессионалов, для менее подготовленных подойдет инструмент отGoogle — PageSpeed Insights (также можно попробовать упрощенный вариант: TestMySite — они иногда дают различные результаты). Google на самом деле не проверяет скорость страницы, он оценивает скорость страницы на основе ключевых критериев, но это отлично указывает на основные проблемы со страницы.

Основные проблемы, которые проверяет Google включают в себя: размер изображений и код JavaScript, и если судить по данным httpArchive, это и есть основные проблемы.

#2 Тестирование пользовательского поведения

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

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

#3 Обрежьте жир

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

Спросите себя:

  • Это изображение необходимо?
  • Как оно отображается на экране мобильного телефона?
  • Сколько веса: 30 КБ 50KB, 100KB и т.д. каждое конкретное изображение добавляет к размеру страницы?

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

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

# Изображения в Ecommerce

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

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

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

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

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

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

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


# Заполнение тегов

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

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


Читайте также: Google рассказал, как мобильные телефоны влияют на покупателей | 10 главных ошибок в мобильном продвижении сайта