AMP란? Accelerated Mobile Pages에 대한 완전한 가이드

섹션 1: Accelerated Mobile Pages란 무엇입니까?

모바일 우선 사고 방식은 여기에서 유지됩니다. 이 진술은 비즈니스 및 소비자 측면 모두에서 사실입니다.

사용자가 구매하기 전에 휴대전화에 문의하는 것은 과소평가된 표현이라고 할 수 있습니다. 모바일 인터넷 사용은 전 세계적으로 데스크톱 모바일 사용을 능가했습니다. 인도, 멕시코, 인도네시아와 같은 국가에서도 데스크톱 사용량보다 스마트폰 사용량이 4배 이상 높습니다.

미국에서만 매일 300억 번의 모바일 모멘트(고객이 전화로 문의하고 즉각적인 답변을 기대하는 순간)가 있습니다. 이는 귀하의 브랜드가 사용자가 원하는 것을 제공할 수 있는 모바일 기회가 매일 300억 개 있다는 것을 의미합니다.

그리고 여전히 모바일 광고 지출은 모바일 미디어 소비보다 뒤쳐져 있습니다.

사용자가 구매 대신 모바일에서 탐색하는 데 더 많은 시간을 보내는 데는 이유가 있습니다. 사용자는 모바일 장치에서 즉각적인 만족을 더 원합니다.

이 질문에 답하십시오. 모바일 웹페이지가 로드될 때까지 얼마나 기다리십니까?

Google과 SOASTA가 수집한 데이터에 따르면 40%의 소비자가 페이지를 로드하는 데 3초 이상 걸립니다.

3초.

그것이 당신의 광고를 좋아하고 클릭한 사용자의 관심을 유지해야 하는 모든 시간입니다. 그리고 앞서 언급한 시간 내에 웹페이지가 로드되지 않으면 광고가 아무리 매력적이더라도 헛수고로 만들었습니다. 나쁜 소식은 데이터에 따르면 대부분의 소매 모바일 사이트가 로드되는 데 약 6.9초가 소요된다는 사실입니다. 이는 사용자의 40%가 페이지를 떠나기 전에 기다리는 시간의 두 배 이상입니다.

웹페이지 속도가 이탈률에 미치는 영향

속도는 모바일 웹 페이지의 이탈률을 측정할 때 중요한 요소입니다. 더 자세히 알아보기 전에 모바일 사이트 이탈률의 두 가지 측면, 즉 DOM 준비 시간과 전체 페이지 로드 시간에서 속도가 주로 고려된다는 점을 설명하는 것이 중요합니다.

1. DOM 준비 시간: DOM 준비 시간은 브라우저가 페이지의 HTML 코드를 수신하고 구문 분석하는 데 걸리는 시간으로 이탈률을 가장 잘 예측합니다. HTML 코드가 수신되고 구문 분석되는 시기를 사용자가 알지 못하더라도 이미지와 같은 페이지 요소를 로드하려면 먼저 코드를 로드해야 합니다. HTML 코드가 너무 오래 걸리면 웹사이트 로딩 시간이 느려집니다. 모바일 웹 페이지의 DOM 준비 시간을 단축하려면 브라우저가 HTML 코드를 구문 분석하지 못하도록 차단하고 방지하는 JavaScript의 사용을 피하는 것이 가장 좋습니다. JavaScript를 사용하는 페이지 요소에는 페이지를 로드하기 전에 외부 서버에서 가져와야 하는 타사 광고 및 소셜 위젯이 포함됩니다.

2. 전체 페이지 로드 시간: 전체 페이지 로드 시간에는 웹 페이지에 이미지, 글꼴, CSS 코드 등이 로드되는 데 걸리는 시간이 포함됩니다. 전체 페이지 로드 속도가 빨라지면 이탈률이 낮아집니다.

웹 페이지의 전체 페이지 로드 시간이 더 빨라지도록 하려면 이미지, 글꼴을 최적화하고 로드 시간을 늦출 가능성이 있는 타사 파일을 피해야 합니다.

페이지 로드 시간은 페이지 이탈의 가장 강력한 이유 중 하나입니다. 더 나쁜 것은 사용자가 페이지를 떠날 뿐만 아니라 연구에 따르면 사용자의 79%가 웹 페이지에서 느린 경험을 한 후에는 다시 돌아오지 않을 것이라고 합니다.

페이지 로드 속도에 대한 다음과 같은 놀라운 폭로를 고려하십시오.

• 평균 모바일 사이트는 3G 연결을 통해 로드하는 데 19초가 걸리고 모바일 사이트의 77%는 로드하는 데 10초 이상 걸립니다.
• Google은 웹페이지가 로드되는 데 1초가 추가될 때마다 전환이 20% 감소한다는 사실을 발견했습니다. 비교를 위해 5초 안에 로드된 사이트는 19초 안에 로드된 사이트보다 모바일 광고 수익이 2배 더 많았습니다.
• 사용자의 61%는 액세스에 문제가 있었던 모바일 사이트로 돌아갈 가능성이 낮습니다.

이것은 무엇을 의미 하는가?

모바일 페이지 로드가 즉각적이지 않고 사용자에게 충분히 빠르지 않으면 반송되어 다시 돌아오지 않을 것입니다.
모바일 웹페이지에서 이러한 일이 발생하지 않도록 하려면 모바일 웹사이트와 클릭 후 방문 페이지를 AMPlify하는 것이 중요합니다.

AMP란?

Google은 모바일 웹페이지가 최적의 속도로 작동하도록 하기 위해 Accelerated Mobile Pages 오픈 소스 프로젝트를 시작했습니다.

AMP 프로젝트는 모든 기기와 배포 플랫폼에서 일관되게 빠르고 아름답고 고성능인 웹 페이지와 광고를 만들 수 있도록 하여 '함께 미래의 웹을 구축'하는 것을 목표로 합니다.

