본문으로 바로가기

[티스토리] 블로그 로드 속도 향상 방법

category 만들기이야기/블로그 2014.08.24 16:34

 

 

블로그를 관리하다보면 신경쓸게 한두가지가 아니지만

 

오늘은 블로그 로드 속도 향상 방법을 알아보고자 합니다.

 

 

 

항상 애드센스에 접속하면 블로그나 사이트상태를 보여주지요?

 

본인의 블로그나 사이트의 상태는 어떠한지요?

 

 

애드센스에서 사이트상태를 클릭하고 분석한 페이지 중 하나의 주소를 클릭해봅니다.

 

 

제 블로그주소중 클릭한 주소의 분석상태는 모바일은 빨간색으로 데스크톱은 노란색이네요.

 

= 분석한 페이지 말고도 다른 주소도 해보셔도 됩니다.

 

 

  <<-- 속도를 체크해보실분들은 클릭

 

 

 

 

 

분석한 페이지에선 여러방법을 알려줍니다만 쉽게 할수 있는 방법은 다음과 같습니다.

 

 

 

1. 이미지 최적화

 

   간단히 말해 이미지의 용량을 줄이는 방법입니다.

 

   사진의 사이즈만 줄여도 용량이 줄긴 하지만 그것만으론 용량이 줄어들지 않는 사진도 가끔 있으므로

 

   평소에 글 작성시 사진 이미지의 용량 크기를 체크하면서 올리는것이 좋습니다.

 

 

. 포토샵으로 이미지 사이즈를 줄이고 

 

      다른이름으로 저장하기로 GIF나 JPG로 저장하면 됩니다.

 

 

= 그림판이나 사이트를 알려주신 분들도 있던데

 

  그림판은 화질이 않좋아지고 사이트로 가서 하는것은 이미지 갯수에 제한이 있다던지 속도가 느려서 패쓰~

 

 

 

포토샵으로 이미지 사이즈를 줄여 저장하는 방법은 아래와 같습니다.

 

☞ 포토샵 상단메뉴중 Image -> Image Size 클릭

 

 

 

☞ 사이즈를 정해줍니다.

 

 

☞ 다른이름으로 저장하기

 

    상단메뉴중 File -> Save As 클릭

 

 

☞ JPG나 GIF로 저장합니다.

 

    대부분의 이미지는 GIF로 저장하는것이 사진용량이 더 작았습니다.

 

 

동일 사진을 사진사이즈를 줄인후  JPG와 GIF로 저장하고 용량 비교를 해보았습니다.

 

 

 

 

 

2. 티스토리 블로그의 플러그인 정리하기

 

   admin -> 플러그인 아래의 플러그인 설정

 

   안쓰거나 불필요한 플러그인을 정리하는 것만으로도 속도가 향상됩니다. ^^*

 

 

 

 

3. HTML과 CSS 소스 축소하기

 

    

    <<-- 사이트에서 회원가입이나 기타조건없이 이용할수 있습니다.

 

 

  HTML과 CSS 소스 원본은 꼭 저장해놓고 사용하시기 바랍니다.

 

     = 압축 한 후에 소스를 수정할 일이 있을때 필요합니다. 

 

        압축 전 소스에 수정을 한 후 다시 압축하면 끝~!!

 

 

축소 방법은 화면 왼편엔 축소하고픈 HTML이나 CSS 소스전체를 복사해서 넣은다음.

 

 

오른편의 선택창에서 Show Options 을 누르면 아래와 같은 체크박스가 나옵니다.

 

위의 사진에 있는것처럼 초록색 compress 버튼을 누르면 됩니다.

 

 

 

HTML소스는 안뜨고 CSS소스를 줄일때는 아래와 같은 창이 뜹니다.

 

change 를 눌러주면 됩니다. 

 

 

HTML과 CSS가 축소 완료되면 소스를 복사해서 블로그의 HTML과 CSS에 넣어주면 끝.

 

 

 

 

 

위의 방법 3가지를 다 해도 사진이 많이 올라간 글은 여전히 속도가 마음에 안들지만

 

전보다는 나아졌네요.

 

블로그의 로딩 속도가 느리다면 한번 위 방법을 시도해 보시길 바랍니다.

 

 

◈ 추가사항

 

갑작스레 스킨이 오류가 나서 보니  CSS 압축에서 문제가 생기더라구요.

 

http://refresh-sf.com/ 에서 하니 오류가 안나서 추가해놓습니다. 

 

input창 안에 소스를 넣고 오른편 위쪽에 css압축인지 html압축인지 javascript인지 클릭하면 압축이 됩니다.

 

 

한 사이트에서 html과 css를 다 압축하려고 했더니

 

http://htmlcompressor.com/compressor/ 에서는

 

fastboot스킨에선 html은 압축도 잘되고 오류도 안생기나 css는 압축은 되는데 오류가 나는지 스킨이 엉망이 되고

 

새로운 CCZ-CROSS스킨은 css는 압축이 잘 되는데 html은 오류가 난다며 압축이 안되네요. ^^;;;

 

다행히 하나씩은 압축 잘되고 오류가 안나서 따로따로 하고 있답니다.

 

샐리가 소스에서 무언갈 잘못 입력한것인지...  

 

어쨌든 압축해서 티스토리 html과 css 적용할때 꼭 미리보기로 오류가 나는지 확인 후 적용하시기 바랍니다.


댓글을 달아 주세요

  1. 2015.08.01 05:29

    비밀댓글입니다

    • 2015.08.01 05:34

      비밀댓글입니다

    • BlogIcon 샐리 [MODA TV] - sally 신고">2015.08.04 00:09 신고

      본문에도 언급했지만 글만 있는것과 사진이 1장이라도 용량이 큰것
      사진용량이 적어도 사진이 많다면 로딩속도는 다를수 있답니다.
      제 블로그의 경우는 사진과 유투브동영상이 첨가되는 경우도 있어
      로딩속도는 페이지마다 다르답니다. ^^*