Erzsamatory Weblog


스마트폰을 이용한 웹서핑이 대중화되면서 최근들어 웹사이트 최적화의 필요성이 대두되고 있습니다. 특히 블로그의 경우에는 스마트폰에서의 유입률이 대단히 높기 때문에 블로거들 사이에서 블로그 최적화는 특별하게 필수적인 것으로 자리잡고 있습니다. 이 글에서는 웹사이트 또는 블로그를 최적화하는데에 있어서 가장 쉽고 간단하게 끝낼 수 있는 CSS 전송 최적화에 대해서 알아볼 것입니다. 물론 이 글에서 설명하는 방법은 직접 HTML 소스를 편집할 수 있다는 것을 필요로 하므로 티스토리 블로그에서는 불가능한 작업임을 미리 알려드립니다.

구글 페이지스피드 매뉴얼
http://goo.gl/xmqQO0


웹사이트 최적화가 필요한 이유?


웹사이트 최적화는 소스 내에 숨어 있는 불필요한 요소들을 제거하여 웹페이지의 로딩 속도를 최대한으로 빠르게 끌어 올리는 작업을 말합니다. 인터넷 속도가 매우 빨라진 현대 사회에서 꼭 필요한 작업은 아니지만, 이와 동시에 기술의 발전으로 인하여 모바일을 통한 웹서핑이 점점 늘어나는 추세이기 때문에 무시해도 되는 작업은 더더욱 아닙니다. 따라서 대부분의 웹사이트는 자체적인 최적화를 통하여 모바일에서도 쾌적하게 접속할 수 있도록 사용자를 배려하고 있습니다.

일반적으로는 모바일 페이지를 따로 제공하고 있는 곳이 가장 많습니다. 하지만 몇몇의 웹사이트에서는 반응형웹 기술을 사용하여, 데스크톱 컴퓨터에서의 소스코드와 모바일에서의 소스코드를 동일하게 사용하고 있습니다. 웹사이트 최적화라는 것은 이 때에 그 진가를 발휘할 수 있습니다. 즉, 웹사이트 최적화는 반응형웹 기술이 적용된 사이트에서 그 효과가 100% 발휘됩니다.


지금부터의 내용은 구글 페이지스피드 매뉴얼의 내용을 번역한 것입니다.
※ 원문: http://goo.gl/xmqQO0


CSS 전송 최적화


여기에서 소개하는 CSS 전송 최적화구글 페이지스피드 인사이트에서 스크린 출력을 지연시키는 외부 스타일시트가 발견되는 경우에 매우 유용하게 사용될 수 있습니다.

개요


웹브라우저는 스크린에 컨텐츠를 출력하기 전에 외부 CSS 파일을 불러옵니다. 이 때에 추가적인 네트워크 전송이 필요하므로, 웹브라우저에서는 새로운 연결을 시도합니다. 따라서 스크린에 컨텐츠를 출력하는 시간이 지연되는 것입니다.


구글 페이지스피드에서 추천하는 방법


외부 CSS 파일의 사이즈가 작은 경우에는 이곳에 정의된 CSS 내용을 직접 HTML에 삽입하는 것이 현명한 방법입니다. 외부 스타일시트와는 다르게 HTML 인라인 스타일은 새로운 네트워크 연결이 필요 없으므로, 웹브라우저는 이전보다는 더 빠르게 컨텐츠를 출력할 수 있습니다.

하지만 외부 CSS 파일의 사이즈가 큰 경우에는 이 방법을 사용할 수 없습니다. 왜냐하면 구글 페이지스피드 인사이트에서는 HTML 파일의 용량이 커지는 것을 허용하지 않기 때문입니다. 따라서 이러한 경우에는 해당 스타일 시트에서 반드시 필요한 스타일 속성만을 HTML에 삽입한 후, 나머지 스타일 속성은 HTML이 모두 렌더링된 후에 로드될 수 있도록 해야 합니다.