AMP는 수천 명의 개발자, 게시자, 웹사이트, 배포 회사 및 기술 회사와 협력하여 구축되었습니다. 현재까지 15억 개 이상의 AMP 페이지가 생성되었으며 100개 이상의 주요 분석, 광고 기술 및 CMS 제공업체가 AMP 형식을 지원합니다.

AMP 형식으로 모바일 페이지를 만들면 다음을 얻을 수 있습니다.

1. 더 높은 성능과 참여: AMP 오픈 소스 프로젝트에서 생성된 페이지는 거의 즉시 로드되어 사용자에게 모바일과 데스크톱 모두에서 부드럽고 매력적인 경험을 제공합니다.

2. 유연성 및 결과: 기업은 KPI를 유지 및 개선하면서 콘텐츠를 제공하는 방법과 사용할 기술 공급업체를 결정할 수 있습니다.

이전에 AMP 페이지를 클릭했을 가능성이 높지만 깨닫지 못했을 뿐입니다. 당신이 알아차렸을 수 있는 유일한 것은 당신이 클릭한 후 페이지가 얼마나 즉각적이라는 것이었습니다. AMP로 제작된 웹페이지에는 검색 결과에 번개 표시기가 있습니다.

검색 결과에서 AMP를 인식하는 방법은 다음과 같습니다.

다음은 일반 웹페이지와 비교한 AMP 페이지의 모습입니다.

AMP 페이지가 즉시 로드되는 이유는 AMP가 HTML/CSS 및 JavaScript를 제한하여 모바일 웹 페이지의 더 빠른 렌더링을 허용하기 때문입니다. 일반 모바일 페이지와 달리 AMP 페이지는 Google 검색에서 더 빠른 로드 시간을 위해 Google AMP 캐시에 의해 자동으로 캐시됩니다.

사용자는 모바일 장치를 사용할 때 특정 기대치를 가지고 있으며 의미 있고 관련성이 있으며 더 빠른 경험을 원합니다. 대상 고객의 기대치를 충족시키기 위해 AMP가 가장 좋습니다.

이 가이드는 AMP 오픈 소스 프로젝트에 대해 알아야 할 모든 것을 안내합니다. AMP 작동 방식과 페이지 로드 속도를 높이는 정확한 절차를 살펴보겠습니다.

또한 이 가이드에서는 AMP를 사용하여 다양한 산업 분야의 비즈니스에서 전환율을 높이는 데 도움이 된 사례 연구와 페이지를 AMPlify할 때 얻을 수 있는 이점에 대한 사례 연구도 제공합니다. 마지막 섹션에서는 Accelerated Mobile 클릭 후 방문 페이지가 무엇이며 방문자에게 더 빠르고 관련성이 높은 클릭 후 방문 페이지를 제공하기 위해 페이지를 만들어야 하는 이유에 대해 설명합니다.

섹션 2: AMP는 어떻게 작동합니까?

Google은 2016년 2월에 Accelerated Mobile Pages(AMP) 오픈 소스 프레임워크를 출시했습니다. 이 프레임워크는 사용자가 일상에서 처리하는 투박하고 느린 모바일 경험 대신 최적화되고 긴밀하게 통합된 사용자 경험을 생성할 필요성이 있었기 때문에 구축되었습니다. 기초.

Google은 최적화된 모바일 웹페이지 환경을 만들기 위한 정확한 경로를 제공하는 프레임워크를 만들기 위해 AMP 프로젝트를 시작했습니다. AMP 오픈 소스 프로젝트는 웹 페이지 디자인에서 사용자를 최우선으로 하는 것에 대해 잘 문서화되고 쉽게 배포 가능하며 검증 가능하며 의견이 분분합니다.

거의 2년 전에 출시된 이후로 2,500만 개의 도메인에서 40억 개 이상의 AMP 페이지를 게시했습니다.

출시 이후 AMP 페이지 수가 증가했을 뿐만 아니라 속도도 높아졌기 때문에 Google 검색에서 AMP 페이지를 로드하는 데 걸리는 중앙값 시간은 이제 0.5초 미만입니다.

AMP는 웹사이트 트래픽이 10% 증가하고 페이지에 머문 시간이 2배 증가합니다. AMP를 사용하는 전자상거래 웹사이트는 AMP가 아닌 페이지에 비해 판매 및 전환이 20% 증가합니다.

AMP는 기업이 웹페이지의 간소화되고 깔끔하며 관련성 높은 버전을 만들 수 있도록 지원하여 사용자에게 더 빠른 모바일 웹 경험을 제공합니다.

Chartbeat는 2016년 6월부터 2017년 5월까지 AMP를 사용하는 360개 웹사이트의 데이터를 분석하여 AMP 페이지를 사용하는 일반적인 게시자가 AMP 콘텐츠에서 전체 모바일 트래픽의 16%를 보았다는 사실을 알아냈습니다.

AMP 페이지는 표준 웹페이지보다 약 4배 빠르게 로드되며 사용자는 표준 모바일 웹페이지보다 AMP 페이지에 35% 더 많이 참여합니다.

이제 AMP 페이지를 사용해야 하는 이유를 알았으므로 AMP의 작동 방식, 반응형 웹 디자인, Facebook의 인스턴트 아티클 및 프로그레시브 웹 앱과 비교하여 살펴보겠습니다.

AMP의 3가지 핵심 구성 요소

AMP 페이지는 다음 세 가지 핵심 구성요소로 구축됩니다.

AMP HTML

AMP HTML은 안정적인 성능을 위한 몇 가지 제한 사항만 있는 기본적으로 HTML입니다. 가장 간단한 AMP HTML 파일은 다음과 같습니다.

