성능 개선 하기

dev2820·2022년 5월 28일
0
post-thumbnail

이런 저런 바쁘게 지내다 문득

포폴 페이지 속도 확인을 안했네?

라는 생각이 들어서 당장 성능 확인을 하러갔다.

PageSpeed insight

https://pagespeed.web.dev/

이 사이트는 사이트 url을 입력하면 웹페이지를 분석해서 이런 저런 평가를 해준다. 일단 돌려보자

모바일에서 웹페이지 속도

데스크탑에서 웹페이지 속도

음... 모바일이 아주 느리다. 아무래도 최적화를 좀 해줘야겠다.

Contentful Paint

한글로 친절히 설명이 되어있어서 알겠지만 대충 긴 텍스트나 큰 이미지를 로딩하는데 시간이 오래 걸린다는 뜻이다. 첫 페이지부터 느리다고 느끼게 하고 싶진 않다. 이미지를 최적화 해주자.

대충 마음에 걸리는 이미지들이 있다.


이놈이나

요런거 등등

이런 이미지는 배경이 투명한 PNG인데 무손실 압축 방식이라 원본 화질을 유지하고 투명한 배경을 사용할 수 있다는 장점이 있지만 용량이 좀 크다는 단점이 있다.

WebP

PNG를 WebP로 변환해 이미지 압축률을 높여보자. WebP는 구글이 밀고있는 이미지 압축 방식으로 웹에 더 최적화되어있다고 한다. 실제로 PNG보다 20%~30% 정도 압축률이 더 좋다고 하니 PNG들을 싹다 WebP로 바꾸고 성능을 테스트 해봐야겠다.

꿀뷰에서 Webp로 바꿔주자


WebP 포맷에 화질은 90을 주고 변환했다. (손실률은 0~100 사이의 값이 있고 80~100 정도가 보는 사람이 눈치 못챌정도로 화질이 떨어진다고 한다)

사이트에 사용되는 17개의 PNG를 webp로 변환했다.


위는 PNG, 아래는 webp로 변환한 결과

저렇게 미세한 차이가 있거나

위는 PNG, 아래는 webp로 변환한 결과

이렇게 거의 차이가 눈에 띄지 않기도 하다. 직접 놓고 비교하면 미세하게 다르긴 하다. 하지만 서비스하는데는 문제 없는 정도.

이미지 크기는 아래와 같이 변했다

약 40%정도 줄어들었다. 다른 이미지도 비슷비슷하게 줄었다.

추가적으로 jpg 이미지도 변환해봤는데 아래와 같다.

이 이미지는 용량이 큰 편이니까 같이 비교해보자.

성능 비교

캐시 사용 중지를 켜고 png를 불러올 때 걸리는 시간들은 대충 요런꼴이다. 200밀리초 정도 걸린다.

webp를 적용한 페이지를 올려놓고 비교해보자

전송받는 크기가 줄었고, 시간도 미묘하게 더 빨라진 것을 확인할 수 있다. 특히 용량이큰 프로필 이미지의 경우 275ms에서 205ms로 더 빨라졌다. 이유는 알 수 없지만 시간이 더 오래걸린 이미지도 있었다. (myMoon은 211ms -> 218ms로 미묘하게 느려졌다)

재미있는건 몇 번 새로고침하니까 속도가 더 빨라졌다

아까 205ms 걸린 프로필 이미지는 55ms밖에 걸리지 않고, 오히려 속도가 느려진 myMoon도 218ms -> 47ms로 줄어들었다.

이유는 잘 모르겠다. 아마 IPS 단에서 이미지 등을 캐싱한게 아닐까?

이제 PageSpeed Insights에 다시 성능 평가를 의뢰해보자

1점 까였다...
Largest Contentful Paint (가장 큰 이미지 또는 가장 긴 텍스트를 painting하는데 걸린 시간)이 늘었다.

변경사항은 이미지를 webp로 변경한게 다이니...아마도 이미지 형식이 바뀌어 캐싱에 문제가 생기지 않았나 싶다. 내일 다시 해봐야겠다.


하루 지났는데 성능은 똑같이 1점 까여있다. 이제와 생각해보니, 저 "안녕하세요" 문구를 천천히 나오게 했는데 이걸 성능에 포함시켜서 낮은 점수가 나온거같다. 하지만 1점 깎인 이유는 미지수.

profile
공부,번역하고 정리하는 곳

0개의 댓글