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 – Timeago
    Timeago는 'x'시간 전과 같이 과거와 비교하여 타임 스탬프 세부 정보를 제공합니다. 이 글에서는 이 기능에 대해 자세히 설명하겠습니다. 이 기능을 작업에 삽입하려면 아래의 스크립트를 .html 페이지에 추가해야 합니다. <script async custom-element="amp-…
  • 구글 AMP – Fit Text
    Amp 태그 amp-fit-text는 디스플레이를 렌더링하기에 공간이 충분하지 않은 경우 글꼴 크기를 줄입니다. 이 글에서는 이 태그에 대해 자세히 설명합니다. amp-fit-text가 작동하도록 하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="am…
  • 구글 AMP – 날짜 카운트 다운
    Amp Date countdown이라는 또 다른 amp 구성 요소는 주어진 날짜까지의 일, 시간, 분, 초를 표시하는 데 사용됩니다. 날짜 표시는 선택한 로케일에 따라 수행될 수 있습니다. 기본값은 en (영어)입니다. Amp-date-countdown은 데이터 렌더링에 amp-mustache 템플릿을 사…
  • 구글 AMP – 날짜 선택
    AMP Datepicker는 사용자가 날짜를 선택할 수 있는 페이지에 달력을 표시하는 amp 구성 요소입니다. AMP datepicker는 정적 달력처럼 표시되거나 입력 선택에 따라 버튼 클릭으로 표시될 수 있습니다. amp-date-picker를 작동시키려면 페이지에 다음 스크립트를 추가해야 합니다.…
  • 구글 AMP – MathML
    MathML을 사용하여 수학 공식을 표시할 수 있습니다. 이 글에서는 MathML을 사용하는 방법과 몇 가지 수학 공식을 사용하여 동일한 결과를 표시하는 방법에 대한 실제 예제를 살펴보겠습니다. MathML을 사용하려면 다음 자바스크립트 파일을 포함해야 합니다. <script async cu…
  • 구글 AMP – Story
    Amp-story는 사용자가 스토리에 계속 참여할 수 있도록 콘텐츠를 표시하는 데 사용되는 amp 구성 요소입니다. 예를 들어 브랜드에 대해 소개하는 일련의 이미지를 사용할 수 있습니다. amp-story로 작업하려면 아래와 같이 스크립트를 포함해야 합니다. <script async cust…

댓글 쓰기