Home
AMP

AMP 사전 렌더링 - pre-rendering

1 min read

Pre-rendering은 사용자가 방문을 결정하기도 전에 이미 숨겨진 iframe을 사용하여 백그라운드에서 AMP를 다운로드하고 렌더링 하는 방식입니다. 가능하면 AMP는 백그라운드에서 사전에 미리 로드됩니다.

Pre-rendering은 AMP 캐시에서 페이지 로드 시간을 향상시키는데 사용됩니다. 내장되어 있는 페이지에 AMP 페이지 내용이 포함된 숨겨진 iframe을 로드합니다. 그런 다음 AMP 런타임을 로드하고 브라우저가 페이지 렌더링을 시작합니다. AMP 런타임은 사용자가 볼 수 있는 리소스만 다운로드할 수 있도록 페이지 리소스 로드를 관리하므로 현재 브라우저에서는 그 어떤 것도 로드되지 않습니다.

사용자가 AMP 페이지의 링크를 클릭하면 사전에 미리 페이지를 렌더링 하는 작업이 모두 완료되었기 때문에 페이지를 즉시 로드할 수 있습니다. AMP HTML + AMP JS로 빠른 웹 페이지를 만들 수 있다면, pre-rendering을 함께 사용하면 아주 빠른 웹 페이지를 만들 수 있습니다.

Pre-rendering iframe을 관리하는 자바스크립트 구성 요소를 AMP Viewer라고 합니다.

방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • 구글 AMP – 애니메이션
    Amp-animation은 다른 amp 구성 요소에서 사용할 애니메이션을 정의하는 amp 구성 요소입니다. 이 글에서는 이에 대해 자세히 설명합니다. Amp-animation을 사용하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-animati…
  • 구글 AMP – List
    Amp-list는 CORS json 엔드 포인트를 호출하고 템플릿 내부의 json 파일 형식으로 데이터를 표시하는 amp 구성 요소입니다. 예제의 도움으로 이것을 이해합시다. amp-list를 사용하려면 다음 스크립트를 포함해야 합니다. <script async custom-element="am…
  • AMP 탭 콘텐츠 만들기 amp-selector
    탭 콘텐츠는 페이지 내에서 이동하지 않고 탭을 전환하여 다양한 보기 방식를 제공합니다. 탭으로 구분된 콘텐츠는 amp-selector를 사용하여 구현할 수 있습니다. 사용자가 선택할 수 있는 옵션의 목록을 표시하는 구성 요소입니다. 예를 들면 전자 상거래에서는 제품…
  • 구글 AMP – 동적 CSS 클래스
    amp-dynamic-css-classes는 body 태그에 동적 클래스를 추가합니다. 이 글에서는 이 태그에 대해 자세히 알아보겠습니다. amp-dynamic-css-classes로 작업하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-dyn…
  • 구글 AMP – User Notification
    구글 amp-user-notification은 사용자에게 닫을 수 있는 대화 상자 메시지를 표시하는데 사용됩니다. 우리는 페이지의 쿠키에 대해 사용자에게 알리는데 사용할 수 있습니다. amp-user-notification을 사용하려면 페이지에 다음 스크립트를 추가해야 합니다. <sc…
  • 구글 AMP – Actions 및 Events
    amp-component에서 액션이나 이벤트를 사용하려면 on 속성을 사용할 수 있습니다. 이 글에서는 이에 대해 자세히 설명하겠습니다. Events 이벤트에 대한 액션 구문은 다음과 같습니다. on="eventName:elementId[.methodName[(arg1=value, arg2=value…

댓글 쓰기