가속 모바일 페이지 (AMP) 초보자 안내서
가속 모바일 페이지 모바일 웹의 가장 큰 문제를 해결하고자하는 Google의 이니셔티브입니다. - 속도. 우리가주의 깊게 디자인하고있는 멋진 사용자 경험은 모바일에서 고통스럽게 느립니다..
느린 것은 전적으로 UX 문제가 아니지만 전환율 감소, 과 접근성을 해친다. 느린 인터넷 연결을 사용하는 사용자 제외. AMP 게시자가 목표를 달성 할 수 있도록 모바일 최적화 된 콘텐츠를 한 번 만들고 사방에 즉시로드되도록하십시오.
.
출시 이후 BBC, The Economist, Guardian News 및 Financial Times와 같은 많은 게시자가 이니셔티브를 구현 했으므로 이제는 AMP가 모바일에서 경쟁력을 유지하려는 모든 사람들이 고려해야 할 혁신이라고 가정 할 수 있습니다. 편물.
AMP in Action
세부 정보로 들어가기 전에 AMP 데모, 너는 할 수있다. 실천 중이다.. 이 링크에서 데모에 액세스 할 수 있습니다..
AMP가 실제로 작동하는지 보려면 다음 두 가지 작업을 수행해야합니다.
- 모바일 장치 또는 모바일 시뮬레이터에서 데모를 봅니다. Chrome DevTools의 모바일 장치 시뮬레이터.
- 검색 창에서 검색 쿼리를 실행하십시오. Google AMP는 현재 주로 뉴스 사이트에서 작동하므로 최상의 선택은 새로운 뉴스 기사입니다..
아래 스크린 샷에서 검색어를 사용했을 때 얻은 정보를 볼 수 있습니다. 리오 올림픽
.
보시다시피 AMP 페이지는 다음과 같이 나타납니다. Google 리치 카드, 에이 모바일에 최적화 된 이미지 회전식 캐 러셀, Google이 2016 년 5 월에 발표 한.
Google이 AMP 페이지와 다른 모바일에 최적화 된 페이지를 구분하는 방법에 유의하십시오. 2 개의 다른 레이블을 사용하여: AMP 및 모바일 친화적. 또한 결과 중 일부를 클릭하여 AMP 웹 페이지의 모양과 모바일에서의 실행 속도를 확인할 수도 있습니다..
기술적 인 배경
AMP는 웹 표준 기존 웹 기술을 기반으로하고 정적 컨텐츠에 중점을 둡니다. 그것은있다 3 가지 파트:
- AMP HTML : 수정 된 HTML (1) 특정 HTML / CSS 기능의 제한 (2) 새로운 커스텀 태그 (Components)의 도입
- AMP JS : 페이지로드 시간을 줄이기 위해 모범 사례 적용
- AMP CDN: 귀하의 사이트를 더욱 최적화하는 내장 된 검증 시스템이있는 캐시
AMP 페이지의 기술적 배경에 대해 더 자세히 알고 싶다면 Google의 Paul Bakaus가 제공하는 아래 동영상을 확인하십시오. 소개 토크 on AMP.
더 깊이 들어가기를 원하면 모바일에서 성능을 높이기 위해 AMP가 사용하는 최적화 기술을 이해하는 것도 가치가 있습니다. 아래 비디오에서는 AMP 엔지니어링의 수석 말테 얼 (Malte Ubl)이 AMP 해부학 상세히.
AMP HTML
가속 모바일 페이지는 정규 HTML 페이지 필요한 일련의 규칙을 따른다. 페이지를 빠르게로드하고 안정적인 성능으로 렌더링하기 위해.
당신이 그것에 대해 알아야 할 가장 중요한 것들을 살펴 봅시다. 전체 AMP HTML 사양을 살펴볼 수도 있습니다.
별도의 AMP 페이지를 원한다면 결정하십시오.
동일한 정적 콘텐츠 페이지의 경우 2 가지 버전 - 하나는 AMP 용이고 다른 하나는 AMP 용이 아닙니다. 당신은 또한 선택할 수 있습니다. 오직 하나의 버전 - AMP 페이지를 찾아서 어디에서나 사용할 수 있습니다. 에 관하여 브라우저 지원, AMP의 Github 페이지 청구 :
브라우저 지원에 대해 여전히 걱정이된다면 Stackoverflow에서 Google의 Paul Irish 게시물을 확인하십시오..
두 페이지 (AMP 및 AMP 제외)를 원할 경우 각각에 링크 ~하기 위해서 검색 엔진에 그 존재에 대해 알리십시오. 두 버전.
다음 코드를 비 AMP 페이지의 섹션:
또한 다음 행을 AMP 페이지의 섹션:
AMP 페이지가 하나뿐이라면 그것을 다음과 같은 방식으로 연결하십시오.:
상용구 시작하기
AMP 프로젝트는 다른 것을 제공합니다 상용구 시작하기 시작하는 데 사용할 수 있습니다. 가장 간단한 AMP HTML 보일러 판을 살펴보십시오.
안녕하세요 세계!
보일러 플레이트가 일반 HTML 페이지를 꼬리표. 그만큼 >
그만큼 너는 오직 가질 수있다. 하나 포함 된 스타일 시트 및 많은 허용되지 않는 스타일 규칙, 예를 들어, AMP 페이지 용 CSS 작성을 시작하기 전에 스타일 시트 제한 사항을 확인하는 것을 잊지 마십시오.. AMP 스타일 규칙에 대해 알아야 할 또 다른 사항이 있습니다. 원하는 레이아웃을 사용할 수 없습니다. - AMP의 원칙에 따라 브라우저에서 각 원소의 공간을 계산한다. 페이지에 미리. 지원되는 레이아웃과 지원되지 않는 레이아웃을 살펴보십시오.. AMP 문서에는 다음이 포함될 수 있습니다. 작성자 또는 서드 파티 JavaScripts, 그러나 이것이 가속 모바일 페이지가 자바 스크립트를 전혀 사용하지 않는다는 의미는 아닙니다. AMP의 JavaScript 라이브러리 (AMP 런타임)는 AMP 페이지를 빠르게로드하고 렌더링합니다. 최상의 성능 관행 실행. AMP 구성 요소 AMP 런타임에 의해 정의 됨. 그들은 앞서 말한 것이다. AMP 관련 HTML 태그 당신은 다음과 같은 정규 카운터 대신에 사용할 필요가 있습니다. 각 AMP 구성 요소에는 특정 외부 자원 (이미지, 비디오, 삽입 등). 외부 리소스로 인해 웹 사이트가 느려지는 경향이 있습니다. 이 솔루션의 주요 목표는 외부 자원의 로딩 관리 그들을 실행함으로써 합리적인 방법으로 내부 샌드 박스. AMP는 2 종류의 부품: 외부에서로드 된 모든 리소스 (예 : 그만큼 AMP CDN 기본적으로 캐시라고 불리는 캐시입니다. Google AMP 캐시. 유효한 AMP 문서를 캐치하고로드합니다. AMP CDN에는 또한 내장 검증 시스템. 가치가있다. AMP 페이지 테스트하기 안전하게하기 위해 온라인 상태로 전환하기 전에 유효성 검사기 통과. 여러 가지 방법으로 할 수 있습니다.. 가능한 최상의 성능을 얻기 위해 AMP CDN이 HTTP / 2 프로토콜을 사용한다는 것을 알고 있습니다.. Accelerated Mobile Pages를 구현하는 데 도움이되는 몇 가지 훌륭한 도구가 있습니다. 그 중 일부를 살펴 보도록하겠습니다.. Google은 웹 마스터에게 편리한 기능을 제공합니다. AMP 상태보고 도구 성공적으로 색인 된 AMP 페이지 수 및 AMP 관련 오류 수를 보여줍니다.. Lullabot 's AMP PHP 라이브러리 HTML 페이지를 AMP HTML로 변환 할 수 있으며 AMP 표준을 사용하여 HTML 문서의 준수 여부를보고합니다.. WordPress 사이트에서 AMP를 사용하려면 AMP 용 WordPress 설정 방법과 Yoast SEO 플러그인에서 AMP가 작동하는 방법에 대한 Yoast의 자습서를 읽어보십시오.. 당신은 또한 Automattic의 체크 아웃 할 수 있습니다 AMP 플러그인 WordPress 사이트에서 Accelerated Mobile Pages를 사용하도록 설정할 수 있습니다.. 여전히 확신이 들지 않는다면, 비디오에 대해 살펴보십시오. 빠른 속도 테스트 이하. Nuzzel의 설립자 인 Jonathan Abrams는 New York Times와 같은 모바일에 최적화 된 사이트조차도 훨씬 더 빠르게로드 할 수 있다고 주장하면서 더 나은 주장을합니다. - 또한 Google AMP 및 Facebook의 인스턴트 (Instant) 기사의 경쟁에 관한 흥미로운 기사를 Verge에서 읽을 수 있습니다. "무엇이 잡을 까?"에 대한 답변을 찾고 있다면, AMP가 기본적으로 2000 년 이전의 인터넷 시간으로 되돌아가는 것에 대한 두려움을 언급 한 Yoast의 게시물을 확인하고 그것이 실제로 공개 표준인지 여부에 대해 질문합니다. . !중대한 한정어 @수입 규칙 및 의사 클래스.AMP JS
AMP 구성 요소
꼬리표AMP CDN
AMP 도구
추가 고려 사항
평균 페이지를로드하는 데 3 초가 걸리는 대신 페이지가로드됩니다. 0.5 초 미만 Google의 모바일 용 모바일 페이지가 활성화되면
.
