Смартфоны и другие мобильные устройства стремительно захватывают мир и вы подумываете о запуске своего приложения? А сайт-то у вас оптимизирован? А его мобильная версия адекватно работает? Проверьте это с помощью чек-листов мобильного UX и пятнадцати правил оптимизации сайта от scrum-студии Sibirix, прежде чем тратить миллионы на создание приложения.
Ваша целевая аудитория давно перекочевала в смартфоны - пользователи тратят до 12% времени в сутках на использование устройств, а это 87 часов в месяц или 1044 часа в год. И 90% этого времени они тратят на приложения.
- Мобильное приложение - это точка входа на сайт.
Владимир Завертайлов, руководитель студии Sibirix: «На сегодняшний день, если поднимать вопрос разработки приложений, работающих на едином коде под разные платформы (iOS и Android), наиболее перспективным и быстрым выглядит Flutter. Скорость действительно сопоставима с нативной разработкой, но код пишется один раз. Наш опыт показывает, что для освоения Flutter у толкового разработчика уйдёт не менее 2-3 недель. Однако разработка и, главное, дистрибуция приложений - это реально дорого. Поэтому начинать нужно именно с оптимизации сайта.
Скорость загрузки имеет решающее значение для UX (User eXperience – опыт пользовательского взаимодействия – прим. редакции), поэтому это один из самых важных факторов при оптимизации и сайта, и приложения). Для этого можно проверить несколько параметров.
1. Минифицируйте
Минификация уменьшает размеры CSS, JavaScript и HTML-контента на вашем сайте и удаляет ненужный код:
- лишний код в JavaScript;
- неиспользуемые пробелы в таблице CSS;
- ненужные разрывы строк в разметке HTML.
2. Сожмите файлы
Сжатие текста также может повысить скорость работы, особенно это актуально для сайтов с объёмными блогами. Большинство CDN-сетей поддерживают отправку сжатых файлов, поэтому вы можете настроить сжатие по умолчанию с помощью такого инструмента, как Gzip. Если у вас нет прав на администрирование хостинга, с его же помощью можно проверить наличие сжатия файлов на вашем сайте.
3. Кешируйте по-максимуму
HTTP-кэширование - это когда браузер хранит копии ресурсов, чтобы к ним можно было быстрее получить доступ в следующий раз. Используя этот параметр, можно задать, когда, как и как долго будет кэшироваться ответ (например, 84 600 секунд = 1 день).
Вы можете настроить свой сервер так, чтобы он прикреплял заголовок HTTP Cache-Control и изменял его в зависимости от ваших предпочтений насчет кэширования. Один из способов сделать это - добавить такой заголовок прямо в код.
С конкретным сроком кэширования вы ускорите повторный доступ к ресурсам, которые уже были загружены пользователями.
4. Снижайте время загрузки JavaScript
JavaScript может вызывать задержки, особенно если у вас его много. На среднем мобильном телефоне его обработка может занимать в 5–10 раз больше времени, чем на компьютере. Бороться с этим можно при помощи разделения кода: деления JavaScript-файлов на части, чтобы подключать их быстрее и только по мере необходимости. Разделять код можно на уровне роута или на уровне компонентов с помощью инструментов вроде React, Parcel и Webpack. Кстати, большую часть этих и других рутинных оптимизаций можно отдать модулю Nginx PageSpeed от Google.
5. Оптимизируйте изображения
Визуальные элементы важны для вовлечения пользователей, но последнее, что вам нужно, - чтобы из-за них страдала скорость загрузки контента. К счастью, на рынке есть множество инструментов, которые помогут сжать и оптимизировать изображения. Для поштучной оптимизации подойдёт Optimizilla или TinyPNG, для автоматической - например, Imagemin. Для оптимизации на хостинге попробуйте Akamai или Cloudinary. Но с оптимизацией SVG-файлов не всё так тривиально - подробнее об этом читайте здесь.
6. Форматируйте анимированный контент
Формат GIF популярен для анимации, но на самом деле он никогда не задумывался как анимационная платформа. И если заменить тяжеленные гифки на видео, это заметно сократит время загрузки страниц.
Чтобы преобразовать гифки в mp4-файлы, можно использовать инструмент FFmpeg. А чтобы проверить, какова скорость загрузки (2G, 3G или 4G), воспользуйтесь API-интерфейсом Effective Type. После этого можно заменить некоторые анимированные изображения на статичные JPEG-файлы. Да, классность визуала потеряется, но для пользователей это лучше, чем неоправданно медленный сайт.
7. Используйте технологию AMP
Технология ускоренных мобильных страниц (AMP) - продукт с открытым исходным кодом, который адаптирует контент для мобильных устройств: упрощает и урезает HTML, убирая интерактивные элементы. В урезанной версии вы жертвуете некоторыми функциональными возможностями ради скорости:
- JavaScript ограничивается библиотекой AMP;
- изображения загружаются по мере их прокрутки вниз (отложенная загрузка);
- формы для лидогенерации могут не работать.
С другой стороны, одно из самых больших преимуществ (помимо улучшенной скорости) в том, что алгоритмы индексации Google, который очень любит эту технологию, продвигают такие страницы выше в результатах поиска.
8. Отследите редиректы и сломанные ссылки
Редиректы и неработающие ссылки могут убить лояльность пользователей, а также замедлить скорость сайта.
Редиректы. Сведите их к минимуму, так как они влияют на скорость загрузки страницы и даже на общее время загрузки всего сайта. Задержка становится ещё более заметной, если пользователи зашли с мобильных устройств. Чтобы проверить сайт на наличие редиректов, используйте бесплатные инструменты - в Рунете полно таких сервисов. Среди найденных перелинкованных ссылок удалите все ненужные, а ссылки на устаревшие страницы замените на страницы с более свежим контентом. Если на сайте установлен SSL-сертификат, можно проверить защищённость страниц с помощью HSTS - инструмент покажет, какие страницы всё ещё загружаются без SSL.
Сломанные ссылки. Чтобы найти и исправить неработающие ссылки на сайте, используйте инструменты вроде Broken Link Checker. Обнаруженные нерабочие ссылки стоит обновить: заменить URL на верный или удалить их совсем.
Не забывайте делать обе проверки регулярно: редиректы и нерабочие ссылки имеют свойство появляться снова и снова.
9. Не забудьте про непрерывный тест
Скорость сайта вместе с качественным контентом и грамотными редиректами серьезно влияет на рост трафика. Существуют сотни инструментов для проверки скорости сайта и его адаптированности под мобильные устройства, но лучше всего начать с Google PageSpeed Insights. Он даст текущую оценку скорости загрузки страницы для обычной и мобильной версий вашего сайта, и выдаст конкретные рекомендации по улучшению. Проверьте сайт и с помощью другой разработки от Google - инструмента Test My Site: он покажет, насколько ваш сайт дружелюбен для мобилок на скорости 4G.
Да, скорость загрузки ставят во главу угла при анализе UX, но это не единственный фактор успеха среди пользователей. Есть и другие компоненты, которые следует учитывать:
- как легко найти нужную информацию;
- насколько хорошо сайт адаптируется для мобильных устройств;
- насколько сайт прост в использовании;
- насколько привлекательно он выглядит.
Для оптимизации пользовательского интерфейса можно сделать следующее:
10. Упростите структуру
Сайт должен быть интуитивно понятным и простым для навигации - особенно это касается мобильной версии. Сосредоточьтесь на том, что обычно ищут ваши пользователи, и наметьте общие пути, по которым они пойдут. Затем вы можете расположить категории в иерархии, которая будет наиболее понятна пользователям. Также уделите внимание созданию базы знаний для пользователей, которые ищут ответы на общие вопросы.
11. Сделайте фокус на контенте
Разработка контента для мобильных устройств может быть немного сложнее, но она серь`зно влияет на мобильный UX. Суть в том, чтобы было как можно меньше отвлекающих факторов, мешающих просмотру контента. Возможно, придётся удалить таблицы, графики и другие неуклюжие элементы, которые плохо переносятся на маленький мобильный экран.
Необходимо выделить шапки и футеры, меню и боковые панели, чтобы их можно было скрыть или свернуть на небольших экранах. Отключите любые эффекты ховера для контента, так как многие мобильные устройства не поддерживают этот функционал.
Слишком много текста - тоже плохо. Сделайте тексты более читабельными и ёмкими (попробуйте glvrd.ru - только без фанатизма). Как вариант - замените тексты видеоконтентом, но помните, что он здорово «ест» мобильный трафик.
12. Уменьшите количество баннеров и слайдеров
Слайдеры были популярны некоторое время назад: обычно это пять-шесть высококачественных изображений, которые увеличивают общее время загрузки сайта. Исследования показывают, что слайдеры раздражают пользователей и снижают видимость элементов, особенно на мобильных устройствах.
Баннеры могут привести к аналогичным проблемам, особенно если это изображения с встроенным текстом. Такие вещи лучше визуализировать с помощью HTML и CSS, чтобы сделать контент более гибким и удобным для просмотра на экране меньшего размера.
13. Оптимизируйте формы и точки контакта
Если на вашем сайте есть формы, обратите внимание на типы полей, длины и метки - они должны быть хорошо видны на любом устройстве. Будет круто, если при нажатии на поле ввода изображение будет увеличиваться. Для полей с особыми символами клавиатуры (почтовый индекс, номер телефона или цифровая подпись) стоит установить запуск правильной раскладки при клике, чтобы пользователям не пришлось переключаться вручную.
Кнопки и элементы управления должны быть видимыми и достаточно большими, чтобы их легко было касаться пальцем на маленьком экране. Стандартная рекомендация - они должны быть размером примерно 48×48 пикселей. Размещайте текст внутри кнопок, а не над или под ними, чтобы не вводить пользователей в заблуждение.
14. Сделайте ручную проверку
Для сайтов в сфере e-commerce пункт особенно актуален. Около половины всего трафика в электронной коммерции приходит с мобильных устройств, но когда дело доходит до покупки, то люди всё ещё делают её со своих компьютеров. Вероятно, это связано с тем, что процесс заказа и оплаты не оптимизирован должным образом для мобильных устройств.
Как понять, где процесс заказа нуждается в улучшении? Достаточно пройтись по всем этапам со своего смартфона - это поможет выявить болевые точки. Возможно, дело в сложной навигации или слишком маленьких точках касания. Но даже если там всё ОК, возможно, вы требуете ввести слишком много данных, а с мобильного устройства это делать неудобно и даже мучительно.
Как решить проблему:
-
Разрешить пользователям создавать профили, которые будут сохранять и предварительно заполнять их информацию о заказе, включая адрес доставки и номер платёжной карты.
-
Интегрировать приложение с платежными системами вроде PayPal, которые не требуют повторного ввода информации.
15. Проверьте, соблюдаются ли стандарты UX на мобильных устройствах
Думаете, что этой оптимизации достаточно для того, чтобы сайт или приложение годно работали на маленьких экранах? Это необходимый минимум. А чтобы проект соответствовал мировым стандартам и вызывал зависть конкурентов, у нас есть пачка рекомендаций от awwwards - от общих параметров, одинаково нужных для любого сайта, до специфических, которые применяются в проектах для конкретных сфер (e-commerce, туризм и так далее).
Чек-листы для проверки жизненно важных параметров пользовательского опыта на мобильных устройствах:
-
Общий чек-лист (адаптив, производительность, юзабилити, PWA) – скачать.
-
Сайты онлайн-ритейла (чек-лист для компаний, продающих только онлайн) – скачать.
-
Сайты для ритейла (чек-лист для компаний, продающих оффлайн и онлайн) – скачать.
-
Сайты для генерации лидов (чек-лист для сайтов с формами сбора данных) - скачать.
-
Сайты агентств и фрилансеров (чек-лист для сайтов с портфолио) - скачать.
-
Корпоративные сайты (чек-лист для сайтов о компании, услугах и контактах) – скачать.
-
Блоги и новости (чек-лист для сайтов с лентами статей) - скачать.
-
Интерактивные сайты (чек-лист для сайтов с интерактивным опытом) – скачать.
-
Сайты событий (чек-лист для сайтов конференций и фестивалей) – скачать.
-
Торговые онлайн-площадки (чек-лист для маркетплейсов) – скачать.
Хотя экраны телефонов становятся всё больше, это не значит, что теперь можно забить на простые правила вежливости по отношению к пользователям. Хотите, чтобы вашим приложением с удовольствием пользовались люди - сначала оптимизируйте сайт и приведите в порядок его версию на мобильных устройствах, а уж потом беритесь за создание приложений.
Источник: Sibirix.
Читайте также:
Диджитализируйся или умри: каким будет ваш бизнес уже завтра.
Что такое технология PWA и чем она может быть полезна для малого бизнеса.
Говорит и слушает интернет: как адаптировать сайт под голосовые запросы.
