Сегодняшний целевой рынок стал мобильным. Мобильные пользователи тратят до 12% своего времени на просмотр информации на своем устройстве, что составляет 87 часов в месяц или 1044 часов в год и 90% этого времени тратится на использование мобильных приложений.
Вот почему наличие мобильного приложения может быть очень ценным для вашего бизнеса. Не удивительно, что все, кажется, стали осваивать эту технологию. Даже 67% малых предприятий теперь имеют мобильное приложение.
Проблема в том, что многие приложения являются просто ужасными расширениями уже имеющихся плохих веб-сайтов. Хотя вы можете почувствовать себя готовым погрузиться в разработку своего собственного продукта и реализовать его на рынке, это огромная ошибка. Мобильные приложения являются воротами на ваш сайт. Таким образом, попытка реализовать их без какой-либо критической оптимизации сайта может напрямую повлиять на количество времени и денег, необходимых для создания приложения.
Вот 15 изменений на сайте, которые вы должны сделать, прежде чем рассматривать создание мобильного приложения.
Оптимизация скорости
Скорость имеет решающее значение для пользовательского опыта. Это означает, что если вы хотите, чтобы ваш веб-сайт и мобильное приложение обеспечивали отличный пользовательский опыт, первое, что вам нужно сделать — это оптимизировать скорость вашего сайта.
Вот изменения, которые нужно сделать, чтобы этого добиться:
1. МИНИФИКАЦИЯ
Минификация уменьшает размер содержимого CSS, JavaScript и HTML вашего сайта. Она работает путем удаления ненужного кода веб-сайта, например:
- Ненужный код в вашем JavaScript;
- Неиспользуемые пробелы в вашем CSS;
- Ненужные разрывы строк в вашем HTML.
Если вы используете WordPress, есть множество доступных плагинов, которые позаботятся об этом процессе, включая Fast Velocity Minify и Autoptimize.
2. СЖАТИЕ
Сжатие текста также может повысить скорость, особенно на таких текстовых веб-сайтах, как блоги. Большинство сетей доставки контента поддерживают отправку сжатых файлов, поэтому вы можете настроить сжатие по умолчанию с помощью такого инструмента, как Gzip.
Если вы не размещаете свой собственный веб-сайт, вы можете использовать Check GZIP Compression, чтобы увидеть, если сжатие уже настроено. Если это не так, самый простой способ установить его через плагин, такой как W3 Total Cache, WP Super Cache или WP Rocket.
3. МАКСИМАЛЬНОЕ КЭШИРОВАНИЕ
HTTP-кэширование — это когда браузер хранит копии ресурсов, чтобы к ним можно было быстрее получить доступ. Используя заголовок HTTP-кэша, вы можете определить, когда, как и как долго должен кэшироваться ответ.
Вы можете настроить сервер для присоединения заголовка HTTP Cache-Control и изменить его время кэширования данных. Один из способов сделать это — добавить заголовок прямо в код.
Вот пример заголовка PHP с параметром управления кэшем max-age, равным 84 600 секундам (1 день):
header('Cache-Control: max-age=84600')
Установив максимальный срок действия заголовка, вы гарантируете, что повторные посетители не будут замедлены, получая доступ к ресурсам, которые они загружали ранее. Стремитесь кешировать как можно больше ресурсов в течение максимально длительного периода времени. Затем предоставьте маркеры проверки для эффективной повторной проверки обновленных ресурсов.
4. СНИЖЕНИЕ ВРЕМЕНИ ЗАГРУЗКИ JAVASCRIPT
JavaScript может вызвать задержки, особенно если у вас есть большие пакеты. На среднем мобильном телефоне обработка этих пакетов может занять в 5-10 раз больше времени, чем на компьютере. Вы можете бороться с этим с помощью разделения кода.
Разделение кода разбивает ваши JavaScript-пакеты на части, чтобы доставить их быстрее и только по мере необходимости. Его можно применять на уровне маршрута или на уровне компонентов с помощью таких инструментов, как React, Parcel и Webpack.
5. ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ
Визуальные элементы важны для вовлечения пользователей, но последнее, что вам нужно, это замедление работы пользователей. К счастью, на рынке есть множество инструментов, которые помогут вам сжать и оптимизировать ваши изображения.
Вот несколько вариантов на выбор:
Одноразовые инструменты оптимизации:
Автоматическая оптимизация:
Хостинг и оптимизация:
6. ФОРМАТИРОВАИЕ АНИМИРОВАННОГО КОНТЕНТА
Формат GIF популярен для анимации, но на самом деле он никогда не задумывался как анимационная платформа. За счет перехода на более подходящий формат видео, вы можете значительно уменьшить размер файла и ускорить время загрузки страницы.
Вы можете использовать инструмент FFmpeg для преобразования анимационных GIF-файлов в mp4-файлы. Вы также можете использовать инструмент Effective Type API для определения медленной полосы пропускания и, чтобы автоматически конвертировать анимированные изображения в файлы JPEG меньшего размера. Несмотря на то, что инструмент удаляет часть пользовательского опыта, это лучше, чем сайт, который не загружается или работает неоправданно медленно.
7. СОКРАЩЕНИЕ КОЛИЧЕСТВА ПЛАГИНОВ
WordPress имеет более 54 000 плагинов. Хотя это самая большая платформа на рынке, даже конкурирующие варианты по-прежнему предлагают плагины тысячами. Есть плагины практически для всего, о чем вы можете мечтать в наши дни — плагины для электронной коммерции, такие как BigCommerce для WordPress, плагины для электронного маркетинга, такие как Mailchimp, и плагины для оптимизации коэффициента конверсии, такие как OptinMonster. Многие из них добавляют ценный функционал.
Проблема в том, что слишком много плагинов могут замедлить скорость вашего сайта. Во-первых, убедитесь, что у вас не установлено ничего из того, чем вы не пользуетесь. Затем удалите все плагины для служб, которые можно интегрировать с веб-сайтом другими способами. Google Analytics является ярким примером. Нет причин использовать плагин для этой интеграции, когда вы можете сделать это с помощью ключа API.
Наконец, если у вас все еще много плагинов, ищите комплексные решения, которые могут заменить несколько нишевых. Например, не используйте отдельные плагины для минимизации, сжатия и кэширования, когда есть одно решение для всех трех. Тем не менее, проявите должную осмотрительность, так как некоторые плагины «все в одном», такие как Jetpack, замедляют ваш сайт больше, чем другие.
Сколько плагинов слишком много? Вот общее правило:
- Не более пяти, если у вас общий или бюджетный облачный хостинг;
- Не более 20, если вы используете облачный хостинг, VPS хостинг или выделенный сервер.
8. ИСПОЛЬЗУЙТЕ AMP
Ускоренные мобильные страницы (AMP) — это язык веб-программирования с открытым исходным кодом, который мгновенно доставляет статический контент на мобильные устройства. По сути, это упрощенная, урезанная версия HTML, созданная специально для ускорения неинтерактивных веб-страниц на мобильных устройствах.
Поскольку это урезанная версия, вы компенсируете некоторые функциональные возможности для этой быстрой скорости. Вот два потенциальных недостатка, о которых следует знать:
- JavaScript ограничен стандартной библиотекой AMP;
- Включена функция отложенной загрузки (изображения загружаются по мере их прокрутки вниз);
- Это может повлиять на генерацию лидов, так как AMP часто удаляет opt-in формы.
С другой стороны, одно из самых больших преимуществ (помимо улучшенной скорости) заключается в том, что индексация Google для мобильных устройств имеет тенденцию продвигать страницы AMP в результатах поиска. Существует множество плагинов на выбор для включения ускоренных мобильных страниц, в том числе AMP, AMP для WP — ускоренные мобильные страницы и AMP WP — Google AMP для WordPress.
9. ПЕРЕНАПРАВЛЕНИЯ И НЕРАБОТАЮЩИЕ ССЫЛКИ
Перенаправления и неработающие ссылки могут убить ваш пользовательский опыт, а также замедлить скорость вашего сайта.
Перенаправления
Вам необходимо максимально сократить количество перенаправлений, так как они влияют на скорость страницы и даже общее время загрузки вашего сайта. Задержка становится еще более заметной, когда пользователи просматривают сайт на мобильных устройствах.
Вы можете использовать бесплатный инструмент, такой как Screaming Frog, чтобы проверить ваш веб-сайт на предмет любых перенаправлений. Как только вы нашли что-то, удалите все, что не нужно, и внесите изменения в то, что нужно обновить.
Если у вас защищенный сайт, вы также можете использовать HSTS для удаления перенаправления SSL.
Неработающие ссылки
К счастью, есть также бесплатные инструменты, которые вы можете использовать, чтобы найти и исправить неработающие ссылки на вашем сайте. Два примера:
После того, как вы обнаружите неработающие ссылки, вы можете либо обновить их с помощью правильного URL-адреса, либо удалить ссылку.
Обе эти проверки должны быть обычной частью управления веб-сайтом, так как перенаправления и неработающие ссылки могут появиться снова с течением времени.
10. ПОСТОЯННОЕ ТЕСТИРОВАНИЕ
Мы рассмотрели девять важных способов оптимизации скорости вашей страницы перед внедрением мобильного приложения. Хотя это должно значительно повысить производительность вашего сайта, у вас все еще может быть больше возможностей для улучшения.
Существуют сотни инструментов для проверки скорости страницы вашего веб-сайта и мобильности, но лучше всего начать с инструмента Google PageSpeed Insights.
Он даст вам текущую оценку скорости страницы для настольной и мобильной версий вашего сайта, и предоставит конкретные рекомендации по улучшению.
Следующим шагом будет использование Test My Site для дальнейшего анализа скорости и дружелюбия мобильных страниц.
Все, что вам нужно сделать, это ввести URL вашего сайта, и сервис будет сканировать ваш сайт и оценивать. Вы также можете получить бесплатный отчет, содержащий советы по оптимизации.
Скорость сайта также дает огромные преимущества SEO. В дополнение к написанию высококачественного контента с длинными формами и получению обратных ссылок, скорость сайта оказывает большое влияние на увеличение посещаемости сайта.
Оптимизация пользовательского интерфейса
Скорость может находиться на вершине иерархии UX, но это не единственный фактор. Есть и другие компоненты, которые следует учитывать, например:
- Как легко найти то, что вы ищете;
- Насколько хорошо сайт подходит для вашего мобильного экрана;
- Как просто его использовать;
- Как привлекательно он выглядит.
Для оптимизации и максимизации пользовательского интерфейса можно использовать следующие настройки сайта.
11. УПРОЩЕНИЕ СТРУКТУРЫ
Ваш сайт должен быть интуитивно понятным и простым для навигации, особенно когда его просматривают на маленьком экране мобильного устройства.
Убедитесь, что ваши иерархии упорядочены и что у вас имеется не более одного уровня вложенного контента. Ваша идеальная структура сайта должна выглядеть так:
- Домашняя страница
- Категории (или разделы)
- Подкатегории (только для крупных сайтов)
- Отдельные страницы и посты
Сосредоточьтесь на том, что обычно ищут ваши пользователи, и наметьте общие пути, по которым они будут идти. Затем вы можете расположить категории в иерархии, которая будет иметь наибольший смысл для вашей аудитории.
Вам также следует использовать программное обеспечение базы знаний для создания центрального ресурса или базы знаний для всех пользователей, которые ищут ответы на общие вопросы.
Это простейшая настройка, которую вы можете сделать, и которая оказывает длительное влияние как на настольные компьютеры, так и на мобильные устройства.
12. ФОКУС НА ДИЗАЙНЕ КОНТЕНТА
Разработка контента для мобильных устройств может быть немного сложнее, но это важно для успешного мобильного опыта. Плохой дизайн сайта может убить ваш контент в вашем приложении.
Суть в том, что вам нужно, чтобы ваш контент пробивался сквозь наименьшее количество отвлекающих факторов. Для этого вам может потребоваться удалить такие элементы, как таблицы, графики и другие неуклюжие элементы, которые плохо переводятся на маленький экран.
Кроме того, необходимо удалить такие элементы, как верхние и нижние колонтитулы, меню и боковые панели, чтобы их можно было скрыть или свернуть на небольших экранах. Отключите эффекты наведения для вашего контента, так как многие мобильные устройства не имеют этой функции.
13. УМЕНЬШИТЕ БАННЕРЫ И СЛАЙДЕРЫ
Слайдеры были популярны некоторое время, но люди обычно добавляют 5-6 высококачественных изображений на слайдер, что увеличивает общее время загрузки вашего сайта. Кроме того, исследования показывают, что слайдеры раздражают пользователей и снижают видимость, особенно на мобильных устройствах.
Баннеры могут привести к аналогичным проблемам, особенно если они имеют какой-либо встроенный текст в изображении. Если у вас есть какие-либо баннеры с текстом, вы должны визуализировать текст с помощью HTML и CSS, а не встраивать его в изображение. Это сделает его более гибким и удобным для просмотра на экране меньшего размера.
14. ОПТИМИЗАЦИЯ ФОРМ И ТОЧЕК КАСАНИЯ
Если на вашем сайте есть формы, обратите внимание на типы полей, длины и метки. Все должно быть четко видно на любом устройстве. Включите функциональность, чтобы, если пользователь нажимает на поле для ввода информации, представление увеличивается в нужном месте.
Проверьте, есть ли у вас типы полей, для которых требуется другая клавиатура или сенсорный экран, например, почтовый индекс, номер телефона или электронная подпись. Если это так, вы должны установить поле для запуска правильной клавиатуры при нажатии, чтобы пользователям не пришлось переключаться вручную.
Убедитесь, что все сенсорные точки и кнопки будут видны и достаточно велики, чтобы было легко нажимать пальцем на маленьком экране. Стандартная рекомендация состоит в том, что они должны быть примерно 48 x 48 dp. Поместите текст внутри кнопок, а не сверху или снизу для удобства идентификации.
15. ОПТИМИЗАЦИЯ ОФОРМЛЕНИЯ ЗАКАЗА
Если вы запускаете веб-сайт электронной коммерции, эта последняя настройка для вас.
Около половины всего трафика электронной коммерции поступает с мобильных устройств, но когда дело доходит до покупки, люди все еще делают это на своих компьютерах. Вероятно, это связано с тем, что весь процесс заказа, проверки и оплаты не оптимизирован должным образом для мобильных устройств.
Чтобы определить, где ваш процесс нуждается в улучшении, пройдитесь по всем этапам на нескольких устройствах и размерах экрана и определите любые болевые точки. Проблема может быть чем-то, что мы уже рассмотрели, например, сложной формой навигации или слишком маленькими точками касания.
Тем не менее, даже с учетом этих оптимизированных параметров, если вам требуется много данных, вводить их все с мобильного устройства все равно может быть неудобно.
Вы можете исправить это одним из следующих способов:
- Разрешить пользователям создавать профили, которые будут сохранять и предварительно заполнять их информацию о заказе, включая адрес доставки и номер кредитной карты.
- Интеграция с другими платежными шлюзами, такими как PayPal, которые не требуют повторного ввода информации.
Вывод
Экраны телефонов становятся все больше, а планшеты — все более изощренными, поэтому неудивительно, что большая часть вашей аудитории входит в систему и взаимодействует через мобильные устройства.
Мобильное приложение может стать отличным способом дальнейшего взаимодействия с пользователями. Но только если вы сначала оптимизируете свой веб-сайт, чтобы обеспечить плавный пользовательский интерфейс.
Всем успешной работы и творчества!
Источник
0 комментариев