이 페이지는 Cloud Translation API를 통해 번역되었습니다.

데이터 절약을 통한 빠르고 간단한 애플리케이션 제공

Dave Gash

Ilya Grigorik

Jeremy Wagner

Save-Data 클라이언트 힌트 요청 헤더 Chrome, Opera 및 Yandex 브라우저에서 사용할 수 있는 덕분에 개발자는 브라우저에서 데이터 절약 모드를 선택한 사용자에게 더 빠른 애플리케이션을 제공할 수 있습니다.

간단한 페이지의 필요성

Weblight 통계

빠르고 가벼운 웹페이지일수록 사용자의 만족도가 높다는 데에는 모두가 동의합니다. 콘텐츠의 이해와 보유가 개선되었으며 전환수 및 수익 증가 Google은 연구에 따르면 최적화된 페이지는 원본 페이지보다 4배 빠르게 로드되며 80% 바이트 수가 더 적을 수 있습니다. 이러한 페이지는 로드 속도가 훨씬 빨라서 '이 페이지로 유입되는 트래픽'을 얻을 수 있습니다.

그리고 2G 연결의 수는 마지막으로 거부, 여전히 2G가 지배적인 네트워크였음 기술 2015년에 이르렀습니다. 3G 및 4G 네트워크의 보급과 가용성이 증가하고 있습니다. 관련 소유 비용과 네트워크 제약이 여전히 수억 명의 사용자에게 중요한 요인입니다.

이는 페이지 최적화에 대한 강력한 주장입니다.

직접 개발자 없이도 사이트 속도를 개선할 수 있는 다른 방법이 있습니다 프록시 브라우저 및 트랜스코딩 서비스와 같은 개입이 필요하기 때문입니다. 비록 서비스에 대한 의존도가 높지만, 몇 가지 단점이 있습니다 (때로는 허용되지 않는) 이미지 및 텍스트 압축, 처리 불능 보안 (HTTPS) 페이지, 검색 결과를 통해 방문한 페이지만 최적화 자세히 알아보세요. 이러한 서비스의 인기도 그 자체로 개발자들은 빠르고 가벼운 모바일 기기에 대한 높은 사용자 수요를 관리할 수 있습니다. 하지만 목표를 달성하는 것은 복잡하고 때로는 어려운 길입니다.

`Save-Data` 요청 헤더

매우 간단한 한 가지 방법은 Save-Data 요청 헤더. 이 헤더를 식별하여 웹 페이지는 비용 및 성능이 제한된 사용자에게 최적화된 사용자 경험을 제공합니다. 있습니다.

지원되는 브라우저 (아래)에서는 사용자가 최적화 집합을 적용할 수 있는 권한을 브라우저에 부여하여 많은 양의 데이터가 필요합니다. 이 기능이 노출되었을 때 브라우저가 더 낮은 해상도의 이미지를 요청하거나 서비스를 통해 요청을 라우팅하거나, 다른 클라우드 리소스에 적용되는 이미지 및 텍스트 리소스 압축과 같은 콘텐츠별 최적화가 포함됩니다.

브라우저 지원

Chrome 49 이상에서는 Save-Data 사용자가 '데이터 절약 모드'를 사용 설정합니다. 데이터 절약 모드 확장 프로그램을 사용할 수 있습니다.
Opera 35+에서는 사용자가 'OperaSave-Data Turbo" 모드, 또는 '데이터 절약' 옵션 Android 브라우저에서도 사용할 수 있습니다
Yandex 16.2+는 Turbo가 표시될 때 Save-Data을 광고함 모드는 데스크톱 또는 모바일에서 사용 설정 브라우저를 참조하세요.

`Save-Data` 설정 감지 중

'조명'을 전달할 시기를 판단하기 위해 제공할 수 있다면 애플리케이션은 Save-Data 클라이언트 힌트 요청 헤더를 확인할 수 있습니다. 이 요청 헤더는 높은 전송 비용, 느린 연결 속도 또는 기타 이유로 인해 발생할 수 있습니다.

사용자가 브라우저에서 데이터 절약 모드를 사용 설정하면 브라우저에서는 모든 발신 요청 (HTTP 및 HTTPS)에 대한 Save-Data 요청 헤더 이 문서의 작성 시점을 기준으로, 브라우저는 헤더에 하나의 *on- 토큰만 알립니다. (Save-Data: on)를 포함하지만 향후 다른 사용자를 나타내기 위해 확장될 수 있습니다. 선호합니다.

또한 JavaScript에서 Save-Data가 사용 설정되어 있는지 확인할 수 있습니다.

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

navigator 내에 connection 객체가 있는지 확인 객체가 Chrome, Android용 Chrome, 삼성 인터넷 브라우저에 구현됩니다. 보낸 사람 navigator.connection.saveData가 다음과 같은지 확인하면 됩니다. true이며 이 조건에서 모든 데이터 저장 작업을 구현할 수 있습니다.

