Что веб-дизайнеры могут сделать, чтобы ускорить мобильные сайты

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

Хотя она была разорвана. Она понимала, насколько важна скорость мобильных страниц для взаимодействия с пользователем и, косвенно, для SEO. Тем не менее, их внимание всегда было сосредоточено на создании красивого и эффективного дизайна. Разработчики всегда оставляли заботу о таких вещах, как оптимизация скорости страницы.

В конце концов, мы решили отложить его публикацию до тех пор, пока они не смогут должным образом оптимизировать свой собственный веб-сайт, а также сайты своих клиентов. Между тем, это заставило меня задуматься:

Что могут сделать дизайнеры при создании мобильных веб-сайтов, чтобы помочь разработчикам оптимизировать скорость?

Разработчики уже оптимизируют производительность внешнего интерфейса с помощью:

• Быстрый веб-хостинг
• CDN
• Практики чистого кодирования
• Кэширование
• Минификация
• Оптимизация изображения
• И больше

Итак, что-нибудь осталось?

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

Понимание того, что означает «медленный» в мобильном Интернете

Существует ряд инструментов, которые помогут вам проанализировать скорость страницы и внедрить различные исправления для ее улучшения. Один особенно полезный инструмент называется Lighthouse. Единственное, это предназначено для веб-разработчиков.

Вместо этого я предлагаю веб-дизайнерам использовать другой инструмент тестирования Google под названием Test My Site.

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

Что мне нравится в этом инструменте по сравнению с другими тестами скорости сайта, так это то, что все изложено для вас с точки зрения непрофессионала. В этом случае мой веб-сайт «медленный», даже когда он обслуживается в сетях 4G. Хотя нам уже много лет говорят, что посетители готовы ждать загрузки веб-страницы три секунды , Google считает, что 2,9 секунды слишком много. (С чем я полностью согласен.)

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

Мы это уже знаем. Однако, если вы (или ваш разработчик) еще не внедрили какие-либо из этих исправлений, это хороший контрольный список для работы.

Тем не менее, я не указывал вам на этот инструмент, чтобы вы могли выполнять одни и те же оптимизации снова и снова, ожидая одного и того же результата. Что они всегда говорят об определении безумия?

Вместо этого, я думаю, вы должны использовать это как быструю проверку интуиции:

Достаточно ли быстр мой мобильный сайт в глазах Google? Нет? Тогда и в глазах ваших посетителей он будет недостаточно быстрым.

“

И если вы действительно хотите довести это до конца, прокрутите вниз страницу анализа «Проверить мой сайт» и проведите свои цифры с помощью калькулятора анализа воздействия:

Если вы не совсем уверены, что вам нужно еще больше снизить 3-секундную мобильную скорость, посмотрите на финансовое влияние всего 0,5 секунды на вашу ежемесячную прибыль.

Что веб-дизайнеры могут сделать для оптимизации скорости мобильных сайтов

Позвольте веб-разработчику заняться всеми необходимыми оптимизациями скорости, такими как кэширование и минимизация файлов, пока вы пользуетесь следующими советами и стратегиями по дизайну:

1. Размещайте шрифты из CDN

Когда дело доходит до разработки шрифтов для мобильных устройств, вам нужно беспокоиться о достаточном количестве вещей, о которых вы, вероятно, не хотите слышать… но пользовательские веб-шрифты отстой, когда дело доходит до загрузки. Фактически, есть два недавних тематических исследования, которые демонстрируют, почему пользовательские веб-шрифты вредны для скорости загрузки страниц.

К счастью, CDN может стать вашим спасением.

Пример обезьяны простоя

Первый исходит от Downtime Monkey. В этом тематическом исследовании Downtime Monkey может похвастаться улучшением скорости страницы на 58% за счет различных оптимизаций, две из которых относятся к тому, как они подают шрифты на свой сайт.

Для своих иконок Font Awesome они решили разместить их на CDN. Однако собственный CDN Font Awesome оказался ненадежным, поэтому они переключились на CDN Bootstrap. В результате это сэкономило им от 200 до 550 миллисекунд на загрузку страницы .

Для своего Google Font «Cabin» они решили разместить его на Google CDN. Забавно, однако, отметить, что когда впоследствии они запустили тест скорости страницы на сайте, они получили предложение по оптимизации, связанное со шрифтом.

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

Тест Брайана Джексона

Брайан Джексон, директор по маркетингу в Kinsta, написал пост для KeyCDN, в котором демонстрируется лучший способ обслуживания пользовательских веб-шрифтов на веб-сайте.

В его примере вы можете видеть, что он предлагает ряд оптимизаций, например, ограничение того, какие стили и наборы символов доступны для использования на веб-сайте. Тем не менее, его эксперименты с хостингом CDN действительно интересны.

Во-первых, он изолировал самые популярные шрифты Google и проверил, насколько быстро они загружаются через CDN Google:

Open Sans загружается быстрее всех.

Но это не должно автоматически делать Open Sans лучшим выбором, если вы пытаетесь ускорить свой сайт. В конце концов, Opens Sans — это шрифт Google, который должен обслуживаться серверами Google. При сравнении с Arial, безопасным веб-шрифтом, который не извлекается из внешнего источника, получилось следующее:

Arial превзошел Open Sans почти на 200 миллисекунд.

Прежде чем мы двинемся дальше, я просто скажу, что это один из способов решить дилемму медленной загрузки шрифтов: вместо того, чтобы использовать сторонние шрифты, используйте системные. С ними может быть не так интересно работать, но они не заставят пользователей сидеть и ждать загрузки вашего веб-сайта, что будет стоить вам посетителей и клиентов в процессе.

Возможно, вы думаете, что загрузка и размещение вашего шрифта Google будет иметь больше смысла. Таким образом, вам не придется идти на компромисс с тем, какие шрифты вы используете, и это сократит время их обычной скорости загрузки. Верно?

Что ж, Брайану это тоже было любопытно, поэтому он провел тест:

При подаче с локального сервера Open Sans загружался за 0,530 миллисекунды. Разница невелика, но явно не в том направлении.

Итак, каков вывод? Ну, у вас есть несколько вариантов.

1. Вы можете использовать веб-безопасный шрифт и избежать проблем, связанных с использованием внешних шрифтов.
2. Вы можете использовать шрифт Google и убедиться, что он размещен в CDN Google.
3. Вы можете скачать шрифт Google и загрузить его в свой собственный CDN (если вы сможете ускорить его загрузку оттуда).

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

2. Перестаньте использовать громоздкие элементы дизайна

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

Остановить рекламу на странице

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

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

Во-вторых, только более 26% населения США используют технологию блокировки рекламы на своих устройствах, поэтому они вряд ли увидят вашу рекламу на странице.

Вместо этого используйте методы монетизации, которые удаляют рекламу с вашего сайта, увеличивают ваши собственные конверсии на сайте и не истощают ресурсы вашего сервера:

• Ремаркетинг
  Пусть ваш пиксель отслеживания следит за посетителями в Интернете, а затем показывает собственную рекламу на чужом сайте.
• КПП
  Можно заработать хорошие деньги, если вы сможете отточить рекламную формулу с оплатой за клик в Google.
• Реклама в социальных сетях
  Их особенно легко запустить, если ваш сайт регулярно публикует новый контент и у вас есть привлекательное предложение.

Остановить всплывающие окна

Я знаю, что Google говорит, что в некоторых случаях мобильные всплывающие окна допустимы. Однако, если вы создаете веб-сайт с помощью WordPress или другой системы управления контентом и используете плагин для создания этих всплывающих окон, это замедлит время загрузки. Это может быть не так много, но вы заметите разницу.

ThemeIsle решил провести анализ того, как определенные плагины влияют на скорость сайта WordPress. Вот что произошло, когда они проверили влияние каждого из этих плагинов на время загрузки:

Конечно, некоторые плагины закодированы так, чтобы они были более легкими, чем другие, но всегда будет ощущаться какая-то разница во времени загрузки. Основываясь на этих данных, разница может составлять от 0,01 до 0,29 секунды.

