>웹 프론트엔드 >H5 튜토리얼 >Google AMP란 도대체 무엇인가요?

Google AMP란 도대체 무엇인가요?

PHPz
PHPz원래의
2018-05-16 10:41:1657448검색

구글 AMP란 대체 무엇일까?

Google AMP(Accelerated Mobile Pages)는 정적 콘텐츠용 웹페이지를 구축하고, 안정적이고 빠른 렌더링을 제공하며, 특히 모바일에서 페이지 로딩 시간을 단축하기 위해 Google이 시작한 법인입니다. 웹에서 콘텐츠를 봅니다.

Google AMP란 도대체 무엇인가요?

AMP HTML은 안정적인 성능을 제공하기 위해 HTML, CSS, JavaScript의 일부를 제한하여 전적으로 기존 웹 기술을 기반으로 구축되었습니다. 이러한 제한사항은 AMP HTML 유효성 검사기를 통해 적용됩니다. 이러한 제한 사항을 보완하기 위해 AMP HTML은 기본 HTML을 뛰어넘어 콘텐츠를 강화하는 일련의 맞춤 요소를 정의합니다.

기술적인 관점에서 볼 때, AMP 기술을 사용하는 웹페이지가 이렇게 빨리 열릴 수 있는 이유는 주로 3번째 등 속도를 저하시킬 수 있는 웹페이지 코드의 다양한 부분을 제거하기 때문입니다. -파티 스크립트 파일, 일부 HTML 태그, 광고 추적기 등

Google AMP란 도대체 무엇인가요?

위의 Google AMP 동적 렌더링 시연을 통해 모두가 알 수 있을 것입니다. Baidu MIP을 알고 계시다면 Google AMP라는 말을 어느 정도 들어보셨을 텐데요. 결국 Baidu MIP는 AMP의 국내 버전입니다. Baidu와 Sogou가 Google AMP 오픈소스 프로젝트에 합류한 만큼 Google도 마찬가지입니다. AMP도 곧 모든 사람의 눈에 들어올 것입니다.

AMP의 목적

AMP의 목적은 모바일 웹페이지의 로딩 속도를 크게 향상시켜 방문자의 탐색 경험에 더 도움이 되도록 하는 것입니다. 구글 통계에 따르면, 모바일 단말기의 페이지가 3초 이내에 로딩되지 않으면 방문자의 90% 이상이 웹페이지를 닫거나 다른 웹페이지를 방문하게 된다고 합니다. 따라서 효과적인 트래픽을 얻으려면 로딩 시간이 매우 중요합니다. 하지만 현재의 웹 기술로는 3초라는 최적의 로딩 시간을 충족시킬 수 없습니다. Google 데이터에 따르면 현재 모바일 페이지의 평균 로딩 시간은 8초입니다! 이는 대다수의 웹사이트가 유효 트래픽의 90% 이상을 잃었다는 것을 의미합니다! . AMP 프로젝트는 모바일 페이지에서 대부분의 페이지를 최대한 빠르게 로드할 수 있도록 탄생했습니다.

AMP 프로젝트는 원래 Google에서 시작했지만 많은 웹사이트에서 빠르게 반응을 얻었으며 점차 자연 검색에 큰 영향을 미치는 개발 트렌드로 발전했다는 점을 언급할 가치가 있습니다. 현재 The Wall Street Journal, The New York Times, BBC 등 대형 뉴스 웹사이트에서는 모바일 웹페이지 속도를 높이기 위해 AMP 기술을 사용하기 시작했습니다.

AMP 작동 방식

AMP의 작동 원리는 다음과 같이 간단히 요약할 수 있습니다. 코드 로드 감소 + 캐시 사전 로드

웹사이트 측: 웹사이트 페이지의 HTML 코드를 AMP 규칙에 따라 완전히 작성하여 중복 코드로 인한 로딩 부담을 크게 줄입니다.

웹사이트 측: Follow Google AMP 규칙은 JS 및 CSS를 호출하여 구성 요소의 로딩 부담을 줄입니다

Google 측: 페이지 정보가 AMP 규칙을 완벽하게 준수하여 작성되면 Google DNS에 제출되고 Google DNS는 페이지 정보를 자체 캐시 서버에 캐시합니다(참고: Google 자체 DNS 캐시 서버입니다)

클라이언트: 사용자가 검색 엔진에서 AMP 웹페이지를 검색하고 클릭하면 Google은 먼저 DNS 캐시 서버에 캐시된 데이터를 호출하여 방문자에게 표시하므로 방문자가 처음으로 보고 싶은 정보를 볼 수 있습니다.

Google AMP란 도대체 무엇인가요?

이렇게 AMP 페이지는 페이지 로드 감소와 캐시 사전 로딩을 통해 모바일 페이지의 로딩 속도를 크게 향상시켰습니다. Google 데이터에 따르면 로딩 속도는 4배나 빨라질 수 있습니다! 즉, 원래 페이지를 로드하는 데 8초가 걸렸지만 AMP 최적화 후에는 로드하는 데 2초밖에 걸리지 않습니다! 엄청난 발전이라고 할 수 있죠!

AMP 구성

AMP(가속 모바일 페이지)는 콘텐츠의 세 부분으로 구성됩니다.

AMP HTML
AMP JS
Google AMP Cache

AMP HTML

소위 AMP HTML은 실제로 HTML 코드 및 태그에 대한 Google의 새로운 사용 사양 집합입니다. 이는 대부분 일반적인 HTML 태그의 사용 방법을 상속하지만 자체적으로 개발된 HTML 태그를 사용하는 몇 가지 새로운 방법도 있습니다.

AMP JS

AMP JS와 AMP HTML은 실제로 동일한 아이디어를 가지고 있으며, AMP 페이지에서 JS 및 CSS 사용을 표준화합니다.

Google AMP 캐시

이것이 바로 모두들 스스로 배울 수도 있습니다.


위 내용은 Google AMP란 도대체 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.