AMP HTML의 대부분의 태그는 일반 HTML 태그이지만 일부 HTML 태그는 AMP 전용 태그로 대체됩니다. 이러한 맞춤 태그를 AMP HTML 구성요소라고 하며 일반적인 태그 패턴을 성능이 좋은 방식으로 쉽게 구현할 수 있도록 합니다. AMP 페이지는 HTML 태그에 의해 검색 엔진 및 기타 플랫폼에서 검색됩니다.

페이지의 비 AMP 버전과 AMP 버전 또는 AMP 버전만 선택할 수 있습니다.

AMP 자바스크립트(JS)

AMP JS 라이브러리는 AMP HTML 페이지의 빠른 렌더링을 보장합니다. JS 라이브러리는 인라인 CSS 및 글꼴 트리거링과 같은 모든 AMP 최고의 성능 사례를 구현하며, 이는 리소스 로드를 관리하고 빠른 페이지 렌더링을 보장하기 위해 사용자 지정 HTML 태그를 제공합니다.

AMP JS는 외부 리소스의 모든 것을 비동기식으로 만들기 때문에 페이지의 어떤 것도 렌더링을 차단할 수 없습니다. JS는 또한 모든 iframe의 샌드박싱, 리소스가 로드되기 전에 모든 페이지 요소의 레이아웃 사전 계산, 느린 CSS 선택기 비활성화와 같은 다른 성능 기술을 사용합니다.

AMP 캐시

Google AMP 캐시는 캐시된 AMP HTML 페이지를 제공하는 데 사용됩니다. AMP 캐시는 모든 유효한 AMP 문서를 전달하는 데 사용되는 프록시 기반 콘텐츠 전달 네트워크입니다. 캐시는 AMP HTML 페이지를 가져와 캐시하고 자동으로 페이지 성능을 향상시킵니다.

최대 효율성을 유지하기 위해 AMP 캐시는 HTTP 2.0을 사용하는 동일한 출처에서 문서, JS 파일 및 모든 이미지를 로드합니다.

AMP 캐시에는 페이지가 작동하도록 보장하고 페이지 속도를 늦출 수 있는 외부 요인에 의존하지 않는다는 것을 확인하는 검증 시스템이 내장되어 있습니다. 유효성 검사 시스템은 페이지의 마크업이 AMP HTML 사양을 충족하는지 확인하는 일련의 어설션에서 작동합니다.

유효성 검사 시스템의 추가 버전은 모든 AMP 페이지와 함께 사용할 수 있습니다. 이 버전은 페이지가 렌더링될 때 브라우저의 콘솔에 직접 유효성 검사 오류를 기록할 수 있으므로 성능과 사용자 경험에 영향을 미칠 수 있는 코드의 복잡한 변경 사항을 볼 수 있습니다.

AMP의 세 가지 핵심 구성요소가 함께 작동하여 페이지를 빠르게 로드할 수 있습니다. 다음 섹션에서는 AMP 페이지를 매우 빠르게 만들기 위해 결합된 7가지 최적화 기술을 강조할 것입니다.

모든 AMP JavaScript는 비동기식으로 실행됩니다.

JavaScript는 페이지의 모든 측면을 수정할 수 있으며 DOM 구성을 차단하고 페이지 렌더링을 지연시키는 기능이 있습니다. 두 요소 모두 페이지 로딩을 느리게 만듭니다. JavaScript가 페이지 렌더링을 지연시키지 않도록 AMP는 비동기 JavaScript만 허용합니다.

AMP 페이지에는 작성자가 작성한 JavaScript가 포함되어 있지 않으며 대신 모든 대화형 페이지 기능이 맞춤 AMP 요소에 의해 처리됩니다. 이러한 맞춤 AMP 요소에는 JavaScript가 포함될 수 있지만 성능 저하를 일으키지 않도록 주의 깊게 설계되었습니다.

AMP는 iframe에서 타사 JavaScript를 수행하지만 페이지 렌더링을 차단할 수는 없습니다.

모든 리소스는 정적으로 크기 조정됩니다.

이미지, iframe 및 광고와 같은 모든 외부 리소스는 HTML 크기를 명시해야 페이지 리소스가 다운로드되기 전에 AMP가 각 요소의 크기와 위치를 결정할 수 있습니다. AMP는 리소스가 다운로드될 때까지 기다리지 않고 페이지의 레이아웃을 로드합니다.

AMP에는 문서 레이아웃을 크기 레이아웃과 분리하는 기능이 있으며 전체 문서를 레이아웃하는 데 단일 HTTP 요청만 필요합니다. AMP는 브라우저에서 비용이 많이 드는 스타일 레이아웃과 재계산을 방지하도록 최적화되어 있으므로 페이지 리소스가 로드될 때 레이아웃이 다시 설정되지 않습니다.

확장 메커니즘은 렌더링을 차단하지 않습니다.

AMP는 페이지 렌더링을 차단하는 확장 메커니즘을 허용하지 않으며 라이트박스 및 소셜 미디어 삽입과 같은 요소에 대한 확장을 지원하며 추가 HTTP 요청이 필요하지만 페이지 레이아웃 및 렌더링을 차단하지는 않습니다.

페이지에서 사용자 정의 스크립트를 사용하는 경우 AMP 시스템에 결국에는 사용자 정의 태그를 갖게 될 것이라고 알려야 합니다. 그런 다음 AMP는 페이지 속도가 느려지지 않도록 필요한 태그를 생성합니다. 예를 들어 amp-iframe 태그가 AMP에 amp-iframe 태그가 있을 것이라고 알려주면 AMP는 포함할 내용을 알기 전에 iframe 상자를 만듭니다.

모든 타사 JavaScript는 중요 경로에서 제외됩니다.

타사 JavaScript는 동기 JS 로드를 사용하므로 로드 시간이 느려지는 경향이 있습니다. AMP 페이지는 타사 자바스크립트를 허용하지만 샌드박스 처리된 iframe에서만 허용합니다. 이렇게 하면 자바스크립트 로드가 기본 페이지의 실행을 차단할 수 없습니다. 샌드박스 처리된 iframe JavaScript가 여러 스타일 재계산을 트리거하더라도 작은 iframe에는 DOM이 거의 없습니다.

