> 개요
이번 리팩토링을 진행하면서, 꼭 적용해 보고싶었던 것들이 있었는데, 그 중 하나가 성능최적화에 대한 부분이었다.
성능최적화란 ? UI를 최적화하여 애플리케이션의 속도를 높이는 것을 의미한다. 사용자의 경험이 웹/앱이 상당히 중요한데, 맨처음 웹페이지 진입했을떄, 다른 페이지로 이동할 때 정보를 받아오는 로딩속도가 느리다면, 사용자는 기다리다가 이탈현상이 발생할 수 있다. 그런 속도를 빠르게 하기위해 성능최적화를 한다.
Google Chrome에서 제공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 "LightHouse" 가 있는데, 이 도구는 성능, 접근성, SEO등 사이트에 전반적인 진단을 할 수 있다.
나는 이 도구를 활용해 내가 진행했던 프로젝트를 진단해보고 속도를 향상시키는 작업을 진행했다.
위의 점수는 프로제드 메인 페이지의 성능을 측정해 보는 것인데, 그래도 처음 숫자가 나쁘지는 않았다. 여기서 빨간색 > 노란색 > 초록색 이런식으로 성능 지표를 확인할 수 있다.
> 문제
여기서 Performance 가 성능인데, 밑으로 내려가보면 어떤 부분이 문제가 되는지 확인할 수 있다.
메인페이지 같은 경우는 이미지가 많고, 동적으로 움직이는 부분이 많아서,
이런식으로 이미지의 용량이 커서 빨간불이 들어온것을 확인 할 수 있다.
> 해결
용량을 줄이는 방법은 몇가지 방법이 있는데, 나는 두가지 정도를 활용하여 사이즈를 줄일수 있었다.
- 나는 unplash 에서 무료이미지를 사용했는데, unplash 에서 image cdn 을 활용하면 줄일 수 있다.
function getParameterForUnsplash({ width, height, quality, format}){
return `?w=${width}&h=${height}&q=${quality}&fm=${format}&fit=crop`;
}
return (
<img src={slider.src + getParametersForUnsplash({
width: 100,
height: 100,
quality: 80,
format: 'jpg'
})}
)이런식으로 활용할 수 있다. 위의 수치들을 내가 임의로 지정한 것이기 때문에, 페이지 상황에 맞추어 바꿔주면 된다.
- 다른 방법으로는 이미지 자체의 용량을 줄이는 방법이 있을 수 있다. webP 이미지를 활용할 수 있는데, jpeg, 보다 25% ~ 3%% 정도 크기를 줄일 수 있고, 성능은 더 향상된다.
Sqoush 라는 웹사이트를 활용해
3.96 -> 0.4 로 8배 가량 줄일 수 있는 결과물을 얻었다. 그리고 전체적으로는
77 -> 84 상승 결과를 얻어냈다.
