최근 반응형 웹페이지 및 쾌적한 웹환경 구축을 위해서
웹페이지 속도를 측정하고 분석해서 최적화된 웹페이지 블로그를 만드는 것이 중요해 졌습니다.
티스토리는 서비스가입형 블로그 이지만, html 및 css의 편집을 할 수 있게 제공하여서
워드프레스같은 설치형 블로그의 요소도 갖고 있습니다.
그래서 완벽하게 속도 향상을 위해 사이트를 수정 하는 것은 제약이 있을 수 있지만
최대한 속도 향상을 위해 최적화 하는 방법을 알아 보겠습니다!
제가 가장 자주 사용하고 추천하는 블로그 웹페이지 속도 분석 사이트를 알아보겠습니다.
GTmetrix
구글의 PageSpeed 와 야후의 YSlow 두 분석 도구를 사용해서 점수화 해서 보여줍니다.
테스트 서버는 캐나다 벤쿠버에 위치해 있으며 파이어폭스 브라우저를 사용해서 분석을 합니다.
각각 분석 목록들이 있으면 이를 ABCDF 등급으로 표현해서
사이트의 문제점들을 한눈에 확인 할 수 있습니다.
YSlow 점수는 원래 짜기로 유명한데 71%라도 찍은게 다행이라고 생각합니다. ㅠ_ㅠ
분석 내용을 PDF로 다운로드해서 보관 할 수 있습니다.
PageSpeed Insights
구글 developers 사이트에서 제공하는 웹페이지 개선 사이트 입니다.
가장 간단하게 100점 만점의 점수로 표기를 해주고
모바일 접속 환경과 PC 데스크탑 접속 환경을 따로 확인해서 제공 해줍니다.
스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 자바스크립트 및 CSS 삭제
요소가.. 티스토리는 기본 자체 스크립트가 많이 포함 되어있어 이 부분은
사실상 수정이 어렵습니다. 그렇기 때문에 점수가 많이 낮게 나옵니다.
보통 점수에서 15~20점은 추가해야지 블로그가 아닌 일반 타 웹사이트와 비교 했을 때
점수가 비슷하다고 생각합니다.
google.com 이외에 데스크톱 99점을 받은 사이트는 본적이 없습니다. ㅡ_ㅡ
pingdom
스웨덴 스톡홀롬에서 측정하는 웹페이지 속도 측정 사이트 입니다.
페이지를 읽어 올 때 각 요소별 네트워크 로딩 속도를 한눈에 볼 수 있게 해주는 사이트입니다.
어떤 부분에서 로드 속도를 한눈에 파악할 수 있고 만약 비정상적으로
지연이 발생하는 부분을 찾아낼 수 있습니다.
아쉬운 점은 유럽에 위치하고있어서 한국 페이지의 로드속도가 불규칙적이며
위와 같이 페이지 로드 속도는 구글 크롬이나 파이어폭스의 요소 검사를 통해서도 쉽게 확인 할 수 있기에
큰 메리트는 없지만, 그래도 점수화 시켜서 보여준다는 점에서 소개를 해봤습니다.
티스토리 블로그 웹페이지 사이트 및 속도 향상 방법
티스토리 블로그는 젤 처음 소개해드린 것과 같이
가입형 서비스 블로그이기 때문에 어느정도 기본 틀(?) 기본 스크립트 및 플러그인들을 바탕으로 하고있어
웹페이지 속도를 완벽하게 최적화 시키기는 제약이 있을 수 있습니다.
그러나 가능한 최대로 웹페이지 속도를 위한 방법들을 소개하겠습니다.
웹페이지 SEO와 같은 전문적인 지식들은 구글링을 통해서 접근하는 것을 권장합니다.!!
CSS 및 JS 파일 압축
우선 티스토리는 gzip을 이용한 압축 방식은 php코드를 사용 할 수 없기에 티스토리내 직접적인 사용 불가능합니다.
간혹 해당 구글에서 gzip압축팁 이나 웹페이지 측정 사이트에서 gzip압축이 되었고 뜨는 것은
티스토리 기본적으로 제공하는 코드나 플러그인등에서 js, css, html의 gzip을 제공하기 때문이며
일반 유저들은 적용 할 수 없습니다.
그렇기 때문에 코드를 압축 하는 방식을 사용 해야 합니다.
코드 압축이란 css나 js파일을 보면 작성하기 편하게 코드와 코드 간 띄어쓰기나 간격등 불필요한 공백을 줄여주는 것입니다.
가장 추천하는 사이트가 http://refresh-sf.com/ 입니다.
가장 깔끔하고 빠르면서도 html/javascript/css 의 압축을 동시에 제공하며
압축 시 오류 발생률이 가장 낮은 곳 입니다.
코드 압축만 했는데 파일 크기가87KB에서 66KB로 약 24%나 줄어 들은게 보입니다.
줄수도 3,000줄에서.. 500줄 가까이로..
물론 코드를 압축하면 CSS 및 js파일을 수정하거나 작성할 때 불편 할 수 도 있습니다.
크롬이나 파이어폭스의 요소검사 기능을 통해 문제가 발생한 부분을 빠르게 찾을 수 있고
수정도 쉽고 미리보기를 할 수 있긴하지만
그래서 파일을 코드압축 할 때는 주석 처리로 영역 구분을 하고
부분 부분 압축 하는 것을 나중에 보기도 좋고 관리도 쉽기 때문에 권장합니다.
이미지 파일 압축
블로그 스킨과 웹페이지에는 다양한 이미지 파일이 포함 되어 있습니다.
이미지 파일을 거의 무손실에 가깝게 최대한 압축해주는 사이트입니다.
대부분의 파일들이 최소 50%에서 최대 90%이상의 놀라운 압축률을 보여주며
원본 파일과 압축차이를 비교 해볼 수 있습니다. 일반인들의 눈으로는 구분이 거의 불가능할 정도로
무손실에 가까운 이미지파일을 제공해줍니다.
저는 블로그 스킨뿐만 아니라 최근에는 작성하는 포스팅의 이미지 파일도 일일히 압축을 거친 다음에 작성하고 있습니다.
페이지 로딩의 대부분의 이미지 파일임을 감안한다면 이미지 압축이야 말로 가장 높은 효율로
웹페이지 속도를 향상 시킬 수 있습니다.
※단 파일명은 꼭 영문이어야지 압축이 진행됩니다.
썸네일 치환자 사용
몇몇 블로그 스킨 메인 홈 화면에는 티에디션이 아닌 썸네일 + 요약형의 홈화면을 지원하는 페이지가 있습니다.
기존에는 썸네일 이미지를 지원하지 않아 파일 원본 그대로 갖고 오거나 jquery ajax을 사용해서 갖고왔습니다.
새롭게 https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F2675BB4A56BF491706 썸네일 치환자가 공개 되었지만
파일 사이즈가 R750x0 를 제공하기 때문에 원본 파일가 이미지 크기가 동일하거나 거의 차이가 없습니다.
그런데 이번에 새롭게 티스토리에서 공식 반응형웹 #2 에서 썸네일도 사이즈 별로 갖고오는
새로운 치환자가 공개 되었습니다.
현재 스킨 제작 가이드에도 나와있지 않기 때문에 대부분들은 모르는 치환자입니다.
새롭게 추가된 새로운 썸네일 치환자
<!-- 기존 공개된 썸네일 치환자 -->
<img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F2675BB4A56BF491706">
<!-- 새롭게 추가된 썸네일 치환자 -->
<img src="//i1.daumcdn.net/thumb/C210x150/?fname=https://t1.daumcdn.net/cfile/tistory/2675BB4A56BF491706">
C210x150 부분을 수정하면 사이즈별로 조정가능합니다.
제 블로그는 75x54사이즈를 사용해서 썸네일을 만들었고 크기를 보이는 화면을 늘려놓았습니다.
기존의 썸네일 치환자와 비교해보았을때 약 97.5%의 이미지 크기가 줄어들었습니다.
이 부분만 고쳐도 모든 속도 측정 사이트에서 점수가 대폭으로 상승합니다.
더 자세한 새로운 썸네일 치환자의 소개는 아래 포스팅을 참고하세요.
티스토리 플러그인을 최소화
마지막 팁입니다.
티스토리는 자체 유용한 플러그인들을 많이 제공하고 있습니다.
하지만 이런 플러그인들은 가시성은 뛰어나고 유용한 기능들이 많긴 하지만
대부분 무겁습니다. 예를 들어 소셜로그인으로 댓글을 작성할 수 있는 라이x리 플러그인의 경우에도
매우 편리한 기능이지만 외부플러그인 치고 너무 느려서 페이지 로딩의 대부분을 차지할 정도입니다.
그래서 저는 웬만하면 꼭 필요한 플러그인 이외에는 거의 사용하지 않습니다.
포스팅의 가시성 가독성을 위해서는 부트스트랩기반의 마크다운 타이포나 CSS 수정을 통해
작성하는 방식을 권장합니다.
저도 몇 일새에 블로그를 거의 수 십번 새로 적용시키고 뜯고 고치고 했던 거 같네요.
티스토리 블로그이기 때문에 완벽하지는 않지만 최대한 웹페이지 속도를 올리고 쾌적환 웹페이지를 구성해
포스팅 콘텐츠를 볼 수 있게 한 것 같아서 좋은 것 같습니다.
앞으로도 더 유용한 빠르고 쾌적한 블로그 환경을 꾸미도록 노력해야겠네요^^
