AMP 구현 방법(꼭 필요한 경우): Accelerated Mobile Pages에 대한 빠른 시작 가이드

검색자와 검색 엔진 모두 웹 페이지가 번개처럼 빠르기를 원합니다. 따라서 페이지 속도가 Google 검색 알고리즘의 순위 요소라는 것은 놀라운 일이 아닙니다.

여러 연구에 따르면 페이지 로드 시간은 사이트의 수익인 전환 및 수익에도 큰 영향을 미칩니다.

Accelerated Mobile Pages(AMP)를 사용하는 것은 휴대기기를 사용하는 사람들을 위해 웹페이지 속도를 높이는 한 가지 방법입니다.

AMP는 Google 검색의 AMP 캐러셀에 표시되고 검색자에게 더 나은 경험을 제공하는 추가 이점을 제공할 수 있습니다.

AMP가 귀하의 사이트에 적합합니까?

원래 AMP 솔루션은 미디어 사이트용이었습니다. Google은 뉴스 기사가 검색 결과에서 거의 즉시 표시되도록 하고 싶었습니다.

시간이 지남에 따라 AMP는 다른 유형의 사이트, 특히 광고주, 광고 기술 플랫폼, 전자 상거래 사이트 및 게시자로 확산되었습니다.

오늘날 일부 웹사이트는 AMP 구현의 이점을 누리고 있습니다. 소매업체 및 기타 여러 업체에서 AMP를 사용하여 랜딩 페이지를 빠르게 제공합니다. 그리고 이 형식의 광고는 더 잘 볼 수 있습니다.

웹페이지를 더 빠르게 만드는 방법을 찾고 있다면 AMP 가 적합할 수 있습니다.

이미 충분히 반응적이고 빠른 웹페이지에는 AMP가 전혀 필요하지 않습니다. Google의 Gary Illyes는 이를 공개적으로 말했습니다. 그리고 이 비디오 클립에서 그 이유를 설명합니다.

AMP 구현의 대안은 무엇입니까?

• 콘텐츠 전송 네트워크 . CDN은 사이트에서 가장 무거운 리소스 파일을 최종 사용자에게 더 가까이 가져오는 방식으로 작동합니다. 이동 거리가 짧을수록 배송이 빨라지므로 모바일 장치에서 페이지가 더 빨리 표시됩니다.
• 완전히 구현된 HTTP/2 . HTTP/2 프로토콜은 웹에서 데이터 전송 속도를 높입니다. 따라서 시장에 4G 또는 5G 인터넷 속도가 있고 웹사이트가 HTTP/2를 지원하는 경우 AMP가 전혀 필요하지 않을 수 있습니다.
• 프로그레시브 웹 앱 기술 . PWA를 사용하면 웹사이트가 기본 모바일 앱처럼 작동할 수 있습니다. 우리는 이전에 이에 대해 쓴 적이 있습니다(프로그레시브 웹 앱이란 무엇입니까? 참조).

다음은 그 HTTP/2 문을 설명하는 이야기입니다.

컨설팅 고객 중 하나인 미국 회사는 수천 개의 웹페이지를 AMP로 전환했습니다. 4명의 직원이 프로젝트를 완료하기 위해 5주 동안 작업했습니다.

결과? 그들의 AMP 페이지는 모바일 검색자들에게 약간 더 빠르게 표시되었습니다. 그러나 웹사이트의 순위와 트래픽은 영향을 받지 않았습니다. 돌이켜보면 그들의 시간과 노력을 새로운 콘텐츠를 만드는 데 더 많이 썼을 것입니다.

AMP 솔루션은 네트워크 속도가 느린 국가/지역에서 가장 적합합니다. 예를 들어, Bruce Clay India 사무소는 일부 고객을 위해 AMP를 구현하여 좋은 결과를 얻었습니다.

AMP가 자신에게 적합하고 시작할 준비가 되었다면 기본적인 첫 번째 단계를 간략하게 설명하겠습니다.

Accelerated Mobile Pages를 구현하는 방법

웹사이트에 Accelerated Mobile Pages를 구현하고 결과를 추적하려면 다음 세 가지 기본 단계가 있습니다.

