Google의 AMP : Accelerated Mobile Pages를위한 재미 있고 사용자 친화적 인 가이드

비디오를보십시오. 사본을 무시하십시오.

새로운 AMP (Accelerated Mobile Pages) 프로젝트 전용 Google 사이트를 방문하면 다음과 같이 조언합니다.

"AMP (Accelerated Mobile Pages) 프로젝트는 게시자가 모바일에 최적화 된 콘텐츠를 한 번만 만들어 어디서나 즉시로드 할 수 있다는 비전을 구현하는 오픈 소스 이니셔티브입니다."

개발자가 아니고 사본을 읽으면 전문 용어로 산 채로 삼켜 질 것입니다.

그러나 비디오를 보면 AMP가 무엇인지 거의 즉시 이해할 수 있습니다 (재미있는 Spinal Tap 참조는 말할 것도없고 아래 참조).

또는 AMP에 대해 읽은 것 중 가장 재미 있고 콘텐츠 마케팅에 어떤 영향을 미치는지이 가이드를 읽을 수도 있습니다.

약속합니다.

Google의 AMP 프로젝트는 무엇입니까?

2011 년 Google의 Zero Moment of Truth 철학이 탄생 한 이래로 그들이 "모바일 웹의 성능을 대폭 향상"시키고 자하는 것은 비밀이 아닙니다.

그리고 모바일 웹에서 콘텐츠 성능에 작은 문제가 있다고 말할 필요가 없습니다.

모바일 장치가있을 가능성이 있습니다. 그리고 검색 결과 페이지, 소셜 미디어 사이트 또는 이메일받은 편지함에서 해당 장치의 링크를 클릭했을 가능성이 있습니다. 콘텐츠를 사용하고 싶어합니다.

그러나 결코 오지 않습니다.

글쎄요,하지만 페이지가로드됨에 따라 삐걱 거리는 삐걱 거리는 이미지, 동영상, 광고의 경련을 일으키고 있습니다. 당신은 공포에 떨고, 눈이 커지고, 화장실에 가야하는 사람처럼 지하철 좌석에서 맴돌고 있습니다.

"얼마나 걸릴까요?" 당신은 특별히 누구에게도 외치지 않습니다.

누가 알겠지만, 인구의 40 %처럼 당신은 로딩 페이지에서 3 초 안에 보석금을 낼 것이기 때문에 결코 알 수 없을 것입니다. 그러면 내 검은 고양이 Apollo Monkeystrap처럼“Le sigh”라고 말할 것입니다.

구글이 AMP로 없애고 싶은 것은 참을 수없는 모바일 순간이다.

AMP는 페이지를 얼마나 빠르게 만들까요?

1에서 10까지의 척도에서 하나는 "전혀로드되지 않음"이고 10 개는 "1 초에로드 중"입니다. AMP 콘텐츠는 페이지 속도 11로로드됩니다 (이것이 제가 경고 한 Spinal Tap 참조입니다).

하지만 진지하게, 얼마나 빠릅니까?

Pinterest의 소프트웨어 엔지니어 인 Jon Parise는 "Accelerated Mobile Pages는 기존 모바일에 최적화 된 페이지보다 4 배 더 빠르게로드되고 8 배 적은 데이터를 사용합니다."라고 말했습니다.

4 배 빠르면 좋다! 그러나 그것은 당신에게 어떤 의미가 있습니까? 우리의 친절한 지하철 통근자가 휴대 전화에 웹 페이지를 다운로드하려고 시도하고 있습니까?

NiemanLab에 따르면 AMP에 최적화 된 New York Times 기사는 모바일에서 2.99 초 만에 완전히 다운로드됩니다. 비교를 위해 빠른 iMac의 Chrome 테스트에서 해당 페이지의 데스크톱 버전은 3.82 초가 걸렸습니다 (모바일 버전이 더 빠름).

모르는 경우 NYTimes.com은 Saturn의 이쪽에서로드 속도가 가장 느린 모바일 뉴스 웹 사이트 중 하나로 악명이 높습니다.

그들은 그 이후로 그것을 고쳤습니다.

충분히 빠르다고 확신하십니까?

그러나 잠깐, 2.99 초는 우리 지하철 통근자가 기꺼이 기꺼이 기다릴 시간 프레임의 상한선에 있습니다. 그는 인구의 40 %처럼 3 초 만에 보석금을 냈습니다. 2.99 초가 가까워지고 있습니다! 그것은별로 개선되지 않았습니다.

