반응형으로 디자인한 웹사이트의 문제점은 불필요하게 큰 이미지나 사용하지 않는 CSS, 자바스크립트를 사용자가 다운받게 하게 쉽다는 것이다.

전략적 콘텐츠 로딩

반응형 웹사이트를 만들 떄 개발자들은 다양한 화면 크기를 지원하기 위해 종종 더 많은 미디어 쿼리를 추가하는데 미디어 쿼리로 인해 사용자에게 엄청난 오버헤더를 줄 수도 있다는 사실을 간과한다.

특히 데스트톱 버전으로 사이트를 먼저 디자인한 후 나중에 모바일 같은 더 작은 화면을 지원하기 위해 사이트의 크기를 줄일 떄 주로 이런 현상이 나타난다.

CSS를 통해 시각적으로 축소되었지만 실제로는 같은 크기의 이미지를 사용자에게 제공하거나 데스트톱용 글꼴 그대로 전달하는 일이 발생할 수도 있다.

이미지

이미지를 제공할 때에는 사용자에게 불필요한 오버헤더를 제거하기 위해 페이지에 표시되는 크기와 동일한 이미지를 제공해야 한다.

사이트의 이미지를 검사하여 파일 크기를 수정할 수 있는지 확인한다.

브라우저가 어떤 이미지를 다운받을지는 RESS 기법이나 CSS 미디어쿼리, 새로운 picture 사양을 통해 알려줄 수 있다.

CSS를 이용할때 주의할 점은 브라우저가 예상치 못한 동작을 할 수 있으므로 필요한 자원만 다운받는지 확인해야 한다.

예를들어 단순히 display:none 을 설정하는 것으로 브라우저가 이미지를다운받는 것을 방지할 수 없다.

배경 이미지가 있는 요소 또한 동일한다.

반응형 디자인에서 CSS를 이용해서 이미지가 보이지 않게 숨기고 싶으면 배경 이미지가 있는 요소의 부모를 숨기는 방법을 쓸 수 있다.

아니면 미디어 쿼리를 이용해 브라우저에게 각 화면 크기에 따라 어떤 이미지를 받아야 할지 알려줄 수도 있다.

브라우저는 미디어 쿼리와 일치하는 이미지를 다운받는다.

하지만 오래된 버전의 브라우저들은 여러 미디어쿼리가 동시에 만족되는 경우 여러 이미지를 모두 다운받는다.

최신 브라우저에서 그림을 최적의 크기로 표시하기 위한 가장 좋은 방법은 HTML의 picture 요소를 활용하는 것이다.

미디어 속성에 맞는 경우에만 브라우저에게 다운 받을 이미지를 알려주는 것이 아니라 picture 요소를 지원하지 않는 브라우저도 저화질의 이미지를 받을 수 있도록 한다.

글꼴

반응형 웹 디자인이라면 화면이 클 떄만 글꼴을 로딩하는 방법을 선택할 수 있다.

이를 적용하려면 먼저 콘텐츠에 일반 대체 글꼴을 설정해야 한다.

그 후 화면 크기 기준을 충족할 때만 미디어 쿼리를 이용해 콘텐츠에 웹 글꼴을 적용하도록 한다.