블로그 로딩속도 빠르게하기 두 번째 입니다. 이번에는 CSS Tidy를 통해 CSS의 용량을 줄이고 최적화하여 속도를 빠르게하는 방법입니다.

Tidy는 소스의 불필요한 부분을 제거해주고, 일부 오류도 바로 잡아주는 역할을 하기때문에 용량을 줄이는 것뿐 아니라 부수적인 이점도 있어요. 그러니까 꼭 사용해보세요.

용량 줄여봐야 얼마나 효과가 있겠어? 하시겠지만 0.1초라도 빨라지면 좋은 거잖아요. 티스토리가 아닌 설치형 블로그나 홈페이지를 사용하시는 분들께는 트래픽을 조금이라도 아낄 수 있어서 좋고요.

CSS Tidy

HTML/CSS 수정하는 전용편집기를 사용하시는 분들은 CSSTidy를 다운받아서 편집기와 연결해서 사용하시면 좋아요. 사용법이 자세히 나와있으니 참고하시고요.

전용 편집기를 사용하지 않는 분들은 온라인에서 사용할 수 있는 사이트가 있으니 걱정마세요.

Clean CSS

크게 세 부분으로 나눠져 있는데요. 왼쪽은 CSS를 입력하는 칸 입니다. 여기에 수정할 CSS를 넣으세요.

CSS Tidy - CSS 입력칸

 

압축율을 선택하는 설정인데, Highest는 빈칸이나 공백을 다 삭제해버려서 읽기는 어렵지만 가장 작은 크기로 압축하는 설정이에요. css를 수정할 일이 없는 분들이라면 Highest를 선택하셔도 되지만 가끔씩 수정하실 생각이라면 Standard를 선택하세요.

CSS Tidy - Layout 설정

 

아래는 좀 더 자세한 설정을 하는 곳이에요.

Preserve CSS: 주석, 핵 등의 사항을 삭제하지 않고 남겨두는 옵션

Sort Selectors (caution): 선택자들을 정렬하는 설정인데, 웬만하면 체크하지 마세요. 순서가 바뀌면 설정의 우선순위도 바꿔요.

Sort Properties: 속성들을 알파벳 순서로 정렬하는 설정

Regroup selectores: 같은 속성을 가진 선택자들을 하나로 합치는 설정. A와 B 선택자 모두 color:#333라는 속성을 가졌다면 따로 따로 두 번 쓰는 것보다 둘을 합쳐서 한 번에 쓰는 게 더 효율적이겠죠?

.article {color:#333}
.sidebar {color:#333}
 -> .article, .sidebar {color:#333}

Lowercase selectors: 선택자를 소문자로. CSS의 선택자는 대소문자를 구별하는데, 전부 소문자로 바꿔버리면 적용이 안돼요. 그러니까 절대로 선택하지 마세요.

Optimise shorthands: 여러개로 나눠져있는 같은 속성을 하나로 합하는 설정.

.article {margin-top:10px; margin-bottom:15px; margin-left:20px; margin-right:25px}
-> .article {margin:10px 25px 15px 20px}

Remove last ; : 세미콜론(;)는 각 속성을 구분하는 건데, 마지막에는 구분할 게 없으니 삭제해도 되겠죠? 한글자라도 줄이는 게 좋잖아요.

CSS Tidy - 옵션

 

나머지는 읽어보면 아실테니까 넘어가죠.

저 그림처럼 설정하시면 될 거에요.

설정을 마치고 Process CSS 버튼을 누르면 CSS Tidy가 CSS의 용량을 줄여줍니다. 줄인 CSS를 그대로 사용하시면 돼요.

모든 CSS를 다 사용하지 않아도 돼요. 다른 블로그에서 가져온 팁 중에 본인이 수정을 할 수 없을 경우에는 해당 CSS만 Tidy를 통해서 용량을 줄여도 돼죠.

CSS의 용량을 줄인 다음에는 HTML 중간중간에 넣지 마시고 문서의 HEAD에 넣으면 블로그 로딩이 더 빨라집니다.

함께 보면 좋은 글

블로그 로딩 속도 빠르게 하기 - javascript 압축
블로그 속도 측정 - Google PageSpeed Insights
구글 페이지랭크 (Google PageRank) 알아보기
애드센스 최적화 배치 도움되는 곳