한국의 개발자들을 위한 Google for Developers 국문 블로그입니다.
Google AMP Cache, AMP Lite, 그리고 속도에 대한 요구
2017년 1월 30일 월요일
<블로그 원문은
여기
에서 확인하실 수 있으며, 블로그 번역 리뷰는
문현경(Web Technologies GDE)
님이 참여해 주셨습니다.>
Google에서는 스피디한 제품 디자인을 핵심 원칙으로 삼고 있습니다. AMP(Accelerated Mobile Pages) 형식은 콘텐츠의 빠르고 안정적인 로드에 도움이 되기는 하지만, 그보다 더 빠른 속도를 구현할 수 있습니다.
스마트 캐싱은 사용자가 Google 검색, Google 뉴스와 날씨 등의 제품에서 접하게 되는 거의 실시간에 가까운 AMP 사용자 경험에 있어 핵심 요소 중 하나입니다. 캐싱을 사용하면 콘텐츠를 요구하는 사용자에게 콘텐츠가 보통 물리적으로 더 가깝게 있도록 하여 바이트가 네트워크를 통해 사용자에게 도달하는 데 더 짧은 경로를 경유하도록 할 수 있습니다. 또한, 캐시와 같은 공통된 단일 인프라를 사용하면 캐시와 비교하여 콘텐츠 제공 지연 시간이 매우 상이한데다 훨씬 클 수도 있는 많은 호스트에서 콘텐츠가 제공되더라도 페이지 제공 시간을 더욱 일관되게 유지할 수 있습니다.
더욱 빠르고 안정적으로 제공하는 것이 바로 Google 검색의 AMP 사용자 경험에서 제공되는 페이지가
Google AMP Cache
에서 제공되는 주된 이유입니다. 캐시의 통합 콘텐츠 제공 인프라를 통해 최적화를 구축함으로써 제공되는 수억 개의 문서 전체에 걸쳐 사용자 경험을 한층 개선할 수 있는 짜릿한 경험을 맛볼 수 있습니다. 모든 문서가 이러한 이점을 활용할 수 있도록 하는 것이 Google AMP Cache를 모든 사용자에게 무료로 제공하는 주된 이유 중 하나입니다.
이번 게시물에서는 최근에 도입한 두 가지 개선 사항에 대해 집중적으로 살펴보도록 하겠습니다. 첫 번째는 이미지 제공을 최적화한 것이고, 두 번째는 "AMP Lite"라는 프로젝트를 통해 대역폭이 제한된 조건에서 콘텐츠를 더욱 성공적으로 제공할 수 있도록 한 것입니다.
Google AMP Cache를 통한 이미지 최적화
전체 웹 환경에서 평균적으로, 이미지는 한 페이지의
총 바이트 중 64%
를 차지합니다. 이는 곧 최적화를 구현할 때 이미지를 잘 활용하면 무척 큰 효과를 얻을 수 있음을 의미합니다.
이미지 최적화를 적용하면 네트워크를 통해 전달되는 바이트의 수를 효과적으로 줄일 수 있습니다. Google AMP Cache는
PageSpeed 모듈
및
Chrome 데이터 압축
에서 사용하는 이미지 최적화 스택을 활용합니다. 참고로, 위에서 설명한 변화를 이루기 위해 Google AMP Cache는 "Cache-Control: no-transform" 헤더를 무시합니다. 사이트 도구로 서버에
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
인디게임페스티벌
정책 세미나
창구프로그램
AdMob
AI
Android
Android 12
Android 12L
Android 13
Android 14
Android Assistant
Android Auto
Android Games
Android Jetpack
Android Machine Learning
Android Privacy
Android Studio
Android TV
Android Wear
App Bundle
bootcamp
Business
Chrome
Cloud
Community
compose
Firebase
Flutter
Foldables
Game
gdg
GDSC
google
Google Developer Student Clubs
Google Play
Google Play Games
Interview
Jetpack
Jetpack Compose
kotlin
Large Screens
Library
ma
Material Design
Material You
ML/Tensorflow
mobile games
Now in Android
PC
Play Console
Policy
priva
wa
wear
Wearables
Web
Web/Chrome
Weeklyupdates
WorkManager
Archive
2024
12월
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