редакции
Что мешает вашему сайту быть лучше мобильного приложения
Оригинал статьи опубликован на сайте CMS magazine.
Привести статистику — отличный способ разогнаться на старте любой статьи. По данным Hosting Tribunal на 2022 год, из двух миллиардов существующих сайтов сейчас работают 400 миллионов. Среди них — и ветераны, заставшие интернет в эпоху расцвета JavaScript, и разработанные недавно SPA. Кажется, возможность увидеть с помощью сервиса Wayback Machine, какими сайты были 5, 10, 20 лет назад, недооценена. Это настоящая сокровищница трендов веб-дизайна разных лет, в чём можно убедиться по снэпшотам eBay от 1999 года до наших дней. Но главным образом Wayback Machine подтверждает, что сайты были, есть и никуда не собираются пропадать.
Хотя их пытались убить как минимум дважды, находились те, кто вставал на их защиту.
Первое покушение: соцсети
В 2011 году консультант и писатель Микал Беликов написал для Entrepreneur небольшую заметку под названием Five Reasons Why Websites Still Matter. 11 лет назад вопрос о том, так ли нужны сайты, ставил Facebook*. Набирающая обороты соцсеть с, на тот момент, 800 с лишним миллионами пользователей была привлекательна не только как новый канал связи с родными и друзьями, но и как визитная карточка, ресепшн, портфолио и промо-платформа для компаний по всему миру. Автор статьи же взялся доказать, что страница на Facebook не равноценна сайту, и аргументировал это тем, что:
- дизайн Facebook един для всех, а потому не следует ни за вашим вкусом, ни за целями вашего бизнеса — в отличие от собственного сайта;
- вы не можете влиять на фичи вашего аккаунта, скорость его работы, хостинг и другие технические моменты — зато можете влиять на них, если у вас есть собственный сайт;
- у Facebook не хватает гибкости в подаче контента, форматах CTA и их размещении — зато её хватит у собственного сайта;
- о настройках SEO для страницы Facebook и, соответственно, клиентах, нашедших вас через поисковики, не может быть и речи — не то что в случае, когда у вас собственный сайт;
- Facebook не может дать достаточно полезной информации для аналитики. В сравнении с чем? Ответ вы уже знаете.
Странно было бы говорить, что эксцентричный студент Гарвардского университета сделал какую-то пустышку, но перекладывать на его проект ответственность за доходы вашего бизнеса будет ещё большей ошибкой — вы же не называете съёмную квартиру собственной, правильно? Facebook и прочие соцсети — это каналы связи с вашей аудиторией, со своими инструментами лидогенерации и креативным потенциалом. Но они имеют свои пределы и свои проблемы, особенно сейчас, когда нормы морали и этики проходят специфические точки роста — никогда не угадаешь, чьи чувства ты можешь задеть на своей странице завтра.
Второе покушение: мобильные приложения
Прошло несколько лет, и все стали говорить о массовом переходе со стационарных компьютеров на смартфоны и планшеты. Рос трафик мобильного интернета, число скачанных мобильных приложений и доходов с покупок, сделанных через смартфоны. Некоторые почему-то увидели в этом очередной признак отмены веба и сайтов, но колонка 2014 года от менеджера по цифровым продуктам Натана Матушки на Wired говорила: это не веб умирает, это меняется способ работы в нём. ПК теряют статус кво под напором умных и быстрых карманных устройств, так давайте же сделаем веб таким, чтобы в нём было удобно работать на таких устройствах тоже. Автор обращает внимание читателей на возможность приложений отображать контент и в целом работать офлайн, но ведь этот контент взялся в них не иначе как в момент стабильного интернет-соединения. Вывод: как и соцсети, мобильное приложение — это продолжение вашего сайта, а не его полноценная замена.
Как подружить сайты с мобильным интернетом
Мир веба богат инструментами для разработки сайтов, свободно чувствующих себя в мобильном интернете. Хотите не тратить много сил на дизайн мобильной версии сайта? Используйте Bootstrap. Хотите плавную работу интерфейса? Библиотека React и изоморфные приложения к вашим услугам. Не хотите множить бэкенды, а хотите управлять контентом для всех устройств и платформ с любым интерфейсом через единую систему? Используйте архитектуру headless CMS.
Ну, ладно. А хотите, чтобы сайт вёл себя на телефоне почти как мобильное приложение? Последние несколько лет сближение первых и вторых до их полного неразличения демонстрирует технология прогрессивных веб-приложений (PWA). Вы можете работать с Tinder, Pinterest, Spotify, Telegram, The Washington Post и другими продуктами в мобильном браузере и переживать опыт, похожий на опыт пользователя нативного приложения: открывать их тапом по иконке на рабочем столе, получать пуши, даже читать посты и смотреть картинки офлайн — возьмите любой смартфон с любым популярным браузером и убедитесь сами. При работе над PWA программисты используют стандартные межбраузерные и веб-технологии и создают единую кодовую базу, совместно используемую на всех платформах, что заметно экономит бюджет. Пока продвижение мобильного приложения — это отдельный подход со своими хитростями под названием App Store Optimization (ASO), PWA индексируется поисковиками, как и обычный сайт.
Как вдохнуть в сайт вторую жизнь
Нам бы не хотелось, чтобы эти рассуждения воспринималась вами как способ защитить наши профессиональные интересы. Да, наша студия разрабатывает сайты, но в тоже время мы пользуемся мобильными приложениями: каждый день вызываем с их помощью такси, заказываем продукты, выходим в соцсети.
Но, справедливости ради, процитированные статьи про конкурирование сайтов с соцсетями и приложениями были прочитаны с веб-браузера, а текст, который вы читаете, написан в браузерной версии Google Docs. Это оказалось настолько удобно сейчас и было удобным 10 лет назад, что хочется продолжать так работать и дальше. И Google Docs — не единственный сервис, с которым так комфортно обращаться на десктопе. Поэтому, прежде чем найти команду мобильных разработчиков, подумайте, как вы можете улучшить сайт, который у вас уже есть.
А мы вам в этом поможем.
С какими проблемами на сайте вы можете столкнуться
Ниже мы перечислили потенциальные проблемы, о которых вы можете не подозревать. Они ждут вас и в дизайне интерфейса, и в программном обеспечении, и в контенте, и в кибербезопасности. Как подсказывает опыт, некоторые владельцы сайтов не знают, что мобильная версия и CTA на видимых местах — полезные вещи, поэтому мы попытались собрать вместе как очевидные проблемы, так и те, о которых не все могут догадаться.
Самых ответственных владельцев сайтов в конце статьи ждёт список полезных инструментов для решения перечисленных проблем. Исправьте хотя бы одну — и можете ждать роста конверсии и снижения bounce rate , проигнорируйте все — и попрощаетесь с онлайн-аудиторией.
Производительность сайта и поисковая оптимизация
1. Core Web Vitals
Время — главный ресурс для всех: для вас, для пользователей и, конечно же, для поисковых движков. С 2020 года в топе поисковой выдачи Google оказываются сайты с лучшими показателями по метрикам, входящим в список Core Web Vitals:
- Largest ContentFul Paint (LCP). Диапазон: 2,5-4 секунд;
- First Input Delay (FID) — задержка между первым действием пользователя и реакцией браузера. Диапазон: менее 100 мс, но не более 300 мс;
- Cumulative Layout Shift (CLS). Показывает оценку визуальной стабильности страницы. Из-за всплывающих баннеров и окон части страницы могут сдвигаться, что не только дезориентирует пользователя, но и снижает показатель CLS. Диапазон: менее 0,1, но не более 0,25.
Измерьте эти показатели — если нижнему порогу не будут соответствовать хотя бы 3/4 страниц, Google понизит сайт в рейтинге.
2. Видео и иллюстрации
Графический контент требует много аппаратных ресурсов для его демонстрации пользователю. Перед его загрузкой оптимизируйте все jpg и png-файлы через инструменты вроде TinyPNG или используйте актуальные форматы WebP, JPEG XR или JPEG 2000.
Ещё один способ экономить ресурсы на графическом контенте — это подгружать фото и видео по мере необходимости, то есть как только они попадают в поле видимости пользователя. Эту задачу решает дизайн-паттерн lazy loading.
Мобильный интернет не всегда бывает быстрым. Использование той же картинки для мобильной версии сайта, что и для десктопной, снижает скорость загрузки. Многие CMS включают функцию ресайзинга изображений. Обязательно узнайте, входит ли ваша CMS в их список.
3. JavaScript
У JavaScript несколько назначений: обеспечивать работу интерактивных функций, собирать статистику пользовательских действий, загружать новый контент. Перед SEO-специалистами стоит задача облегчить процесс сканирования контента и уменьшить число проблем, возникающих при обработке страниц, использующих JavaScript. Этого можно достичь через архитектурный подход Server Side Rendering, динамический рендеринг, применение JS-фреймворков и библиотек вроде React, Vue и Angular.
Убедитесь, что поисковые роботы могут сканировать JS-файлы, влияющие на отображение страницы. Например, можно доработать документ robots.txt, добавив соответствующую директиву для робота Googlebot.
Если вы используете на страницах сайта бесконечную прокрутку (Ajax- или JavaScript-пагинация), мы советуем вам не подгружать новые позиции в магазине или посты в блоге автоматически, а реализовать это через кнопку «Показать больше». Также настройте нумерацию страниц через ссылки . 4. Проблемы с кодом От лишнего веса страдают не только изображения. JavaScript, CSS и HTML-файлы тоже стоит оптимизировать. Разработчикам известно много платных и бесплатных инструментов, работающих офлайн- и онлайн, подчёркивающих, какие области нужно оптимизировать, и нет. Вы не озадачивались этим прежде? В таком случае даже PageSpeed Insights расскажет вам много нового. Немного вдохновляющей статистики: Дизайн 1. Иллюстрации Одежда не делает человека человеком, но производит первое впечатление на других людей. Это же касается иллюстраций на сайте: наймите фотографа или художника, который сможет передать смысл и лучшие качества вашего бизнеса и тех товаров и услуг, которые он предлагает. 2. CTA Элементы CTA (кнопки, формы для заявок и др.) — важное звено между заходом на сайт и покупкой товара или услуги. Убедитесь, что эти элементы заметны и контрастируют с остальным контентом на сайте. Не переусердствуйте с их количеством — на главной странице не должно быть больше, чем три или четыре CTA. И начинайте провоцировать посетителя сайта уже с того момента, когда он попадает на главную страницу и смотрит на первый экран. 3. Навигация Если пользователь сайта вынужден блуждать по нему в поисках целевого действия, то он быстро растеряет энтузиазм к покупке и найдёт самый радикальный выход из этого лабиринта: закроет вкладку и больше никогда её не откроет. Чтобы такого не произошло, найдите UX-дизайнера и расскажите ему о своём бизнесе в подробностях. Дизайнер сделает прототип, прогонит его через тестовую группу, получит обратную связь, внесёт коррективы, и в итоге пользователи будут находить искомое в пару кликов. Немного вдохновляющей статистики: Мобильная версия сайта Каждый из нас по себе знает, сколько времени он проводит с мобильным телефоном — а если не знает, то еженедельный отчёт об экранном времени сообщит это в подробностях. Необходимость в мобильной версии сайта не нужно объяснять долго, поэтому в этом разделе только один совет: если у вас нет мобильной версии — сделайте её немедленно. Немного вдохновляющей статистики: Контент 1. Качество Не стесняйтесь прислушиваться к советам от Google Docs, пользоваться «Орфограммкой» и «Главредом», поставьте браузерное расширение Grammarly, если пишете и публикуетесь на английском и вычитывайте тексты несколько раз перед публикацией. Отжимайте воду и боритесь за смысл и логику текста. Иногда серьёзные с виду компании пишут такие статьи, что понимаешь, что лучше бы посмотрел мемы. Не пытайтесь вставлять ключевые слова и фразы там, где это не оправдывает себя — результат может быть абсурдно-смешным, но не эффективным. Поддерживайте структуру текста с помощью заголовков и подзаголовков и формулируйте их так, чтобы читателю было достаточно ознакомиться с ними и понять, будет ли эта статья в вашем блоге полезной или ему нужна другая. Организация Исследование Якоба Нильсена показало, что движение глаз пользователей по странице похоже на букву F. Этому открытию уже 16 лет и оно всё ещё справедливо. Впрочем, пользователями сформированы и другие паттерны и модели работы с контентом: Z-паттерн, T-паттерн, «зигзаг», «золотой треугольник», диаграмма Гутенберга. Это не просто наблюдения, а исследования, проведённые с помощью айтрекинг-технологий. Из их результатов можно сделать вывод: не пытайтесь научить людей читать иначе, если только не гонитесь за высоким показателем bounce rate. Оптимизация под мобильные устройства Представьте, что пользователь начал читать вашу статью на десктопной версии сайта, но прочитать решил на телефоне, пока едет в метро. Будьте уверены, что текст и картинки не окажутся слишком мелкими. Контакты Номер телефона, адрес и имейлы представителей компании иногда бывают спрятаны в не самом очевидном месте либо их просто нет. Конечно, почту можно обнаружить, если искать её по символу @ через Ctrl+F, но к такому прибегают самые отчаявшиеся и остроумные. Вряд ли большая часть людей готова задействовать эти качества сразу, поэтому эффективно используйте хэдер и футер или вообще заведите отдельную страницу с контактами. Немного вдохновляющей статистики: Кибербезопасность 1. DDOS-атаки Недобросовестные конкуренты или просто хакеры-сорвиголовы могут сильно ограничить доступ к вашему сайту, если с помощью сети заражённых компьютеров симулируют такое количество запросов, с которым не сможет справиться сервер. Чтобы этого избежать, архитектура сайта должна быть рассчитана на высокие нагрузки. 2. Брутфорс Брутфорс — попытка взлома сайта или его отдельных частей через механический подбор правильной пары «логин-пароль». Отражать брутфорс помогает анализ ошибок аутентификации и блокировка подозрительных пользователей по IP-номерам. 3. IDOR (Insecure Direct Object Reference) Отдельная разновидность брутфорса, выбирающая своей целью URL-адреса страниц, файлов и директорий, а также конкретные пользовательские профайлы и переписки. При создании паролей не скупитесь на использование букв в разных регистрах, цифр и символов и ограничивайте количество попыток ввода по времени или по IP-адресам. 4. XSS (Cross Site Scripting) XSS — это получение доступа внедрением вредоносных скриптов через динамические элементы сайта (например, поля для сообщений на форумах). Избежать взлома методом XSS поможет фильтрация HTML-символов или их замена на эквиваленты, чтобы поле не принимало вводимый текст за код, который нужно выполнять. 5. SQL-инъекция SQL-инъекция — это изменение GET-запросов, POST-запросов и файлов cookies для доступа к SQL-базе данных. Избежать атаки поможет внимательность к запросам и фильтрация символов. Немного угрожающей статистики: В статье мы рассказали вам о том, что влияет на пользовательские впечатления от работы с вашим сайтом и способно снизить скорость загрузки страниц, испортить внешний вид, мешать сайту правильно отображаться в мобильном интернете и угрожать вашим данным и данным ваших пользователей. Всё это поправимо, если воспользоваться списком инструментов для оптимизации различных параметров сайта и его контента, обнаружения проблем и угроз и для многого другого. Производительность сайта и поисковая оптимизация 1. Core Web Vitals 2. Видео и иллюстрации 3. Оптимизация JavaScript 4. Оптимизация HTML и CSS Дизайн 1. Иллюстрации 2. CTA 3. Навигация Мобильная версия сайта Контент Кибербезопасность 1. DDOS-атаки 2. Брутфорс 3. XSS (Cross Site Scripting) 4. SQL-инъекция Есть очень много историй, рассказывающих о том, что достаточно сделать кнопку для заказа чуть больше и сдвинуть её немного в сторону, чтобы увеличить количество покупок. Развиваются технологии, меняются привычки пользователей и их поведение, меняется сам мир и способы в нём жить — за этими изменениями должен следовать ваш сайт. Следите за трендами (особенно в веб-дизайне), проверяйте аналитику и делайте выводы о проблемах на сайте и его развитии. Надеемся, что наш материал вам в этом поможет. ___ *Признана экстремистской организацией и запрещена в РФ
Сервисы и инструменты для улучшения работы сайта
Заключение