1. AMP 페이지 템플릿을 만듭니다.
2. AMP 페이지를 롤아웃합니다.
3. 분석으로 추적합니다.

아래에서 각 단계를 자세히 살펴보고 자세한 내용은 AMP 설명서에 링크하겠습니다.

사이트의 어느 부분을 AMP로 지정해야 하는지 결정했으면 다음은 AMP 페이지를 생성, 게시 및 추적하는 기본 단계입니다.

1. AMP 페이지 템플릿 만들기

AMP 구현의 첫 번째 단계는 웹페이지 템플릿을 만드는 것입니다.

AMP는 다양한 게시 플랫폼과 통합됩니다. AMP의 빠른 시작 가이드에서 목록을 보고 콘텐츠 관리 시스템을 선택하여 자세한 내용을 확인할 수 있습니다.

AMP 템플릿을 처음부터 구축할 수 있습니다. 또는 기존 HTML 페이지를 AMP 형식으로 변환할 수 있습니다. 설명서는 모든 옵션에 대한 정보를 제공합니다.

AMP 템플릿 생성을 위한 포인터:

• AMP용 페이지 템플릿을 만들 때 AMP 사양을 충족하는지 확인하세요. AMP 사양 페이지에서 HTML 형식 등에 대한 지침을 찾을 수 있습니다.
• 페이지의 스타일을 지정할 때 JavaScript를 마음대로 사용할 수 없습니다. 레이아웃을 보기 좋게 만드는 데 필요한 만큼 맞춤 <amp*> 태그를 포함합니다. 여기에는 반응형 이미지, 비디오 및 오디오 사용이 포함됩니다(자세한 내용은 AMP 교체 참조).
• 간단하게 유지하세요. 결국 AMP의 요점은 깨끗하고 제거된 웹페이지를 만드는 것입니다.
• 각 페이지에 도메인 탐색을 포함합니다. 로고, 이미지 또는 텍스트에서 링크할 수 있습니다. AMP 페이지는 Google 캐시에서 제공되기 때문에 검색자에게 링크를 제공하는 것은 웹사이트에서 검색을 시도하고 유지하는 데 필수적입니다.
• 웹페이지에 광고를 계속 게재해야 하는 경우 광고를 마이그레이션해야 합니다. amp-ad 구성요소를 사용합니다. <amp-ad>를 사용할 수 없는 경우 AMP 템플릿에 광고를 포함하지 마십시오. (AMP 광고에 대한 자세한 내용은 여기에서 읽을 수 있습니다.)
• 마지막으로 AMP 페이지를 확인합니다. 단 한 번의 오류 또는 경고로 인해 페이지가 AMP 캐시에서 제외됩니다. 따라서 유효성 검사는 중요한 단계입니다. 이 페이지에서 일반적인 유효성 검사 오류를 확인하십시오.

AMP 프로젝트에서 제작한 이 동영상은 페이지를 확인하는 방법을 설명합니다.

2. AMP 페이지 롤아웃

저는 먼저 AMP에서 귀하의 웹사이트에서 한두 가지 유형의 페이지를 테스트한다는 아이디어를 좋아합니다. 이상적으로는 Google이 모바일 검색 결과에서 AMP 버전을 제공하는지 확인할 수 있도록 순위가 매겨진 페이지를 포함하는 것이 좋습니다.

사이트의 크롤링 속도에 따라 Google에서 페이지의 AMP 버전을 찾고 확인하고 색인을 생성하는 데 며칠이 걸릴 수 있습니다.

출시를 최소 한 달(가능한 경우 더 오래) 동안 실행합니다. 페이지에 트래픽이 발생하는 한 사이트 전체에 AMP를 배포하는 것이 그만한 가치가 있는지 확인하기에 충분한 데이터를 구축할 수 있습니다.

3. 분석으로 추적

AMP 페이지의 성능을 추적하고 싶을 것입니다. AMP 분석은 일반 Google Analytics와 다르므로 이 가이드를 읽고 작동 방식을 이해하세요.

사내 또는 타사 분석을 통해 페이지를 추적할 수 있습니다. 많은 분석 공급업체에는 amp-analytics에 대한 기본 제공 구성이 있습니다.

간단한 추적에는 amp-pixel을 사용하고 다른 모든 작업에는 amp-analytics를 사용할 수 있습니다.