iframe 재계산은 페이지의 스타일 및 레이아웃 재계산에 비해 매우 빠르게 실행됩니다.

CSS는 인라인이어야 하고 크기 제한이 있어야 합니다.

CSS는 렌더링을 차단하고 모든 페이지 로드도 차단하며 bloating을 유발하는 경향이 있습니다. AMP HTML은 인라인 스타일만 허용하므로 대부분의 웹페이지에 대한 중요한 렌더링 경로에서 1개 또는 대부분의 여러 HTTP 요청을 제거합니다.

인라인 스타일 시트의 최대 크기는 75kb여야 합니다. 이 크기는 매우 정교한 페이지에 충분하지만 여전히 페이지 작성자가 좋은 CSS 위생을 연습해야 합니다.

글꼴 트리거가 효율적입니다.

웹 글꼴은 일반적으로 크기가 크므로 웹 글꼴 최적화는 빠른 로드에 중요합니다. 몇 가지 동기화 스크립트와 몇 가지 외부 스타일 시트를 포함하는 일반적인 페이지에서 브라우저는 모든 스크립트가 로드될 때까지 글꼴 다운로드를 기다립니다.

AMP 프레임워크는 모든 글꼴이 다운로드를 시작할 때까지 HTTP 요청을 0으로 선언합니다. 이것은 AMP의 모든 JavaScript에 async 속성이 있고 인라인 시트만 허용되며 브라우저에서 글꼴을 다운로드하는 것을 차단하는 HTTP 요청이 없기 때문에 가능합니다.

스타일 재계산 최소화

AMP 페이지에서 모든 DOM 읽기는 모든 쓰기 전에 발생하므로 프레임당 한 번만 스타일을 다시 계산하므로 페이지 렌더링 성능에 부정적인 영향이 없습니다.

GPU 가속 애니메이션만 실행

빠른 최적화를 실행하려면 GPU에서 실행해야 합니다. GPU는 레이어에서 작동하며 이러한 레이어에서 몇 가지 작업을 수행하는 방법을 알고 있습니다. 레이어를 이동하거나 페이드할 수 있습니다. 그러나 GPU가 페이지 레이아웃을 업데이트할 수 없는 경우 이 작업을 브라우저에 제공하므로 페이지 로드 시간에 좋지 않습니다.

애니메이션 관련 CSS에 대한 규칙은 애니메이션이 GPU 가속화될 수 있도록 합니다. 즉, AMP는 페이지 레이아웃이 필요하지 않도록 변환 및 불투명도에 대한 애니메이션 및 전환만 허용합니다.

리소스 로딩이 우선

AMP는 모든 리소스 로드를 제어하고 리소스 로드의 우선 순위를 지정하며 필요한 것만 로드하고 지연 로드된 모든 리소스를 미리 가져옵니다.

AMP는 리소스를 다운로드할 때 가장 중요한 리소스가 먼저 다운로드되도록 다운로드를 최적화합니다. 모든 이미지와 광고는 사용자가 볼 가능성이 높거나 스크롤 없이 볼 수 있는 부분에 있거나 방문자가 스크롤할 가능성이 있는 경우에만 다운로드됩니다.

AMP는 또한 지연 로드된 리소스를 미리 가져오는 기능이 있습니다. 이러한 리소스는 가능한 한 늦게 로드되지만 가능한 한 빨리 미리 가져옵니다. 이렇게 하면 매우 빠르게 로드되지만 CPU는 리소스가 사용자에게 표시될 때만 사용됩니다.

즉시 페이지 로드

새로운 AMP 사전 연결 API는 HTTP 요청이 만들어지는 즉시 최대한 빠른 속도를 보장하기 위해 많이 사용됩니다. 이 때문에 사용자가 페이지를 탐색하고 싶다고 명시적으로 말하기 전에 페이지가 렌더링되므로 사용자가 실제로 페이지를 볼 때 페이지를 사용할 수 있게 되어 페이지가 즉시 로드됩니다.

AMP는 웹 콘텐츠를 사전 렌더링할 때 많은 대역폭과 CPU를 사용하지 않도록 최적화되어 있습니다. AMP 문서가 즉시 로드를 위해 사전 렌더링되면 스크롤 없이 볼 수 있는 부분의 리소스가 실제로 다운로드되며 타사 iframe과 같이 CPU를 많이 사용할 수 있는 리소스는 다운로드되지 않습니다.

다음 비디오를 사용하여 'AMP가 페이지를 빠르게 만드는 7가지 방법'을 찾을 수도 있습니다.

이제 AMP 작동 방식을 알았으므로 AMP가 Facebook의 인스턴트 아티클, 반응형 웹 디자인 및 프로그레시브 웹 앱과 어떻게 비교되는지 살펴보겠습니다.

AMP 대 Facebook의 인스턴트 아티클

Facebook은 2015년에 인스턴트 아티클을 출시하여 게시자가 Facebook 사용자에게 믿을 수 없을 정도로 빠르고 몰입도 높은 독서 경험을 제공할 수 있도록 지원했습니다. Facebook의 인스턴트 아티클은 다음과 같습니다.

• 표준 모바일 웹 기사보다 10배 빠름
• 평균 20% 더 많은 인스턴트 아티클 읽기
• 70%의 독자는 인스턴트 아티클을 포기할 가능성이 적습니다.

인스턴트 아티클은 퍼블리셔가 Facebook에서 빠르고 인터랙티브한 아티클을 만드는 데 도움이 됩니다. 다음과 같은 이점을 제공합니다.

