Создание быстрых и легких приложений с помощью данных сохранения

Dave Gash

Ilya Grigorik

Jeremy Wagner

Заголовок запроса Save-Data client hint, доступный в браузерах Chrome, Opera и Yandex, позволяет разработчикам создавать более легкие и быстрые приложения для пользователей, которые включили режим экономии данных в своем браузере.

Необходимость в легких страницах

Все согласны с тем, что более быстрые и легкие веб-страницы обеспечивают более приятный пользовательский опыт, позволяют лучше понимать и запоминать контент, а также приводят к увеличению конверсии и дохода. Исследования Google показали, что "...оптимизированные страницы загружаются в четыре раза быстрее, чем исходная страница, и используют на 80% меньше байтов. Благодаря такой высокой скорости загрузки мы также наблюдали 50%-ное увеличение трафика на эти страницы".

И хотя количество подключений 2G , наконец, сокращается , в 2015 году 2G по- прежнему оставалась доминирующей сетевой технологией. Распространение и доступность сетей 3G и 4G быстро растут, но связанные с ними затраты на владение и ограничения сети по-прежнему остаются существенным фактором для сотен миллионов пользователей.

Это веские аргументы в пользу оптимизации страницы.

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

Заголовок запроса Save-Data

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

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

Поддержка браузеров

• В Chrome 49+ Save-Data рекламируется , когда пользователь включает опцию «Экономия данных» на мобильных устройствах или устанавливает расширение «Экономия данных» в настольных браузерах.
• В Opera 35+ Save-Data активируется при включении режима « Opera Turbo » на компьютере или опции « Экономия данных » в браузерах Android.
• В Яндекс 16.2+ рекламируется Save-Data при включении турбо-режима в настольных и мобильных браузерах .

Определение параметра Save-Data

Чтобы определить, когда следует предоставлять пользователям «облегченный» режим работы, ваше приложение может проверять заголовок запроса Save-Data client hint. Этот заголовок запроса указывает на предпочтение клиента в отношении снижения потребления данных из-за высоких затрат на передачу, низкой скорости соединения или других причин.

Когда пользователь включает режим сохранения данных в своем браузере, браузер добавляет заголовок запроса Save-Data ко всем исходящим запросам (как HTTP, так и HTTPS). На момент написания этой статьи браузер указывает только один токен * on в заголовке ( Save-Data: on ), но в будущем это может быть расширено для указания других пользовательских предпочтений.

Кроме того, в JavaScript можно определить, включена ли Save-Data :

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

Проверка наличия объекта connection внутри объекта navigator имеет решающее значение, поскольку он представляет собой API сетевой информации, который реализован только в браузерах Chrome, Chrome для Android и Samsung Internet. После этого вам нужно лишь проверить, равно ли значение navigator.connection.saveData значению true , и вы можете реализовать любые операции сохранения данных в этом условии.

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

Советы по внедрению и лучшие практики

1. При использовании Save-Data предоставьте пользователям элементы пользовательского интерфейса, поддерживающие её и позволяющие легко переключаться между различными режимами работы. Например:
   • Уведомите пользователей о поддержке функции Save-Data и порекомендуйте им её использовать.
   • Предоставьте пользователям возможность идентифицировать и выбирать режим с помощью соответствующих подсказок и интуитивно понятных кнопок включения/выключения или флажков.
   • При выборе режима экономии данных следует объявить об этом и предоставить простой и понятный способ его отключения, позволяющий при желании вернуться к полноценному режиму работы.
2. Помните, что облегченные приложения — это не менее качественные приложения. Они не упускают важные функции или данные, они просто более внимательны к затратам и удобству использования. Например:
   • Приложение для фотогалереи может отображать предварительные просмотры с более низким разрешением или использовать менее ресурсоемкий механизм карусели.
   • Поисковое приложение может выдавать меньше результатов за раз, ограничивать количество результатов, содержащих много мультимедийного контента, или уменьшать количество зависимостей, необходимых для отображения страницы.
   • На новостном сайте может быть меньше статей, опущены менее популярные категории или представлены краткие анонсы медиаматериалов.
3. Предусмотрите серверную логику для проверки заголовка запроса Save-Data и рассмотрите возможность предоставления альтернативного, более легковесного ответа в виде страницы, если он включен — например, уменьшите количество необходимых ресурсов и зависимостей, примените более агрессивное сжатие ресурсов и т. д.
   • Если вы предоставляете альтернативный ответ на основе заголовка Save-Data , не забудьте добавить его в список Vary — Vary: Save-Data — чтобы сообщить вышестоящим кэшам, что они должны кэшировать и предоставлять эту версию только в том случае, если присутствует заголовок запроса Save-Data . Для получения более подробной информации см. рекомендации по взаимодействию с кэшами .
