블로그 로딩 속도 높이기 - THML, CSS, JS 압축

블로그 로딩 속도 높이기 - THML, CSS, JS 압축

   블로그 방문자들이 쾌적하게 콘텐츠를 이용하게 하기 위해 블로그 로딩 속도를 높이는 최적화 작업은 필수적으로 해야 합니다. 티스토리는 사용자가 직접 HTML과 CSS 코드를 수정할 수 있으므로 네이버 블로그보다는 조금 더 다양한 방법으로 최적화를 시도해 볼 수 있습니다.

- - - - -

☞ [ 바로 가기 ] 사이트 속도 측정하기

- - - - -

   먼저 이 포스팅을 읽기 전 위 링크를 참고해 운영하고 계시는 블로그나 웹사이트의 속도를 측정해보시길 바랍니다. 블로그 속도 측정 후 결과를 살펴보면 최적화를 위해 필요한 작업이 무엇인지 알 수 있습니다.

   서비스가입형 블로그(티스토리, 네이버, 이글루스)를 이용하는 경우 직접 서버를 관리하지 않기 때문에 '서버 응답 시간 단축'이나 PHP 코드 수정이 필요한 작업은 직접 할 수 없습니다. 하지만 HTML과 CSS 코드를 수정할 수 있는 블로그를 운영 중이라면 HTML 축소와 CSS 축소 작업은 간단히 할 수 있습니다.

---

HTML 축소 & CSS 축소 원리

   HTML은 웹 문서를 만드는 데 사용하는 기본적인 프로그래밍 언어 중 하나고 CSS는 만들어진 웹 문서의 스타일을 정하는 코드입니다. 블로그를 접속하면 제작된 HTML과 CSS를 바탕으로 페이지가 열리게 되고 이 파일들의 크기가 크다면 자연스레 로딩이 지연되게 됩니다.

   대부분의 HTML과 CSS 코드는 개발&수정 시 보기 편하도록 코드와 코드 사이의 간격을 늘이거나 공백을 둡니다. 이런 공백이 쌓이다 보면 제법 큰 용량이 되어 블로그 로딩을 지연시키는 원인이 됩니다. 뿐만 아니라 개발 혹은 수정 과정에서 코드를 중복으로 삽입하는 경우도 흔하게 발생하는 실수 중 하나입니다. 이런 중복된 코드 역시 불필요하게 파일의 크기를 늘리고 이 역시도 로딩을 딜레이 시키는 원인 중 하나입니다.

   HTML과 CSS에서 불필요한 코드들을 지우는 작업(압축)을 통해 파일의 크기를 줄일 수 있고 이는 블로그 속도 개선에 큰 도움이 됩니다. 

   과거에는 코드를 살피며 하나하나 직접 지우고 수정 해야 해 어느 정도 지식이 있는 사람만 최적화 작업이 가능했지만, 지금은 자동으로 코드를 압축해주는 사이트가 생겨 누구나 쉽게 할 수 있게 되었습니다.

---

HTML 압축 & CSS 압축 작업

   압축 작업을 진행하면 코드 간 공백이 거의 사라지기 때문에 후에 수정 시 보기 불편하다는 단점이 있습니다. 그러므로 압축 전 백업 파일을 만들어두었다가 수정할 때는 백업 파일을 이용하는 것을 추천합니다. 이 외에도 코드에 따라 압축 시 파일이 훼손되거나 손실될 수도 있으므로 백업 파일 생성은 반드시 잊지 말고 우선 작업하셔야 합니다.

(백업 파일은 코드 전체를 복사한 후 메모장에 붙여넣어 저장하는 방법으로 간단히 만들 수 있습니다)

- - - - -

☞  [ 바로 가기 ] HTML 압축 프로그램

☞  [ 바로 가기 ] CSS 압축 프로그램

- - - - -

1. 티스토리 관리 창에서 꾸미기 - HTML/CSS 편집을 클릭합니다.

2. HTML과 CSS 코드를 각각 복사합니다.

3. 복사한 코드를 각각 상단에 링크된 압축 프로그램을 이용해 압축시킵니다.

4. 압축된 코드를 복사한 후 다시 HTML/CSS 편집 창으로 돌아와 붙여넣기 한 후 저장 버튼을 누릅니다.

5. 사이트 속도 측정 사이트에서 어느 정도 개선이 이루어졌는지 확인합니다.

(만약 속도가 개선되지 않거나 오히려 감소했다면 다시 기존의 소스 코드를 사용하도록 합니다)

---

☞ [ 바로  가기 ] 고품질 블로그를 만드는 1급 정보! - 이탈률을 낮춰라!

☞ [ 바로  가기 ] 티스토리 글 SNS에 자동 발행하기

---

위 포스팅과 관련된 피드백은 언제든 환영합니다.

또한 질문이 있다면 댓글로 남겨주세요! 성실히 답변드리도록 하겠습니다.

감사합니다.