플레이스홀더 및 대체 콘텐츠

인지된 성능 및 점진적 개선을 위해 가능한 경우 AMP 모범 사례로 플레이스홀더 및 대체 콘텐츠를 제공합니다.

일부 요소는 제한을 완화하여 효과를 얻을 수 있습니다. 예를 들어 <amp-iframe>에 플레이스홀더를 제공하는 경우 페이지 상단 근처에서 사용할 수 있습니다(없으면 작동하지 않음).

플레이스홀더

placeholder 속성으로 표시된 요소는 상위 AMP 요소의 플레이스홀더 역할을 합니다. 지정된 경우 placeholder 요소는 AMP 요소의 직접 하위 요소여야 합니다. placeholder로 표시된 요소는 항상 상위 AMP 요소를 fill합니다.

<amp-anim src="/static/inline-examples/images/wavepool.gif"
  layout="responsive"
  width="400"
  height="300">
  <amp-img placeholder
    src="/static/inline-examples/images/wavepool.png"
    layout="fill">
  </amp-img>
</amp-anim>

이 코드 조각을 Playground에서 열기

기본적으로 AMP 요소의 리소스가 다운로드되거나 초기화되지 않아도 플레이스홀더는 AMP 요소에 즉시 표시됩니다. 준비가 완료되면 AMP 요소는 일반적으로 플레이스홀더를 숨기고 콘텐츠를 표시합니다.

참고 – 플레이스홀더가 꼭 AMP 요소일 필요는 없습니다. 모든 HTML 요소는 플레이스홀더 역할을 할 수 있습니다.

대체 콘텐츠

요소에 fallback 속성을 지정하여 다음 상황에서 대체 콘텐츠 동작을 알려줄 수 있습니다.

브라우저에서 요소를 지원하지 않는 경우
콘텐츠를 로드하지 못한 경우(예: 트윗이 삭제됨)
이미지 유형이 지원되지 않는 경우(예: WebP는 모든 브라우저에서 지원되지 않음)

fallback 속성은 AMP 요소뿐 아니라 모든 HTML 요소에도 설정할 수 있습니다. 지정된 경우 fallback 요소는 AMP 요소의 직접 하위 요소여야 합니다.

예: 지원되지 않는 기능

다음 예시의 경우 fallback 속성을 지정하여 브라우저가 특정 기능을 지원하지 않는다는 사실을 사용자에게 알려줄 수 있습니다.

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

이 코드 조각을 Playground에서 열기

예: 다른 이미지 형식 게재

다음 예시의 경우 fallback 속성을 사용하여 WebP 형식이 지원되지 않으면 JPEG 파일을 사용하라고 브라우저에 알립니다.

<amp-img alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

이 코드 조각을 Playground에서 열기