웹에는 약 150만 개의 가속 모바일 페이지(AMP)가 있습니다.

AMP는 로드 시간을 개선하는 데 도움이 될 뿐만 아니라 불필요한 JavaScript, CSS 및 지연 로드를 제거합니다. 다양한 조직이 깨끗하고 간소화된 웹 페이지를 개발하고 페이지 속도를 3배로 늘리는 데 도움이 되었습니다.

이 기사에서는 AMP의 구성 요소, 작동 방식, 이점, 제한 사항, 프로그레시브 웹 앱(PWA) 및 반응형 웹 디자인과 비교하여 AMP의 위치에 대해 알아봅니다.

AMP란?

더 잘 이해하기 위해 AMP가 무엇인지 살펴보겠습니다.

세 가지 핵심 구성 요소와 최적화 기술의 조합은 초고속 사용자 경험을 보장합니다.

AMP의 핵심 구성 요소

AMP는 HTML, JavaScript 및 캐시의 세 가지 요소로 구성됩니다.

AMP HTML

AMP HTML은 AMP 관련 태그도 포함한다는 점에서 일반 HTML 태그와 다릅니다. 맞춤 태그라고도 하는 이러한 태그를 사용하면 코드에서 AMP를 쉽게 실행할 수 있습니다.

AMP HTML은 웹사이트의 안정적인 성능을 위해 일부 HTML 코드를 제한합니다. Google 검색 엔진 및 기타 플랫폼은 HTML 태그를 통해 AMP를 인식합니다.

AMP 자바스크립트

AMP JavaScript 라이브러리는 AMP HTML 페이지의 빠른 렌더링을 보장하기 위해 AMP 권장사항을 구현합니다. 모범 사례에는 인라인 CSS 및 글꼴 트리거가 포함됩니다.

외부 리소스의 모든 것은 렌더링 지연을 방지하기 위해 AMP JS와 비동기식으로 만들어집니다. AMP JS는 또한 느린 CSS 선택기를 비활성화하고 리소스를 로드하기 전에 페이지 요소를 미리 계산하여 페이지 성능을 개선합니다.

AMP 캐시

캐싱은 페이지 성능을 향상시키는 잘 알려진 기술입니다. AMP는 유효한 AMP 문서에 대해 AMP 캐시 형태의 프록시 기반 콘텐츠 전송 네트워크를 활용합니다.

AMP 캐시는 자체 유효성 검사 시스템과 함께 제공됩니다. 시스템은 AMP HTML 사양에 대해 페이지의 마크업을 검증하는 일련의 어설션을 사용합니다.

검증 시스템의 별도 버전은 검증 오류를 브라우저 콘솔에 직접 기록하여 성능과 UX에 영향을 미치는 코드 변경 사항을 볼 수 있도록 합니다.

최적화 기술

이제 AMP 프레임워크를 구성하는 핵심 구성요소를 알았으므로 페이지를 빠르게 로드할 수 있도록 하는 최적화 기술을 살펴보겠습니다.

비동기 자바스크립트 실행

JavaScript는 페이지 렌더링을 지연시키고 DOM 구성을 차단하는 경향이 있기 때문에 AMP는 비동기 JavaScript만 허용합니다. JavaScript가 렌더링을 지연시키지 않는지 확인하는 것이 중요합니다. 그렇지 않으면 페이지의 로드 속도에 직접적인 영향을 미칩니다.

모든 리소스의 정적 크기

AMP는 리소스가 로드되기 전에 각 요소의 크기와 위치를 결정하는 것을 좋아합니다. 이것이 이미지나 광고와 같은 외부 리소스가 HTML 크기를 명시해야 하는 이유입니다. AMP는 이 정보를 활용하여 리소스가 다운로드될 때까지 기다리지 않고 페이지의 레이아웃을 로드합니다.

확장 메커니즘

AMP는 속도를 위해 불필요한 자바스크립트, CSS 및 HTML을 많이 차단하지만 라이트박스 및 소셜 미디어 삽입과 같은 요소에 대한 확장을 허용합니다.

타사 JavaScript를 사용하지 않음

타사 JavaScript는 동기 로드로 인해 로드 시간을 늦춥니다. AMP 페이지는 JavaScript를 허용하지만 샌드박스 처리된 iframe에서만 가능합니다. 샌드박싱으로 인해 Javascript는 기본 페이지의 실행을 차단할 수 없습니다.

