Google for Developers Korea Blog: Google AMP Cache, AMP Lite, 그리고 속도에 대한 요구

Google for Developers Korea Blog

한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.

Google AMP Cache, AMP Lite, 그리고 속도에 대한 요구

2017년 1월 30일 월요일

<블로그 원문은 여기에서 확인하실 수 있으며, 블로그 번역 리뷰는 문현경(Web Technologies GDE)님이 참여해 주셨습니다.>Google AMP Cache
Google AMP Cache를 통한 이미지 최적화총 바이트 중 64%PageSpeed 모듈Chrome 데이터 압축PageSpeed
다음은 저희가 구현한 몇 가지 최적화에 대한 설명입니다.
1) 표시되지 않거나 보기 어려운 데이터 제거 썸네일 이미지 및 위치정보 메타데이터와 같이 사용자에게 표시되지 않는 이미지 데이터를 삭제합니다. JPEG 이미지의 경우 화질과 컬러 샘플이 필요 이상으로 높을 경우 이를 낮춥니다. 정확히 말하자면 JPEG 화질을 85로 낮추고 컬러 샘플은 4:2:0(즉, 4픽셀당 컬러 샘플 1개)으로 낮춥니다. JPEG를 이보다 높은 화질이나 더 많은 컬러 샘플로 압축하는 경우 더 많은 바이트가 사용되지만, 시각적인 차이는 인지하기 힘듭니다.
이렇게 축소된 이미지 데이터는 철저하게 압축됩니다. 이러한 최적화를 통해 바이트 수가 40% 이상 감소하지만 사용자는 육안으로 이런 차이를 인지할 수 없다는 점이 확인되었습니다.
2) WebP 형식으로 이미지 변환
이미지 형식 중에는 상대적으로 모바일에 더 친화적인 형식이 있습니다. 따라서 저희는 지원되는 브라우저에 알맞게 JPEG를 WebP로 변환합니다. 이런 변환을 통해 화질 저하 없이 바이트를 25% 이상 더 줄일 수 있습니다.
3) srcset 추가
"srcset"이 포함되지 않은 경우 이를 추가합니다. 이는 "src" 속성은 있지만 "srcset" 속성은 없는 "amp-img" 태그에 적용됩니다. 이 작업에는 "amp-img" 태그를 확장하는 작업은 물론, 이미지를 여러 크기로 조정하는 작업도 포함됩니다. 이 작업을 수행하면 화면 크기가 작은 기기에서 바이트 수가 더 줄어듭니다.
4) 상황에 따라 더 낮은 화질의 이미지 사용
사용자가 원하거나 네트워크 속도가 매우 느린 경우 JPEG 이미지 화질을 낮춥니다(아래에서 설명하는 AMP Lite의 일부로서 수행). 예를 들어, Chrome 사용자가 데이터 세이버를 설정한 경우 JPEG 이미지 화질을 50으로 낮춥니다. 이러한 변환을 통해 JPEG 이미지의 바이트를 다시 40% 이상 줄일 수 있습니다.
다음 예에서는 최적화를 수행하기 전(왼쪽)과 후(오른쪽)의 이미지를 보여 줍니다. 원래는 이미지 크기가 241,260바이트였지만 1번, 2번, 4번 항목의 최적화를 적용한 후 이미지 크기가 25,760바이트로 감소합니다. 최적화를 수행한 후 이미지는 본질적으로 동일하게 보이지만, 전체 바이트의 89%나 절감되었습니다.

느린 네트워크 환경을 지원하는 AMP Lite

전 세계 많은 사람들이 연결 속도가 느린 네트워크나 RAM 사양이 낮은 기기에서 인터넷을 이용하고 있는데, 저희는 이렇게 대역폭이 크게 제한된 사용자에게는 일부 AMP 페이지가 최적화된 상태가 아니라는 점을 확인했습니다. 이 때문에 Google에서는 이러한 사용자를 위해 AMP 페이지에서 훨씬 더 많은 바이트를 삭제하는 AMP Lite도 출시했습니다.

AMP Lite를 사용해 위에서 설명한 모든 최적화를 이미지에 적용합니다. 특히, 항상 더 낮은 화질 수준을 사용합니다(위의 4번 항목 참조).

뿐만 아니라 amp-font 태그를 사용하고 글꼴 로드 제한시간을 0초로 설정하여 외부 글꼴을 최적화함으로써, 외부 글꼴이 이전에 캐시되었는지 여부에 관계없이 페이지를 즉시 표시할 수 있습니다.

AMP Lite는 베트남, 말레이시아 등 여러 국가에서 대역폭이 제한된 환경의 사용자와 전 세계에서 RAM 사양이 낮은 기기의 사용자를 대상으로 소개되고 있습니다. 참고로, 이런 최적화 과정에서 일부 이미지의 디테일이 바뀔 수도 있겠지만 광고를 포함하여 페이지의 다른 부분에는 영향을 미치지 않습니다.

* * *

요컨대, 위에서 설명한 모든 최적화에서 저희는 바이트 수가 통틀어 45% 줄어드는 것을 확인했습니다.

저희는 여기서 더 나아가 사용자 데이터의 사용 효율성을 더욱 높여 훨씬 더 빠른 AMP 환경을 제공할 수 있기를 바랍니다.

Contents

ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Game
Firebase

검색

Tag

Archive

2024
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2023
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2022
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2021
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2020
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2019
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2018
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2017
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2016
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2015
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2014
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2013
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 4월
- 3월
- 2월
- 1월

2012
- 12월
- 11월
- 10월
- 9월
- 8월
- 7월
- 6월
- 5월
- 3월
- 2월
- 1월

2011
- 12월
- 11월

Feed

Google
Privacy
Terms