사진 용량 두 번 줄이기로 코어 웹 바이탈과 페이지 로딩속도 개선하기

본 글에서는 티스토리 블로그 글에 삽입할 사진파일의 용량을 두 번에 걸쳐 확실하게 압축하여 페이지의 로딩속도를 개선하는 과정을 다뤄보고자 합니다.

티스토리 블로그를 처음 시작했을 당시 사진 용량을 줄이는 것이 검색 결과에 영향을 끼친다는 것을 전혀 알지 못했습니다. 이미지파일의 용량이 줄어들면 페이지의 로딩속도가 빨라져 방문자분들이 이탈할 확률이 줄어들 뿐만 아니라 더욱 쾌적하게 글을 읽으실 수 있습니다.

구글에서는 로딩속도를 포함한 다양한 요소에 대해 점수를 부여해 페이지를 평가하고 있으며, 검색 시 좋은 평가를 받은 페이지가 상위에 노출되는 것은 당연한 수순일 것입니다. 하지만 초보자 분들은 HTML이나 CSS 등을 다루는데 익숙하지 않아 어떤 점을 수정해야 페이지 성능 지수를 상승시킬지 알기 어려운 현실입니다. 이번 글에서 다룰 사진 용량 압축 과정은 초보 블로거들도 페이지 성능을 향상할 수 있는 가장 기본적인 단계입니다. 이 과정을 통해 페이지 성능 지수가 얼마만큼 변화했는지 예시를 통해 알아보도록 하겠습니다.

 

 

1. 페이지 성능 평가

구글 서치콘솔의 '코어 웹 바이탈' 메뉴에서는 블로그 내 몇 개의 페이지가 우수한 성능을 보유하고 있는지 확인하실 수 있습니다. 저 같은 경우 62개의 페이지가 개선이 필요한 상황이라는 메시지를 확인했는데요, 사유는 CLS와 LCP 문제였습니다. 이에 대한 자세한 내용은 이번 글에서는 다루지 않을 예정이나 둘 모두 페이지의 로딩속도와 관련이 있는 지표입니다.

 

해당 페이지에 대해 '페이지스피드 인사이트(PageSpeed Insights)'라는 곳에서 세부적으로 성능 확인을 진행했습니다. 주소를 남겨드리니 하나씩 따라해 보면서 읽으시면 좋을 듯합니다.

 

 

메인화면에 보이는 검색창에 확인하고자 하는 포스팅의 주소를 입력하시면 됩니다. 제가 확인한 포스팅의 성능 점검 결과는 다음과 같습니다.

페이지 성능검사

모바일에서의 종합 성능은 100점 만점에 40점밖에 되지 않으며 전반적으로 페이지의 속도가 좋지 않음을 알 수 있습니다. 아래로 내려가면 어떤 점을 개선해야 하는지 세부 항목이 나타납니다.

세부 개선사항

이미지 크기를 적절하게 설정하고 차세대 형식을 사용해 이미지를 제공하면 각각 33초, 22초의 페이지 속도 개선이 될 것이라는 내용입니다. 그 외의 렌더링 차단 리소스 제거와 사용하지 않는 자바스크립트 줄이기 등은 제 수준에서는 아무리 공부해 봐도 이해하기가 어려웠습니다. 그래서 기존 글에 들어있던 이미지의 용량이라도 확실히 줄여보기로 했습니다.

 

 

2. 기존 포스팅에 삽입된 이미지파일 내려받기

기존에 작성한 포스팅에서 이미지를 한 번에 내려받으실 수 있습니다.

 

포스팅 페이지에 들어가셔서 Ctrl + S를 누르시면 다운로드 창이 뜨는데요, html 파일과 함께 내용 안에 들어있는 모든 요소들을 다운로드할 수 있습니다. 그림파일 외에 나머지는 필요 없으니 다 지워주시면 됩니다. 제 기존 포스팅에 들어있던 이미지는 용량이 얼마나 될까요?

 

무려 13.5MB라는 용량을 26장의 사진에만 쓰고 있었습니다. 지금 보면 말도 안 되는 행동을 한 것이죠. 글을 보러 들어오시는 분들이 13.5MB의 사진을 내려받는 동안 기다려야 했으며 데이터를 낭비했습니다. 저 글을 쓸 당시에는 크고 선명한 사진이 좋다는 생각으로 원본파일을 업로드했는데, 사진을 구하러 들어오는 것이 아니고 정보를 얻기 위해 방문하실 테니 사진이 페이지에 잘 보일 정도만 되면 되는 것이었습니다. 내려받은 사진의 용량을 줄여서 글을 수정해줘야 합니다.

 

 

3. 이미지 압축으로 용량 줄이기

이미지를 두 단계에 걸쳐 압축해 보도록 하겠습니다. 한 번은 픽셀을 조정하고, 두 번째는 용량을 압축합니다. 다행히도 이를 쉽게 할 수 있도록 도와주는 사이트들이 있어 초보자 분들도 정말 손쉽게 하실 수 있습니다. 용량 조절은 페이지 성능 개선에 있어 가장 쉽고 확실한 방법이니 꼭 참고해 주시기 바랍니다.

 

ㅁ 사진파일 픽셀 조정해 주기

우선 이미지파일의 픽셀부터 조정해 보겠습니다. 스마트폰 등으로 찍은 사진들은 기본적으로 해상도가 높고 사진의 크기가 큽니다. 저는 큰 사진을 불러와서 티스토리 포스팅 내에서 크기를 작게 해주기만 하면 되는 줄 알았는데 이는 큰 사진의 용량은 그대로 유지하며 보이기만 작게 보이는 것이었습니다. 사진 자체의 픽셀을 포스팅 크기에 맞도록 작게 만들어주면 페이지 내에서 선명하게 보일 뿐만 아니라 용량도 크게 줄어듭니다. 픽셀 조정을 쉽게 해주는 '아이러브이미지' 사이트를 활용해 해상도를 줄여보겠습니다.

 

 

아이러브이미지 사용법은 매우 간단합니다. 원하시는 사진들을 페이지 중앙으로 드래그 앤 드롭해 주시면 바로 진행됩니다.

조절 옵션

옵션은 픽셀별, 퍼센트별로 선택 가능한데 저는 픽셀별 옵션을 선호합니다. 제가 티스토리 포스팅에 보통 가로 450px로 사진을 넣어주고 있어 제가 원하는 크기대로 설정해서 진행해 봤습니다. 결과는 어떨까요?

 

최초 용량 13.5MB에서 무려 1/6 가량인 2.03MB가 됐습니다. 그리고 페이지 내에서 보이는 화질은 차이도 느껴지지 않습니다. 픽셀 조정 만으로도 용량을 아주 많이 줄일 수가 있었군요. 하지만 그림이 잘 보이기만 한다면 용량은 적으면 작을수록 좋습니다. 다음 압축 과정을 통해 용량을 더 줄여보도록 하겠습니다.

 

ㅁ 사진파일 용량 압축해 주기

2.03MB로 줄어든 사진을 한번 더 압축해 보겠습니다. 제가 주로 쓰는 사이트는 TinyPNG라는 곳입니다. 최대 20장까지 한 번에 작업할 수 있어 매우 편리합니다.

 

 

TinyPNG의 사용법도 아이러브이미지와 같습니다. 원하는 파일을 드래그 앤 드롭해 주시면 압축과정이 바로 진행됩니다. 과연 얼마나 줄어들었을까요?

 

13.5MB의 사진이 957kB가 되는 놀라운 결과가 나타났습니다. 1MB도 안 되는 용량으로 올릴 수 있던 사진들이네요 페이지 속도가 느려지는 만큼 페이지 이탈률도 매우 높았을 것으로 추측됩니다. 앞으로 제가 해야 할 일은 기존에 썼던 포스팅의 사진 파일을 수정해 주는 것이 되겠군요. 기왕 하는 김에 사진 alt속성도 넣어주고 정보 업데이트도 해줄 예정입니다. 포스팅 개수가 너무 많아지기 전에 알게 돼서 정말 다행입니다. 

 

그럼 마지막으로 사진 수정 후 페이지 성능 점수에 변화가 있었을까요?

 

 

4. 수정 후 페이지 성능개선 여부

그림파일 수정 후 성능점검 결과

성능점수가 40점에서 44점으로 오른 모습입니다. 극적으로 점수가 오르진 않았지만 세부적으로 보면 조금씩 속도가 빨라졌네요. 반면 Total Blocking TIme은 늘어났습니다. 이 부분은 좀 더 공부해 봐야겠습니다. 다음은 세부 개선 추천 내역 페이지입니다.

 

세부개선내역

이미지 크기 조정에 대한 내용이 극적으로 줄어들었습니다. 이미지 크기 적절하게 설정하기 33초, 차세대 형식 사용이 22초였는데 각각 0.6초, 3.45초가 됐습니다. 용량을 줄인 것이 확실한 효과가 있네요. 차세대 형식은 jpeg가 아닌 WebP나 AVIF 형식의 이미지를 쓰라는 내용인데 티스토리에서는 사용하기 어려울 듯하고요, 그 외 내용들은 제 수준에서는 아직 건들 수 있는 부분이 아니었습니다. 그리고 이 개선사항들은 페이지 로딩에 도움이 되지만 성능 점수에 직접적인 영향을 끼치지는 않는다는 설명이 있네요. 성능 점수가 크게 오르진 않았더라도 로딩속도에는 확실히 도움이 되는 것 같습니다.

 

지금까지 사진 용량 조절로 포스팅의 로딩속도를 개선하는 방법에 대해 알아봤습니다. 모르고 시작한다면 빼먹기 쉬운 내용이지만 정말 중요한 부분 중에 하나이고, 방법도 매우 간단하기 때문에 꼭 실행해 주시면 좋겠습니다. 문제점을 하나씩 개선해 나가면 나중의 결과는 크게 달라질 것이라 생각합니다. 감사합니다.

 

썸네일