본문 바로가기
옛글(2019년 10월 이전)

블로그 속도 향상을 원해요!

by Spatula 2017. 9. 19.
반응형

  블로그 스킨의 계속된 교체

지난 7월에 블로그를 재개하여 지금까지 거쳐간 스킨이 20개가 넘는 것 같습니다. 많은 분들이 스킨을 자주 바꾸는 것이 좋지 않다고 하셨으나, 제가 스킨을 고르는데 너무 까탈스러워 하루가 멀다하고 스킨을 바꿔왔습니다. 스킨을 바꾼이유는 다음과 같습니다. 

1. 스킨의 모양이 맘에 안 들어서(깔끔한 스킨을 좋아합니다)

2. 스킨을 수정하다가 포기해서(깔끔하게 만들다 실패한 겁니다)

3. 스킨의 속도가 맘에 안 들어서(깔끔하게 다 커스텀 해놨는데 너무 느려진 거죠)

그래서, 스킨을 계속 바꾸게 되었습니다. 이 스킨이 맘에 들지만, 속도가 느리다거나, 이 스킨이 좋아서 수정을 시작했다가 감당을 못한다거나 하는 것이 스킨 교체의 주된 원인이었습니다. 그러나 그 스킨이 나빠서라기 보다는 개인적인 무지(수정을 제대로 못하니)와 취향에 따른 결정이었기 때문에 결코 거쳐간 스킨들을 폄하할 생각은 없습니다. 짧은 기간이었어도 사용감이 좋았던 스킨들을 몇 가지 소개해 봅니다. 


1. 마크쿼리 3.0.5

2. 마크쿼리 4.0

3. fastboot 1.6.2

4. windup

5. hare

6. nana 5

7. neopart

                                                    마크쿼리를 제외하고는 스킨 원본 주소가 링크되어 있습니다.


정말 가볍고, 너무 깔끔했던 스킨이었으나 정말로 다룰줄 모르거나, 제 스스로 코드를 잘 못 건드려 사용할 수 없게 만들어 버리거나 기타의 문제를 많이 만들어 냈었죠. 그 중에서도 마크쿼리는 참 애증의 관계가 되버렸습니다. 참 맘에 드는데, 다른 블거님들의 강의를 따라 코드를 수정하면 다 망하더라구요. 그러다가 발견한 마크쿼리와 비스무리한 이 스킨 바로 골라조님의 블로그에서 다운 받게 되었습니다.  


  소 뒷걸음 치다 쥐잡은 격! 

이스킨, 저스킨을 수정하고, 만지다 보니 이 까막눈도 약간의 css와 html보는 눈이 생기더라구요. 참 20년 전, 컴퓨터를 전공했다고는 믿기 어려울 정도로 코드와 멀어졌었는데, 이 기회에 많이 친해지고야 말았습니다.(반강제로)

지금 이 블로그에 사용된 스킨은 골라조님의 Yleb1.01스킨입니다. 다른 그 어떤 것 보다도 웹의 접속 속도가 빨라 선택하게 되었습니다. 속도가 빠른지 어떻게 알았냐구요? 여기 저기 스킨 구하러 다니다 줏어들었는데, 속도 측정 사이트가 있더라구요.


구글에서 사이트 속도 측정이라고 검색어를 넣으면 '모바일 웹사이트 속도 및 성능 테스트' 라는 검색 결과가 첫번째로 보이실 겁니다. 

링크를 클릭해서 들어가면 내 사이트의 모바일 접속 환경을 테스트 해 보실 수 있습니다. 

자신의 블로그 주소를 집어 넣고 테스트를 시작하면 되는데 무려 5초가 나왔습니다. 위에서 언급했던 스킨들에서는 보지 못했던 속도가 등장했습니다. 가장 빠르다고 하던 스킨들 모두 10초를 넘겼었습니다. 물론 제 블로그 자체의 문제가 있었을 수도 있다는 것을 알지만, 제가 테스트한 결과는 지금 사용하는 스킨이 가장 빨랐습니다. 


블로그 속도 향상 tip 1. 빠르고 가벼운 스킨을 선택하라!


  코드 최적화 하기!

코드를 다이어트 하는 것도 내 블로그의 접속 속도를 높이는 방법 중 하나입니다. 빠른 스킨이 더 빨라질 수 있는 기회이니 한 번 시도해 보시는 것도 좋을 것 같습니다. 코드 압축 사이트 들인데, 자바 스크립트(java script)와 스타일 시트(CSS), html까지 다이어트가 가능합니다. 일단 코드를 자기 입맛에 다 커스터마이징 하셨다면, 코드 압축을 해서 접근성을 향상시키는 것이 필요합니다. 대부분의 사이트 방문자들이 4초 이상은 기다려 주지 않는다고 하니말이죠. 


그리고 한 가지 더, PageSpeed Insights에서 속도 측정을하고 나면 내 사이트의 파일을 최적화된 파일로 바꾸어 다운로드가 가능합니다. 


위 그림에 보시면 최적화된 이미지, 자바스크립트, CSS리소스를 다운로드 하세요 라고 써있습니다. 이 파일을 압축파일로 제공하는데 다운 받아서 html/css메뉴에 들어가 내 파일들에 덮어 씌워주면 됩니다. 


그리고는 최적화된 코드를 압축할 차례겠죠?

블로그 속도 향상 tip 2. 블로그에 사용된 각종 코드와 이미지를 최적화하라!


  코드 다이어트 하기!

제가 이용한 서비스는 CSS압축은 http://refresh-sf.com/ 에서 진행하였고,

html압축은 http://htmlcompressor.com/compressor/ 에서 진행하였습니다. 

CSS도 복붙하시면 되고, 티스토리의 CSS는 style.css인것 아시죠? input 사이즈가 많이 줄어 든 것을 output사이즈에서 확인 할 수 있습니다. 


html도 복붙하고, 버튼하나만 누르시면 위 그림과 같이 빨간 그래프의 사이즈였는데 녹색 그래프의 사이즈로 코드가 줄어든 것을 확인 하실 수 있습니다. 


이제 얼마나 더 빨라졌는지 확인해 볼 차례죠?








속았나봅니다...

구글의 PageSpeed Insights의 결과도...





왠지 삽질한 분위기지만, 그래도 10초 안쪽에 속도를 가지고 있다는데 대 만족을 하고, 앞으로 한 동안은 이 골라죠님의 스킨을 계속 쓸 것 같습니다. 


블로그 속도 향상 tip 3. 블로그 코드를 다이어트 하라!


지금가지 2개월, 지루한 스킨 방랑을 마치고, 한 스킨에만 정착하길 바라며 글을 마칩니다. 감사합니다!!!


반응형

댓글