Эта страница переведена с помощью Cloud Translation API.

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

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

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

Статистика веблайта

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

И хотя количество соединений 2G , наконец, сокращается , 2G по-прежнему оставался доминирующей сетевой технологией в 2015 году. Проникновение и доступность сетей 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 . Этот заголовок запроса указывает на предпочтение клиента сократить использование данных из-за высоких затрат на передачу, низкой скорости соединения или по другим причинам.

Когда пользователь включает режим сохранения данных в своем браузере, браузер добавляет заголовок запроса 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 имеет жизненно важное значение, поскольку он представляет API сетевой информации, который реализован только в интернет-браузерах Chrome, Chrome для Android и Samsung. После этого вам нужно только проверить, равен ли navigator.connection.saveData true , и вы можете реализовать любые операции сохранения данных в этом условии.

Заголовок Save-Data отображается в инстру��ентах разработчика Chrome, изображенном вместе с расширением Data Saver. — Включение расширения Data Saver на рабочем столе 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 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 . Есть примеры того, как добиться этого с относительно небольшой конфигурацией.

Вы также можете распространить эту концепцию на свойства background-image CSS, просто добавив класс к элементу <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 .