본문 바로가기

★IT★/유용한 사이트

HTML, CSS압축으로 속도 높이기<HTML Compressor>

반응형

방문자들이 들어왔을 때, 블로그 또는 사이트의 페이지 속도가 느리다면  그 방문자들은 여러분들이 정성스럽게 써놓은 글을 보지도 않고 바로 인터넷창을 닫을 것입니다. 그렇게 되면 방문자유치에 어려움을 겪겠죠. 저 또한 페이지 로딩 속도가 느린 블로그에는 잘 들어가지 않는 편입니다. 답답하거든요. 그렇다면 실질적으로 우리가 실행해볼 수 있는 페이지 속도를 높이는 방법엔 어떤 것이 있을까요?






페이지속도 높일 때, 우리가 해볼 수 있는 방법

1. HTML, CSS 압축

2. 사진 화질, 사이즈등 줄이기


대표적으로 위의 2가지 방법이 페이지 속도를 높일 때 주로 사용합니다. 그 중 HTML, CSS 압축에 대해 알아보도록 하겠습니다. 티스토리와 기타 HTML, CSS를 사용하는 블로그에서는 이를 압축하여 페이지속도를 높일 수 있습니다. 먼저 이 사이트를 이용하여 압축하기 전에 원본 소스는 따로 메모장이나 기타 워드에 저장해놓으시길 바랍니다. 나중에 HTML를 수정하고 싶을 때 원본소스가 필요하기 때문입니다.



HTML Compressor 홈페이지에서는 불필요한 주석들을 압축해주는 기능을 가지고 있습니다. 이 사이트를 통해 HTML과 CSS를 압축하여 사이트 페이지 속도를 높일 수 있습니다.

우선 Source 쪽에 자신이 압축하고자 하는 HTML과 CSS를 복사 붙여넣기 해줍니다. 그 다음 code type에서 압축하려는 종류가 HTML이라면 HTML을 선택하고, CSS라면 CSS를 선택하여 줍니다. 그런 다음 맨 밑의 초록색 버튼 'Compress'를 눌러주면 자동으로 압축하여 줍니다.


'Compress' 버튼을 누르면 Compressed 탭쪽에 압축된 소스코드들이 나오는데 이 것들을 그대로 복사하여 자신이 사용하고 있는 티스토리와 기타 HTML 블로그에 붙여넣기 하시면 됩니다. 압축하기 전과 압축 후의 소스내용이 달라서 사용하고 있는 스킨이 달라지거나 이상해질 줄 알았는데, 전혀 그런 것 없었습니다. 용량 변화는 압축 전 7086바이트에서  압축 후 4104바이트로 무려 58%나 줄었습니다. 뭐 이렇게 많이 줄었긴 했지만, 사이트의 속도는 여러가지 요소들이 복합적으로 최적화될 때 이루어지기 때문에 압축 말고도 다른 것들도 신경써야한다고 생각합니다.



반응형