4. Если вы используете сервис-воркер, ваше приложение может определить, включена ли опция сохранения данных, проверив наличие заголовка запроса Save-Data или значение свойства navigator.connection.saveData . Если опция включена, подумайте, можно ли переписать запрос, чтобы получить меньше байтов, или использовать уже полученный ответ.
5. Рассмотрите возможность дополнения функции Save-Data другими сигналами, такими как информация о типе и технологии подключения пользователя (см. API NetInfo ). Например, вы можете захотеть предоставлять облегченный режим работы любому пользователю, использующему соединение 2G, даже если Save-Data не включена. И наоборот, тот факт, что пользователь использует «быстрое» соединение 4G, не означает, что он не заинтересован в экономии данных — например, в роуминге. Кроме того, вы можете дополнить наличие функции Save-Data подсказкой клиента Device-Memory , чтобы еще лучше адаптироваться к пользователям устройств с ограниченным объемом памяти. Память устройства пользователя также указывается в подсказке клиента navigator.deviceMemory .

Рецепты

Возможности Save-Data ограничены только вашими собственными идеями. Чтобы дать вам представление о том, что возможно, рассмотрим несколько вариантов использования. Возможно, по мере чтения вы придумаете и другие варианты, поэтому смело экспериментируйте и смотрите, что получится!

Проверка наличия Save-Data в серверном коде

Хотя состояние Save-Data можно отслеживать в JavaScript с помощью свойства navigator.connection.saveData , иногда предпочтительнее отслеживать его на стороне сервера. В некоторых случаях выполнение JavaScript может завершиться неудачей. Кроме того, отслеживание на стороне сервера — единственный способ изменить разметку до её отправки клиенту, что имеет место в некоторых из наиболее полезных сценариев использования функции Save-Data .

Конкретный синтаксис для обнаружения заголовка Save-Data в серверном коде зависит от используемого языка, но основная идея должна быть одинаковой для любого бэкэнда приложения. Например, в PHP заголовки запроса хранятся в суперглобальном массиве $_SERVER по индексам, начинающимся с HTTP_ . Это означает, что вы можете обнаружить заголовок Save-Data , проверив наличие и значение переменной $_SERVER["HTTP_SAVE_DATA"] следующим образом:

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

Если вы разместите эту проверку перед отправкой какой-либо разметки клиенту, переменная $saveData будет содержать состояние Save-Data и будет доступна для использования в любом месте страницы. Рассмотрев этот механизм, давайте посмотрим несколько примеров того, как мы можем использовать его для ограничения объема данных, отправляемых пользователю.

Предоставлять изображения низкого разрешения для экранов высокого разрешения

Распространенный сценарий использования изображений в интернете — это показ изображений парами: одно изображение для «стандартных» экранов (1x), и другое, вдвое большее (2x), для экранов высокого разрешения (например, Retina Display ). Этот класс экранов высокого разрешения не обязательно ограничивается высокопроизводительными устройствами и становится все более распространенным. В случаях, когда предпочтительнее более легковесное приложение, может быть целесообразно отправлять на такие экраны изображения с меньшим разрешением (1x), а не с большим (2x) размером. Для этого, если присутствует заголовок Save-Data , мы просто изменяем разметку, отправляемую клиенту:

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

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

Эту концепцию можно также распространить на свойства CSS background-image просто добавив класс к элементу <html> :

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

Здесь вы можете использовать класс save-data для элемента <html> в вашем CSS, чтобы изменить способ отображения изображений. Вы можете отправлять фоновые изображения низкого разрешения на экраны высокого разрешения, как показано в приведенном выше примере HTML, или вообще отказаться от использования определенных ресурсов.

Удалите несущественные изображения.

Некоторые изображения в интернете просто не являются необходимыми. Хотя такие изображения могут служить приятным дополнением к контенту, они могут быть нежелательны для тех, кто пытается выжать максимум из лимитированного трафика. В, пожалуй, самом простом примере использования функции Save-Data мы можем использовать код обнаружения на PHP, приведенный ранее, и полностью исключить несущественную разметку изображений:

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

Этот метод, безусловно, может оказать существенное влияние, как вы можете видеть на рисунке ниже:

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

Исключить несущественные веб-шрифты

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

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

Например, предположим, вы использовали шрифт Fira Sans из Google Fonts на своем сайте. Fira Sans — отличный шрифт для основного текста, но, возможно, он не так важен для пользователей, пытающихся сохранить данные. Добавив класс ` save-data к элементу <html> при наличии заголовка Save-Data , мы можем написать стили, которые сначала будут использовать этот необязательный шрифт, а затем отключатся от него при наличии заголовка Save-Data :

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

При таком подходе вы можете оставить фрагмент кода <link> из Google Fonts на месте, поскольку браузер спекулятивно загружает ресурсы CSS (включая веб-шрифты), сначала применяя стили к DOM, а затем проверяя, вызывают ли какие-либо HTML-элементы какие-либо ресурсы из таблицы стилей. Если у пользователя включена опция Save-Data , шрифт Fira Sans никогда не загрузится, потому что стилизованный DOM его не вызывает. Вместо него будет использоваться шрифт Arial. Это не так удобно, как Fira Sans, но может быть предпочтительнее для пользователей, пытающихся экономить трафик.

Краткое содержание

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

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

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

Более подробную информацию о Save-Data и отличные практические примеры см. в разделе «Помогите пользователям Save Data .