프론트 최적화
2023-10-10
크롬의 Lighthouse 기능을 사용해서 React 프론트에 대한 최적화를 진행했다.
Lighthouse
Lighthouse는 웹 앱과 웹 페이지의 성능, 접근성, 웹사이트 작성 규칙, SEO 등 다양한 품질을 체크할 수 있는 오픈소스 도구이다. Google이 주도적으로 개발하고 있으며, 크롬 브라우저 내장 개발자 도구에서도 사용할 수 있다. CLI(Command-Line Interface) 형태로도 사용이 가능하고, Node 패키지로도 제공된다.
주요 기능
- 성능: 페이지 로드 시간, 렌더링 성능 등을 측정
- 접근성: 웹 표준과 접근성에 대한 준수 여부를 체크
- Best Practices: 현대 웹 개발의 모범 사례를 체크
- SEO: 검색 엔진 최적화에 필요한 요소를 체크
- PWA: Progressive Web App 기준을 체크
사용 방법
- 크롬 브라우저의 개발자 도구를 열고 'Lighthouse' 탭에서 분석을 실행
npm install -g lighthouse명령어로 CLI 도구를 설치하여 콘솔에서 실행- 자동화 도구나 CI/CD 파이프라인에 통합 가능
meta description
https://velog.io/@w-hyacinth/Document-does-not-have-a-meta-description-Google-Lighthouse-SEO
Lighthouse는
<meta name="description">이 빠져있는 페이지를 찾아냅니다.
- Your page doesn't have a
<meta name=description>element.
당신의 페이지는<meta name="description">요소를 포함하고 있지 않습니다.- The
contentattribute of the<meta name=description>element is empty.<meta name="description">요소의content속성이 비어있습니다.
솔루션
- index.html의 <head>에 meta description 추가
robots.txt
robots.txt is not valid: If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed. Learn more about robots.txt.
솔루션
- public/robots.txt 작성성
User-agent: * Allow: /
'프로젝트 > MailBadara' 카테고리의 다른 글
| [토이프로젝트] MailBadara - (6) 서버 최적화 생각 중 (0) | 2023.10.16 |
|---|---|
| [토이프로젝트] MailBadara - (5) 트러블슈팅 (0) | 2023.10.13 |
| [토이프로젝트] MailBadara - (3) 베타테스트 및 피드백 (1) | 2023.10.08 |
| [토이프로젝트] MailBadara - (2) MVP 개발 (1) | 2023.10.08 |
| [토이프로젝트] MailBadara - (1) 기획 (0) | 2023.10.02 |
