한국의 개발자들을 위한 Google Developers 국문 블로그입니다.
원본에서 더욱 빠른 AMP: AMP + SSR = ⚡
Wednesday, September 11, 2019
<블로그 원문은
이곳
에서 확인하실 수 있으며 블로그 번역 리뷰는 조은(Webtech GDE)님이 참여해 주셨습니다>
AMP는 현재 AMP 페이지를 훨씬 더 빠르게 로드할 수 있게 AMP 페이지에 적용할 수 있는 서버사이드 렌더링(SSR) 기법을 공식적으로 지원합니다. 우리의 테스트 결과, 유명한
FCP 측정항목
에서 최대 50%라는 엄청난 속도 증가를 보여줍니다. Google AMP Cache는 한동안 이 기법을 활용해왔지만, 이제는 개발자가 자신의 도메인에서도 이 기법을 사용할 수 있습니다! 주요 사이트 환경을 제공하기 위해 AMP를 사용 중이라면, 이 추가적인 최적화 프로그램의 설치가 특히 중요합니다. AMP 페이지와 비 AMP 페이지가 있는 '페어링된 AMP 설정'을 사용 중이라 할지라도, 사용자가 Twitter 앱을 사용하는 것과 같이 AMP Cache가 사용되지 않는 경우에 이 기법으로 사용자를 위한 최적의 성능을 보장할 수 있습니다.
SSR
은 React 또는 Vue.js와 같은 클라이언트측 페이지를 렌더링하는 프레임워크를 위한 FCP(first-contentful-paint) 시간을 개선하기 위한 기법입니다. 클라이언트측 렌더링의 단점은 페이지 렌더링에 필요한 모든 자바스크립트를 먼저 다운로드해야 한다는 점입니다. 그래서 사용자가 페이지의 실제 콘텐츠를 볼 수 있을 때까지의 시간이 지연됩니다. 이 문제를 완화하기 위해, React와 Vue.js는 둘 다 탐색 요청 시 서버에서 DOM을 사전에 렌더링하도록 지원합니다. 그러면 클라이언트측 자바스크립트가 렌더링을 픽업하는데, 이는 (리)하이드레이션이라는 프로세스입니다. 결과적으로 사용자는 콘텐츠를 훨씬 더 빠르게 볼 수 있게 됩니다.
AMP SSR은
AMP 보일러플레이트 코드
를 제거하고 서버에서 페이지 레이아웃을 렌더링하는 방식으로 작동합니다. AMP 보일러플레이트 코드가 존재하는 목적은 페이지 로드 시 콘텐츠 점프를 방지하기 위해서입니다. 이 코드는 AMP 프레임워크가 다운로드되고 페이지 레이아웃이 확정될 때까지 페이지 콘텐츠를 숨깁니다. 따라서 AMP 페이지는 다른 클라이언트측 프레임워크와 똑같은 문제, 즉 자바스크립트를 다운로드할 때까지 렌더링이 차단되는 문제를 겪게 됩니다. 보일러플레이트 코드를 제거하면 AMP SSR의
FCP 시간이 50% 더 빨라집니다
. 다음은 AMP 파일과 그 파일의 SSR 버전이 어떻게 다른지 비교한 내용입니다(자세한 설명을 보려면
공식 가이드
참조).
html 요소에서 변환된 속성을 통해 서버측에서 렌더링된 AMP 페이지를 식별할 수 있습니다.
<html amp transformed="self;v=1">
주: AMP 캐시는 자체 플래그를 설정하는데, 예컨대 Google AMP Cache에서는 다음을 추가합니다.
<html amp transformed="google;v=1">
이 속성이 설정되면 유효성 검사기가 SSR 처리된 AMP를 유효한 AMP로 취급합니다. SSR 처리된 AMP 최적화는 AMP 사양의 규칙을 위반하므로 문서를 무효화하며, 이것이 바로 이 새로운 플래그로 이 사례를 표시해야 하는 이유입니다. 플래그와 최적화가 모두 적용된 문서는 유효한 것으로 간주되어 계속 진행해도 좋습니다.
AMP SSR에 대해 자세히 알아보려면
AMP 채널의 설명 동영상
을 시청하거나
AMP SSR 가이드
를 읽어보세요.
AMP의 SSR 처리 방법은?
SSR 처리된 AMP를 수동으로 작성한다는 건 말이 안 됩니다. 대신에, 컴파일러가 하는 일과 마찬가지로 AMP 파일을 SSR 버전으로 자동으로 변환하는 도구를 사용합니다. 사용자가 문서를 요청하기 전에 미리 이런 변환이 이루어지는 것이 이상적일 것입니다. 하지만 요청 시 변환을 실행할 수도 있습니다(변환 작업을 반복해서 계속 실행하지 않도록 결과를 캐시해야 함).
현재는 AMP SSR을 위해 사용 가능한 도구는 다음 두 가지입니다.
AMP Optimizer
: 최적화된 AMP를 생성하기 위한 NodeJs 라이브러리.
Express
로 사이트를 구동하는 경우
express 미들웨어
에 관심이 있으실 수도 있습니다.
AMP Packager
:
Signed Exchange
제공과 함께 유용한 go 명령줄 도구.
주: 이러한 도구는 SSR을 수행할 뿐 아니라, AMP 프레임워크 미리 로드, 헤드 재정렬 등의
다른 최적화
도 수행합니다.
Next.js 지원
최신 Next.js 9 릴리스
가 별도 구성 없이 AMP SSR을 기본적으로 지원한다는 점이 무척 기대됩니다. Next.js 9은 현재 AMP 우선 페이지와 하이브리드 AMP 페이지에 대해 기본적으로 최적화된 AMP를 렌더링합니다. 따라서 Next.js는 AMP 페이지를 빌드하기 위한 훌륭한 선택입니다.
다음 단계는?
우리는 앞으로 두 가지 큰 추진 과제를 계획해두고 있습니다.
1.
AMP 프레임워크(v0.js)를 자체 호스팅하기 위한 옵션. 예, 맞습니다. 더는 cdn.ampproject.org에서 AMP를 다운로드할 요가 없을 것입니다. 이는 다음과 같은 두 가지 장점을 지니게 될 것입니다.
더 빠른 상호작용:
AMP 프레임워크를 다운로드할 때 cdn.ampproject.org에 대한 HTTPS 연결을 하나 더 설정할 필요가 없어지게 됩니다.
더 쉬운 QA:
새 AMP 릴리스로 전환하고 싶은 시점을 제어할 수 있습니다.
하지만
개인정보 보호상의 이유로
, AMP 캐시는 캐시된 AMP 페이지를 제공할 때 캐시 원본과 일치하도록 AMP 스크립트 URL을 다시 쓴다는 점을 유념하세요.
2.
WordPress 통합: 공식 AMP wordpress 플러그인 v1.3에서는 AMP SSR을 기본적으로 지원합니다.
모든 이를 위한 AMP SSR
AMP 페이지를 게시할 경우 서버측에서 렌더링된 AMP 페이지를 게시해야 합니다. HTML 또는 CSS의 축소와 유사하게,
AMP Optimizer
또는
Go 변환기
의 실행이 빌드/렌더링 체인의 정상적인 한 부분이어야 합니다. 렌더링 성능의 개선으로 FCP 시간에 큰 차이가 생기지만, 더욱 중요한 점은 사용자 환경의 차이입니다.
게시자: Sebastian Benz, Google 디벨로퍼 어드보케이트
Contents
ML/Tensorflow
Android
Flutter
Web/Chrome
Cloud
Google Play
Community
Business
검색
Tag
AdMob
Android
Android 12
Android Auto
App Bundle
Business
Community
Flutter
gdg
Google Play
Jetpack Compose
kotlin
ML/Tensorflow
Now in Android
Play Console
Web
정책 세미나
창구프로그램
Archive
2021
May
Apr
Mar
Feb
Jan
2020
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2019
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2018
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2017
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2016
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Mar
Feb
Jan
2011
Dec
Nov
Feed
