티스토리블로그 모바일 로딩속도 개선 후기
- ITㅣInternet/Tistory Blog
- 2017. 9. 25. 17:46
반응형스킨은 기본적으로 PC 환경과 모바일 환경에서 모두 동질적 identity로 최적의 UI(User Interface)를 표현할 수 있고, 비반응형 스킨이 발생시킬 수 있는 PC와 모바일 버전에서의 이중 URL 생성문제로 인한 블로그지수의 저하 문제가 없으므로, 최근 티스토리 블로그를 하는 분들은 대개 반응형 스킨을 사용하는 추세다.
하지만 반응형스킨은 이 같은 장점에도 불구하고 PC화면과 동일한 내용을 모바일 환경에 맞추어서 보여줘야 하는 문제로 인하여 모바일에서의 로딩 속도가 느려질 수 있다는 단점이 있는데, 이 부분을 간과하면 오히려 비반응형 스킨을 사용할 때보다 방문자 수가 줄어드는 등의 부작용을 발생시킬 수 있어 반응형 스킨을 사용하는 사용자라면 항상 이 모바일 페이지 로딩속도 문제를 염두해두어야 한다.
필자의 경우도 티스토리 블로그를 하다보니 이것저것 호기심으로 붙여본 플러그인들과 광고들로 인하여 어느새 블로그가 매우 무거워져 모바일로 블로그로 접속하면 로딩속도가 최소 4초에서 최대 7초까지도 걸리는 문제가 발생하였었는데, 이번 포스팅에서는 이를 해결하는 과정에서 터득하게 된 모바일 로딩속도 개선 방법과 후기에 대하여 소개해보도록 하겠다.
---------------------------------------------------
Written by 행복을만드는전략가
독한 세상에서 행복을 만드는 전략과 정보
---------------------------------------------------
Theme
티스토리 반응형스킨 모바일 로딩속도 개선 후기
서두에서도 언급한 것처럼 반응형 스킨에서 로딩 속도가 느릴 수 있는 것은 대부분 모바일에서의 문제다.
그렇기 때문에 블로그 스킨을 업데이트한다거나, 광고를 추가한다거나, 플러그인이나 소스코드를 추가한다거나 하는 등의 변동 사항이 생긴 경우는 업데이트 후 반드시 모바일로 페이지가 열리는 속도를 체크해보는 것이 좋은데, 이 때 페이지가 열리는 속도가 3초를 초과한다면 속도 개선이 필요하다.
참고로 이 3초라는 시간은 직접 테스트해보면 체감할 수 있을테지만, 인내의 기준선과도 같은 시간이기 때문에 페이지가 열리는 속도가 이 시간을 초과한다면 방문자가 이탈할 가능성이 급격히 높아진다고 보는 것이 좋다.
한편, 이 로딩속도는 스마트폰의 기종에 따라, 그리고 웹브라우저 종류에 따라 다르게 나타나기도 하지만, 테스트할 때의 디바이스는 보급형 기종으로 그리고 웹브라우저는 'Internet Explorer'로 하는 것이 적당하다.
왜냐하면 이들이 가장 많은 사람들에 의해 사용되기 때문이고, 또 'Internet Explorer'의 속도가 'Chrome'의 속도보다 다소 느린 측면이 있기 때문이기도 하다.
그리고 속도 측정은 위와 같은 환경에서 스톱워치 등을 이용하여 직접 여러번 측정해보는 것이 실사용환경을 가장 잘 대변할 수 있는 결과치로 생각되고, 이외에 구글에서 제공하는 'Test your mobile speed' 모바일속도 측정도구로 크로스 체크를 해보는 것도 보다 객관적인 측정을 위한 하나의 방법이라 할 수 있겠다.
참고로 구글에서 제공하는 'Test your mobile speed'나 'PageSpeed Insights' 등의 도구들의 이용경험과 이용 시 주의사항 등에 대해서는 다음 시간에 따로 한 번 소개할 수 있도록 하겠다.
다시 본론으로 돌아와서 이렇게 측정된 속도가 3초를 초과하였다면, 초과되는 시간의 많고 적음에 따라 테스트 방법을 다음과 같이 가져가는 것이 효과적이다.
우선 3초를 약간 상회하는 정도라면, 현재의 상태에서 광고나 플러그인, 소스코드 등을 하나씩 줄여가면서 속도개선여부를 확인해보는 방법이, 4~5초를 넘어서는 경우라면 스킨을 초기화시켜 스킨만 있는 상태에서 각 요소들을 하나씩 추가해가면서 속도를 확인해보는 것이 더 효과적이다.
그리고 아래는 모바일 페이지 로딩 속도에 영향을 미칠 수 있는 요인들과 각 요인 별로 필자가 직접 조치해 본 결과에 대한 경험치들이다. 참고로 스킨마다 아래 요인들의 조치 결과는 서로 다르게 도출될 수 있음을 감안하는 것이 좋겠다.
1. 플러그인 사용 다이어트
티스토리 블로그 모바일 로딩속도 문제가 나오면 늘 거론되는 부분이 바로 이 플러그인 사용을 다이어트 하라는 부분이다.
실제로 블로그를 운영하다보면 꼭 필요하지는 않더라도 호기심으로 이런저런 플러그인들을 사용해보게 되는데, 이러한 것들이 쌓이면 로딩속도에 좋지 않은 영향을 끼친다고 한다.
하지만 필자의 경험상으로는 플러그인 해제로 얻을 수 있는 로딩속도의 개선 효과는 미미한 수준이었다. 그래도 로딩속도에 문제가 있는 경우는 안하는 것보다는 나으니 중요도가 떨어지는 플러그인들을 이 참에 해제시키는 것이 좋겠다.
2. 이미지 용량 다이어트
필자의 경우는 평소 이미지 용량에 신경을 쓰는 편이어서, 이미지 용량 부분에서 딱히 조치할 것은 없었지만, 이미지 용량을 다이어트하지 않고 업로드 한 분들은 이 이미지 용량을 줄여주는 조치만으로도 속도 개선효과를 크게 보기도 하였다고 한다.
참고로 이미지 용량을 다이어트 하는 방법은 이미지 사이즈를 줄이고, 'jpg'와 같은 저용량 포멧으로 변환하는 것이다.
3. 광고 개수 다이어트
필자가 모바일 로딩속도 개선에서 가장 큰 효과를 본 부분이 바로 이 광고개수를 다이어트 하는 것이었다.
사실 애드센스 검수를 통과하고 나서 승인이 완료되면 효과적인 광고의 유형과 게재 위치를 파악하고자 이곳저곳에 광고를 게재해보게 되고, 그러다보면 어느새 광고개수가 많아져 블로그가 느려지게 된다.
필자의 경우도 호기심에 하나씩 달아보기 시작한 광고가 어느새 포스트 페이지에서만 작게는 6개에서 많게는 9개까지도 출력되고 있었고, 더욱이 필자가 사용하고 있는 스킨의 특성상 사이드바에 게재한 광고도 포스트 페이지가 열릴 때 같이 출력이 되다보니 포스트 페이지에 부하(load)가 집중되어 더욱 느렸다.
그렇다고 광고의 개수를 무작정 줄일 수는 없으므로, 이럴 때는 광고 개수는 줄이되 광고 배치의 효율화를 통하여 로딩 속도도 개선하면서 수익성 저하를 막을 수 있는 쪽으로 개선방향을 잡는 것이 좋다.
그래서 필자의 경우도 사이드바에 있는 광고 2개를 모두 제거하고, 본문 카테고리의다른글 하단의 인피드 광고도 제거하여 포스트 페이지에서 노출되는 광고의 수를 반으로 줄였다. 대신 블로그목록 페이지는 부하(load)가 없으므로 이 쪽에 광고 2개를 추가하여 밸런스를 맞춰보았다.
그 결과 겨우겨우 3초 정도로 맞출 수 있었는데, 소탐대실(小貪大失)이라는 말도 있듯이 작은 수익을 탐하다 이탈률을 높여 큰 수익을 잃는 우를 범하지 않는 지혜가 필요해 보인다.
4. 티스토리 권고 사항
이외에 티스토리가 공지를 통하여 로딩 속도에 문제가 있는 티스토리 블로거들을 위하여 안내한 내용이 있는데, 이는 아래 링크를 클릭하여 참고해보길 바라겠다.
[관련링크] 티스토리 블로그속도 개선 공지사항
5. 글쓰기 습관
이 사항들은 당장 조치가 필요한 문제라기보다는 향후 포스트 작성 시 개선해야할 문제들로써, 과도한 이미지 사용 자제, 본문 내용 속 가급적 gif애니메이션, 플래시, 사운드 파일의 사용을 자제하는 것이 좋다고 한다.
이상으로 티스토리 블로그 반응형 스킨의 모바일 로딩속도 개선 후기에 대하여 소개해보았다. 다음 시간에는 이어서 본문에서 언급한 'Test your mobile speed'나 'PageSpeed Insights' 등의 측정ㆍ분석도구들에 대해서도 구체적으로 살펴보도록 하겠다.
