사용자 경험을 개선하려면 상황에 따라 적절하게 자리 표시자 및 대체 요소를 사용해야 합니다. Placeholder는 해당 요소가 렌더링 될 준비가 될 때까지 요소를 대신하여 표시되는 반면, 요소가 브라우저에서 지원되지 않는 경우 fallback가 요소를 대신하여 표시됩니다.
Placeholder
Placeholder 속성이 있는 요소는 상위 항목에 대한 자리 표시자 역할을 합니다. 요소가 다운로드되거나 초기화되기 전에 요소가 표시될 자리에 즉시 표시됩니다. 실제로 요소가 준비가 완료되면 자리 표시자는 숨겨지고 콘텐츠가 표시됩니다. 따라서 로딩 속도가 느린 요소를 대체하여 사용할 수 있습니다.
예를 들어 동영상이나 고해상도 이미지 대신에 빠르게 로드되는 저해상도 이미지를 표시하는 데 이 기능을 사용할 수 있습니다. 후자는 Medium 및 Facebook과 같은 사이트에서 빠른 페이지 로딩을 제공하는 데 사용하는 것과 동일한 방법입니다. 실제로 배너 이미지 크기로 확대된 작은 저해상도 이미지를 보여줍니다. 사용자는 페이지가 로드 되기 전에 흐릿한 이미지로 거의 즉시 페이지의 레이아웃을 보게 됩니다. 고해상도 버전의 이미지가 준비되면 블러 처리된 흐릿한 버전의 저해상도 이미지는 교체됩니다.
이러한 이미지를 구현하려면 먼저 placeholder 버전의 작은 저해상도 이미지를 준비합니다. Placeholder 이미지는 크기가 약 200~300byte로 줄어들어야 합니다. 이것은 느린 인터넷 환경(3G)에서도 빠르게 로드됩니다.
이제 AMP-HTML을 작성해야 합니다. 요소를 자리 표시자로 설정하려면 placeholder 속성을 추가하기만 하면 됩니다. 이미지에 대한 자리 표시자를 추가하려면 다음과 같이 코드를 작성할 수 있습니다. (전체 코드는 여기를 참조.)
<amp-img src="img/feature.jpg"
scrset="img/feature-1200.jpg 1200w,
img/feature-lrg.jpg 1080w,
img/feature-med.jpg 768w,
img/feature.jpg 320w"
width="768"
height="305"
layout="responsive"
noloading>
<amp-img placeholder
src="img/feature-tiny.jpg"
width="768"
height="305"
layout="reponsive">
</amp-img>
</amp-img>
우리는 amp-img 이미지에 자리 표시자를 사용하고 있습니다! 그러나 일반적으로 동영상 또는 기타 크기가 큰 요소에 자리 표시자를 사용합니다.
또한 amp-img 이미지 요소에 noloading 속성을 추가했습니다. AMP는 amp-img와 같은 구성 요소에 대해 기본적으로 로딩 중임을 표시합니다. noloading 속성을 추가하면 이 로딩 표시가 숨겨집니다. 자리 표시자를 사용하기 때문에 로딩 표시가 필요하지 않으므로 비활성화합니다.
개발자 도구에서 자리 표시자가 느린 인터넷 환경(3G)에 대해 잘 작동하는지 확인할 수 있습니다.
위 이미지와 같이 Chrome의 DevTools에서 느린 3G 네트워크를 시뮬레이션 할 수 있습니다. 자리 표시자 이미지 feature-tiny.jpg가 로드되고 곧이어 feature-lrg.jpg 이미지로 대체되는 것을 볼 수 있습니다.
Fallback
Fallback 속성은 부모 요소가 브라우저에서 지원되지 않는 경우, 부모 요소 대신 다른 요소를 사용해야 함을 나타내는 데 사용됩니다. 나중에 amp-video 구성 요소에 대해 더 자세히 다루겠지만, 예를 들어 다음과 같이 HTML5 video 태그를 지원하지 않는다는 대체 메시지를 추가할 수 있습니다.
<amp-video width="640" height="380" src="cats.mp4">
<div fallback>
<p>HTML5 video 태그는 지원되지 않습니다.</p>
</div>
</amp-video>