Lighthouse로 웹사이트 최적화 하기

 

 

Lighthouse로 웹사이트 최적화 하기

개발자도구를 열어보면 여러가지 탭이 있는데
그 중에 lighthouse라는 웹사이트 진단 도구가 있다. 최근, 기존 회사의 서비스 홍보용 웹사이트를 페북으로 공유하여 열었을때 사이트 로딩이 너무 느려서 유저 이탈율이 높으니 해결해달라는 사업팀 요청을 받아 웹사이트 최적화 하는 법에 대해 찾아보게 되었다.

Lighthouse로 이렇게 진단을 돌려보면
1. Performance
2. Accessibillity
3. Best Practice
4. SEO
이렇게 네 가지 기준을 나누어서 각각의 항목을 진단하고 점수를 내준다.

기존의 웹사이트의 로딩이 심각하게 느려서 Lighthouse를 돌려보았는데 나머지 항목들의 점수는 준수했으나 Performance 항목의 점수가 심각했다.
Lighthouse는 낮은 Performance 점수를 개선하는 방법에 대한 가이드와 어드바이스를 함께 제공하는데,우리 웹사이트가 느렸던 원인은 크게 세가지 였다.

1. 이미지 최적화가 되지 않은 채로 올라가 있어 로드에 너무 많은 시간이 걸리게 한다.
2. Head에 렌더블로킹을 유발하는 css파일들이 통합되지 않은채로 너무 많이 붙어 있었다. 이렇게 되면 렌더링트리가 그려지다가 막히고 그려지다가 막혀서 사용자가 최초로 사이트의 콘텐츠를 보게 되는 시간이 한없이 뒤로 밀린다.
3. Css, js 파일들 중 안쓰는 요소들이 정리가 안되어있어 경량화가 필요했다.

1번 문제는 tinJPG라는 온라인 이미지 최적화 도구를 사용해 육안으로는 차이가 없지만 용량을 획기적으로 줄인 후 고용량의 이미지를 전부 교체했고
2번, 3번 문제는 여러개로 분리되어 있던 css파일들과 js파일들을 통합하고 필요한 부분만 추려 경량화를 진행하였다.

이 다음 다시 Lighthouse로 진단을 해보았는데 점수가 좀 나아지긴 했지만 아직도 살짝 아쉬운 점수가 나와서 가이드를 봤더니 렌더블로킹에 대한 어드바이스가 계속 있어서 이 부분에 대해 찾아보았다.

웹사이트를 열때 제일먼저 html이 파싱되면서 웹사이트가 그려지는데 중간에 link, script태그가 나오면 그 전의 렌더링을 중단하고 마주친 css, js를 먼저 파싱하기 시작한다. 그렇기 때문에 렌더링이 가로막혀서 최초 로딩까지 시간이 오래 걸리는 것이다.
이 문제는 link태그와 script태그에 async, defer 옵션을 넣어주면서 해결 할 수 있었다.

그 다음 Lighthouse를 돌려보니 돌릴때마다 근소한 점수차이는 있었지만 기존의 Performance 점수보다 최고 30점 가량 올릴 수 있었다.