HTML을 압축하여 용량을 줄이고 속도를 향상시키기

HTML 압축하기

이전 포스팅에 구글 블로그에서 HTML모드 사용 시 압축된 HTML을 줄바꿈하여 보기좋게 편집하는 내용을 썼었는데 이번 포스팅은 반대되는 내용인 압축에 대한 내용입니다. 티스토리도 속도가 중요하지만 구글 블로그 특징이 속도나 SEO에 특화되어 있다는게 많이 보여서 신경을 안쓸 수 없네요.

HTML압축 사이트 : http://htmlcompressor.com/compressor/

HTML압축 사이트

htmlcompressor 사이트 이용하기

-htmlcompressor 으로 접속하여 Source란에 줄바꿈 안되고 압축되지 않은 HTML코드를 붙여넣습니다. 붙여넣고 난 후에는 오른쪽 Code type에서 Show Options 를 눌러줍니다.

htmlcompressor 코드 붙여넣기

Show Options을 누르면 옵션이 나오는데 여기서 Single line html output을 클릭하고 초록색 Compress 버튼을 눌러주면 코드가 압축됩니다. 

압축 옵션 선택

압축이 완료되면 기존 코드대비 얼마나 용량이 줄어들었는지 표시 됩니다. 저는 85% 정도 줄어들었네요. 이제 Select ALL 버튼을 눌러서 다시 구글 에디터에 붙여넣기 하고 저장하기만 하면 됩니다.

HTML코드 압축 완료

압축이 완료된 모습

압축이 끝나고 에디터에 붙여놓은 모습의 전 후 비교입니다. 전에 비해 줄바꿈이 다 사라지고 코드가 구글블로그 에디터에서 정렬하기 전 모습처럼 한줄로 바뀐 모습을 볼 수 있습니다.

HTML 압축 전후 모습