[WEB] 티스토리 블로그 로딩 속도 관련 튜닝 요소...(Continued...)
티스토리 블로그 로딩속도 튜닝 !?
요즘 CSS파일과 HTML을 조금씩 보고 또 브라우저에서 지원하는 디버깅 툴을 보고 살짝 놀라고 있다. 파이어폭스나 크롬에서 F12를 누르면 튀어나오는 디버깅 툴이 매일 리눅스에서 VI와 Ctags를 이용하여 코딩을 하고 기십분씩 컴파일을 돌려 타겟보드에 올려 확인을 해야하는 필자에겐 살짝 놀라움이다.
티스토리 특히 기본 제공 모바일 스킨이 느려서 찾아보게 된 내용을 정리하고 자한다. 필요한 사람이 우물을 판다고 하지 않나... 바꾸어 말하면 잘 동작하면 굳이 알아보지지 않았을 내용이다. 덕분에 공부를 하게 되니 고맙기도 하다..
사용하고 있는 스킨이 반응형이라면 스킨을 직접 제어할 수 있지만, 구형 스킨 사용자의 경우 티스토리에서 자동연결이 되어 수정할 수 있는 방법이 있는지도 모르겠다. 필자는 여러가지 이유로 메인 블로그의 디자인을 도저히 버릴 수가 없다.
조금은 애매한 것이 모바일 브라우저 마다 로딩 매카니즘이 다른 것인지 차이가 난다. 특이 최근에 베타테스트하고 있는 네이버앱으로 페이지를 열면 미칠지경으로 느리다. 그래서 네이버앱은 바로 삭제하고 그나마 빠른 크롬을 사용하고 있지만,,, 역시 4~5초를 넘겼고 지금은 조금은 빨라진 듯 하지만 그래도 티스토리에서 기본 제공하는 모바일 페이지에 문제가 있는 건 분명한 것 같다. (아래 설명하겠지만 동기식으로 수행하는 스크립트가 많은 듯..)
여담이지만, 요즘 같으면 10년 넘게 사용하고 있는 티스토리가 앞으로 또 10년 20년을 가줄지 답답한 마음 없지 않다.
지금이라도 도메인 연결을 해야하는 건지..도메인 연결을 한다면 평생을 가져 갈만큼 유지비를 지불할 가치가 있는지 말이다.분명한건 가까운 미래에 지금의 고민은 현실로 다가올 듯한다.
각설,, 필자는 웹프로그래밍을 모른다. 20년 전에 메모장을 이용하여 html 태그만을 사용해 홈페이지를 만들 어본 것이 전부고, 티스토리를 운영하면서 그때그때 찾아본 기억이 전부다. 따라서 구글링을 통해 적용해본 요소이고 상식선 혹은 체감상 효과가 있는 것들을 정리할 생각이다.
아래 정리된 내용은 추후에 수정가감될 수 있다.
※ 이미지 ※
이미지는 가장 많이 사용하는 요소라 손 쉽게 튜닝이 가능하다.
하지만 이동 통신이 5G세대에 접어든 시점에 이미지 용량을 고민해야하는 것도 아이러니 하다.
1) 이미지 자체 용량 줄이기
최근에 공개된 미디어타입을 쓰거나,, 우리가 흔히 사용하는 JPEG의 경우 저장품질을 85~90%정도로 낮추어도 100%대비 1/3 이상으로 떨어져 엄청난 용량의 이득을 볼 수 있다. 사진 블로그의 경우에도 92% 이상은 눈으로 구분이 힘들다.
다만, 품질 80~90%에서 눈에 띄는 이상픽셀이 눈에 띈다면 적절하게 타협하면 되겠다.
2) 사이즈 지정
<img .. > 에 width="xxx" height="yyy"
> 사이즈를 지정하면 렌더링시 이득이 생긴다. (실제 테스트는 안해봄)
3) 사용할 크기로 미리 리사이징하기
width, height에 사이즈를 지정할 때 로딩한 이미지의 크기가 다르면 내부적으로 리사이징을 수행하면서 리소스를 잡어먹는다.
고퀄의 사진을 보여줄 용도가 아니라면 사용할 크기로 미리 리사이징 하는 것을 추천한다.
참고로 Lanczos나 Sync와 같은 알고리즘을 사용하여 re-sizing 한다면 고퀄의 이미지를 얻을 수 있다.
.....(추가중)
※ Java Script ※
1) js파일 로컬 계정으로 옮기기
js 파일이 원격에 존재한다면 다운로드 해서 본인 계정에 업로드하는 것을 추천한다.
sync 모드에서 파일을 가져올 수 없을 때 timeout 동안 멍청하게 기다릴 수 있다.
2) async 속성 사용
스크립트 파일을 원격서버에서 가져와야 할 경우 async 를 사용하면 비동기 모드로 가져올 수 있다. 순서에 상관없이 백그라운드로 로딩되면 수행된다.
<script src="./xxx.js" async>
3) defer 속성 사용
async와 비슷한 효과를 내지만 내부적으로 처리 메카니즘이 다르다. 일반적으로 로딩 순서가 중요한 경우에 defer를 사용한다.
<script src="./xxx.js" defer>
....(추가중)
4) skin.html의 </body> 앞에 배치하기
> 렌더링에 필요한 태그를 먼저 파싱하게 하고 스크립트 파일을 로딩하도록 함..
> 순서에 유의를 해야한다.
※ HTML ※
1) 코드 압축
2) <table> 사용하지 않기
<table> 은 구시대의 유물로 취급받는 듯 하다. Obsolete... 셀의 모든 내용을 가져온 이후에 화면에 뿌려지는 구조라 느리다.
<div>로 대체가 가능하고 실제 테이블 코드를 넣으면 div로 컨버팅 해주는 툴사이트도 많다.
...(추가중)
※ 티스토리 플러그인
1) 디자인과 성능사이에서 적절한 타협
티스토리 플러그인을 이것저것 사용하면 무거워 질터 적절하게 타협하여 꼭 필요하다고 판단되는 모듈만 사용하도록 한다.
2) 구글 광고
구글 광고때문에 티스토리를 시작하는 사람이 많다.
테스트해보니 구글 광고가 매우 느리다. 요즘엔 async 모드로 동작하는 코드가 제공되지만 그럼에도 느리다. 적절한 타협이 필요하다.
...(추가중)
