Или: Итак, у вас есть адаптивный дизайн, и что теперь?
Адаптивный дизайн - это рекомендуемый Google способ доставки контента на мобильные устройства. Хотя другие мобильные форматы также приемлемы для Google, Google предпочитает один формат другим. Преимущества адаптивного дизайна очевидны, но что происходит, когда адаптивный веб-дизайн недостаточно хорош? Проблема, усложняющая мобильный UX для многих адаптивных сайтов: время загрузки и изображения тяжелых сайтов.
Время загрузки для отзывчивых сайтов
фото Армия США ( CC 2.0 ).
Веб-разработчик Trilibis недавно выпустил опрос на веб-производительности сайтов, использующих адаптивный веб-дизайн и обнаружили, что 69 процентов этих сайтов не имели приемлемого времени загрузки .
Отчасти обеспечение бесперебойной работы мобильных пользователей означает, что производительность сайта должна быть на должном уровне; пользователи не очень прощают сайты, которые медленно загружаются. Пользователям не нравится это, поэтому они подпрыгивают. Google не нравится, поэтому вы ранжируются ниже. Настольные сайты просматриваются таким образом; почему ожидание не переводится на мобильные устройства, особенно с учетом более узкой полосы пропускания?
Возможно, мы упустили из виду пользовательский опыт и восприняли как должное производительность на мобильных устройствах. Мы думали, что, возможно, относительно быстрое время загрузки на наших настольных сайтах приведет к адаптивному дизайну. Наш сайт наполнен контентом и соответствует запросам пользователей. Итак, что дает?
По словам опроса Tribilis, самым значительным фактором, способствующим снижению времени загрузки мобильных сайтов с адаптивным дизайном, являются изображения. Большие, жирные изображения. (Чирикать это)
Старший вице-президент по продажам в Triliblis Тед Верани заявил, что мобильная сеть «значительно медленнее, чем ее проводной аналог. Предоставляя изображения и страницы, оптимизированные для мобильных устройств, мы видим существенные улучшения во времени загрузки страниц, что приводит к гораздо лучшему общему восприятию пользователя ».
Легко забыть об изображениях и их влиянии на время загрузки, но если мы, индустрия интернет-маркетинга, забыли изображения, мы забыли наших мобильных пользователей. Мы должны рассматривать мобильный телефон как наименьший общий знаменатель, как ключевой драйвер трафика на наши сайты.
Это ни в коем случае не новость, но очевидно, что оптимизация изображений упускается из виду, учитывая, что 32 процента опрошенных мобильных сайтов загружаются в ужасных 8-48 секунд с размерами страниц более 1,7 МБ. Хотите узнать, каковы были средние размеры страниц для топ-30 интернет-магазинов в соответствии с Индекс производительности мобильной коммерции Keynote ? 420 КБ, со средним временем загрузки 3,7 секунды. ( Чирикать это )
Оптимизация изображений как средство уменьшения веса страницы и времени загрузки, вероятно, является самым простым способом повышения производительности сайта, тем самым повышая удобство работы с мобильными пользователями, удовлетворяя ожидания пользователя по доставке здесь и сейчас.
Трехшаговое SEO-решение для быстрой загрузки изображений
Существует три способа легко оптимизировать изображения: сжатие и определение.
Во-первых, используйте скорость страницы, чтобы определить, какие изображения являются виновниками . Я ранее писал о Мобильный UX и используя Инструмент Google PageSpeed Insights , Использование этого инструмента покажет вам, какие изображения нужно оптимизировать.
Затем сожмите ваши изображения . Это может быть что угодно, от выбора лучшего, менее занимающего много места формата изображения до определения того, как изображения будут загружаться на страницу. В любом случае, вероятность того, что размер изображений на вашем сайте должен уменьшиться, и есть много методов и инструментов, которые могут быть использованы для достижения этой цели. HTML5Rocks имеет исчерпывающую статью о ряде одинаково обоснованных идей о сжатие изображения , Проверьте это - ваш мобильный UX зависит от этого.
Наконец, размеры изображения . Это критически важно как для настольных, так и для мобильных / адаптивных сайтов. Не определять ваши изображения означает, что браузер должен отображать изображение, так как он загружает другие элементы страницы. Когда размеры определены, браузер предварительно визуализирует пространство в соответствии с размерами.
Другими словами, нет никаких зависаний при загрузке изображений. Плюс, это может действовать как версия сжатия изображения бедного человека. Стоит отметить, что изображения должны быть определены пропорционально их исходным размерам, в противном случае изображения будут иметь правильный размер, но их содержимое будет выглядеть немного юмористическим.
Понятно, что адаптивного дизайна недостаточно. Мы не можем упускать из виду самые простые элементы, даже с общей точки зрения оптимизации, включая оптимизацию изображения.
Это не может исправить все беды на всех адаптивных сайтах веб-дизайна, но может иметь большое значение для вас там. Соедините эти простые советы, и вы уже далеко ушли в решении проблем производительности сайта и, что более важно, в том, как пользователи взаимодействуют с вашим сайтом.
Написал Мэтью Янг 30 апреля 2014 года в 8:00 утра
6 Ответов на «Первое, что вы можете сделать для улучшения Mobile UX: оптимизация изображения»
Преимущества адаптивного дизайна очевидны, но что происходит, когда адаптивный веб-дизайн недостаточно хорош?Настольные сайты просматриваются таким образом; почему ожидание не переводится на мобильные устройства, особенно с учетом более узкой полосы пропускания?
Итак, что дает?
Хотите узнать, каковы были средние размеры страниц для топ-30 интернет-магазинов в соответствии с Индекс производительности мобильной коммерции Keynote ?