인라인 및 크기 제한 CSS

CSS는 팽창을 유발하는 경향이 있으며 렌더링도 지연됩니다. AMP HTML은 인라인 스타일을 사용하여 웹페이지에 대한 많은 HTTP 요청을 제거합니다. 인라인 CSS용으로 50KB가 열려 있어야 하며 이는 정교한 웹 페이지를 위한 충분한 공간입니다.

효율적인 글꼴 트리거링

일반적인 페이지는 동기화 스크립트와 몇 가지 외부 스타일로 구성됩니다. 브라우저는 스크립트가 로드될 때까지 글꼴을 다운로드하지 않습니다.

GPU 가속 애니메이션만 실행

무거운 애니메이션에는 GPU 가속이 필요합니다. GPU는 레이어에서 모든 작업을 수행합니다. 그러나 GPU는 페이지 레이아웃을 업데이트할 수 없습니다. 그것은 속도 관점에서 효율적이지 않은 웹 브라우저에 작업을 제공합니다.

리소스 로딩의 우선 순위

AMP가 빠른 속도를 유지하는 한 가지 방법은 리소스 로드의 우선 순위를 지정하는 것입니다. 필요한 만큼만 리소스를 로드하고 지연 로드된 리소스도 미리 가져옵니다.

페이지의 즉각적인 로딩

AMP는 사용자가 탐색하려는 페이지를 가리키기도 전에 렌더링되기 때문에 즉시 로드됩니다. 이것은 많은 대역폭이나 CPU를 사용하지 않고 AMP 사전 연결 API를 통해 가능합니다.

AMP의 이점

앱 페이지가 표준보다 빠르게 로드되면 사용자 경험이 향상됩니다. 다양한 장치와 플랫폼에서 웹 경험을 향상시킵니다. 이러한 혁신으로 인해 AMP에는 많은 이점이 있습니다.

더 많은 고객 참여

웹사이트 방문자는 필요한 정보를 즉시 얻을 수 있습니다. 이는 AMP의 중간 로드 시간이 1초 미만이기 때문에 가능합니다. 이러한 짧은 로드 시간은 페이지 참여도를 높이고 방문자가 CTA에 따라 행동할 가능성을 높입니다.

수익 극대화

1초의 다운타임이 대기업의 시장 가치의 운명을 결정할 수 있는 것처럼 웹사이트에서 1초 지연은 전환율을 12% 감소시킵니다. AMP는 웹사이트, 광고 및 클릭 후 방문 페이지에서 더 빠른 사용자 경험을 제공합니다.

유연성 유지

AMP를 사용하면 최적화된 웹 컴포넌트를 사용할 수 있습니다. CSS를 사용하여 웹 페이지에서 데이터를 검색하고 스타일링한 다음 A/B 테스트를 수행하여 최상의 사용자 경험을 보장할 수 있습니다.

복잡성 감소

AMP 생성 프로세스는 간단하고 간단합니다. CMS 아카이브를 포함하여 전체 아카이브를 AMP로 쉽게 변환할 수 있습니다. AMP 페이지를 최적화하기 위해 특별한 기술이 필요하지 않습니다.

ROI 극대화

AMP 페이지가 생성되면 동시에 다른 플랫폼에 배포됩니다. AMP의 이 기능을 사용하면 AMP 페이지와 AMP가 아닌 페이지 모두에서 광고를 사용할 수 있습니다. 따라서 광고를 구축하고 모든 플랫폼에서 브랜드 경험을 제공하여 광고 예산 ROI를 극대화할 수 있습니다.

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

오픈 소스 프로젝트인 AMP는 더 빠르고 더 나은 사용자 경험을 제공하기 위해 노력하는 앱을 구축하는 것을 목표로 합니다. 모바일 앱과 웹사이트에 AMP를 배포하여 지속 가능한 미래의 일부가 될 수 있습니다.

사용자 경험 개선

궁극적인 목표는 더 나은 사용자 경험을 구축하는 것입니다. AMP를 사용하면 로드 시간을 15~85% 더 빠르게 할 수 있습니다. 1초의 개선을 의미하더라도 AMP를 사용해 볼 가치가 있습니다. UX가 얼마나 개선되는지에 놀랄 것입니다.

SEO 부스트

