데브로그

프로그래밍 팁 그리고 프로그램 사용 방법 등을 공유 합니다.

모바일과 데스크탑 두개의 CSS로 나눠서 사용하는 방법
CSS3

모바일과 데스크탑 두개의 CSS 파일 사용하는 방법

smilehugo

프로젝트를 진행하면서 한개의 global.css 를 사용해 왔습니다. 그러다 보니 이 파일이 200kb 가 넘어버려서 웹페이지 로드 시간이 길어져 버렸습니다.

그래서 웹사이트 로딩 시간을 줄여보고자 CSS를 모바일과 데스크탑 따로 사용하되 새로고침 없이 웹사이트가 브라우저의 가로 값에 반응할 수 있도록 하기 위한 방법을 생각해 봤습니다.

.

우선 브라우저 가로값에 반응을 하는지 테스트를 해보기 위해서 HTML 파일을 다음과 같이 작성했습니다.

.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Using Two CSS file for responsive website</title>
    <link rel="stylesheet" media="screen and (max-width: 475px)" href="global_mobile.css" />
    <link rel="stylesheet" media="screen and (max-width: 950px)" href="global_desktop.css" />
  </head>
  <body>
    <div>
      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
      </ul>
      <img src="image-1.jpg" />
      <img src="image-2.jpg" />
    </div>
  </body>
</html>

.

그리고 global_mobile.css와 global_desktop.css 파일을 아래와 같이 준비합니다.

.

/* global_mobile.css */
@media (max-width: 475px) {
  div ul {
    display: flex;
    flex-direction: column;
  }

  div img {
    width: 100%;
  }
}
/* global_desktop.css */
div ul {
  display: flex;
  flex-direction: row;
}

div ul li {
  width: 33%;
}

div img {
  width: 600px;
}

.

VS Code 에디터에서 Live Server로 프리뷰를 보면 브라우저의 가로값에 따라 모바일과 데스크탑 레이아웃으로 잘 변형되는 것을 확인할 수 있습니다.

.

그러나 이렇게 작성하더라도 <head> 태그에 있는 모든 css를 다운로드해서 실행해 버리면 파일 사이즈가 더 커지고 서버 요청하는 횟수도 2회로 늘어나기 때문에 상황이 더 안좋아 집니다. 그래서 두개 CSS 파일의 로드가 언제 일어나는지 확인해 보겠습니다.

우선 <head> 태그 안에 jquery 등 무거운 JavaScript 라이브러리를 추가합니다. 로딩 시간을 극대화해서 브라우저 가로값에 따라 어떤 CSS 파일을 언제 로드하는지 확인하기 위함입니다.

그리고 Unsplash 사이트에서 이미지 5개를 이미지 주소를 복사하고 붙여넣기 해서 가져오는데 ? 뒤에 쿼리는 제거하고 사용합니다. DOM 파싱하는 시간과 다운로드 및 실행시간을 극대화 하기 위함입니다.

.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Using Two CSS file for responsive website</title>
    <link rel="stylesheet" media="screen and (max-width: 475px)" href="global_mobile.css" />
    <link rel="stylesheet" media="screen and (max-width: 950px)" href="global_desktop.css" />
    <script
      src="https://code.jquery.com/jquery-3.7.0.js"
      integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"
      integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div>
      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
      </ul>
      <img src="image-1.jpg" />
      <img src="image-2.jpg" />
      <img src="image-3.jpg" />
      <img src="image-4.jpg" />
      <img src="image-5.jpg" />
    </div>
  </body>
</html>

.

브라우저 가로 값이 475px 보다 더 큰 상태에서 테스트 해봤습니다.

.

.

global_desktop.css 파일을 먼저 로드하고 이어서 jquery와 jquery-ui 스크립트를 다운로드 받고 실행합니다.

그리고 이미지를 다운로드 받아 실행하면서 DOM 파싱이 끝나고 나서 global_mobile.css 다운로드 받아 실행됩니다.

.

이번에는 역으로 브라우저 가로 값이 475px 보다 더 작은 상태에서 테스트 해봤습니다.

.

.

이번에는 global_mobile.css 파일을 먼저 다운로드 받아 실행하고, 그 다음으로 jquery와 jquery-ui를 다운로드 받아 실행하고나서 이미지를 다운로드 받아 실행하는 중간에 DOM 파싱이 끝나면서 global_desktop 파일이 다운로드 받아 실행됩니다.

.

이렇게 두개의 CSS 파일을 모바일과 데스크탑 용으로 두개 사용하게 되면 초기 로딩 시간을 어느정도 줄일 수 있어 웹사이트 퍼포먼스 향상에 도움이 될 것 같습니다.

.

여기서 더 나아가 번외로 <script> 태그에 defer 속성을 추가해 주고 <img> 태그에 loading=”lazy” 속성을 추가해 보겠습니다.

.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Using Two CSS file for responsive website</title>
    <link rel="stylesheet" media="screen and (max-width: 475px)" href="global_mobile.css" />
    <link rel="stylesheet" media="screen and (max-width: 950px)" href="global_desktop.css" />
    <script
      src="https://code.jquery.com/jquery-3.7.0.js"
      integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
      crossorigin="anonymous" defer
    ></script>
    <script
      src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"
      integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c="
      crossorigin="anonymous" defer
    ></script>
  </head>
  <body>
    <div>
      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
      </ul>
      <img src="image-1.jpg" loading="lazy" />
      <img src="image-2.jpg" loading="lazy" />
      <img src="image-3.jpg" loading="lazy" />
      <img src="image-4.jpg" loading="lazy" />
      <img src="image-5.jpg" loading="lazy" />
    </div>
  </body>
</html>

.

브라우저 값이 475px보다 작은 때에서 테스트해 봤습니다.

.

.

이번에는 다운로드가 일시적으로 거의 동시에 이루어지는 것을 확인할 수 있습니다. global_mobile.css 파일이 먼저 다운로드 되어 실행되고 나서 jquery와 jquery-ui가 순차적으로 다운로드 되어지며 global_desktop도 다운로드되어 실행됩니다. 이미지가 다운로드 완료되면 jqeury와 jquery-ui가 순차적으로 실행되는 것을 확인할 수 있습니다.

.

이렇게 CSS 파일을 두개의 파일로 나눠서 사용할 때 웹사이트 퍼포먼스에 어떤 영향이 있는지 알아봤습니다.

CSS 파일 사이즈가 그리 크지 않고, 적절히 잘 관리하고만 있다면 나눠서 사용하는 것 보다는 한개의 파일에 media query를 붙여서 사용할 수 있을 것으로 생각됩니다. 파일 크기가 크고 유지관리가 힘들다고 판단될 경우 두개의 파일로 나눠서 사용하는 것을 추천 드립니다.

감사합니다.

Leave a Reply