Lighthouse로 성능 개선하기
Lighthouse 성능 개선하기
경매정보 검색 앱 '비드'를 만드는 과정에서 Lighthouse를 이용해 성능을 개선해보았습니다.
발단
LightHouse 는 클라이언트 사이드에서 웹 성능을 측정해주는 간편한 도구입니다. 퍼포먼스, 접근성, SEO 등을 평가합니다. 아무런 생각 없이 기능위주의 구현을 했다가 뭔가 느린 것 같아서 측정을 해보니 Performance 31점, TTI 11초라는 참담한 결과를 맞이하였습니다...
문제 진단
우선 어디가 문제인지 점검하기 위해서 @next/bundle-analyzer를 설치해서 파일 크기를 확인해보았습니다.
일단 const.ts의 파일이 매우 크다는 것을 알 수 있었습니다. 필터가 굉장히 덩치가 큰데, 필터 구조가 복잡하기 때문입니다. 지역, 법원, 물건종류 등등을 모두 중복선택 + 트리구조식 접근이 가능하도록 만드려다보니 필터 사이즈가 커질 수 밖에 없었습니다.
1차 대응
next.config.js 에서 compress:true를 통해서 압축해주었습니다. 그리고 document.tsx에서 Head 태그에 meta태그를 통해서 SEO도 진행했습니다.
<Head>
<meta charSet='utf-8' />
<link rel='shortcut icon' href='/favicon.ico' />
<meta property='og:image' content='/thumbnail.png' />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='630' />
<meta property='og:title' content='비드' />
<meta property='og:url' content='//' />
<meta name='description' content='똑똑한 경매검색기' />
<meta name='keywords' content='경매,옥션,부동산,아파트' />
<link rel='preconnect' href='https://fonts.gstatic.com' />
...1차 대응 결과
확실히 압축을 하니 퍼포먼스가 크게 개선되었습니다. 하지만 아직 갈 길이 멀어 보입니다... SEO는 100점이 되었습니다.
2차대응
추후 업데이트 예정입니다.
'Dev Log' 카테고리의 다른 글
| Permission_handler 비디오 접근 (0) | 2022.09.06 |
|---|---|
| gitlab에서 github으로 미러링 과정 중 인증 문제 해결하기 (0) | 2022.08.30 |
| gitlab에서 github으로 미러링 과정 중 인증 문제 해결하기 (0) | 2022.08.07 |
| 플러터로 웹뷰 세팅하기 (0) | 2022.08.01 |
| 온룸 파일 다운로드 관련 이슈와 해결한 방법 (0) | 2022.02.11 |