웹사이트 순위를 매길 때 Google의 알고리즘은 페이지 로딩 속도와 모바일 응답성을 인식합니다. 모바일 웹사이트의 로드 시간은 페이지 순위를 결정하는 데 도움이 됩니다. 로드가 빠를수록 검색 엔진 결과 페이지에서 순위가 ​​높아집니다.

AMP 최적화 페이지에는 제목 아래에 빠른 로딩 속도를 나타내는 녹색 번개 아이콘이 있습니다. AMP 지원 페이지는 SERP의 유료 광고 위에 캐러셀 형식으로도 표시됩니다.

AMP의 제한 사항

의심할 여지 없이 AMP 페이지는 많은 이점을 제공하지만 간과할 수 없는 몇 가지 단점이 있습니다. 다음은 그 중 몇 가지입니다.

타사 JavaScript 없음

AMP는 JavaScript를 제한하므로 개발자는 분석 기능을 추적할 수 없습니다. 결과적으로 맞춤형 사용자 경험을 제공하기가 어려워집니다.

Google 애널리틱스 추적 없음

AMP가 더 빠른 이유도 AMP가 Google 분석을 사용하는 것을 제한합니다. Google은 서버에서 페이지를 로드하는 대신 캐시된 버전의 AMP를 사용합니다. GA 구성을 만들고 별도의 추적 코드를 사용하지 않는 한 방문자 수를 추적하지 않습니다.

AMP와 기타 최적화된 프레임워크

AMP는 모바일 페이지의 로드 시간을 단축하는 혁신적인 방법이지만 최적화된 프레임워크만 있는 것은 아닙니다. 대안에 반대하는 방법은 다음과 같습니다.

AMP 대 Facebook 인스턴트 아티클

AMP 페이지와 Facebook 인스턴트 아티클 모두 정보 로드 프로세스의 속도를 높입니다. AMP 페이지가 웹 대안에 비해 더 인기가 있지만 Facebook 인스턴트 아티클의 참여율과 속도는 AMP보다 훨씬 높습니다. Facebook이 텍스트 및 비디오 기사의 우선 순위를 지정하기 시작하여 개발자가 인스턴트 기사 사용을 중단했기 때문입니다.

AMP 대 반응형 웹 디자인

2015년 구글이 모바일 친화적 알고리즘(mobilegeddon이라고 하는 이벤트)을 출시한 이후로 모바일 웹사이트는 웹 애플리케이션을 지배해 왔습니다. 반응형 웹 디자인으로 만든 모바일 웹 페이지는 다양한 화면 크기와 방향에 대한 유연한 형식을 제공합니다.

반면 AMP는 웹페이지 로딩 속도를 높이기 위해 2016년에 나왔다. 두 페이지 모두 코딩 부분에 Javascript와 HTML을 사용하지만 AMP는 일반적으로 속도에 더 중점을 두고 인스턴트 콘텐츠 렌더링도 도입했습니다.

AMP는 웹페이지를 재설계할 필요 없이 기존 반응형 웹사이트와 결합하지만, 반응형 웹페이지를 개발하여 다른 웹페이지와 결합하기 위해서는 재설계가 필요합니다. 반응형 웹 디자인은 속도보다는 웹 페이지를 확장합니다. AMP에는 반응형 웹 디자인 페이지보다 훨씬 빠르게 웹 페이지를 로드할 수 있는 제한된 기능이 있습니다.

AMP 대 PWA

AMP는 속도에 최적화되어 있는 반면 PWA(프로그레시브 웹 애플리케이션)는 웹사이트의 모양과 느낌을 강조합니다. PWA는 사용자 경험을 방해하지 않고 웹 페이지를 동적으로 업데이트합니다.

AMP와 PWA를 함께 사용하면 빠른 페이지 렌더링 프로세스로 동적 웹사이트를 만들 수 있습니다.

모바일 페이지 AMP

AMP, Facebook Instant Articles 및 PWA와 같은 최적화된 프레임워크의 범위를 사용하면 모바일 페이지에서 참여도가 낮고 이탈률이 높다는 변명의 여지가 없습니다. AMP 최적화 기술을 활용하여 강력한 경험을 제공하고 Google의 속도 기대치를 충족하세요.

AMP를 사용하여 웹사이트를 최적화하시겠습니까? 모바일 개발 플랫폼도 있어야 합니다 . G2에서 사용 가능한 모든 옵션을 참조하십시오.