CSS 파일의 사이즈가 작은 경우 : Inlining a small CSS file


CSS 파일의 사이즈가 작은 경우 또는 꼭 필요한 스타일 속성이 있는 경우, CSS를 HTML에 직접 삽입하는 방법에 대해서 알아보겠습니다.

먼저 다음과 같은 HTML 파일이 있다고 가정합시다.

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>


그리고 small.css 파일의 내용은 다음과 같습니다.

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }


위와 같은 상황이라면 다음과 같은 방법으로 중요한 스타일 속성만을 HTML에 직접 삽입할 수 있습니다.

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">


이 때에는 small.css 파일이 HTML의 모든 내용이 출력된 후에 로드됩니다. 이렇게 함으로써 웹브라우저가 컨텐츠를 출력할 때 발생할 수 있는 불필요한 지연을 미연에 방지할 수 있습니다. 이와 더불어, 자바스크립트를 활용하면 웹사이트에 포함된 스타일시트와 스타일 속성의 발생 순서를 직접 지정할 수도 있습니다.


큰 용량의 외부 데이터를 사용하지 마십시오.


스타일시트 파일 내부에 외부 URL을 사용하는 경우에는 반드시 해당 파일의 용량을 확인해야 합니다. 만약 용량이 큰 파일이 스타일시트 내부에서 URL을 통하여 연결되어 있는 경우에는 위에서 설명했던 것과 같이 렌더링이 지연되는 현상이 발생합니다. 따라서 완벽한 CSS 전송 최적화를 위해서는 HTML 뿐만 아니라 스타일시트 파일 내부에 있는 URL도 모두 확인해야 합니다.


HTML 태그의 style 속성을 사용하지 마십시오.


