Изображения тормозят скорость загрузки сайта? Вы не одиноки. В предыдущей статье мы говорили, что размер средней мобильной веб-страницы сейчас равен 2,2 МБ, и это может серьезно затруднить скорость загрузки страницы на мобильном устройстве.
Для тех, кому нравится пошаговый подход, вот десять условий, чтобы повысить скорость загрузки мобильных веб-страниц:
- Тест скорости: как быстро загружается сайт на мобильное устройство; причины задержки.
- Протестируйте воздействие изображения: приносит ли оно пользу или вред пользователю.
- Политика изображений: сформируйте политику компании по изображениям; обучите всех.
- Аудит изображений: оцените их количество, формат, размер, воздействие.
- Обрежьте лишнее: удалите изображения, которые не добавляют ценности.
- Воздействие изображения: усильте воздействие изображения.
- Сбалансируйте изображения с возможностью доступа.
- Оптимизация изображений: правильный формат, правильный размер.
- Альтернативные методы: для значков и кнопок.
- Еще более высокая скорость: методы веб-дизайна.
Обрежьте лишнее
Первый и самый простой шаг для улучшения скорости загрузки страницы — удаление ненужных изображений. Если картинки не добавляют ценности, бесполезные фото просто заполняют место – удалите их.
Когда вы проверяете существующие страницы или создаете новые, задайте вопросы:
- Пространство, которое картинка занимает на мобильном экране?
- Добавление 30KB, 50KB, 100KB и т. д. к размеру страницы?
Robert Gaines, разработчик веб-приложений из Канзаса, США, советует:
«Прежде чем добавить изображение на веб-страницу, решите, действительно ли вам это нужно; действительно ли оно увеличит ценность. Каждое добавленное изображение замедляет работу веб-страницы, что влияет как на пользовательский интерфейс, так и на рейтинг поиска.
Слайд-шоу — отличный пример картинок, которые можно удалить с веб-страницы. Исследования показали, что слайд-шоу не оказывает значительного положительного влияния на конверсии – это ненужные навороты».
Используйте heatmaps, тестирование пользователей, А/В тест страниц, чтобы оценить влияние ваших изображений на пользователей. Является ли оно положительным, незначительным или отрицательным?
Полезные картинки
Как только вы выявили изображения, которые не добавляют ценности, сконцентрируйтесь на том, чтобы оставшиеся картинки приносили больше пользы, занимая свои пиксели/Кб.
Raluca Budiu, директор по исследованиям в Nielsen Norman Group, говорит:
«Поскольку загрузка веб-изображений на мобильные устройства занимает больше времени, было бы неплохо, чтобы они содержали какую-то информацию, а не были только декоративными. Пользователи редко ценят красивую картинку, не связанную с какой-либо статьей. Сайты электронной торговли нуждаются в хороших изображениях — люди редко могут принять решение о покупке, если они не могут нормально рассмотреть товар».
Тематическое исследование: изображения героев Unilever для мобильных устройств
Одна из компаний, которая действительно уменьшила вес сайта, создав полезные изображения, — Unilever.
Работая с командой Cambridge University Inclusive Design, компания переделала и облегчила все снимки товаров для своих брендов, чтобы клиенты могли мгновенно распознать и выбрать подходящий продукт, просто используя визуальное распознавание. Они ускорили доступ к каталогу продуктов любого розничного продавца в «стиле Вегас» (т.е. прокручивая результаты, как барабаны на игровом автомате).
Идея состоит в том, что, подчеркивая основные детали на изображении – бренд, тип продукта, размер и количество, — покупателям не нужно перечитывать копию каждого продукта.
Изображение героя — это термин, которым назвали картинку с жирным кликибельным / баннером на карусели, вверху домашней страницы, с изображением нового продукта, продвижением, и призывом к действию. Готовые мобильные изображения героев (Mobile-Ready Hero Images) — это миниатюрные изображения, находящиеся на странице списков товаров либо в категории, либо в поиске, например. мужской дезодорант.
Вот что говорит Oliver Bradley, директор по дизайну компании Unilever:
«Mobile-Ready Hero Images были созданы специально для розничной торговли онлайн, чтобы выступать в качестве основного изображения в результатах поиска. Они предназначены для работы на всех экранах, которые типичны для онлайн-продаж (16 мм на мобильном телефоне, 23 мм на планшете и 48 мм на ноутбуке /рабочем столе).
Они позволяют онлайн-покупателю лучше распознавать бренд, формат, вариант и размер, поскольку представлены в виде быстрого вертикального свитка, что типично для длинных списков продуктов на мобильном устройстве или планшете.
Изображения можно масштабировать и/или обрезать, чтобы обеспечить четкость и узнаваемость бренда, особенно на портретных изображениях. Если необходимо, бренды могут добавить размер продукта или количество содержимого в нижнем правом углу. При необходимости тип продукта может быть добавлен как полоса с правой стороны (портретные изображения) или как полоса вдоль нижней части (ландшафтные изображения). Это позволяет лучше использовать пространство, чем при обычном пакетном снимке».
Пример Unilever убеждает розничных торговцев в 20 странах, в том числе многих розничных гигантов (Walmart, CVS, Walgreens, Tesco и Carrefour) создавать расширенные изображения для своих сайтов электронной коммерции.
С некоторыми розничными торговцами, такими как Asda.com (дочерняя компания Walmart’s UK), каждый продукт Unilever теперь продается с помощью Mobile-Ready Hero Image.
К тому же, Unilever с командой Cambridge превратил Mobile-Ready Hero Images в доступный стандарт, с открытым исходным кодом и бесплатный для любого конкурента. И многие из крупнейших конкурентов Unilever просто сделали это, говорит Bradley:
«Мы поняли, что нам нужно создать универсальное решение для категории с одинаковым визуальным восприятием и согласованностью по всем направлениям. И мы были рады видеть, что L’Oréal, GSK, P & G, Kellogg’s, Kimberly Clark и J & J последовали нашему примеру».
На изображении ниже показаны два скриншота. Первый — поиск дезодоранта с Walmart.com демонстрирует два бренда Unilever с изображениями героев с типом и размером продукта наряду со снимком продукта. С двумя конкурирующими продуктами сложнее установить тип продукта или его размер без увеличения масштаба продукта.
Поскольку Wal-Mart не включает эти детали в рекламу, это делает изображения героев вдвойне полезными.
Второе изображение — поиск шампуня на Asda.com, показывет продукт Unilever (TreSemme) и продукт P&G (Herbal Essences), оба используют изображение героя. Третий продукт, а также бренд P&G (Pantene) не использует изображение героя. В то время как предполагается, что изображения героев значительно увеличивают воздействие, Asda также включает тип и размер продукта в рекламное описание … предполагая, что потребитель будет его читать.
Итак, каково воздействие на UX?
В начале проекта сотрудники Unilever и Cambridge провели исследования (т.е, интервью и опросы) с 3000 покупателями, а затем подтвердили полученные результаты, проведя тесты на отслеживание движения глаз более чем со 100 покупателями, чтобы посмотреть, как они взаимодействовали с сайтом и изображениями с помощью мобильных устройств.
Этот пользовательский тест достаточно убедителен, чтобы опровергнуть любые сомнения розничных продавцов.
«Некоторые розничные торговцы утверждают, что пакетные снимки необходимы для электронной коммерции, потому что текстовое описание рядом с пакетом снимков обеспечивает всю информацию, которая не может быть получена с фотографии. Но мы знаем из исследований, что 90% страницы электронной коммерции игнорируются.
Мы знаем, что большинство покупателей не утруждают себя проверкой названия, размера или формата продукта на сайтах или приложениях розничных торговцев. Вот почему почти у каждого покупателя, с которым мы общались, была история случайного приобретения продукта в интернете, который оказался не таким ожидаемым (особенно по размеру). Если продукт похож на тот, к которому они привыкли, они не утруждают себя проверкой текста.
Покупка продуктов онлайн — удобство и экономия времени. Речь идет о выборе большого количества продуктов как можно быстрее. Поскольку вам не нужно сверять текст с изображениями героев, это делает покупки еще быстрее. Результаты A/B тестов были потрясающими: 24% -ный подъем на Magnum, 19% -ный подъем на Simple и 4% -ный подъем на Ben&Jerry’s».
Доступность
Самая большая проблема для любого типа изображения (особенно для картинок, которые содержат важные текстовые данные) заключается в том, что они невидимы для людей с нарушениями зрения. Люди, которые плохо видят или вообще не видят, используют программы чтения с экрана, чтобы прочитать текст на сайте вслух.
Нет ничего плохого в использовании изображений или изображений героев для этой цели, но важно, чтобы содержание изображения было либо записано в веб-копии, либо в тегах alt (эти теги описывают изображение для устройства чтения с экрана, но невидимы для здорового читателя).
Как правило, эксперты недовольны использованием текста, размещаемого в изображениях, поскольку скрин-ридеры слепы к содержащимся в нем данным. Вот почему предпочтительнее готовить списки данных в виде таблицы html, а не просто загружать изображение таблицы. Но это занимает дополнительное время, и обычно выглядит не очень хорошо.
Marco Zehe, консультант по вопросам доступности и инженер по качеству в Mozilla:
«Для мобильных изображений и для рабочего стола нужен alt текст. Устройства чтения с экрана не используют распознавание изображений в интернете, и если текст на картинке будет недоступен, всё изображение будет недоступно. В принципе, следует избегать текста на картинках. Но если текст помогает пояснить фотографию, особенно для людей с плохим зрением, и до тех пор, пока это только дублирует сказанное в копии и в тексте alt, это допустимо».
Таким образом, если текст действительно добавляет ценность изображению, как в случае с изображениями Mobile-Ready Hero, тогда можно с уверенностью предположить, что это приемлемо, если его дублировать в копии и теге alt. Поэтому возвращаемся к нашим примерам Walmart и Asda:
- Исходный код дезодоранта Dove на Walmart содержит текст alt: «Dove Men + Care Extra Fresh Deodorant, 3 oz, Twin Pack», который описывает продукт, его размер и количество. Копия страницы описывает продукт, но не включает в себя размер или количество.
- Исходный код для TRESemme Shampoo на Asda содержит текст alt: «TRESemme Moisture Rich Shampoo Rollback», в котором описывается и предлагается продукт, но не размер. Чтобы открыть эту информацию, покупателю необходимо щелкнуть по нему.
В следующей статье мы поговорим еще об оптимизации изображений: нужны ли изображения разных размеров для мобильных устройств, планшета и рабочего стола; нужны ли отзывчивые изображения; какой наилучший формат для картинок; методы веб-дизайна для улучшения времени загрузки.
Оригинал статьи читайте тут.
