CSS코드를 효율적이고 최적화하면서 파일사이즈를 줄일 수 있는 CSS최적화 방법에 대해서 얘기를 하려고 한다.
- 소개
더욱 더 복잡한 CSS코드를 쓰게 되면서 이러한 기술은 CSS파일 사이즈를 단지 몇kilobytes라도
줄여야할것이다.
1. CSS Sprite의 사용
"CSS Sprite는 image request의 요청을 감소시키는 방법이다. 여러이미지들을 하나의 이미지로
합치고 CSS background-image 혹은 background-position속성을 이용하여 이미지의 부분들을
훌륭하게 보여준다. - Yahoo Deloper Rule(http://developer.yahoo.com/performance/rules.html)
이러한 방법은 HTTP Request와 웹사이트의 트래픽을 효율적으로 줄여준다.
CSS Sprtie 참고
- A List Aprt - CSS Sprite (http://www.alistapart.com/articles/sprites)
- Azamsharp - Combining Images, CSS Sprites to Increase Performance (http://azamsharp.com/Posts/216_Combining_Images_CSS_Sprites_to_Increase_Performance.aspx)
2. 모든 CSS파일을 하나의 파일로 합쳐라
사용자들이 웹사이트를 접속할때 페이지의 모든 객체(이미지 또는 스크립트)를 서버에 요청하게된다.
당신이 몇개의 객체들을 다시 읽어 들인다면 페이지의 지연을 더욱 가중 시킬 것이고,
이러한 HTTP Request들은 당신 사이트의 응답시간을 느리게할 것이다.
이 기술은 CSS Sprite와 유사하다. (최소한 목표는 같다) HTTP Request를 감소시키는 것이다.
3개의 CSS파일을 로딩하고 있다면 브라우저는 3개의 HTTP Request의 요청을 보낸다. 간단하게
수학적으로 1개의 CSS File = 1개의 HTTP Reuqest인 것이다. 나는 일반적인 웹사이트에서
6~7개의 CSS파일을 Header에서 사용한다. 앞에 방법을 사용한다면 로딩시간을 더욱 효율적으로
만들어 줄 것이다.
- Before
<link rel="stylesheet" type="text/css" href="content.css" />
<link rel="stylesheet" type="text/css" href="about.css" />
<link rel="stylesheet" type="text/css" href="contact.css" />
- After
<link rel="stylesheet" type="text/css" href="layout.css" />
3. 외부파일(external file)로 CSS를 만들어라
외부파일(external file)을 사용하면 CSS 파일들이 브라우져에 의하여 캐시되어져
더 빠른 페이지를 만들 수 있다. CSS를 페이지내 inline으로 사용하게 되면 매번
HTML을 요청할때 마다 다운되어 진다. 이러한 HTTP request를 줄이기 위해서는
외부파일(external file)을 사용하면 된다. 하지만 HTML의 크기는 늘나게 된다.
그러나 external file(css)가 브라우저에 의해 캐시되어지면, HTML 문서의
크기는 커지지만 HTTP Request의 요청은 줄어들것이다.
- yahoo (http://developer.yahoo.net/blog/archives/2007/07/rule_8_make_jav.html)
외부 자바스크립트 또는 css파일을 동적으로 로딩하는 법
- 전통적인 방법
<head>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
- DOM Method를 이용하여 작성하는 법
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file
- 로딩시 이미 해당파일이 로딩되었는지를 체크하는 방법
var filesadded="" //list of files already added
function checkloadjscssfile(filename, filetype){
if (filesadded.indexOf("["+filename+"]")==-1){
loadjscssfile(filename, filetype)
filesadded+="["+filename+"]" //List of files added in the form "[filename1],[filename2],etc"
}
else
alert("file already added!")
}
checkloadjscssfile("myscript.js", "js") //success
checkloadjscssfile("myscript.js", "js") //redundant file, so file not added
4. css파일은 header/top에 위치해야한다.
문서의 header에 stylesheets를 이동시키게 되면 페이지의 로딩을 더욱 빠르게 할 수 있다.
이 방법은 페이지의 렌더링을 훨씬 빠르게해준다. - yahoo(http://developer.yahoo.com/performance/rules.html#css_top)
head에 stylesheets를 위치시킴으로써 두가지 문제를 피할 수 있다.
스타일이 적용되지 않은 내용들이 빈 흰색페이지나 번쩍거림을 피할 수 있다.
Steve Souders씨가 stylesheets를 웹페이지의 header부분에 넣지 않았을때의 문제점을
테스트해 놓았다.(http://stevesouders.com/hpws/rule-css-top.php)
Before
<html>
<head>
<title>CSS</title>
<style>
body {
font-family:verdana;
margin:0;
padding:0;
}
h1 {
font-weight:700;
margin:5px 0;
}
......
......
......
</style>
</head>
</html>
After
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
</html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
</html>
5. @import 대신에 Link를 사용해라
http://seye2.egloos.com/2319809 (이곳을 참조하면 된다.)
6. CSS를 짧게 써라.
같은 속성들을 같이 묶어 그룹화함으로써 CSS를 줄이고 최적화 시키는데 도움이 될 것이다.
여러줄에 속성을 사용하는 대신에 하나의 라인에 사용할 수 있다.
아래의 예제를 참조하면 된다.
CSS Shorthand
/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}
h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}
/* BORDER */
h1 {border:1px solid #000;}
h1 {border-
border-style:solid;
border-color:#000;
}
/* BORDER WIDTH */
h1 {border-2px 3px 4px;}
h1 {border-top-
border-right-
border-bottom-
border-left-
}
/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}
/* LIST STYLE */
ul {list-style:square inside url(image.gif);}
ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
/* OUTLINE */
h1 {outline:#f00 solid 2px;}
h1 {outline-color:#f00;
outline-style:solid;
outline-
}
7. 비슷한 스타일을 그룹화
이런 일은 오랜시간의 개발후에 쉽게 발생된다. 같은 스타일이 존재한다는 것을 잊어버리고
반복해서 선언한다. 그룹화 함으로써 좀더 쉽게 분석할 수 있고, 유사한 스타일을
쉽게 그룹화 할 수 있다.
Before
h1 {padding:5px 0; font-family:verdana; font-weight:700;}
#box1 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
#box2 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
After
h1, #box1 .heading, #box2 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
그러나 대부분의 경우 CSS Styles은 아래와 같이 하는것이 필수적이지는 않다.
Before
#nav a.home {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(home.gif) no-repeat 5px 5px}
#nav a.portfolio {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(portfolio.gif) no-repeat 5px 5px}
#nav a.contact {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(contact.gif) no-repeat 5px 5px}
#nav a.about {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(about.gif) no-repeat 5px 5px}
After
#nav a {padding:5px 0; font-family:verdana; font-weight:700; background:#fff no-repeat 5px 5px}
#nav a.home {background:url(home.gif)}
#nav a.portfolio {background:url(portfolio.gif)}
#nav a.contact {background:url(contact.gif)}
#nav a.about {background:url(about.gif)}
다양한 예제들을 보았고, 이것들은 CSS파일크기를 줄이고 가독성을 높이는데 훌륭한 방법이다.
8. 줄내림을 줄이자
h2 {
font-family:verdana;
padding:0;
margin:5px 0;
color:#333;
text-decoration:underline;
}
/* you can do it like this */
h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline;}
9. 마지막 세미콜론을 없애자.
h2 {font-family:verdana;color:#333;}
/* removed */
h2 {font-family:verdana;color:#333}
10. 주석을 간단하게
/************************************/
/* Content Page */
/************************************/
vs
/* content page */
11. 색설정을 간단하게
전체 코드 컬러를 사용하는 대신에:
#FFFFFF, #113344, #AABBCC, #FF0000
줄여서 사용할 수 있다.
#FFF, #134, #ABC, #F00
그러나 아래와 같은 경우는 바꿀 수 없다.:
#C4C4C4, #1A2B3C
12. px을 없애자
h2 {padding:0px; margin:0px;}
/* removed */
h2 {padding:0; margin:0}
13. 줄여서(약어등)을 사용하자
- 위에서 언급한데로 파일사이즈를 줄 일 수 있다.
14. 불필요한 클래스사용을 줄이자.
- IE Conditional Comments 내에 link stylesheets를 지원한다.
- 일반적인 CSS핵을 지원한다.(* html #foo대신에 html #foo를 사용한다)
15. CSS Compression Tools를 사용한다.
CSS Optimizer(http://www.cssoptimiser.com/)
Flumpcakes CSS Optimizer(http://flumpcakes.co.uk/css/optimiser/)
Clean CSS (http://flumpcakes.co.uk/css/optimiser/)
CSS Drive CSS Compressor(http://www.cssdrive.com/index.php/main/csscompressor/)
Online YUI Compressor(http://www.refresh-sf.com/yui/)
Style Neat(http://www.styleneat.com/)
참고사이트
- http://developer.yahoo.com/performance/rules.html
- http://www.sohtanaka.com/web-design/optimizing-css-tutorial/
- http://www.dailyblogtips.com/speed-up-your-site-optimize-your-css/
- http://www.pat-burt.com/web-development/10-tips-for-a-smaller-css-file
원문 사이트
- http://www.queness.com/post/588/15-ways-to-optimize-css-and-reduce-css-file-size
출처:http://egloos.zum.com/seye2/v/2428232