ilya grigorik은 Client Hint라 하여 웹사이트에서 코드를 구현시에 그에 더 맞게 구현할 수 있도록 헤더 값 등을 통하여 제공해주어야 한다 제안하였다(Client Hint Draft)
그 중 일부 Save-Data(데이터 절약모드 상태) 클라이언트(헤더 값) 힌트를 이용하면 헤더를 통해 선택적으로 컨텐츠를 제공 할 수 있다.
Save-Data 기능 ON
- 직접 Header 값에서 Save-Data : On 이라 제공
- 아래 기기들에서 여러가지 모드 설정을 하면 Save-Data 헤더값에 On을 제공한다
1. Chrome49+(PC) 브라우저 데이타세이버(Data Saver) 플러그인 사용
- Chrome에서 데이터세이버 설치
- 설치가 되면 우측 상단에 데이타 세이버가 설치 된 것을 알 수 있다.
2. 안드로이드 Chrome에서 데이터 절약모드 사용
- 태블릿 혹은 스마트폰에서 Chrome 열기
- 오른쪽 상단 설정 클릭
- 고급에서 데이터 절약모드 선택
3. Opera 35+ 에서 Opera Turbo Mode 사용 시
4. Yandex 16.2+ 에서 Turbo Mode 사용 시
Data-Saver ??
데이터 절약 모드를 사용하면 웹 리소스가 구글 서버를 거쳐 압축이 이루어져서 데이터를 절약할 수 있다. 현재 안드로이드, 크롬에서만 사용 가능하며, apple에서도 추가 할 예정
Data-Saver ??
데이터 절약 모드를 사용하면 웹 리소스가 구글 서버를 거쳐 압축이 이루어져서 데이터를 절약할 수 있다. 현재 안드로이드, 크롬에서만 사용 가능하며, apple에서도 추가 할 예정
 |
| 출처 : Data-Saver의 동작과정 (https://developer.chrome.com/multidevice/data-compression) |
- 이를 이용하여 데이터 절약을 원하는 사람들에게 adaptive하게 리소스를 전달 할 수 있음
Data-Saver 특징
- 암호화 되지 않은 상태에서 proxy 동작 후 https 대상에 https로 전달함
- 프록시를 통하기 때문에 ip는 X-Forwarded-For 헤더값을 통함
- 사이트 소유자의 콘텐츠 옵트아웃(Opt-out : 당사자가 자신의 데이터를 수집을 허용하지 않는다고 명시)에 대해서는 Cache-Control: no-transform 지시자를 존중
데이터를 변형하지 않고 직접 전달
"다시 본론으로 돌아와서 Data-Saver 값이 존재 할 경우 컨텐츠에 대해 적응적으로 압축된 형태의 이미지 혹은 다른 리소스들을 전달해주면 어떨까?"
Save-Data 구현
- Save-Data 구분(PHP)
<?php
header('Save-Data: on');
$saveData = false;
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
$saveData = true;
}
?>
- Save-Data 구분(JS)
<script>
if ("connection" in navigator) {
if (navigator.connection.saveData === true) {
}
}
</script>
- HTML에서 Save-Data 모드 상태 구분
<html class="<?=$saveData ? 'save-data' : ''?>" lang="ko-kr"> <head> <meta charset="utf-8">- 이미지를 Save-Data 상태에 따라 제공<?phpif ($saveData) { ?><img src="aa-100px.jpg" alt="100픽셀 이미지 퀄리티 조정 ON"><?php } else { ?><img src="aa-300px.jpg" alt="300px 이미지 퀄리티 조정 OFF"><?php }Save-Data 구현 결과
- save-data 미 사용시 원본 데이터
- save-data 사용시 변형된 퀄리티와 Header값 확인
결론
- Save-Data의 클라이언트 힌트를 이용하여 적응적으로 이미지를 적용 할 수 있다.
- 웹 서버 파일 룰을 이용하여 이미지의 확장자와 header 값을 비교하여 전체적으로 이미지를 적응적으로 보여준다면 훨씬 리소스를 줄여 줄 수 있을 것이다.
- 여러 브라우저 밴더사에서 구현에 움직임이 있어 권고안으로 발전하는 것을 기대해 볼 수 있지 않을까 조심스럽게 생각해봅니다.
댓글 없음:
댓글 쓰기