🚀 모바일 / 태블릿 에서만 CSS 파일 로드 최적화

CSS 파일 로드 최적화

보통 <link> 태그의 css 파일 로드는 브라우저의 렌더링을 차단(blocking) 하기 때문에, css 파일이 크면 클수록 그만큼 웹페이지 속도에 영향을 미치게 된다. 따라서 왠만해선 css 파일의 용량을 최적화하여 줄이는 것이 좋으며 소스를 분리할 수 있는 것은 따로 분리하여 비동기 로드 시키는 것이 좋다.

예를들어 모바일 혹은 태블릿에서만 실행되는 미디어쿼리 선택자 부분은 메인 css 파일에 한꺼번에 때려넣기에는 약간 무리가 있다. 이때 모바일 소스를 다른 css 파일로 분리하고, 사용자의 화면 비율에 따라 선택적으로 css 파일을 로드하도록 하는 방법이 있는데, 이는 다음과 같다.

<!-- 모바일(480px 이하에서만 css 파일 로드) -->
<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" 
/>
  
<!-- 태블릿(1080px 이하에서만 css 파일 로드) -->  
<link
  rel="stylesheet"
  href="tablet.css"
  media="screen and (max-width: 1080px)" 
/>

css 파일을 분할하여 메인 css의 크기가 작아지는 효과도 있고 별도로 모바일, 태블릿 화면의 css 소스들을 관리할 수 있다는 일거양득의 효과를 얻을 수 있을 것이다.