블로그를 하는 사람들의 최대 고민은 사이트 속도, 즉 블로그 속도 - 로딩속도 - 를 올리는 게 아닐까 생각합니다. 웹 페이지의 로딩 속도는 방문자의 이탈률과도 관련이 있기 때문에 중요한 부분입니다. 이번 글에선 사이트 속도 올리는 방법 중 가장 기본이 되는 원칙에 대해 이야기해 볼까 합니다.
내 블로그 속도 얼마나 될까 - Pagespeed
코딩 좀 할 줄 알고 웹 페이지를 좀 만질줄 아는 사람이라면 이 글을 읽을 필요가 없습니다. 대부분의 사람들은 어디서 주워듣거나 인터넷 검색으로 아는 것이 전부이기 때문에 블로그(설치형-티스토리)의 스킨에 해당하는 부분을 수정하는 건 한계가 있습니다.
대부분 누군가 제공해 주는 스킨을 내려받아 사용할텐데 내 블로그 로딩 속도는 얼마나 될까 측정해 보셨나요?
구글에서 제공하는 페이지스피드(Pagespeed)는 너무 잘 알려진 웹사이트로 현재 자신의 홈페이지나 블로그, 기타 웹페이지의 로딩 속도를 알 수 있도록 도와줍니다.
위의 스피드 인사이트는(Pagespeed Insight) 현재 이 글을 쓰고 있는 내 블로그 데스크탑 로딩 속도 데이터입니다. 모바일이 중요하고 구글 SEO 역시 모바일 친화적이라는데 점수가 너무 개떡같이 나와서 그나마 나은 데스크톱 데이터로 올렸습니다.
이게 스킨의 영향을 많이 받는데 속도를 올리는게 쉽지만은 않습니다.
그래서 티스토리는 좋은 스킨을 써야 합니다.
웹 페이지 속도 올리는 법 - 이미지
본론으로 돌아와서 이 글의 주제는 바로 이것입니다.
코딩이라고 해봤자 대부분 까막눈이고 html이나 css를 건드리는 건 두려우니 이 부분은 전문가에게 맡기기로 합시다. 그 이외에 우리가 할 수 있는 가장 쉬운 페이지 로딩 속도를 향상하는 법은 이미지의 최적화입니다.
블로그 포스팅을 할 때 사진(이미지)과 관련하여 알아둘 것은 두 가지입니다. (관련글 참고)
사진이나 이미지를 사용함에 있어서 저작권에 관해서는 이미 일전에 언급하고 정리한 적이 있었으니 생략하기로 하고, 또 사진에 대한 용량을 줄임으로 블로그의 로딩 속도를 올릴 수 있다는 것도 설명했으니 관련글로 갈음하기로 합니다.
그러면 무엇에 대해 이야기하느냐.
바로 툴(tool)입니다. 어떤 프로그램을 사용할 수 있는가에 대한 내용을 다뤄보도록 하겠습니다. 본론이 참 빨리도 나왔군요.
결정적으로 내 블로그에 날개를 다는 법은 이미지를 줄이고 최적화하는 방법입니다. 그렇게 해서 페이지에 접속했을 때 빠르게 로딩되고 전환될 수 있도록 하는 것입니다. 느린 페이지가 많을수록 방문자의 이탈률도 늘어납니다.
JPEG(JPG)를 WebP로 변환
이 글이 첫 번째 이미지(위)의 용량은 얼마나 될까요? 놀라지 마세요. 4KB입니다.
별것 없고 텍스트로 구성된 단순한 이미지라 그럴 수 있다고 생각하겠지만 포맷 방식이 JPG가 아닌 WebP입니다. 압축률 면에서 월등하게 좋은 포맷방식입니다.
이것에 대해 뭐 전문적인 설명을 알고 싶다면 그냥 나무위키를 검색하면 됩니다.
이것에 대한 설명을 하고자 하는 것이 아니라 우선 웹 페이지의 속도를 빠르게, 사이트 속도에 날개를 달고 싶다면 가장 먼저 해야 할 것이 페이지 안의 JPG, PNG, GIF 사진(이미지)을 WebP로 바꾸는 것입니다.
이미지 용량 최적화 순서
전에도 한 번 다룬 적이 있지만 내가 사용하는 사진 용량 줄이는 법의 순서는 아래와 같이 진행을 하고 있습니다. 모두 같을 수는 없지만 참고해 보세요.
간단하게 3가지 순서입니다.
- 원본 사진 사이즈 줄이기 > 기본 640 ~ 700 사이 (티스토리 본문)
- 포맷방식 변경 : JPG > WebP
- 게재
이것은 지난 글에서(위 첨부링크 참고) 다뤘기 때문에 자세한 설명은 생략하기로 하고 중요한 것은 JPG 파일을 WebP로 변환하는 것인데 이것은 여러 방법이 있습니다.
내가 사용하는 방법처럼 무설치버전의 프리웨어 변환 툴(tool)을 사용하는 방법이 있고 그것도 귀찮다면 온라인 웹에서 지원하는 변환 페이지를 이용해도 됩니다.
변환 방식 장 · 단점
툴(프로그램)을 사용한다면 매번 실행해야 하는 번거로움이 있는 반면 압축률을 조정해 자신에게 맞는 최적의 압축률로 이미지를 변환할 수 있다는 장점이 있습니다.
웹(온라인) 상에서 지원하는 페이지를 이용한다면 간편하고 편리하겠지만 압축률 조정은 되지 않기 때문에 정해져 있는 디폴트 값을 사용해야 합니다.
둘 중 자신이 원하는 방식을 이용해 이미지를 변환, 용량을 최적화해 글에 게시하면 되는 것입니다. 너무나 간단하죠? 개인적으로는 변환 툴을 이용하며 아래와 같은 다양한 종류가 있습니다.
1. 윈도우용 · 맥(Mac)용
- ImageMagick
- GIMP
2. 윈도우용
- IrfanView
- XnView
- 꿀뷰
맥 사용자는 포토스케이프에 내장되어 있는 변환 기능도 괜찮습니다.
대부분이 다양한 포맷을 지원하며 또한 이미지 변환 기능도 제공하기 때문에 이러한 툴을 이용해 사진의 용량을 줄이는 방법도 좋습니다. 무엇보다 대부분의 툴 자체가 가볍습니다.
마무리하며
한 페이지를 읽어 들여 로딩하는 속도는 어떤 콘텐츠를 어느 정도의 길이로 작성했는가에 따라 다릅니다. 인터넷 속도를 감안하더라도 요즘은 대부분이 별 무리 없이 로딩하는 편입니다.
하지만 사진이 많거나 고용량, 또는 무언가 정돈되지 않은 페이지는 열리는 속도 자체가 느리기 때문에 전체 페이지가 로딩되기 전에 대부분 페이지를 나가버리는 사람들이 많습니다.
사실 블로그 속도에 날개를 다는, 그래서 사이트 속도를 향상하는 방법은 다양합니다.
서두에서 말했듯 좋은 스킨을 사용하거나 이미지를 최적화하거나 또는 lazy 태그(지연로딩)를 사용하는 방법도 있습니다.
결론은 사용자가 읽기 좋게 빠른 페이지로 정돈하는 것입니다.