사실이지만 차이점은 데스크톱에서 AMP가 아닌 첫 번째 시나리오에서 페이지가 3 초 후에도 계속로드 된다는 것입니다. 시나리오의 AMP 버전에서는 2.99에서 완전히 다운로드 되었습니다.

더 중요한 것은 AMP 버전이 0.857 초 만에 'domContentLoaded — HTML이 완전히 다운로드되고 특정 중요한 파싱이 완료된 웹 페이지로드의 핵심'에 도달했다는 것입니다.

눈 깜빡이는 데 약 0.33 초가 걸립니다.

즉, 두 번 눈을 깜빡이면 지하철 통근자 인 귀하가 AMP 덕분에 거의 즉시 콘텐츠의 유용한 부분을 읽을 수 있습니다.

기존 모바일 페이지가 그렇게 느리게로드되는 이유는 무엇입니까?

알고 있다고 생각합니다.하지만 저는 개발자, 디자이너 또는 프로그래머가 아니기 때문에 (그리고 그 분야가 다른지 확실하지 않은 경우에도) 여기 Rainmaker Digital의 개발자 중 한 명인 Mike Hale에게 번역을 도와달라고 요청했습니다.

Mike는 데스크톱 사이트가 모바일 브라우저로 들어가면 수십 개의 정보 패킷이 종종 서로 다른 호스트에서 모바일 브라우저로 "호출"됩니다.

위의 느리고 느린 New York Times 예제에서 한 기사에는 "192 개의 요청이있을 수 있으며, 일부는 Times의 호스트에게, 대부분은 많은 스크립트를 호스팅하는 다른 서버에 대한 것입니다."

가장 유용한 부분은 클릭 후 5 초 안에 다운로드되지만 나머지 부분은 여전히 ​​들어 오므로 브라우저가 설정 한 다음 재설정 될 때 화면이 튀어 나옵니다.

그래도 길을 잃은 채 마이크를 압박했습니다. 무엇 호출되는거야?! "

Mike는 모바일이 소셜 플러그인, 이미지 캐 러셀, SlideShares 및 비디오에 대한 스크립트를 호출 할 수 있다고 말했습니다. 그리고 아마도 백그라운드에서 실행되는 분석 소프트웨어, 광고 및 추적 스크립트가있을 것입니다.

현명하고 일상적인 일이지만 합산됩니다. 그리고 빠르게.

문제는 모바일 장치에이 문제를 빠르게 처리 할 수있는 처리 능력이 없다는 것입니다.

이 그림은 모바일 콘텐츠의 문제를 설명합니다.

은행에 가서 창구 직원에게 다가 가서 100 달러를 요청했지만, 1 달러 지폐 15 개, 5 달러 지폐 3 개, 10 달러 지폐 5 개, 20 달러 지폐 1 개와 같이 특이한 순서로 요청했다고 상상해보십시오.

은행이 지금 모바일 웹처럼 운영된다면, 창구 직원은 각 청구서를 개별적으로 제공하기 위해 여러 번 여행을 할 것입니다.

각각의 여행은“전화”입니다.

그러나 은행이 AMP로 최적화 된 경우 창구 직원은 한 번에 모든 청구서를 제공합니다. 또한 그는 특정 청구서에 대한 특정 요청을 무시하고 100 달러 청구서를 전달합니다.

AMP는 브라우저의 요청을 단순화하는 것을 목표로합니다.

마이크는“호출 할 수있는 유일한 스크립트는 AMP 자바 스크립트입니다. “모든 것이 하나의 번들로 포장됩니다. 나는 당신에게 모든 것을 한꺼번에 건네줍니다.”

Yoast가 AMP 모바일 콘텐츠를 설명하는 방법은 다음과 같습니다.

“이것을 경주 용 자동차와 비교해 봅시다. 경주 용 자동차를 더 빠르게 만들고 싶다면 더 빠른 엔진을 제공하고 모든 무게를 줄여야합니다. 이 웨이트 스트리핑에서는 뒷좌석, 에어컨 등과 같은 것도 제거합니다. AMP는 그와 다르지 않습니다. Google은 멋진 기능보다 속도를 더 중요하게 생각하기 때문에 일반 웹의 축소 버전입니다. "

마지막 줄에서 그 쓴맛을 느끼십니까? 그것은 당신의 상상력이 아닙니다. 우리는 잠시 후에 그것에 대해 알아볼 것입니다. 먼저 제가 의미하는 바를 이해하는 데 도움이되는 AMP 경험을 살펴 보겠습니다.

