학습 목표
- 최적화의 개념에 대해 학습합니다.
- lighthouse 학습합니다.
최적화
최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다. 수익과 관련되는 분야에서는 이익을 최대로 내는 과정을 말하기도 한다. (주어진 조건으로 최대 효율)
최적화의 필요성 및 효과
1. 이탈률 감소
2. 전환율 증가
3. 수익 증대
4. 사용자 경험(UX) 향상
Lighthouse 시작하기
Lighthouse: 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴 (어떤 웹페이지든 품질 검사 가능)
Chrome 개발자 도구에서 실행하기
- 검사하고 싶은 페이지의 url을 입력
- 개발자 도구를 엽니다.
- lighthouse 탭을 클릭
Node CLI에서 실행하기
-
Lighthouse를 전역 모듈로 설치
$ npm install -g lighthouse
-
명령어로 검사 실행
$ lighthouse <url> -
다음의 명령어로 모든 옵션을 볼 수 있습니다.
$ lighthouse --help
Lighthouse 분석 결과 항목
1. Performance
Performance 항목에서는 웹 성능을 측정합니다. (콘텐츠가 표시되는 시간, 표시된 후 사용자와 상호작용하기 까지 얼마나 걸리는지 확인합니다.)
2. Accessibility
Accessibility 항목에서는 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인합니다. (대체 텍스트를 잘 작성했는지, 적절한 WAI-ARIA 속성을 사용했는지 확인합니다.)
3. Best Practices
Best Practices 항목에서는 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인합니다. (HTTPS 프로토콜을 사용하는지, 콘솔 창에 오류가 표시 되지는 않는지 확인합니다.)
4. SEO
SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인합니다. (애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 확인합니다.)
5. PWA (Progressive Web App)
PWA 항목에서는 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인합니다. (앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인합니다.)
개선 방향 잡기
Lighthous는 성능을 측정할 뿐 아니라 무엇이 시간을 많이 소모하는지, 어떻게 개선해야 할지 제시해줍니다. (웹 성능 최적화 뿐만 아니라 웹 접근성, 웹 표준, SEO 관련 항목도 확인하고 해결책을 제시해줍니다.)
