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

Raisa Cuevas, Karen Kristine Persøe Март 2019 г. Мобайл

Эта статья впервые была опубликована на сайте Think with Google для стран Северной Европы и Бенилюкса. 

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

Первым делом нужно проанализировать изображения. Ниже — несколько технических рекомендаций для обсуждения с разработчиками, а также примеры их использования в Google и Alphabet.

1. Определите приоритетность изображений на сайте бренда

Задумайтесь, все ли изображения вам нужны. Картинки — это не просто украшение сайта, они должны доносить до посетителей конкретное сообщение. Подумайте, можно ли заменить GIF-файл анимацией, созданной программными методами? И действительно ли здесь нужно анимированное изображение?

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

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

Для мобильных устройств используется упрощенная версия анимации: сплошной цвет фона, который постепенно меняется с помощью последовательности кода. Благодаря отсутствию фреймворков JavaScript и объемных файлов сайт загружается очень быстро. Даже при моделировании 3G-подключения главная страница загружается почти мгновенно: показатель эффективности Lighthouse равен 92. Это всего на несколько миллисекунд больше, чем у лучших сайтов, входящих в верхний процентиль.

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

2. Добавьте изображения в эффективных форматах

Как понять, какой формат картинок лучший? Это зависит от того, где и как вы используете изображения, но выбор формата точно поможет уменьшить объем страниц. Для начала рекомендуем использовать WebP, подходящий для фотографий и прозрачных изображений. За счет него сжатие происходит на 30% эффективнее, чем через JPEG без потери качества. Эти форматы поддерживаются всеми браузерами:

  • JPEG: непрозрачные фотографии;
  • PNG: прозрачные фоны;
  • SVG: масштабируемые значки и фигуры.

Такой подход используется на сайте Google Fighting Piracy. Для него создавались легкие анимированные изображения в SVG. Предварительные варианты страницы содержали много GIF-файлов и видеороликов размером более 300 КБ каждый, а это больше чем в два раза превышает рекомендации.

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

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

3. Используйте сжатие и меняйте размер изображений

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

Множество действий можно автоматизировать, чтобы сэкономить время. Например, с помощью скрипта можно сжимать сотни или тысячи изображений и менять их размер. 

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

С помощью этой технологии компания BMW смогла сделать высокопроизводительный сайт, ориентированный на мобильные устройства, не жертвуя изображениями и видео. Благодаря тегам и другим функциям улучшения скорости, AMP-сайт загружается в 4 раза быстрее обычного. В результате количество мобильных пользователей выросло в 1,5 раза. Также на сайте применяются современные веб-приложения (PWA), чтобы обеспечить возможности, схожие с функциональностью приложений.

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

4. Выберите методы загрузки

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

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

На сайте немецкого магазина электронной торговли bücher.de изображения загружаются, только если они находятся в той области, которая видна пользователю. Такой контент получает приоритет и обрабатывается сразу. Благодаря этому скорость загрузки сайта возросла на 33% и теперь составляет 3,5 секунды.

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

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

Дальнейшие шаги: включите мобильную скорость в КПЭ

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

Вы можете проанализировать скорость своего мобильного сайта с помощью обновленного инструмента Test My Site.

Глазами пользователей: с чего начать улучшение мобильного интерфейса