Если вы знаете, что всплывающие окна в любом случае не кошерны в мобильном Интернете, зачем испытывать удачу? Вместо этого возьмите это рекламное предложение, уведомление о файлах cookie или объявление и разместите его на своих веб-страницах.

Остановитесь с громоздкими контактными каналами

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

В целом, ваши мобильные формы должны быть компактными — включать только то, что абсолютно необходимо.

Существует альтернативная школа мысли, которую следует учитывать.

Вы можете вообще отказаться от контактной формы, о чем я говорил, когда говорил о тенденции замены мобильных форм чат-ботами. Есть веб-сайты, которые удалили свои формы и оставили информацию, такую ​​​​как часто задаваемые вопросы, адреса электронной почты и номера телефонов, которые посетители могут использовать, если им нужно связаться с ними. Это, безусловно, облегчило бы ситуацию с точки зрения загрузки. Я просто не знаю, будет ли это идеально для пользовательского опыта.

3. Создайте одностраничный веб-сайт

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

Как сказал Адам Хайцман в статье для Search Engine Journal:

«Одностраничные сайты обычно намного легче конвертируются в мобильные, и пользователи находят их простыми в навигации».

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

Чтобы было ясно, я не предлагаю вам превратить свой веб-сайт в одностраничное приложение (SPA). Если вы хотите ускорить цифровую собственность вашего клиента с помощью сервис-воркеров, PWA — лучшее решение. (Подробнее об этом в следующем пункте.)

Вместо этого я предлагаю вам преобразовать многостраничный веб-сайт в одностраничный, если ваш клиент соответствует определенным критериям:

• Предприятия с чрезвычайно узкой и единственной направленностью.
• Веб-сайты, которым не требуется много контента, чтобы донести свою точку зрения.
• Ограниченный набор ключевых слов, по которым вам нужно ранжироваться.

Тем не менее, если вы разрабатываете веб-сайт, который соответствует этим трем критериям (или, по крайней мере, двум из трех), вы можете реально перевести свой веб-сайт на более упрощенный одностраничный дизайн.

Поскольку одностраничные веб-сайты заставляют вас делать больше с меньшими затратами, ограниченный контент и функции естественным образом делают веб-сайт легким. Даже если вы немного расширите границы, вы все равно сможете создать веб-сайт с более быстрой загрузкой для мобильных устройств, как это делает Tempus:

Что хорошо в этом одностраничном веб-сайте, так это то, что он не скупится на обширные изображения, необходимые для продажи роскошных домов. И тем не менее, его мобильный сайт загружается за 2,1 секунды.

С другой стороны, не все одностраничные веб-сайты создаются с учетом скорости. Возьмем сайт разработчика Давиде Марше:

Поскольку он перегружен анимацией, для загрузки страницы на мобильном устройстве требуется 5,4 секунды. Вы даже можете увидеть это на скриншоте, представленном Think with Google. Изображение, видимое там, на самом деле является сообщением, которое появляется, когда первая анимация загружается в фоновом режиме.

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

4. Превратите свой мобильный сайт в PWA

Согласно Google, есть три характеристики, которые определяют каждое PWA:

1. Надежный
2. Быстро
3. Вовлечение

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

Я бы также сказал, что, поскольку дизайн PWA больше напоминает нативное мобильное приложение (по крайней мере, его оболочка), это заставляет сам дизайн быть более урезанным, чем мобильный веб-сайт.

Если вы изо всех сил пытаетесь ускорить свой веб-сайт после реализации всех традиционных оптимизаций производительности, которые вы должны сделать, сейчас самое время превратить ваш мобильный веб-сайт в PWA.

Позвольте мне показать вам, почему:

Представьте, что вы планируете поездку в Чикаго с другом. Вы в баре или кафе обсуждаете поездку, а потом понимаете, что понятия не имеете, где остановиться. Итак, вы выполняете поиск «отели в центре Чикаго» на одном из своих смартфонов.

Вы еще не думаете о покупке комнаты; вы просто хотите исследовать ваши варианты. Итак, вы нажимаете на ссылки на веб-сайты для двух лучших списков, которые предоставляет вам Google.

Это прогрессивное веб-приложение для отеля Best Western River North:

