[블로그 스킨 만들기] 블로그 속도를 빠르게 - css tidy

블로그 스킨을 만들 때 예쁘게하는 것도 좋지만 속도도 빠르게해야 합니다.

그 중에서도 css 최적화를 통해 속도를 빠르게 할 수 있는데요.

CSS를 이용해서 블로그 속도를 빠르게 하는 방법은 여러가지가 있지만 대표적인 것들은 다음과 같습니다.

• inline CSS나 html 문서의 head에 넣는 것보다 외부 CSS 파일을 이용해라.
• 외부 CSS 파일 여러개를 하나로 합쳐라.
• css 파일은 html 문서의 head에서 호출하고, js 파일은 body의 끝 부분에서 호출하라.

위 내용은 일단 css 파일을 만들어 놓고 해야하는 일 들입니다.

위와는 달리 css 파일을 만들 때 해야할 것들이 있는데요.

같은 속성을 가진 선택자끼리 묶는 방법, 줄바꿈, 공백 문자는 제거하는 것 등이 있습니다.

css 파일의 용량을 줄이고, 속성들을 효율적으로 정의해서 블로그의 속도를 높이는 방법입니다.

그런데 이건 css에 익숙해지지 않으면 하기 힘든 일이거든요.

그래서 위 작업들을 한 번에 해결해주는 사이트를 소개할까합니다.

CSS Formatter and Optimiser

CSS Formatter and Optimiser

기본적인 사용법은 사이트에 접속해서 왼쪽에 css 내용을 넣고 오른쪽에서 최적화할 설정을 정한 다음 process css 버튼을 누르면 됩니다.

code layout에서 다섯가지 중에 하나를 골라서 선택하세요. highest를 하셔도 괜찮습니다.

오른쪽 아래에 있는 최적화 설정은 고급설정이라고 보시면 됩니다. Sort Selector (caution)와 Lowercase selectors는 웬만하면 체크하지 마세요. 나머지는 필요에 따라서 선택하시면 됩니다.

Regroup selector는 하나의 선택자가 여러 개로 나눠져 있을 때 어떻게 할 것인가를 결정하는 건데요. Only seperate selector는 나눠져 있는 걸 하나로 합치는 겁니다. Merge selectors with same properties는 속성이 같은 여러 선택자들을 한 번에 정의하는 건데요. 일모리님의 블로그 CSS 테크닉과 성능향상 관계라는 글에 보면 이 방식이 속도가 더 빠르다고 하는군요. 기본값인 merge selectors with same properties를 선택하세요.

아래 그림처럼 설정하시면 별 무리없이 최적화할 수 있습니다.

최적화가 끝나면 바로 아래에 바뀐 내용을 표시해줍니다.

그리고 최적화된 css를 보여주는데요, 오른쪽 끝에 있는 "Copy to Clipboard" 버튼을 눌러서 복사할 수 있습니다.

 

html 문서에서는 문서의 구조만 잡고, 스타일이나 속성 등은 css 파일로 나눠서 하는 것이 좋은 웹페이지를 만드는 거라고 하는군요.

css가 상당히 중요한 만큼 그 관리에도 신경을 쓰면 좋겠죠. 위 사이트에서 css를 최적화하면 조금이나마 블로그를 여는 속도가 빨라집니다.

관련글

다음 검색에서 누락된 게시물 찾기
네이버 검색에서 누락된 게시물 찾는 방법
사진 용량 줄이기
블로그 로딩 속도를 빠르게 - CSS Image Sprites
blockquote - 인용문 배경 예쁘게 꾸미는 html 태그와 css
[블로그 꾸미기] 꼭 알아야할 필수 CSS 첫번째 - border, margin, padding