블로그 최적화 <HTML/CSS 압축하기>

Blog 최적화, HTML/CSS 압축

★ Why? 왜 HTML 소스를 압축하는가

오늘 알아볼 티스토리 블로그 최적화 파트는 HTML과 CSS의 압축입니다.

왜 HTML과 CSS를 압축하는지, 압축하는 방법을 알아보도록 하겠습니다.

  

HTML과 CSS는 블로그가 운영되는데 가장 기본적이고 중요한 데이터입니다.

컴퓨터나 모바일 등의 전자기기가 인식할 때 HTML과 CSS를 인식하는데 많은 데이터를 불러옵니다.

압축하는 이유는 바로 이 데이터를 더욱 빨리 인식할 수 있도록 

필요없는 데이터를 제거하고 간략히 나타낼 수 있는 문자와 간격을 수정하여 인식 속도를 높여주기 때문입니다.

물론 최근에 나온 컴퓨터들은 워낙 성능이 좋고 인터넷 또한 초고속 시대라서 많이 차이가 나지는 않습니다.

하지만 최신 컴퓨터가 아니거나, 모바일과 같이 PC보다는 처리 기능이 떨어지고 인터넷 환경이 좋지 못한 경우 

데이터를 불러올 때 더 많은 시간이 걸리겠지요. 

이러한 상황을 위해 HTML과 CSS를 압축함으로 조금 더 인식 속도를 높일 수 있게 되는 것입니다.

★ How? 어떻게 HTML 소스를 압축하는가

  

PeEn 블로그는 다음과 같은 방법으로 HTML/CSS 압축을 하였으니 다른 방법도 있을 수 있음을 유의해 주시길 바랍니다.

HTML Compressor 사이트에서 HTML 압축을 할 수 있도록 서비스를 제공하고 있습니다. 위에서도 말씀드렸듯이 HTML과 CSS 모두 이곳에서 압축하실 수 있습니다. 이제 HTML과 CSS를 압축하는 방법에 대해서 알아보도록 하겠습니다.

 먼저 자신의 티스토리 블로그 HTML/CSS를 저장해둡니다. 

(메모장에 저장하시거나 따로 창을 열어놓으세요)

HTML과 CSS를 저장해두셨다면 HTML Compressor 사이트로 이동해주세요.

조금 전 저장해두었던 HTML을 Drag a File or Paste Code 부분에 붙여넣어 줍니다. Code type은 x/html로 설정해줍니다.

그리고 Drag and Drop Charset: 는 요즘 블로그나 html로 구성된 사이트에서 주로 사용되는 Unicode (UTF-8)를 선택하여 주세요. 

(다른 기반으로 사용되는 경우 맞추어서 사용하여주세요.) 

 ShowOptions 를 클릭하고 Never strip quotes 박스를 클릭하여 주세요.

설정하신 후 Compress 를 클릭하면 Compressed부분에 압축된 html소스가 출력됩니다.

출력된 html 소스를 다시 자신의 블로그 HTML 수정하는 곳에 붙여넣어주고 저장하시면 완료됩니다.

CSS도 이와 같은 방법으로 설정하시면 됩니다.

단, Code type을 CSS로 설정하시고 바로 Compress 를 클릭하면 

Compressed부분에 압축된 CSS소스가 출력됩니다. 

출력된 CSS 소스를 자신의 블로그 CSS 편집하는 곳에 넣어주고 저장하면 CSS 압축이 완료됩니다.

★ HTML/CSS 압축방법 포스트를 마치며

블로그 최적화를 하다보면 먼가 얻어지는 뿌듯함도 있고 블로그를 꾸민다는 자체만으로도 만족감이 있네요.

이번 최적화는 자신의 블로그를 이용하는 사용자를 위해 더욱 편리함을 제공한는 

자그마한 노력이기에 한 걸음 더 사용자분들에게 다가가고 있는 것이 아닌가 생각이 됩니다.

앞으로도 부족한 포스팅 실력이지만 PeEn 블로그의 포스트를 많이 사랑해주세요.