되도록이면 HTML의 style 속성을 사용하지 않는 것이 좋습니다. 예를 들면 <div style=. . . ></div> 이런 방식의 스타일 정의를 말하는 것입니다. 이렇게 HTML 태그의 속성으로서 style을 사용하는 경우에는 불필요한 코드 중복이 발생하여 렌더링의 지연이 발생할 수 있습니다. 또한 W3C의 보안 규정(CSP)에 의하여 악성코드로 판단될 수도 있으므로 이 방법은 절대 사용해서는 안 됩니다.
http://www.erzsamatory.net/trackback/85

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 비밀방문자
    비밀방문자
    2014/06/03 22:28
    관리자만 볼 수 있는 댓글입니다.
    • Walter E.
      Walter E.
      2014/06/04 10:37
      답장보냈습니다. ^^
  2. 초코
    초코
    2014/06/16 05:07
    안녕하세요

    구글 블로그를 사용중입니다.

    </html>밑에 css 이라면, 템플렛 밖의 영역이 아닌가요?..

    저는 <style>... </style> 사이에 css 코드가 있어서요...

    그럼 어떻게 해야하는지 모르겠습니다...


    그리고 구글 웹폰트를 자바스크립트 형식으로 템플렛에서 삽입하는게 속도가 더 빠를지요?

    아니면 css 링크를 받아서 하는게 더 빠를지요?
    • Walter E.
      Walter E.
      2014/06/17 07:07
      </html> 아래에 <link>를 통해서 CSS를 넣는 것이 속도상 더 좋습니다. 컨텐츠가 모두 로드된 후에 스타일이 적용되기 때문입니다.
      하지만 CSS가 길게 되어 있는 경우에는 <head>에 넣는 것이 더 좋을 듯 합니다. 이왕이면 css 파일로 만들어서 <link> 방식으로 연결하는 것이 좋습니다.
      웹폰트를 적용할 때 자바스크립트와 CSS 속도상의 차이는 없을 듯 합니다.
  3. 김나은
    김나은
    2015/04/27 23:45
    안녕하세요? 워드프레스 블로그 운영 중입니다.

    본문 내용 중 "CSS 파일의 사이즈가 작은 경우"에서 CSS파일을 html에 삽입하는 부분이 잘 이해가 안 가는데요.ㅠㅠ

    여기서 궁금한 게,

    1. 삽입되는 html은 블로그의 html파일을 말씀하시는 건가요?

    2. 제 사이트에서 최적화되어야 하는 CSS 중 한 녀석을 보면, 내용이 '/*FILESTART*/ 이거 하나 뿐입니다;; 29바이트 짜리 파일인데요. 위 글의 설명대로 이 파일을 최적화하려면 html에 삽입해야 하는데, 내용도 없는 녀석을 어떻게 삽입해야 할까요?

    질문이 좀 기네요..ㅠㅠ 죄송합니다.ㅠ
    • Walter Erzsa
      Walter Erzsa
      2015/04/28 01:52
      작은 크기의 CSS를 HTML에 넣으라는 가이드는 다음과 같은 방법을 말합니다.

      <html>
      <head>
      <style type="text/css">
      ...
      </style>
      </head>
      </html>

      <style> 내부에 CSS 내용을 입력하면 됩니다.

      CSS 파일에서 /* */ 내부에 있는 내용은 모두 주석입니다.
      주석은 코드의 내용을 파악하는데 사용되므로, 실제로 실행되지는 않습니다.
      따라서 CSS에 위의 주석 내용만 있다면, 그 파일은 굳이 로드할 필요 없습니다.
  4. 김나은
    김나은
    2015/04/28 04:23
    답변 감사합니다. 근데 CSS가 큰 경우,

    말씀하신 '해당 스타일 시트에서 반드시 필요한 스타일 속성만을 HTML에 삽입한 후~'에서 반드시 필요한 스타일 속성을 어떻게 찾아내는지요...?

    만악 필요한 부분을 찾아내면, 필요한 부분은 본 CSS에서 지우고 전 단락에서 말씀하신 것처럼 HTML에 넣으면 되는 건가요?

    결국 본 CSS는 필요한 부분이 지워진 채 남은 부분으로만 서버에 저장해두면 CSS가최적화되는 것인가요?

    자꾸 귀찮게 해서 죄송합니다ㅠㅠ
    • Walter Erzsa
      Walter Erzsa
      2015/04/28 20:36
      반드시 필요한 스타일은 개발자의 생각에 따라 달라질 것 같습니다.
      아무래도 자주 사용되는 클래스라면 중요한 스타일이겠죠.

      외부 CSS를 불러오는데 시간이 걸리기 때문에 HTML에 포함시키라는 것이니, CSS 파일 용량과 관련 있는 것은 아니고, 외부 CSS 갯수가 적으면 적을수록 좋습니다.
  5. 김나은
    김나은
    2015/04/29 02:39
    그렇다면 개인이 CSS의 우선 순위를 파악하는 것은 어렵겠군요? 테마 제작자에게 물어 보는 게 가장 빠른 방법인가요?

    귀찮게 해서 죄송합니다..
    • Walter Erzsa
      Walter Erzsa
      2015/04/29 22:00
      쉽게 알 수 있는 방벙은 HTML에서 많이 사용되고 있는 클래인 경우에 중요하다고 할 수 있습니다.
  6. 안녕하세요
    안녕하세요
    2016/08/20 15:53
    안녕하세요. 꼭 필요한 자료였는데 덕분에 이해됐습니다. 감사합니다.
    실제로 <link> 태그를 </html> 밖에 두니 속도가 빨라진 게 확실하게 체감됐습니다.
    그래서 어지간하면 이 방법을 쓰고 싶긴 한데,
    문제는 </html> 밖에 CSS 파일을 두는 게 웹표준이 아닌 것 같더군요.
    CSS만 밖으로 빼고 W3C 마크업 검사를 하면 HTML5이 아니라는 에러 메시지가 나옵니다.
    혹시 웹표준을 준수하면서 CSS 전송 최적화 하는 방법은 없을까요? ㅠㅠ