블로그, 홈페이지, 웹사이트 로딩 속도 개선하기 CSS편

Posted by 드린
2017. 8. 19. 01:09 팁(TIP)

2017/08/17 - [팁(TIP)] - 블로그, 홈페이지, 웹사이트 로딩 속도 측정하기

저번 글에서 로딩 속도를 측정하는 사이트를 알려드렸었는데요.


이번 포스팅에서는 로딩 속도를 개선하는 방법에 대해 알려드리려해요.

오늘은 몇가지 방법 중에 한가지인 CSS를 통한 로딩 속도 개선 방법이예요.


티스토리 블로그를 예로 들어

스킨 편집에 들어가시면 CSS 소스 항목이 있어요.

여기서 소스코드 정리도 깔끔하게 하시는 분들은 

알아보기 쉽게 개행(엔터)를 하기도, 띄어쓰기도 하죠.

위와 같이 말이죠.


하지만 이런 빈 공간들이 로딩 속도에 지장을 주게됩니다.

사람이 읽기에는 편할지몰라도, 

컴퓨터 입장에서는 의미없는 컴파일(컴퓨터가 이해하기 쉬운 언어로 변환)을 하게 됩니다.


CSS를 자주 변경해야하는 부분에는 

해당 포스팅에서 알려드리는 방법을 삼가하시는게 좋을 수도 있습니다.


그럼 어떻게 CSS를 통해서 페이지 로딩 속도 개선을 할까요?

그 해답은 바로 압축입니다.


의미없는 개행, 띄어쓰기, 주석 등을 최소화하여 압축시켜버리는 것이예요.


이 작업을 하기 전에 기껏 해놓은 CSS 코드가 

블로그, 홈페이지, 웹사이트에 적용이 되지 않을 수도 있으니

꼭 메모장같은 곳에 소스코드를 복사해놓으셔요.


위 과정을 마치셨다면,

https://csscompressor.com

으로 이동하시면 됩니다.


그럼 다음과 같은 화면이 나올텐데요.

Compression Level은 원하는 항목을 선택해주시고,

압축하기를 원하는 CSS 코드는 Input란에 붙여넣기 해주시면 됩니다.


그 후에 Compress를 눌러주시면

위와 같이 압축이 완료되게됩니다.

Compressed JavaScript라고 되어있는데, 홈페이지 상의 오류인듯 합니다.

input과 output의 결과를 보니 6.74%를 세이브 했군요.


보통 티스토리 블로그의 CSS 항목에는 

CSS 소스코드만 있기에 전부 붙여넣으셔서 

압축하시는 것도 나쁘지 않은 방법입니다.


이렇게 압축된 소스코드를 CSS 항목에 붙여넣으시고 적용하시면 끝이 나게 됩니다.

별거 없어보이지만, 

이 압축 하나만으로 많은 낭비를 축소하실 수 있습니다.


제 블로그의 원본 CSS 소스코드 전부를 압축시켜보았을 때, 

눈에 확연히 차이가 날 정도로 많은 양의 낭비를 최소화된 것이 눈에 보이실 겁니다.

  1. 무거운 스킨을 사용하시는 분들께 너무나 유용할 것 같습니다-
    CSS 압축해서 웹사이트 로딩 속도 개선하기 편 아주 잘 읽고 갑니다^^

  2. 좋은정보 잘 보고 가네요
이 댓글을 비밀 댓글로