추적을 설정할 때의 기술 권장 사항:

• 표준 URL 및 기타 변수를 사용하여 기록할 항목을 정의해야 합니다. 이는 AMP로 인한 트래픽 증가 또는 감소를 이해하는 데 필수적입니다.
• amp-analytics에서 extraUrlParams 속성을 사용하여 "type=amp" 또는 이와 유사한 것과 같은 표준 URL에 쿼리 문자열 매개변수를 추가합니다. 이렇게 하면 분석에서 AMP 페이지를 일반 웹페이지와 쉽게 구분하거나 필요한 경우 맞춤 세그먼트를 만들 수 있습니다. 이렇게 하면 AMP 출시 전후 페이지의 총 트래픽을 비교할 수 있습니다.

참고 사항: Accelerated Mobile Pages 작동 방식

AMP 페이지가 즉시 로드되는 것처럼 보일 수 있는지 궁금하다면 일반 웹페이지와 다르게 최적화되어 있기 때문입니다.

브라우저에서 페이지를 표시하기 위해 수행해야 하는 작업의 양을 줄이기 위해 AMP가 수행하는 최적화를 아래에 요약했습니다. (AMP 프로젝트 사이트에서 전체 목록을 확인하세요.)

AMP 프로세스가 수행할 수 있는 작업은 다음과 같습니다.

• 비동기 JavaScript만 실행 – 큰 파일이 로드될 때까지 기다리지 않습니다.
• 리소스(예: 이미지, 광고 및 iframe)를 정적으로 크기 조정 – 브라우저는 처음부터 페이지가 어떻게 배치될지 정확히 알고 있습니다.
• 확장 프로그램이 렌더링을 차단하도록 허용하지 마십시오. 확장 프로그램이 와도 페이지가 기다릴 필요가 없습니다.
• 타사 JavaScript를 중요한 경로에서 제외 – 광고와 같은 항목은 샌드박스 iframe으로 제한됩니다.
• 인라인 CSS만 허용 – 부풀려진 CSS 파일은 페이지를 지연시키지 않습니다.
• 글꼴 다운로드가 시작될 때까지 HTTP 요청 없음 – 글꼴을 효율적으로 유지합니다.
• 스타일 재계산 최소화 – 모든 DOM 읽기는 페이지 레이아웃을 위해 먼저 발생합니다.
• GPU 가속 애니메이션만 실행 – 그래픽 처리 장치가 시각적 애니메이션(변환 및 불투명도)을 처리하여 CPU의 부담을 줄입니다.
• 리소스 로드 우선 순위 지정 – 가장 중요한 리소스(스크롤 없이 볼 수 있는 부분)가 먼저 다운로드됩니다.
• 미리 렌더링된 콘텐츠를 통해 페이지 로드 – 스크롤 없이 볼 수 있는 콘텐츠는 사용자가 선택하기 전에도 사용할 수 있으므로 클릭하면 즉시 표시됩니다.

이 동영상은 AMP가 웹페이지 속도를 높이는 방법을 설명합니다.

결론

AMP는 웹페이지 속도를 높이고 모바일 사용자에게 더 나은 경험을 제공할 수 있는 한 가지 방법입니다.

웹페이지를 확장할 준비가 되었다면 이 문서의 기본 단계와 AMP 설명서를 따라 시작하세요. Google의 AMP 로드쇼 워크숍에 참석할 수도 있습니다(여기에서 전 세계 일정 참조).

그러나 대부분의 사이트에 대한 제 조언은 다음과 같습니다. 재고해보십시오.

비즈니스에 중요한 경우가 아니면 AMP를 구현하지 마십시오.

웹 페이지를 다른 형식으로 변환하는 데 투자하는 시간은 모든 사용자에게 서비스를 제공할 좋은 콘텐츠를 만드는 데 더 잘 사용할 수 있습니다.

모바일 최적화 방법에 대해 더 자세히 알고 싶으시다면 사용 가능한 모바일 SEO 서비스를 확인하십시오!

이 게시물을 공유하도록 초대합니다. 받은 편지함으로 무료로 전달되는 향후 새 게시물을 받으려면 블로그를 구독하십시오.