• 빠른 응답성: 인스턴트 아티클은 사용자가 어떤 연결이나 장치를 사용하는지에 관계없이 즉시 로드됩니다. 기사는 모바일 스토리텔링 경험을 위해 변형되므로 사용하기 쉽습니다.
• 대화형 및 참여형: 기사의 몰입형 경험은 기사를 더 대화식으로 만듭니다. 이것이 인스턴트 기사가 모바일 웹 기사보다 30% 더 자주 공유되는 이유입니다. 뉴스피드에서 스토리의 도달 범위를 확대하는 데 도움이 됩니다.
• 쉽고 유연한 수익 창출: 수익 창출은 인스턴트 아티클의 필수적인 부분입니다. 기사로 비즈니스를 성장시키기 위해 직접 판매 광고를 확장하고 Facebook의 Audience Network로 사용 가능한 광고 인벤토리를 채우고 기본 브랜드 콘텐츠를 만들 수도 있습니다.

AMP 페이지와 인스턴트 아티클은 모두 사용자에게 빠른 로딩 시간을 제공하여 페이지 이탈률을 낮추고 참여도를 높이는 데 도움이 됩니다. 실제로 Facebook의 인스턴트 아티클은 AMP 페이지보다 훨씬 빠르게 로드됩니다.

그러나 AMP 페이지의 채택률은 인스턴트 아티클보다 훨씬 높으며 이는 주로 Facebook이 뉴스피드에서 텍스트 기사보다 비디오를 점점 더 우선시하기 때문입니다. 이로 인해 New York Times 및 The Guardian을 비롯한 여러 게시자가 인스턴트 아티클 사용을 중단했습니다.

Parsley에 따르면 Google은 Facebook을 제치고 퍼블리셔를 위한 외부 트래픽의 최대 소스로 떠올랐습니다. Google은 현재 게시자 외부 트래픽의 42%를 차지합니다.

Facebook이 인스턴트 아티클을 출시했을 때 미디어 및 콘텐츠 웹사이트에 대한 트래픽의 지배적인 소스로 Google을 능가했지만 AMP 출시와 성공으로 Google이 다시 선두를 달리고 있습니다.

AMP 프로젝트의 성공은 비즈니스 파트너십이 아닌 오픈 소스 이니셔티브라는 사실에 있습니다. Facebook이 인스턴트 아티클을 사용하는 것처럼 사용자를 특정 앱에 국한시키는 대신 AMP 프로젝트는 게시자가 모바일 웹 페이지를 만드는 방식을 변경하는 것을 목표로 합니다.

AMP 대 반응형 웹 디자인(RWD)

Google이 2015년 초 Mobilegeddon을 출시한 이래로 모바일 친화적인 웹사이트를 만드는 것이 마케터의 최우선 과제였습니다. 반응형 웹 디자인은 유연성에 중점을 둔 웹페이지를 만드는 데 도움이 되는 것을 목표로 합니다. 반응형 웹 페이지는 모든 장치 또는 화면에서 작동하여 더 좋고 참여도가 높은 모바일 웹 경험을 제공합니다.

기본적으로 AMP와 반응형 웹 디자인은 HTML 및 JavaScript와 같은 모바일 페이지를 생성하기 위해 거의 동일한 기본 빌딩 블록을 사용합니다. 그러나 다음과 같은 차이점이 있습니다.

1. RWD는 유연성에 중점을 둡니다. 반응형 웹 디자인은 웹사이트에 유연성을 추가합니다. 방문자의 화면 크기에 자동으로 응답하는 페이지를 만들 수 있습니다. 이렇게 하면 페이지에 도달할 수 있고 다양한 화면 크기에서 사용자에게 우수한 모바일 경험을 제공할 수 있습니다. 반응형 웹 디자인은 모바일에만 초점을 맞추는 것이 아니라 모든 장치와 모든 사용자 경험에서 작동합니다.

2. AMP는 속도에 중점을 둡니다 . AMP 오픈 소스 프레임워크는 속도, 특히 모바일 페이지 속도에 중점을 둡니다. AMP는 모바일 웹 콘텐츠에 인스턴트 렌더링을 도입했습니다. 인라인 스타일 시트, 지연 로드, 리소스 미리 가져오기 및 기타 최적화 기술을 사용하여 프레임워크는 모바일 페이지를 즉시 로드할 수 있습니다.

3. AMP는 웹페이지와 함께 작동하고 RWD는 웹페이지를 대체합니다. AMP를 귀하의 페이지에서만 사용할 수 있지만 웹사이트를 재설계하지 않고도 기존의 비반응형 또는 반응형 웹사이트에 AMP를 추가할 수도 있습니다. 그러나 웹 페이지를 반응형으로 만들려면 페이지를 다시 디자인해야 합니다.

4. AMP는 더 나은 사용자 경험을 제공합니다. 모바일 사용자 경험을 결정하는 두 가지 주요 요소, 즉 페이지 요소가 모바일 친화적이고 속도가 빠릅니다. 반응형 웹 디자인은 사용자의 화면과 일치하도록 페이지 요소를 잘 확장하지만 AMP 페이지와 비교할 때 속도에서 끔찍하게 실패합니다.

5. AMP에는 JavaScript 제한 사항이 있습니다. 반응형 웹 디자인은 모든 타사 스크립트와 미디어 라이브러리를 선호합니다. AMP 페이지의 경우에도 마찬가지입니다. 페이지 로드를 빠르게 하기 위해 AMP 프레임워크에는 JavaScript 및 CSS 기능이 매우 제한되어 있습니다.

AMP는 동적 콘텐츠가 많지 않은 페이지인 정적 페이지에 적합하지만 RWD는 모든 유형의 페이지에 사용할 수 있습니다. 그러나 반응형 웹 페이지는 로드하는 데 시간이 너무 오래 걸리므로 방문자가 이탈하여 다시는 돌아오지 않을 수 있습니다. 사용자에게 빠르고 모바일 반응이 빠른 환경을 제공하려면 AMP 페이지 사용을 고려해야 합니다.

AMP 대 프로그레시브 웹 앱(PWA)