AMP에 최적화 된 모바일 콘텐츠는 어떤 모습입니까?

다행히 AMP 뉴스 콘텐츠의 데모를 테스트 할 수 있습니다.

1. 스마트 폰을 꺼내십시오.
2. 브라우저 (모든 브라우저)를 엽니 다.
3. g.co/ampdemo를 입력합니다.
4. Google 검색 창에 "Justin Bieber Birthday", "Jennifer Lawrence"또는 "Yoko Ono"와 같은 인기 키워드 구문을 입력합니다.
5. "보내기"를 누르십시오.

다음은 결과가 표시되는 방식의 예입니다.

보시다시피 AMP 콘텐츠가 가장 많이 청구됩니다. 스크롤없이 볼 수있는 부분 위에있는 캐 러셀에 있습니다. 표준 항목이 그 아래에 있습니다.

해당 캐 러셀을 스크롤하여 원하는 AMP 기반 기사를 찾으면 클릭하세요. 다음과 같이 보일 것입니다.

재미있는 독서,에!

Google이이 작업을 수행하는 이유와 관심을 가져야합니까? (일종의)

이것이 이상 해지는 곳입니다.

위에서 언급했듯이 Google은 지난 5 년 동안 모바일 웹 성능 최적화에 집착 해 왔기 때문에 엄청나게 빠른 웹 사이트 속도의 중요성에 대해 글을 써 왔습니다 (해당 기사에는 사이트 속도를 테스트 할 수있는 6 가지 도구가 있습니다. 그건 그렇고) 오랫동안.

이것이 바로 작년에 Google의 모바일 업데이트 인 "Mobilegeddon"에 대해 경고 한 이유입니다.

이 시점에서 AMP는 모바일 웹 최적화에 대한 Google의 초점의 정점에 불과하지만 게시자에게 어떤 도움이 될까요?

단순하게 들리지만 Google은 사용자가 콘텐츠를 좋아한다고 생각합니다. 그들은 빠른 콘텐츠를 좋아합니다. 빠른 콘텐츠를 더 빨리 제공할수록 더 많은 콘텐츠를 사용할 수 있습니다.

하지만이 움직임에는 다른 것이 있습니다. 구글은 뉴스 소비 전쟁에서 승리하기 위해 노력하고 있습니다.

AMP는 Instant Articles 및 Apple News와 어떻게 다릅니 까?

작년에 Apple과 Facebook은 사용자가 뉴스 기사를 사용할 수있는 애플리케이션 인 Apple News 및 Instant Articles를 출시했습니다.

이 두 애플리케이션은 모두 독립형 제품입니다.

Adobe XD 팀의 선임 경험 개발 엔지니어 인 Christian Cantrell은 Smashing Magazine에 "독점 신디케이션 형식 위에 구축 된 사용자 지정 렌더러가있는 멋진 뉴스 수집기입니다."라고 썼습니다.

즉, Instant Articles와 Apple News가 RSS로 다시 태어났습니다.

반면에 Google은 게시자에게 곧바로 이동하여 오픈 웹에서 사용할 수 있도록 모바일 콘텐츠를 최적화하도록하여 앱에서 얻을 수없는 간편한 입력과 쉬운 배포를 가능하게합니다.

지금까지 몇몇 유명 언론사가 참여했습니다.

• 타임 Inc.
• 대서양
• 소리
• BBC
• 허 핑턴 포스트

WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn 및 Pinterest와 같은 많은 기술 회사도 합류했습니다.

AMP에 대한 두 가지 일반적인 불만

불만은 적어도 두 가지 종류가 있습니다.

1. 비방하는 사람들은 모바일 콘텐츠가 할 수있는 일에 대한 제한을 싫어합니다.
2. 비방하는 사람들은 소규모 출판사가 처벌받을 것이라고 한탄합니다.

Yoast는 첫 번째 범주에 속합니다. Joost de Valk는“AMP는 HTML 페이지에서 수행 할 수있는 작업을 제한합니다. 멋진 디자인은 속도를 위해 제거되었습니다. AMP는 양식 프로젝트에 대한 기능입니다. "

영향을받는 것은 외모 만이 아닙니다. 기본적으로 AMP는 양식을 지원하지 않습니다. 즉, AMP 페이지는 이메일 목록을 늘리는 데 도움이되지 않습니다. 사용 가능한 기술 해결 방법이 있지만 상황이 아직 너무 새롭기 때문에 어떻게 진화할지 알 수 없습니다.