이
Chrome 개발자 도구에 표시된 데이터 저장 헤더가
데이터 절약 모드 확장 프로그램. — Chrome 데스크톱에서 데이터 절약 모드 확장 프로그램을 사용 설정합니다.

애플리케이션에서 서비스를 사용하는 경우 작업자와 함께라면 요청 헤더를 검사하고 관련 로직을 적용하여 환경을 최적화하세요. 또는 서버는 광고 서버에서 광고된 환경설정을 찾을 수 있습니다. Save-Data 요청 헤더를 사용하여 대체 응답을 반환함 - 다른 이미지 및 동영상 등이 포함될 수 있습니다.

구현 도움말 및 권장사항

Save-Data를 사용할 때는 이를 지원하고 사용자가 이를 허용하는 UI 기기를 제공합니다. 환경을 쉽게 전환할 수 있습니다 예를 들면 다음과 같습니다.
- 사용자에게 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 데이터 저장에 관심이 없다는 의미가 아니라 데이터를 전송할 수 있습니다. 또한 애플리케이션의 상태를 Device-Memory 클라이언트 힌트를 사용하여 Save-Data를 사용자에게 추가로 적용 할 수 있습니다. 사용자 기기 메모리는 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 상태가 포함되며 사용할 수 있습니다. 이 메커니즘을 설명하면서 인코더-디코더 아키텍처를 사용자에게 보내는 데이터의 양을 제한하는 데 어떻게 사용할 수 있는지.

고해상도 화면에 저해상도 이미지 제공

웹 이미지의 일반적인 사용 사례에는 이미지를 두 세트로 제공하는 것이 포함됩니다. 'standard' 이미지 1개 화면 (1x)과 2배 큰 이미지 고해상도 화면(예: 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
}

이 사용 사례는 Cloud Functions를 포함하는 데 필요한 노력이 얼마나 적은지 보여주는 완벽한 예입니다. 특정 사용자에게 더 적은 데이터를 보내달라고 요청하는 사용자가 있습니다 원하지 않는 경우 백엔드에서 마크업을 수정하면 URL 재작성 모듈을 사용하여 Apache의 mod_rewrite 거기 목표 달성에 도움이 되는 이를 상대적으로 적은 구성으로 되어 있습니다

다음을 통해 이 개념을 CSS background-image 속성으로 확장할 수도 있습니다. <html> 요소에 클래스를 추가하기만 하면 됩니다.

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

이제 앱의 <html> 요소에서 save-data 클래스를 타겟팅할 수 있습니다. CSS는 이미지 게재 방식을 변경합니다. 저해상도 배경을 보낼 수 있습니다. 이미지를 고해상도 화면에 배치하거나 특정 리소스를 모두 사용할 수 있습니다

필수가 아닌 이미지 생략

웹의 일부 이미지 콘텐츠는 필수적이지 않은 콘텐츠일 뿐입니다. 이러한 이미지는 그렇다고 해서 종량제 데이터 요금제에서 할 수 있는 모든 것을 압착할 수 있습니다. 아마도 가장 간단한 방법은 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 Google의 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;
}

이 방법을 사용하면 Google Fonts의 <link> 스니펫을 브라우저가 CSS 리소스 (웹 URL 포함)를 추측하여 로드하기 때문에 먼저 DOM에 스타일을 적용한 다음 HTML이 있는지 확인하여 요소가 스타일 시트의 리소스를 호출합니다. 만약 Save-Data가 켜지면 스타일이 지정된 DOM이 전혀 로드되지 않으므로 Fira Sans는 로드되지 않습니다. 호출합니다. 그 대신, Arial이 그 뒤를 이었습니다. 피라 샌스만큼 좋지는 않지만 데이터 요금제를 연장하려는 사용자가 선호할 수 있습니다.

요약

Save-Data 헤더에는 큰 뉘앙스가 없습니다. 켜져 있거나 꺼져 있고 애플리케이션의 현재 상태를 기반으로 적절한 환경을 제공하는 그 이유를 불문하고 해당 설정이 그대로 유지됩니다.

예를 들어 일부 사용자는 데이터 절약 모드가 있다고 의심되면 데이터 절약 모드를 허용하지 않을 수 있습니다. 연결 상태가 좋지 않아도 앱 콘텐츠나 기능이 손실됨 있습니다. 반대로 일부 사용자는 가능한 한 작고 단순하게 페이지를 작성해야 합니다. 앱에서 사용자가 제한 없는 전체 서비스를 원한다고 가정하는 것이 가장 좋습니다. 명시적인 사용자를 통해 달리 명확히 표시할 때까지 있습니다.

사이트 소유자와 웹 개발자로서 Google의 콘텐츠를 통해 데이터 및 비용이 제한된 사용자의 사용자 환경을 개선하였습니다.

Save-Data에 대한 자세한 내용과 훌륭한 실제 사례는 사용자 Save Data.