Progressive Web Apps는 웹을 통해 제공되는 모바일 웹 앱으로 기본 앱처럼 작동합니다. PWA와 기본 앱의 주요 차이점은 PWA가 Google이나 앱 스토어에서 다운로드할 필요가 없다는 것입니다.

프로그레시브 웹 앱은 웹 브라우저 내에서 작동하므로 인터넷 연결이 매우 강력하지 않더라도 즉시 로드됩니다. PWA는 사전 캐싱을 사용하여 앱이 업데이트된 상태를 유지하여 사용자가 최신 버전만 볼 수 있도록 합니다.

Progressive Web Apps의 필요성은 상위 1,000개의 모바일 웹 사이트가 상위 1,000개의 기본 앱보다 4배 더 많은 사람들에게 도달한다는 사실에서 비롯되었습니다. 그러나 이러한 웹 사이트는 모바일 앱보다 평균 20배 더 짧은 시간 동안 사용자의 참여를 유도합니다.

이는 본질적으로 모바일 웹사이트가 방문자를 끌어들이는 데에는 적합하지만 참여를 유도하지는 않는다는 것을 의미합니다.

PWA는 기본 모바일 앱과 같은 모양, 느낌 및 작동 방식으로 설계되었습니다. 사용자는 모든 모바일 웹사이트에서와 마찬가지로 브라우저에서 이를 접합니다. 해당 사이트에 참여한 후 사용자는 장치에 웹 앱을 설치하라는 메시지가 표시됩니다. 설치하기로 선택하면 기본 앱과 같은 방식으로 앱이 기기에 다운로드됩니다.

PWA는 다음과 같습니다.

• 신뢰성 – 약한 네트워크 조건에서도 즉시 로드됩니다.
• 빠름 – 끊김 없는 스크롤과 부드러운 애니메이션으로 사용자 상호 작용에 빠르게 응답합니다.
• 몰입도 - 장치의 기본 앱처럼 느껴 지며 몰입형 사용자 경험을 제공합니다.

모바일 웹 앱이 Google에서 설명하는 필수 요구 사항을 충족하면 모바일 웹 앱을 사용자에게 다운로드 가능한 것으로 제공할 수 있습니다.

AMP와 PWA의 주요 차이점은 다음과 같습니다.

빠르고 간단한 경험을 만들기 위해 AMP만 사용하도록 선택할 수 있습니다. 프로그레시브 웹 앱에 의존하여 동적이고 느린 사용자 경험을 만들 수 있습니다. 또는 웹 디자인에 두 가지를 모두 통합하여 빠르게 시작하고 빠르게 유지할 수 있습니다.

오늘날에는 개발자가 세 가지 방식으로 두 가지를 모두 활용하면서 프로그레시브 웹 앱과 함께 AMP를 사용하는 경우가 늘어나고 있습니다.

1. 프로그레시브 웹 앱으로서의 AMP

콘텐츠가 주로 정적이고 AMP의 제한된 기능으로 만족할 수 있는 경우 이 옵션을 사용하면 프로그레시브 웹 앱으로 번개처럼 빠른 경험을 만들 수 있습니다. 예를 들어 AMP는 다음과 같이 구축됩니다. 프로그레시브 웹 앱은 완전히 AMP로 충전됩니다. 오프라인 액세스를 허용하는 서비스 작업자와 "홈 화면에 추가" 배너를 표시하는 매니페스트가 있습니다.

2. AMP를 프로그레시브 웹 앱으로

AMP와 프로그레시브 웹 앱을 함께 사용하는 또 다른 방법은 AMP 페이지를 웹사이트의 후크로 생각하는 것입니다. 즉각적인 로드로 사용자를 포착한 다음 프로그레시브 웹 애플리케이션으로 끌어들입니다. 이를 통해 빠른 로드 AMP 페이지를 첫 번째 옵션보다 더 동적인 PWA와 결합할 수 있습니다.

3. 프로그레시브 웹 앱의 AMP

AMP 대 PWA의 경우와 마찬가지로 전부 또는 전무일 필요는 없습니다. AMP로 모든 페이지를 구축할 필요는 없습니다. 또한 AMP와 PWA를 후크와 로드로 분리할 필요도 없습니다. 이제 실제로 단일 페이지의 작은 하위 섹션만 AMP할 수 있으므로 동적 기능을 완전히 절충하지 않고도 크기를 줄이고 로드 시간을 줄일 수 있습니다.

여기에는 "Shadow AMP"라고 하는 다른 형태의 AMP를 사용하는 것이 포함되며, 이를 통해 AMP가 웹페이지 영역 내에 중첩될 수 있습니다. 결과는 프로그레시브 웹 애플리케이션의 셸 내에서 AMP입니다.

Washington Post는 PWA와 AMP가 함께 협력하여 더 나은 참여와 더 빠른 로드 시간을 제공하는 이상적인 예를 보여줍니다. Washington Post가 처음에 웹사이트를 반응형으로 만들 때 속도는 3500ms였습니다. AMP를 채택했을 때 페이지 로드 시간이 1200ms로 줄어들었다가 AMP CDN 기술의 도움으로 400ms로 추가로 단축되었습니다.

웹 사이트 부담을 줄이기 위해 PWA를 채택한 후 사용자는 중단 없이 번개처럼 빠른 페이지 로드 속도와 더 나은 사용자 경험을 즐길 수 있었습니다.

Accelerated Mobile Pages 프로젝트를 사용하면 즉시 로드되는 모바일 페이지를 만들 수 있으므로 방문자가 튀는 대신 페이지에 더 잘 참여할 수 있습니다. AMP 페이지 생성과 관련된 최적화 기술은 페이지 로드 시간을 단축할 뿐만 아니라 방문자에게 우수한 사용자 경험을 제공합니다.

다음 섹션에서는 페이지에서 AMP 프레임워크를 사용할 때 얻을 수 있는 정확한 이점에 중점을 둘 것입니다.

