HTML 압축하기 HTML Compressor

HTML 압축하기 HTML Compressor

HTML/CSS/Javascript 압축하기

HTML Compressor 사용법

웹사이트/블로그 속도 올리기

웹페이지를 제작하거나 블로그를 운영하시는 분들이 많이 있습니다.

저 역시 블로그를 운영하고 있는데요.

본인이 제작한 웹페이지나 블로그에 누군가 방문을 했을 경우 로딩이 느리다면 방문자는 어떻게 할까요?

아마도 페이지를 닫아버리거나 뒤로가기 버튼을 클릭할 수도 있겠죠.

그렇다면 HTML 코드를 개선해서 로딩속도를 올려야 할텐데요.

이번 포스팅에서 소개할 사이트는 HTML Compressor라는 사이트 입니다.

HTML Compressor는 HTML 코드를 압축하여 불필요한 HTML 코드를 없애고, 사이트나 블로그의 속도를 올리는데 도움을 줍니다.

이 포스팅을 읽는 분 중에 컴퓨터나 웹프로그램에 대한 지식이 부족하여 HTML 코드 압축은 복잡하고 어려울거 같다고 생각하신 분들도 있을듯 한데요.

HTML 코드 압축! 전혀 어렵지 않습니다.

이 포스팅을 한번만 읽고 테스트를 해보시면 아마도 금방 익숙해질거라 생각합니다.

HTML Compressor 사이트의 주소는 다음과 같습니다.

http://www.htmlcompressor.com/compressor/

HTML Compressor 바로가기

사이트에 접속하면 온통 영어고 무언가 복잡하게 보일지도 모릅니다만...

전혀 복잡하지 않으니 걱정하지 않으셔도 됩니다.

먼저 본인이 압축하고자 하는 Code Type을 선택합니다.

Code Type은 위와 같은 옵션이 있습니다.

HTML 혹은 CSS, Javascript 중에 원하는 옵션을 선택합니다.

저는 HTML 코드를 압축하기 위해 x/html 옵션을 선택하겠습니다.

옵션을 선택한 후 화면 중앙을 보면 Drag a File or Paste Code 이란 문구가 보일겁니다.

압축하고자 하는 파일을 드래그 하여 올려놓거나 소스코드를 붙여넣기 하라고 하네요.

저는 소스코드를 복사해서 붙여넣기로 압축을 시도하겠습니다.

위와 같이 소스코드를 붙여넣기 하고 몇 가지 옵션을 선택해서 압축을 하도록 하겠습니다.

Show Options 버튼을 클릭하면 몇 가지 옵션들이 나오는데요.

중요한 것들만 언급하고 체크를 하도록 하죠.

1번 옵션인 Single line html output 에 체크하면 압축해서 한줄로 하겠다는 옵션입니다. 다시 말하면 줄바꿈없이 압축을 하겠다는 의미이죠.

1번 옵션은 필수 옵션은 아닙니다만, 전 체크하고 압축을 하겠습니다.

2번 옵션은 따옴표 즉 "quotation marks"는 압축대상에서 제외한다는 옵션입니다.

2번 옵션은 필수 옵션입니다. 종종 "quotation marks"까지 압축을 해서 오류가 발생하는 경우가 있습니다.

3번 옵션은 주석으로 처리한 부분을 압축 대상에서 제외하겠다는 옵션입니다.

3번 옵션 역시 필수는 아니지만, 저는 체크를 하고 실행하겠습니다.

모든 옵션을 체크하였다면 하단에 Compress 버튼을 클릭합니다.

압축이 끝나면 위와 같이 오른쪽 상단에 압축 결과를 보여줍니다.