대부분의 대규모 게시자가 AMP를 사용하고 있음을 알 수 있지만 AMP가 소규모 게시자에게 피해를 줄 수 있다는 의미입니까?

Search Engine Land의 Paul Shapiro는 다음과 같이 말했습니다.

“경험있는 개발자가 집중적 인 성능 최적화를 통해 유사한 결과를 얻을 수 있지만 게시자는 리소스 제약으로 인해이를 무시하는 경우가 많습니다. AMP를 사용하면 기본 모바일 웹 환경을 변경하지 않고도 이러한 최적화를 쉽게 수행 할 수 있습니다. "

AMP는 모바일 경험을 최적화하기위한 견고한 도구임이 입증 될 수 있습니다. 그렇다면 AMP를 사용해야합니까?

누가 AMP에 대해 걱정해야합니까?

때에 따라 다르지.

• 당신은 뉴스의 거대 출판사입니까? 모바일 사용자 경험을위한 확실한 전략이 없다면 당황합니다. 몇 달 전에 이미 가지고 있었어야했지만 헤이.
• 모바일에서 상당한 트래픽 소스를 얻습니까? 다시 말하지만, 모바일 경험을위한 전략이 확고한 지 확인해야합니다. AMP가 어떻게 개발되는지보고보고 싶을 수 있지만 몇 가지 실험 해 볼 가치가 있습니다.
• 경쟁이 심하지 않은 새로운 시장에 있습니까? 앞으로 30 일 이내에 모바일 콘텐츠를 최적화해야하지만 당황하지 마십시오.
• 위의 카테고리에 해당하지 않습니까? 그런 다음 손에 앉아 무슨 일이 일어나는지 모니터링하십시오.

우리의 최고 제품 책임자이자 StudioPress 창립자 인 Brian Gardner는 "확실히 출판사의 레이더를 지켜야 할 것"이라고 말했습니다. "하지만 내 생각 엔 그것은 당분간 유동적 인 거래가 될 것입니다."

누가 알아? 앞으로이 모든 작업을 더 쉽게 수행 할 수있는 방법이있을 수 있습니다. WordPress 콘텐츠 관리 컨설팅 대행사 인 10up의 사장 겸 설립자 인 Jake Goldman도 다음과 같이 제안했습니다.

“시간이 주어지면 AMP가 결국 '무제한'HTML만큼 복잡해 지거나 모바일 하드웨어, 광대역 속도 및 표준화 된 개인 정보 보호 기능의 발전으로 인해 더 이상 발생하지 않는 문제에 대한 해결책이 될 것으로 예상됩니다.

하지만 AMP를 사용하고 싶다고 가정 해 보겠습니다.

첫 번째 AMP 페이지를 만드는 방법

AMP를 시작하려면 몇 가지 기본 마크 업이 필요하기 때문에 여기에서 큰 소년 / 소녀 개발자 바지를 입을 수 있습니다.

이 기본 자습서를 통해 작업하는 것이 좋습니다. 다음과 같은 방법을 알려줍니다.

• 상용구 코드를 사용하여 첫 번째 AMP 페이지를 만듭니다.
• 무대.
• Google의 유효성 검사기를 사용하여 AMP와 호환되는지 ( 이것은 매우 중요한 단계 ) 확인합니다.
• 출판 및 배포를 준비합니다.

마크 업에서 일부 요소에 AMP 태그가있는 것을 볼 수 있습니다. 따라서 <img> 태그는 <amp-img>가됩니다. <anim> 태그는 <amp-anim>이됩니다. <video> 태그는 <amp-video>가됩니다.

등등.

WordPress 사용자는 무엇을해야합니까?

AMP를 사용해보고 싶다면 운이 좋다.

2016 년 2 월 24 일 Automattic은 공식 AMP 플러그인을 출시했습니다. 따라서 WordPress 사용자는 AMP 최적화 콘텐츠에서 다운로드 가능한 플러그인 일뿐입니다.

그러나 공식 AMP 플러그인 페이지에 따르면 플러그인은 페이지 또는 아카이브를 지원하지 않습니다. 게시물 만.

하지만 일단 플러그인 (bam)을 활성화하면 모든 게시물이 자동으로 AMP가됩니다!

플러그인이 활성화되면 사이트의 모든 게시물에 동적으로 생성 된 AMP 호환 버전이 있습니다.

