Ваша целевая аудитория давно перекочевала в смартфоны — пользователи тратят до 12% времени в сутках на использование устройств, а это 87 часов в месяц или 1044 часа в год. И 90% этого времени они тратят на приложения. Так что совсем неудивительно, что 67% игроков малого бизнеса давно имеют мобильные приложения.

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

Она имеет решающее значение для UX, поэтому это один из самых важных факторов при оптимизации (что сайта, что приложения). Для этого можно проверить несколько параметров:


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.

5. Оптимизируйте изображения

Визуальные элементы важны для вовлечения пользователей, но последнее, что вам нужно, — чтобы из-за них страдала скорость загрузки контента. К счастью, на рынке есть множество инструментов, которые помогут сжать и оптимизировать изображения. Для поштучной оптимизации подойдёт Optimizilla или TinyPNG, для автоматической — например, Imagemin. Для оптимизации на хостинге попробуйте Akamai или Cloudinary. Но с оптимизацией SVG-файлов не всё так тривиально — подробнее об этом читайте здесь.

6. Форматируйте анимированный контент

Формат GIF популярен для анимации, но на самом деле он никогда не задумывался как анимационная платформа. И если заменить тяжеленные гифки на видео, это заметно сократит время загрузки страниц.

Чтобы преобразовать гифки в mp4-файлы, можно использовать инструмент FFmpeg. А чтобы проверить, какова скорость загрузки (2G, 3G или 4G), воспользуйтесь API-интерфейсом Effective Type. После этого можно заменить некоторые анимированные изображения на статичные JPEG-файлы. Да, классность визуала потеряется, но для пользователей это лучше, чем неоправданно медленный сайт.


7. Используйте AMP

Технология ускоренных мобильных страниц (AMP) — продукт с открытым исходным кодом, который адаптирует контент для мобильных устройств: упрощает и урезает HTML, убирая интерактивные элементы. В урезанной версии вы жертвуете некоторыми функциональными возможностями ради скорости:

• JavaScript ограничивается библиотекой AMP;
  
• изображения загружаются по мере их прокрутки вниз (отложенная загрузка);
  
• формы для лидогенерации могут не работать.

С другой стороны, одно из самых больших преимуществ (помимо улучшенной скорости) в том, что алгоритмы индексации Гугла, который очень любит эту технологию, продвигают такие страницы выше в результатах поиска.


8. Отследите редиректы и сломанные ссылки

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


Редиректы

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

Чтобы проверить сайт на наличие редиректов, используйте бесплатные инструменты — в рунете полно сервисов. Среди найденных перелинкованных ссылок удалите все ненужные, а ссылки на устаревшие страницы замените на страницы с более свежим контентом.

Если на сайте установлен SSL-сертификат, можно проверить защищенность страниц с помощью HSTS — инструмент покажет, какие страницы всё ещё загружаются без SSL.


Сломанные ссылки

Чтобы найти и исправить неработающие ссылки на сайте, используйте инструменты вроде Broken Link Checker. Обнаруженные нерабочие ссылки стоит обновить: заменить URL на верный или удалить их совсем.

Не забывайте делать обе проверки регулярно: редиректы и нерабочие ссылки имеют свойство появляться снова и снова.


9. Не забудьте про непрерывный тест

Существуют сотни инструментов для проверки скорости вашего сайта и его адаптированности под мобильные устройства, но лучше всего начать с Google PageSpeed Insights. Он даст текущую оценку скорости загрузки страницы для обычной и мобильной версий вашего сайта и даст конкретные рекомендации по улучшению. Проверьте сайт и с помощью другой разработки от Гугла — инструмента Test My Site: он покажет, насколько ваш сайт дружелюбен для мобилок на скорости 4G.

Скорость сайта вместе с качественным контентом и грамотными редиректами серьезно влияет на рост трафика.

Да, скорость загрузки ставят во главу угла при анализе UX, но это не единственный фактор успеха среди пользователей. Есть и другие компоненты, которые следует учитывать:

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

Для оптимизации пользовательского интерфейса можно сделать следующее:


10. Упростите структуру

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


11. Сделайте фокус на контенте

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

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

Слишком много текста — тоже плохо. Сделайте тексты более читабельными и ёмкими (попробуйте glvrd.ru — только без фанатизма). Как вариант — замените тексты видеоконтентом, но помните, что он здорово «ест» мобильный трафик.

12. Уменьшите количество баннеров и слайдеров

Слайдеры были популярны некоторое время назад: обычно это 5−6 высококачественных изображений, которые увеличивают общее время загрузки сайта. Исследования показывают, что слайдеры раздражают пользователей и снижают видимость элементов, особенно на мобильных устройствах.

Баннеры могут привести к аналогичным проблемам, особенно если это изображения с встроенным текстом. Такие вещи лучше визуализировать с помощью HTML и CSS, чтобы сделать контент более гибким и удобным для просмотра на экране меньшего размера.


13. Оптимизируйте формы и точки контакта

Если на вашем сайте есть формы, обратите внимание на типы полей, длины и метки — они должны быть хорошо видны на любом устройстве. Будет круто, если при нажатии на поле ввода изображение будет увеличиваться. Для полей с особыми символами клавиатуры (почтовый индекс, номер телефона или цифровая подпись) стоит установить запуск правильной раскладки при клике, чтобы пользователям не пришлось переключаться вручную.

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


14. Сделайте ручную проверку

Для сайтов в сфере e-commerce пункт особенно актуален. Около половины всего трафика в электронной коммерции приходит с мобильных устройств, но когда дело доходит до покупки, то люди все еще делают её со своих компьютеров. Вероятно, это связано с тем, что процесс заказа и оплаты не оптимизирован должным образом для мобильных устройств.

Как понять, где процесс заказа нуждается в улучшении? Достаточно пройтись по всем этапам со своей мобилки — это поможет выявить болевые точки. Возможно, дело в сложной навигации или слишком маленьких точках касания. Но даже если там всё ОК, возможно, вы требуете ввести слишком много данных, а с мобильного устройства это делать неудобно и даже мучительно.

Как решить проблему:

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

15. Проверьте, соблюдаются ли мировые стандарты UX на мобильных устройствах

Думаете, что этой оптимизации достаточно для того, чтобы сайт или приложение годно работали на маленьких экранах? Это необходимый минимум. А чтобы проект соответствовал мировым стандартам и вызывал зависть конкурентов, у нас есть пачка рекомендаций от awwwards — от общих параметров, одинаково нужных для любого сайта, до специфических, которые применяются в проектах для конкретных сфер (e-commerce, туризм и так далее).

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