블로그 속도 향상을 위한 HTML, CSS, JS 파일 용량 줄이기

     ✔ 파일 용량 축소를 통한 블로그 로딩 속도 개선

     

    이 글은 티스토리 블로그를 기준으로 작성되었습니다. 이하 블로그는 티스토리 블로그를 말하는 것입니다. 블로그에서 스킨에 포함되어 있는 여러개의 CSS, JS 파일과 skin.html 을 사용하고 있는데요. 블로그가 브라우저에서 보여지기 위해서는 CSS, JS, HTML 파일이 로딩되는데요. 해당 파일의 용량이 크다면 그만큼 로딩될 때 시간이 더 걸리게 됩니다. 그래서 CSS, JS, HTML 파일에 불필요한 부분을 제거해서 파일 용량을 줄여서 사용한다면 블로그 로딩 속도 개선 효과를 볼 수 있습니다. 실제 용량을 줄인 파일을 반영해보니 눈에 구분될 정도로 속도가 개선된 것을 느낄 수 있었습니다. 특히, 반응형 스킨을 사용하고 있다면 파일 용량을 줄여 사용하는 것은 꼭 한번 해볼만 한 것 같습니다.


    여러 군데의 파일 용량을 줄여주는 사이트에서 테스트를 해보았는데, 개인적으로 HTML Compressor 사이트가 가장 괜찮다고 판단해서 이 곳에서 파일 용량을 줄여서 사용하였습니다. 아래의 내용 중 주의사항은 CSS와 JS의 경우 주석이 없어지는 방식입니다. 주석이 꼭 필요한 경우 HTML 용량 줄이기 방식으로 진행해주세요. 대신 압축율은 떨어집니다.



    1. HTML 용량 줄이기

    2. CSS 용량 줄이기

    3. JS 용량 줄이기


    순서로 진행하였습니다.


     HTML Compressor 사이트 바로가기 

     http://htmlcompressor.com/compressor/



     ✔ 사이트 메인 화면입니다. 화면 구성이 명시적으로 되어 있어서 사용하는 것은 그리 어렵게 보이지 않습니다.


     ✔ HTML 용량 줄이기

     


     ✔ HTML 용량을 줄이는 방법입니다.

     1. Code type을 x/html 로 선택합니다. (기본으로 선택되어 있는 값입니다.)

     2. 용량을 줄일 HTML 내용을 복사해서 붙혀넣기합니다.

     3. Single line html output (내용을 한 줄로 나오도록 한다.), Never strip quotes (태그 값에 "" 처리한다.) 옵션을 체크합니다.

        (Code type 영역에 Show options를 선택하면 옵션 목록이 보여집니다.)

     4. Preserve all x/html comments (문서에 포함된 주석을 제거하지 않는다.) 옵션을 체크합니다.

        (Code type 영역에 Show options를 선택하면 옵션 목록이 보여집니다.)

     5. Compress 버튼을 선택하면 HTML 압축을 처리합니다.



     ✔ 압축 비율이 57%로 용량이 거의 절반 가까이 줄었습니다.

     1. Here을 선택해서 파일을 다운받거나

     2. Select All 버튼을 선택한 후 복사해 다른 곳에 보관해 둡니다.



     ✔ 블로그 관리자에서 HTML/CSS 편집 메뉴로 들어갑니다.



     ✔ 압축된 HTML 내용을 복사해서 붙혀넣기 한 후 저장 버튼을 선택하면 적용이 완료됩니다.



     ✔ CSS 용량 줄이기

     


     ✔ CSS 용량을 줄이는 방법입니다.

     1. Code type을 CSS 로 선택합니다.

     2. 용량을 줄일 CSS 내용을 복사해서 붙혀넣기합니다.

     3. Compress 버튼을 선택하면 CSS 압축을 처리합니다.



     ✔ 압축 비율이 89%로 많이 되지는 않았습니다.

     1. Here을 선택해서 파일을 다운받아 업로드할 CSS 파일명으로 변경하거나

     2. Select All 버튼을 선택한 후 복사해 업로드할 CSS 파일에 붙혀넣기합니다.



     ✔ 블로그 관리자에서 HTML/CSS 편집 메뉴로 들어갑니다.



     ✔ 압축된 CSS 파일을 선택해서 업로드하면 적용이 완료됩니다.


     ✔ JS 용량 줄이기

     


     ✔ JS 용량을 줄이는 방법입니다.

     1. Code type을 JavaScript 로 선택합니다.

     2. 용량을 줄일 JS 내용을 복사해서 붙혀넣기합니다.

     3. Compress 버튼을 선택하면 JS 압축을 처리합니다.



     ✔ 압축 비율이 71%로 꽤 많이 압축이 되었습니다.

     1. Here을 선택해서 파일을 다운받아 업로드할 JS 파일명으로 변경하거나

     2. Select All 버튼을 선택한 후 복사해 업로드할 JS 파일에 붙혀넣기합니다.



     ✔ 블로그 관리자에서 HTML/CSS 편집 메뉴로 들어갑니다.



     ✔ 압축된 JS 파일을 선택해서 업로드하면 적용이 완료됩니다.


     ✔ 마치면서

     

    블로그에서 로딩되는 파일들의 용량을 축소시켜 블로그의 로딩 속도를 개선해 보았습니다. 이게 얼마나 효과가 있겠냐 하시는 분들도 계시겠지만 반영하고 테스트해본 결과 상당한 효과가 있는 걸로 판단되었습니다. 평소에 블로그 로딩 속도가 늦는거 같다고 생각드시는 분들은 한번 시도해 보는 것도 좋을 것 같습니다.



     관련글 보기

     HTML, CSS, JS 파일 소스 코드 정렬하기


    저작자표시

    티스토리툴바