URL 끝에 '/ amp'를 입력하면 웹 게시물의 AMP 버전을 볼 수 있습니다. 예를 들어 yourwebsite.com/amp-wicked-fast 의 AMP 버전은 yourwebsite.com/amp-wicked-fast/amp 가됩니다 .

Rainmaker Platform 고객의 경우 레이더 화면에 AMP가 있습니다. Google의 극적인 180도 전환의 역사를 감안할 때 우리는 아무것도 서두르지 않을 것입니다. 하지만 미래에 AMP가 중요한 것으로 판명되면 사용자에게 쉬운 AMP 솔루션을 제공 할 것입니다.

AMP는 검색 순위 요소입니까?

아니.

Google의 John Mueller는 AMP가 순위 요소가 아니라고 말했습니다. 그는 "페이지를 AMP 형식으로 전환하는 것은 모바일 친화적 인 순위 신호를 충족하지만 AMP에만 관련된 순위 신호는 없습니다."라고 말했습니다.

Search Engine Journal 직원 작가 Matt Southern은 다음과 같이 지적합니다.

“제 질문은 AMP가 순위 신호인지 아닌지 AMP 콘텐츠에 이미 첫 페이지 상단에 대한 편도 티켓이 있는지 여부가 중요하다는 것입니다. 대부분의 경우 AMP 콘텐츠는 이미 유기적 결과보다 높은 순위를 차지하고 있으며, 이는 요청할 수있는 가장 큰 순위 상승 중 하나입니다. "

따라서 모바일 콘텐츠 게임에서 경쟁자보다 앞서 나가는 이점이 있습니다.이 화이트 보드 금요일 비디오에서 Distilled 사람들이 당신의 얼굴에 손을 흔들고있는 막대기에 당근을 얹은 것입니다.

Whiteboard Friday 비디오를 시청할 것을 권장하는 또 다른 이유는 Distilled의 사람들이 AMP가 제공하는 또 다른 중요한 특징 인 캐싱 서버를 통한 초고속 전송을 비난했기 때문입니다.

Distilled의 R & D 책임자 인 Tom Anthony는 다음과 같이 말합니다.

"그리고이 모든 것은 Google이 이러한 페이지를 호스팅하고 실제 콘텐츠를 바로 호스팅 할 수 있도록 매우 많이 캐시 되도록 설계되었으므로 더 이상 사용자로부터 가져올 필요도 없습니다."

웃기만해도 Google 블로그는 새로운 캐싱 접근 방식에 대해 다음과 같이 말했습니다.

“따라서 이러한 노력의 일환으로 Google의 고성능 글로벌 캐시를 통해 효율적으로 배포하는 동시에 게시자가 콘텐츠를 계속 호스팅 할 수있는 새로운 캐싱 접근 방식을 설계했습니다. 누구나 무료로 사용할 수 있도록 캐시 서버를 열 예정입니다. "

나는 무료를 좋아합니다.

AMP가 광고에 영향을 미칠까요?

안됩니다.

Google에 따르면“우리는 포괄적 인 범위의 광고 형식, 광고 네트워크 및 기술을 지원하고자합니다. AMP HTML을 사용하는 모든 사이트는 선택한 광고 네트워크는 물론 사용자 경험을 손상시키지 않는 모든 형식을 유지합니다. "

궁금한 점이있는 경우 공식 Google AMP 프로젝트 사이트에서 지원하는 광고 네트워크 목록은 다음과 같습니다.

• A9
• Adform
• AdReactor
• 애드 센스
• AdTech
• 도트 및 미디어
• 더블 클릭
• Flite
• 플리 스타
• 스마트 AdServer
• Yieldmo
• Revcontent

그건 그렇고, AMP는 광고 차단기의 채택 증가에 대한 게시자의 두려움을 달래기위한 것이기도합니다. 그러나 그것은 또 다른 이야기입니다. 아마 우리가 이것을 마무리 할 때입니다.

너에게…

와. 우리는 여기서 많은 것을 다뤘습니다.

저와 함께 해주셔서 감사합니다. 도움이 되었기를 바라며 Google AMP 프로젝트에 대한 모든 질문에 답했습니다.

그렇지 않은 경우 아래 의견에 자유롭게 한 줄을 남겨주세요. 또한 내가 쓴 내용에 추가 할 내용이 있거나 누락 된 내용이 있으면 댓글을 남겨주세요.

어느 쪽이든 귀하의 의견을 기다리겠습니다.