섹션 3: AMP 혜택 및 제한 사항

AMP는 웹 페이지가 더 빨리 로드되도록 하여 사용자 경험을 돕고 방문자가 페이지에 더 오래 머물 수 있도록 합니다. AMP는 모바일 페이지가 더 빨리 로드되도록 도와주는 AMP HTML을 사용합니다. 실제로 Google의 Gary Illayes에 따르면 AMP 페이지의 중간 로드 시간은 1초로 평균 표준 HTML 페이지보다 4배 더 빠릅니다.

우리는 이미 페이지 이탈률과 페이지 속도 사이의 링크에 대해 논의했으며 AMP가 작동하는 방식과 PWA, RWD 및 Facebook의 인스턴트 아티클과 비교하는 방법에 대한 자세한 설명을 보았습니다.

가이드의 이 섹션에서는 AMP의 이점과 제한 사항에 중점을 두고 AMP 페이지를 만들 때 무엇을 위해 준비해야 하는지 자세히 설명합니다.

AMP의 이점

모바일 웹 페이지가 더 빨리 로드되면 사용자 경험과 KPI가 자동으로 향상됩니다. AMP 페이지의 즉각적인 로드 덕분에 Google, LinkedIn, Bing과 같은 모든 기기와 플랫폼에서 사용자에게 일관되게 빠른 웹 경험을 제공할 수 있습니다.

AMP는 모바일 페이지에 다음과 같은 이점을 제공합니다.

청중 참여

AMP 페이지의 중간 로드 시간은 1초 미만입니다. 즉, 사용자가 AMP 페이지를 방문하는 즉시 원하는 것을 얻을 수 있습니다. 페이지가 즉시 로드되기 때문에 페이지에 더 오래 참여하고 귀하의 제안에 대해 더 많이 알게 되어 귀하가 취하기를 원하는 조치를 수행할 가능성이 높아집니다.

수익 극대화

페이지에서 전환을 로드하는 데 1초가 추가될 때마다 12%씩 감소합니다. 즉, 잠재고객을 참여시키고 ROI를 높이려면 모바일 페이지가 방문자의 속도 기대치를 충족하는지 확인해야 합니다.

AMP 프레임워크를 사용하면 광고, 클릭 후 방문 페이지, 웹사이트를 비롯한 모든 곳에서 사용자에게 더 빠른 경험을 제공할 수 있습니다.

유연성 및 제어 유지

AMP 형식을 채택하면 AMP에 최적화된 웹 구성요소를 활용하면서 고유한 브랜드를 유지할 수 있습니다. CSS를 사용하여 웹 페이지의 스타일을 사용자 정의하고 동적 콘텐츠를 사용하여 필요한 곳에서 데이터를 가져올 수 있습니다.

또한 A/B 테스트를 사용하여 고객을 위한 최상의 모바일 사용자 경험을 테스트하고 생성할 수 있습니다.

작업의 복잡성 감소

AMP 페이지를 만드는 과정은 매우 간단하고 간단합니다. 특히 Drupal 및 WordPress를 포함한 CMS를 사용하는 경우 전체 아카이브를 변환할 수 있습니다.

각 AMP 페이지에 대한 코드를 최적화하기 위해 특별한 기술이 필요하지 않습니다. AMP 형식은 완전히 이식 가능하며 AMP 페이지는 사용자가 어떻게 접근하는지에 관계없이 일관되게 빠릅니다.

ROI 극대화

생성된 AMP 페이지는 다양한 배포 플랫폼에 동시에 배포할 수 있습니다. 이를 통해 AMP 페이지와 비 AMP 페이지 모두에 광고를 게재할 수 있습니다. 즉, 광고를 한 번만 제작하면 어디에서나 기억에 남는 브랜드 경험을 제공할 수 있습니다.

지속 가능한 미래를 만듭니다

AMP 프로젝트는 모든 사람이 더 우수하고 빠른 모바일 사용자 경험을 제공할 수 있도록 지원하여 웹의 미래를 보호하는 오픈 소스 이니셔티브입니다. AMP 프로젝트에 참여하면 더 빠르고 개방적인 웹에서 AMP 프로젝트에 참여하고 비즈니스의 지속 가능한 미래를 구축할 수 있습니다.

더 나은 사용자 경험 제공

물론 가속 모바일 클릭 후 방문 페이지를 사용할 때의 가장 분명한 이점은 훨씬 더 높은 사용자 만족도를 제공한다는 것입니다. 2명 중 1명은 웹사이트가 로드될 때까지 10초만 기다릴 수 없을 때 프로세스 속도를 15-85%만 높이는 것이 방문자의 행복에 큰 영향을 미칠 수 있습니다.

SEO 부스트 받기

Google의 알고리즘은 페이지 속도와 모바일 응답성을 고려합니다. 모바일에서 페이지 로드 속도가 빠를수록 검색 엔진 결과 페이지에서 더 높은 순위를 차지합니다.

모든 AMP 지원 페이지는 검색결과의 유료 광고 위에도 캐러셀 형식으로 표시되며 제목 아래에 녹색 번개가 표시됩니다.

AMP 페이지를 사용하면 많은 이점을 얻을 수 있지만 AMP에는 몇 가지 단점도 있습니다.

타사 JavaScript 없음

타사 JavaScript를 사용할 수 없기 때문에 고도로 타겟팅된 광고 경험을 제공할 수 있는 분석 및 추적 기능과 작별을 고해야 합니다.

뿐만 아니라 Google의 경량 JavaScript 버전에서는 데이터 전송이 필요한 페이지 요소를 AMP 페이지에서 사용할 수 없습니다.

Google 애널리틱스 추적 없음

