Эта страница переведена с помощью 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 на рабочем столе 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 .