Это веб-сайт Palmer House Hilton, соседнего отеля в центре Чикаго:

Начнем с того, что PWA намного лучше выглядит и легче ориентируется на вашем смартфоне, поэтому он получит здесь много очков. Есть еще вопрос скорости:

Отель River North загружается на мобильных устройствах за 2,4 секунды, тогда как его конкурент Hilton загружается за 4 секунды. (На самом деле вы можете видеть на снимке экрана Hilton, что сайт еще не полностью загружен.) Эту разницу обязательно заметят посетители.

Даже если мы не проводим параллельное сравнение между конкурирующими веб-сайтами, PWA отеля River North превосходит его бывший мобильный веб-сайт.

Агентство Brewer Digital Marketing, разработавшее для них PWA, поделилось тем, что произошло после того, как они переключились. Доход отеля увеличился на 300%, а количество ночей, забронированных с помощью PWA, увеличилось на 500%.

5. Преобразуйте свой сайт или блог в AMP

Мы должны поблагодарить Google за еще один прием быстрого дизайна для мобильного Интернета. Это называется Accelerated Mobile Pages или сокращенно AMP.

Первоначально AMP был выпущен, чтобы помочь издателям сократить свой блог или новостные страницы для более быстрой загрузки на мобильных устройствах. Однако AMP — это платформа веб-компонентов, которую вы можете использовать для разработки целых веб-сайтов или только определенных их частей (например, сообщений в блогах). После внедрения страницы почти мгновенно загружаются из поиска.

Почему AMP загружается так быстро? Есть множество причин:

С AMP вы можете загружать на свой веб-сайт только асинхронный JavaScript и встроенный CSS, а это означает, что ваш код не будет блокировать или задерживать отрисовку страницы.

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

Это намного больше, но основная идея заключается в том, что он вырезает элементы, которые имеют тенденцию тянуть веб-сайты вниз, и заставляет дизайнеров в основном полагаться на облегченный HTML для создания своих страниц.

Если вы хотите увидеть пример этого в действии, вы можете посмотреть практически любой ведущий цифровой журнал или новостной сайт. Если вы не знакомы с контентом AMP, просто найдите значок молнии, который появляется рядом с названием веб-страницы в поиске Google. Так:

Gizmodo — хороший пример контента AMP:

На самом деле, когда Gizmodo перешел на AMP еще в 2016 году, он увидел огромный рост производительности. Скорость его страниц увеличилась на 300%, и в результате количество просмотров страниц увеличилось на 50%.

Если вы действительно хотите получить максимальную отдачу от скорости AMP, Mobify предлагает соединить AMP с вашим PWA. Таким образом, вы можете молниеносно загружать свои веб-страницы для посетителей:

Отчеты Mobify о времени загрузки AMP (Источник: Mobify)

Затем поддерживайте эти быстрые загрузки с помощью PWA:

Отчеты Mobify о времени загрузки PWA (Источник: Mobify)</>

Просто будьте осторожны с AMP и PWA.

Посмотрите на приведенные выше таблицы, и вы увидите, что некоторые сайты внедрили эту тактику быстрого дизайна, и они все еще не превышают 2,5-секундный тест Google для мобильной загрузки. Просто потому, что есть обещание более быстрой загрузки веб-страниц с обоими, это не обязательно означает, что ваш сайт автоматически будет молниеносным.

Подведение итогов

Поскольку Google делает больше для поощрения мобильных веб-сайтов по сравнению с настольными компьютерами, на самом деле это не тот вопрос, который вы можете обсуждать намного дольше. Все версии вашего веб-сайта, особенно мобильные, должны быть оптимизированы для удобства пользователей.

Это означает, что дизайн, код, контент и все остальное внутри и вокруг него должны быть оптимизированы. После того, как разработчик позаботился о традиционной оптимизации производительности для ускорения веб-сайта, пришло время для дизайнера внести некоторые собственные изменения. В некоторых случаях могут помочь простые изменения, например, способ подачи шрифтов через веб-сайт. В других случаях может потребоваться рассмотрение более радикальных вопросов, таких как изменение дизайна вашего веб-сайта в качестве PWA.

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