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

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

• Средний размер передачи (т. е. биты, отправляемые с сервера на устройство) веб-страницы стал в 4,2 раза больше, чем это было пять лет назад, увеличившись с 521 КБ в декабре 2011 года до 2197 КБ или 2,197 МБ в декабре 2016 года. Примечание: измерялись сжатые, а не оригинальные размеры файлов.
• Изображения занимают бОльшую часть этого увеличения. Общий размер изображений, отправленных на мобильные устройства, увеличился в 4,2 раза с 352 КБ в 2011 году до 1490 КБ в 2016 году.
• Запросы изображений выросли с 38 до 50. JPEG-файлы наиболее распространены, они составляют 46% запросов изображений.
• Для сравнения, другим основным компонентом раздувания размеров страницы является JavaScript, запросы которого выросли с 98 КБ до 381 КБ, увеличившись с 8 до 21 запросов. Это составляет 17% от общего размера страницы по сравнению с 68%, занимаемыми изображениями.
• То, на что стоит обратить внимание — это видео, которого не было на веб-сайтах 2011 года, а в настоящее время видео составляет в среднем 110 КБ или 5% от общего размера страницы и занимает гигантские 542 КБ за запрос против 43 КБ для JPEG.

Самое шокирующее открытие заключается в том, что средний размер мобильной веб-страницы, 2197 КБ (2,2 МБ), почти такой же большой, как размер средней веб-страницы на десктопе в 2469 КБ (2,5 МБ) в ноябре 2016 года. И мы можем только догадываться, почему это так:

• Возможно, виноват дизайн веб-сайтов … или же они неэффективно построены, / внедрены (потому что настоящий дизайн веб-сайта — это один сайт, переформатированный для разных устройств)?
• Или принятие неспешных и отложенных методов загрузки побудило компании быть менее эффективными с общим размером страницы?

Упорядочим информацию

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

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

План действий:

1. Просмотрите свою политику в отношении изображений или создайте, если ее у вас нет. Выпускайте рекомендации для всех создателей веб-контента, а также разработчикам.
2. Проведите проверку изображений, которые вы используете на сайте. Приносят ли они пользу или же вред пользователю? Могут ли они быть улучшены, оптимизированы, уменьшены по размеру (на странице), скрыты или удалены?
3. Проверьте, насколько эффективны ваши изображения для пользователей. Исследуйте/тестируйте перед внесением каких-либо изменений, тестируйте на пилотной версии и мониторьте результаты после изменения.
4. Определите, как вы будете балансировать скорость страницы с ее привлекательностью, качеством, воздействием, скоростью страницы, эффективностью и доступностью.

Скорость
Роберт Гейнс, разработчик веб-приложений из Канзаса, США:

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

Потребность в графиках должна быть сбалансирована со скоростью страницы. Когда используются изображения, их следует сжимать и масштабировать, чтобы они загружались быстрее. В случаях, когда сжатия и масштабирования недостаточно, могут потребоваться другие продвинутые методы.
Не существует правила для идеальных скоростей, которые страница должна загружать на мобильное устройство, как это возможно — ведь мобильные соединения изменяются массово. Оцените свою эффективность по сравнению с конкурентами и лидерами сектора.
Различные исследования и отчеты (посмотрите например WPO Stats) показали, что увеличение скорости страницы улучшает конверсии. Например, исследование FT.com показало, что снижение загрузки страницы на 3 секунды на мобильных устройствах привело к сокращению на 9% статей, прочитанных в течение месяца.

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

Тестирование

Тестирование имеет решающее значение для повышения производительности и удобства использования веб-сайтом.

1. Тест на быстроту загрузки страницы

Регулярно проверяйте свои мобильные веб-страницы (все новые и все основные). Используйте разные сервисы и в разное время, потому что результаты тестов будут отличаться … значительно.
WebPageTest — один из лучших, он измеряет скорость, размер страницы и показывает, какова доля данных и запросов принадлежит изображениям, JavaScript и т. д. Этот тест немного техничен, но превосходная картинка, показывающая, как сайт загружается, секунда за секундой, будет понятна всем.
Если хотите что-то менее техническое — используйте Google PageSpeed Insights. А также попробуйте упрощенную версию TestMySite — он иногда удивляет, предлагая другие результаты по сравнению со своим большим братом. N.B. Google фактически не проверяет скорость страницы, а оценивает скорость страницы на основе ключевых критериев. Но он отлично показывает проблемы со страницей.

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

httpArchive – это другое. Он тестирует домашние страницы 1 миллиона топовых веб-сайтов регулярно каждый месяц. Он основан на WebPageTest и блестяще отображает разбивку типов контента, например изображения, и показывает исторические тренды. Даже если вы не в первом миллионе, вы можете использовать его для сравнения себя с теми, кто в топ-100, топ-1000, топ-1 миллион.
Для этого случайного теста давайте представим, что мы крупнейший розничный торговец в мире, и сравниваем себя с крупнейшим интернет-магазином:

Тест на скорость мобильного сайта Walmart.com:

• httpArchive — скорость мобильной страницы (15 января 2017 года): 20,6 секунды. Вес страницы: 1941KB. 95 запросов. Изображения: 962 КБ. Запросы изображений 53.
• WebPageTest (протестирован на iPhone в США, кабельное соединение (9.00 GMT, 29-01-17) — скорость мобильной страницы: 14,3 секунды, полная загрузка — 17,9 секунды.
• PageSpeed Insights — мобильная оценка скорости: 45/100 (очень низкая).
• Список Google для правок: оптимизировать изображения. Устранить блокировку отображения JavaScript и CSS в надстрочном содержимом.

Важно сравнить вашу эффективность с сайтами конкурентов, поэтому давайте попробуем Amazon.com:

• httpArchive — скорость (15 января 2017 года): 6,9 секунды. Вес: 554 КБ. 89 запросов. Изображения: 259 КБ. Запросы изображений 49.
• WebPageTest — скорость (9.00 GMT, 29-01-17): 2,4 секунды; Полная загрузка за 4,8 секунды.
• PageSpeed Insights — показатель скорости мобильной связи: 55/100 (плохой).
• Список Google для правок: Устранить блокирование JavaScript с помощью JavaScript и CSS в надстрочном содержимом.

Google PageSpeed, изображенный на картинке ниже, оценивает, что Walmart может сэкономить 478 КБ (почти 0,5 МБ) просто путем сжатия изображений на странице. Как видно из графика httpActive, это может сэкономить половину веса изображения или одну четверть от общего размера страницы.

См. Руководство Google по оптимизации изображений и устранению ошибок JavaScript.

2. Проведите тестирование пользователей

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

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

3. A/B тест веб-страниц с различными изображениями, номерами, размещением, форматами и размерами изображений
Тестирование A / B показывает две разные версии веб-страницы для разных групп посетителей. Сравните результаты, чтобы увидеть, какие типы изображений лучше всего работают.

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

Оригинал читайте тут.