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

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

Разработчики оптимизируют производительность front-end с помощью:

  • Быстрого веб-хостинга.
  • CDN.
  • Кеширования.
  • Оптимизации изображений;

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

Содержание

Что значит «медленный» сайт?

Существует целый ряд инструментов для анализа и оптимизации сайтов. Одним из самых полезных инструментов является Lighthouse. Но он предназначен для веб-разработчиков.

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

Test My Site –инструмент для тестирования скорости загрузки страниц.

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

Пример результатов тестирования скорости загрузки страниц с помощью Test My Site.

Преимущество этого сервиса заключается в том, что информация предоставляется в простом и понятном формате. Например, мой сайт работает «медленно» даже если для его посещения пользователь использует 4G. Google считает, что даже 2,9 секунды – это слишком долго.

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

Think with Google рекомендует, как повысить скорость загрузки страницы.

Считает ли Google мой мобильный сайт достаточно быстрым?

Чтобы узнать это, прокрутите страницу Test My Site вниз и введите необходимые показатели в калькулятор:

Оценка влияния скорости загрузки на доход.

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

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

1. Храните шрифты в CDN

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

Пример Downtime Monkey

Компания Downtime Monkey улучшила скорость загрузки веб-страниц. на 58% за счет оптимизации обслуживании шрифтов, используемых на сайте. Для их хранения они использовали Bootstrap CDN. В результате это уменьшило скорость загрузки страниц на 200-550 миллисекунд.

Свой шрифт «Cabin» они разместили на Google CDN. Но оказалось, что ссылка, которую они вставили в head сайта, замедляла рендеринг страницы. Поэтому пришлось загружать шрифт асинхронно с помощью Web Font Loader. Это позволило уменьшить скорость загрузки на 150 — 300 миллисекунд.

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

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

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

Самым быстрым шрифтом оказался Open Sans.

Open Sans загружался быстрее всего. Вот результаты его сравнения с Arial –шрифтом, который не извлекается из внешнего источника.

Сравнение скорости загрузки Arial и Open Sans.

Arial опередил Open Sans почти на 200 миллисекунд. Но может лучше загрузить и разместить Google- шрифт на хостинге. Брайан тоже об этом подумал и провел тест.

Сравнение Open Sans, размещенного на локальном хостинге, и на Google CDN.

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

Каков вывод? Есть несколько вариантов улучшения скорости сайта с помощью оптимизации шрифтов:

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

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

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

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

Не используйте рекламу на мобильных страницах

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

Данные Statista об использовании технологии блокировки рекламы в США

Вместо этого используйте другие способы монетизации сайта:

  • Ремаркетинг

Пусть Tracking Pixel отслеживает посетителей в сети, а затем размещает объявления на чужом сайте.

  • PPC (от английского Pay per click – плати за клик)

Можно заработать хорошие деньги, если использовать модель PPC.

  • Реклама в социальных сетях

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

Избавьтесь от всплывающих окон

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

В ThemeIsle протестировали влияние каждого из этих плагинов на время загрузки:

Базовое время загрузки (в секундах) Время загрузки после установки (в секундах)

Разница в %

Плагины для безопасности

0.93 с 1.13 с

21.50%

Плагины для резервного копирования

0.93 с 0.94 с 1.07%

Плагины для создания форм

0.93 с 0.96 с

3.22%

Плагины SEO

0.93 с 1.03 с

10.75%

Плагины для электронной торговли 0.93 с 1.22 с

31.10%

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

Не пользуйтесь громоздкими веб-формами

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

Многие сайты вообще отказались от использования контактных форм. Со стоящими перед ними задачами легко справляется раздел FAQ и раздел с контактными данными.

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

Если после реализации перечисленных выше советов загрузка сайта занимает более 2,5 секунд, рассмотрите возможность перехода на одностраничную архитектуру. Но одностраничные сайта также имеют свои недостатки:

Ограничения одностраничных сайтов.

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

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

С помощью одностраничной архитектуры можно создать такой быстрый сайт для мобильных устройств, как Tempus:

Согласно Test My Site, сайт Tempus загружается за 2,1 секунды.

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

Согласно Test My Site, сайт Давиде Марке загружается за 5,4 секунды.

Поскольку страница перенасыщена анимацией, ее загрузка на мобильном устройстве занимает 5,4 секунды.

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

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

Согласно Google, существует три характеристики, которые определяют PWA      (прогрессивное веб-приложение):

  1. Надежность.
  2. Скорость.
  3. Вовлечение.

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

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

Если вы ускорить свой сайт, самое время превратить его в PWA. Посмотрите на прогрессивное веб-приложение отеля Best Western River North:

Домашняя страница PWA отеля Best Western River North.

А теперь посмотрите на сайт отеля Palmer House Hilton, расположенного в центре Чикаго:

Домашняя страница сайта отеля Palmer House Hilton.

PWA выглядит намного лучше. К тому же в нем легче ориентироваться на смартфоне. Также принимаем во внимание скорость.

Test My Site сравнивает скорость загрузки сайтов двух отелей.

Сайт отеля River North загружается на мобильном телефоне за 2,4 секунды, а сайт отеля Hilton – за 4 секунды.

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

5. Применяйте AMP

Благодаря Google существует еще одна технология, которая повышает скорость загрузки сайта. AMP (Accelerated Mobile Pages) – ускоренные мобильные страницы.

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

Почему AMP так быстро загружаются?  С помощью AMP можно загружать на сайт только асинхронный JavaScript и инлайновый CSS. Поэтому код не будет блокировать или задерживать рендеринг веб-страницы.

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

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

Страницы с узнаваемым символом молнии были созданы с помощью Google AMP.

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

AMP- страница Gizmodo мгновенно загружается из поисковой выдачи.

После перехода на AMP скорость сайта Gizmodo выросла на 300%. В результате количество показов страниц увеличились на 50%.

Доля сайтов на AMP

Время загрузки (в секундах)

10%

0.3

20%

0.5

50%

1.1

60%

1.4

80%

2.2

90%

3.4

95%

5.2

Отчет Mobify о времени загрузки AMP.

Чтобы ваш сайт стал еще быстрее, используйте AMP совместно с PWA. Вот показатели скорости загрузки таких площадок:

Количество сайтов

Время загрузки (в секундах)

10%

0.6

20%

0.8

50%

1.4
60%

1.8

80%

3.0

90%

4.5

95%

6.2

Отчет Mobify о времени загрузки PWA.

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

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

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

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

Данная публикация представляет собой перевод статьи «What Web Designers Can Do To Speed Up Mobile Websites» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню