페이지 로딩 속도 측정 및 개선 Webp 손실 저장으로 하세요
본인 블로그 및 웹사이트 페이지 로딩 속도 측정 및 개선하는 방법에 대하여 이야기 하겠습니다. 페이지 로딩 속도 측정은 pagespeed insight에서 하고, 방법은 Webp 이미지를 저장하실 때 손실 압축으로 하시는 겁니다.
페이지 로딩 속도 측정
지난 포스팅에서 제가 블로그 운영을 하면서 사용하는 이미지를 Webp 포맷 형식으로 올린다고 말씀드렸습니다. 하지만 무손실 압축으로 통한 방법이었고 이것이 이미지 용량을 크게 만든다는 사실을 뒤늦게 알게 되었습니다.
아니 어떻게 그런 실수를 했는데 아직도 저를 이해할 수가 없습니다. Webp 무손실 및 손실 압축 차이에 대한 이미지 용량을 비교는 아래 링크를 이용하시면 정확하게 확인하실 수 있습니다.
용량이 큰 이미지를 많이 사용한다면 당연히 블로그 페이지 로딩 속도는 느려질 것입니다. 우리가 페이지 로딩 속도 측정할 때 가장 많이 사용하는 것이 Google pagespeed insights입니다. 한글, 영어로 검색하시면 쉽게 찾으실 수 있습니다.
1) 페이지 로딩 속도 측정 사이트 pagespeed insights
pagespeed insights 사용법은 페이지 로딩 속도를 알아보고 싶은 페이지 주소(URL) 검색 란에 넣고 분석 버튼을 클릭하시면 됩니다. 결과는 모바일과 데스크탑 2가지로 구분되어 나옵니다. 결과 값을 이해하기 위해서는 몇 가지 용어를 알고 계셔야 합니다.
<pagespeed insights 용어>
- 성능 : 해당 페이지 전체적인 로딩 속도를 의미
- First Contentful Paint : 첫번째 텍스트 또는 이미지가 표시되는 시간
- Largest Contentful Paint : 최대 텍스트 또는 이미지가 표시되는 시간
- Speed Index : 속도 색인은 페이지 콘텐츠가 얼마나 빨리 표시되는 시간
사실 전문가도 아니고, 그렇다고 웹 페이지 속도에 공부를 많이 하신 분이 아닌 저 같은 분이시라면 무슨 말인지 잘 이해가 되지 않으실 것 같습니다.
아무리 위에서 이렇게 하면 웹 페이지 속도를 올릴 수 있다고 추천해 줘도 선뜻 시도하기가 겁이 납니다. 그래서 저는 우리가 할 수 있는 것 이미지 용량이 큰 것을 줄여서 사용하는 방법을 말씀 드리는 것입니다.
그리고 제가 가장 중요하게 생각하는 요소는 바로 First contentful Paint입니다. 이것은 방문자가 검색 엔진에서 제목을 클릭한 후 얼마나 빠르게 첫 텍스트 또는 이미지가 뜨는지를 보여주는 시간입니다.
빠르면 빠를 수록 좋겠죠? 만약 너무 느리다면 아마도 방문자가 이탈할 가능성이 많을 것입니다. 그러면 광고를 보거나 클릭할 기회 조차 놓치게 되는 것입니다.
2) Wepb 손실 압축 저장 이후 페이지 로딩 속도 비교
무손실 압축으로 저장한 Webp 이미지가 있는 몇 개의 블로그를 손실 60%로 하여 다시 저장한 후 블로그에 올렸습니다. 워드프레스 블로그 3개 정도를 체크를 해 보았습니다. 페이지 로딩 속도에 어떠한 변화가 있는지 말입니다.
블로그 페이지 A
| 구분 | 전체적 성능 | First Contentful Paint | Largest Contentful Paint | Speed index |
| 모바일 (수정 전 A) | 52 | 3.5초 | 4.3초 | 6.1초 |
| 모바일 (수정 후 A) | 70 | 2.7초 | 3.1초 | 4.7초 |
| 데스크탑 (수정 전 A) | 98 | 0.8초 | 1초 | 1초 |
| 데스크탑 (수정 후 A) | 87 | 1.4초 | 1.6초 | 1.8초 |
손실 압축한 Wepb 이미지로 다시 업로드 한 이후의 비교는 위와 같습니다. 모바일의 경우 성능과 속도가 빨라졌지만, 데스크탑에서는 성능 및 시간들이 조금 더 느려졌습니다.
데스크탑 보다 모바일 비율이 많아서 일단 모바일 페이지 로딩 속도가 빨라진 것에 대하여 만족했습니다.
블로그 페이지 B
| 구분 | 전체적 성능 | First Contentful Paint | Largest Contentful Paint | Speed index |
| 모바일 (수정 전 B) | 51 | 3.4초 | 5.1초 | 6.2초 |
| 모바일 (수정 후 B) | 54 | 3.4초 | 4.2초 | 5.4초 |
| 데스크탑 (수정 전 B) | 91 | 1.3초 | 1.4초 | 1.6초 |
| 데스크탑 (수정 후 B) | 95 | 1.0초 | 1.0초 | 1.6초 |
블로그 페이지 B의 경우 모바일과 데스크탑 모두에서 성능이 상승된 것을 확인할 수 있었습니다. First Contentful Paint가 모바일은 동일했지만, 데스크탑에서는 빨리진 것을 확인했습니다.
더욱이 다른 요소들은 모바일, 데스크탑 할 것 없이 다 빨라진 것을 확인할 수 있었습니다.
블로그 페이지 C
| 구분 | 전체적 성능 | First Contentful Paint | Largest Contentful Paint | Speed index |
| 모바일 (수정 전 C) | 53 | 3.7초 | 6.5초 | 6.6초 |
| 모바일 (수정 후 C) | 73 | 3.7초 | 3.7초 | 5.2초 |
| 데스크탑 (수정 전 C) | 75 | 1.6초 | 3.0초 | 2.0초 |
| 데스크탑 (수정 후 C) | 97 | 0.9초 | 1.1초 | 1.2초 |
블로그 페이지 C의 경우 극적으로 좋아진 경우입니다. 블로그 페이지의 경우에는 제가 이미지를 많이 넣었었습니다.
이미지를 많이 넣었던 것을 수정했기 때문에 성능이나 다른 요소들도 큰 변화를 보인 것이 아닌가 생각해 봅니다.
3) Webp 용량과 웹 페이지 로딩 속도 관계
확실히 Webp 손실 60%로 압축하여 만든 이미지들은 용량이 작아졌습니다. 그리고 이것은 웹 페이지 성능 또는 속도를 빠르게 하는 요소임을 확인할 수 있었습니다.
사실 pagespeed insights 웹사이트에서 페이지 로딩 속도 개선을 위한 여러 가지 방법을 알려 주지만, 블로그만 하는 우리 입장에서는 접근해서 해결하기가 굉장히 어렵습니다.
하지만 이미지 용량을 줄이는 것은 저희도 충분히 할 수 있는 요소이기 때문에 이미지 업로드 하실 때 Webp 손실 압축한 후 저장한 파일을 올리시는 것을 추천하는 바입니다.
오늘은 페이지 로딩 속도 측정 및 개선을 Webp 이미지로 하라고 하는 것에 대하여 이야기해 보았습니다. 최근 한 달 정도는 무손실 압축 저장한 Webp 이미지 포맷을 블로그에 업로드 했는데, 이것을 다 수정할 지는 사실 모르겠습니다.
너무 많이 포스팅 하기도 했고, 수정하는 것이 생각보다 오래 시간이 걸리기 때문입니다. 그러니, 이제부터 라도 Webp 포맷 사용하실 때 손실 저장 꼭 기억하셨다가 활용하셨음 좋겠습니다. 글 읽어 주셔서 감사합니다.