Google은 서버에 액세스하는 대신 사용자에게 캐시된 버전의 AMP 페이지를 사용합니다. 이것이 AMP 페이지가 빠르게 로드되는 이유 중 하나입니다. 캐시를 사용하면 페이지를 더 빠르게 로드할 수 있지만 GA로 구성하고 AMP 페이지에 별도의 추적 코드를 적용하지 않는 한 Google Analytics는 사용자의 방문을 추적하지 않습니다.

Google 태그 관리자를 사용하여 Google 애널리틱스에서 AMP 페이지를 추적하는 방법은 다음과 같습니다.

AMP 페이지에는 장단점이 있지만 방문자에게 빠르고 최적화된 모바일 경험을 제공하려는 경우 AMP 전문가가 단점을 능가합니다.

다음 섹션에서는 AMP를 사용하여 KPI를 달성하고 ROI를 높인 기업의 사례 연구를 강조할 것입니다.

섹션 4: AMP 성공 사례

모바일 웹 페이지에 대해 이야기할 때 속도는 곧 수익입니다. SOASTA의 연구에 따르면 페이지 로드 시간이 100ms 지연되더라도 전환율이 낮아질 수 있습니다.

AMP가 모바일 웹페이지에 미칠 수 있는 영향을 강조하기 위해 Google은 Forrester Consulting에 AMP를 사용하는 게시자 및 전자상거래 웹사이트 전반에 걸쳐 전체 Economic Impact™ 연구를 의뢰했습니다.

이 연구는 AMP 형식을 사용해 온 4개의 웹 회사를 강조합니다. Forrester는 4개 회사의 결과를 살펴보고 3년 동안 AMP를 구현하여 예상되는 수익을 예측하는 모델을 만들었습니다.

이 모델을 사용하면 월간 사이트 방문 수가 400만이고 이윤이 10%인 웹사이트는 AMP 페이지를 삽입하는 비용을 회수하고 6개월 미만의 기간에 긍정적인 이익을 보기 시작할 것으로 기대할 수 있습니다.

연구에서 수집한 주요 결과는 다음과 같습니다.

• 판매 전환율 20% 증가. 이 연구를 위해 인터뷰한 두 전자 상거래 웹 사이트에서 수행한 A/B 테스트는 Forrester 모델을 기반으로 하여 AMP 페이지의 전환율이 20% 증가하여 연간 수익이 $200,000 이상인 것으로 나타났습니다.
• AMP 사이트 트래픽이 전년 대비 10% 증가했습니다. 사이트 트래픽이 증가하면 추가 판매 및 광고 조회가 발생하며, 모델에 따라 첫 해에 사이트의 연간 수익은 $75,000 이상입니다.
• 방문당 페이지 수가 60% 증가합니다. AMP 페이지는 전자 상거래 및 뉴스 게시자에게 긍정적인 성과를 거두었습니다. 두 게시자 모두 사이트를 방문하는 사람들이 60% 증가했으며 이 사람들이 사이트에서 보낸 시간은 2배이고 재방문자는 0.3% 증가했습니다.

AMP는 비교적 새로운 형식이며 분명히 채택하는 데 약간의 비용이 발생해야 합니다. 그러나 AMP 형식을 구현하는 데 따른 결과는 초기 비용보다 큽니다.

Gizmodo는 AMP 페이지를 사용하여 모바일에서 3배 더 빨라집니다.

Gizmodo는 트래픽의 절반이 모바일 웹사이트에서 발생하는 사용자 경험에 중점을 두고 있습니다. 따라서 독자가 모바일에서 콘텐츠에 참여하기를 원할 경우 웹사이트가 빠르고 명확하도록 하는 것이 필수적입니다.

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP post-click landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:

1. Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
2. Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
3. Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
4. No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.

AMP로 구성된 클릭 후 방문 페이지는 사용자가 모바일 AMP 광고를 클릭할 때 시작하는 간소화된 모바일 경험을 계속하기 위한 프레임워크로 설계되었습니다.

Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated post-click landing pages give a better post-click landing page to visitors because:

• Users will be more willing to click on ads when they know their ad expectations will be met.
• Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
• Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.

Step 1: Create a new page

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

완료하고 게시를 클릭하면 75KB 제한을 초과하는 경우 알림을 받게 됩니다.

유효성이 확인되면 페이지를 게시할 준비가 된 것입니다.

5단계: 게시

WordPress 및 사용자 정의 도메인은 Instapage에서 AMP 클릭 후 방문 페이지를 게시할 수 있습니다. 파란색 게시 버튼을 클릭한 후 다음 방법 중 하나를 선택할 수 있습니다.

WordPress의 경우 웹사이트에서 Instapage 플러그인을 설치 및 로그인하고 새 AMP 클릭 후 방문 페이지를 WordPress에 게시합니다.

그렇지 않으면 도메인 및 하위 도메인을 입력합니다.

페이지가 활성화되는 즉시 대시보드의 페이지 옆에 AMP 로고가 표시됩니다.

모바일 페이지에서 이탈률이 높고 페이지 로드 속도가 느려 방문자 참여가 낮은 경우 AMP 페이지를 만드는 것이 좋은 솔루션입니다.

AMP 프레임워크는 페이지 속도뿐만 아니라 사용자에게 즐거운 모바일 경험을 제공하는 최적화 기술을 배포합니다. AMP 광고 클릭 후 방문 페이지를 만들면 방문자에게 최적화되고 빠르며 관련성 높은 클릭 후 방문 페이지를 제공할 수 있습니다.

Instapage는 현재 Google의 AMP 프레임워크를 사용하여 모바일에 최적화된 클릭 후 방문 페이지를 만들 수 있는 유일한 클릭 후 방문 페이지 플랫폼입니다. AMP로 만든 클릭 후 방문 페이지는 거의 즉시 로드되고 부드러운 스크롤이 가능합니다.

지금 Instapage로 AMP 페이지 만들기를 시작하여 더 나은 모바일 브라우징 경험을 만들고 품질 점수를 높이며 더 많은 전환을 생성하세요.