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

Как создавать быстрые и легкие приложения с помощью Save-Data

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

Зачем нужны легкие страницы

Статистика Web Light

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

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

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

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

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

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

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

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

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

Обнаружение настройки `Save-Data`

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

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

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

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

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

Заголовок Save-Data в Инструментах разработчика в Chrome и расширение "Экономия трафика". — Включение расширения "Экономия трафика" в Chrome на компьютере.

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

Советы и рекомендации по реализации

Если вы используете Save-Data, добавьте в интерфейс элементы, которые поддерживают эту функцию и позволяют пользователям легко переключаться между режимами. Пример:
- Сообщите пользователям, что Save-Data поддерживается, и порекомендуйте им использовать его.
- Пользователи должны иметь возможность легко находить и выбирать нужный режим с помощью понятных подсказок и интуитивно понятных кнопок включения/выключения или флажков.
- Если выбран режим экономии трафика, сообщите об этом и предоставьте простой и очевидный способ отключить его и вернуться к полной версии.
Помните, что легкие приложения не являются менее функциональными. Они не упускают важные функции или данные, а просто лучше понимают связанные с этим затраты и удобство для пользователей. Например:
- Приложение для просмотра фотографий может показывать предварительные версии изображений в более низком разрешении или использовать менее сложный механизм карусели.
- Поисковое приложение может возвращать меньше результатов за раз, ограничивать количество результатов с большим объемом медиаконтента или уменьшать количество зависимостей, необходимых для отображения страницы.
- На новостном сайте может показываться меньше статей, могут быть скрыты менее популярные категории или уменьшены изображения в предпросмотре.
Добавьте логику сервера, которая будет проверять заголовок запроса Save-Data и при необходимости предоставлять альтернативную, более легкую версию страницы.Например, можно уменьшить количество необходимых ресурсов и зависимостей, применить более агрессивное сжатие ресурсов и т. д.
- Если вы отправляете альтернативный ответ на основе заголовка Save-Data, не забудьте добавить его в список Vary (Vary: Save-Data), чтобы сообщить вышестоящим кешам, что они должны кешировать и отправлять эту версию, только если присутствует заголовок запроса Save-Data. Подробную информацию вы найдете в рекомендациях по взаимодействию с кешем.
Если вы используете сервис-воркер, ваше приложение может определить, включена ли экономия трафика, проверив наличие заголовка запроса Save-Data или значение свойства navigator.connection.saveData. Если она включена, попробуйте переписать запрос, чтобы получить меньше байтов, или используйте уже полученный ответ.
Рекомендуем дополнить Save-Data другими сигналами, например информацией о типе подключения и технологии пользователя (см. NetInfo API). Например, вы можете показывать облегченную версию сайта всем пользователям, у которых скорость подключения не превышает 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). Такие экраны с высоким разрешением встречаются не только на устройствах премиум-класса, но и на многих других. В случаях, когда предпочтительнее более легкое приложение, может быть целесообразно отправлять на эти экраны изображения с более низким разрешением (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 и их пропуска при наличии Save-Data. — Сравнение загрузки некритичных изображений при отсутствии заголовка Save-Data и их пропуска при его наличии.

Конечно, удаление изображений – не единственный способ. Вы также можете использовать 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.