프로젝트/MailBadara

[토이프로젝트] MailBadara - (4) 프론트 최적화

KimCookieYa 2023. 10. 13. 15:26

프론트 최적화

2023-10-10

크롬의 Lighthouse 기능을 사용해서 React 프론트에 대한 최적화를 진행했다.

Lighthouse

Lighthouse는 웹 앱과 웹 페이지의 성능, 접근성, 웹사이트 작성 규칙, SEO 등 다양한 품질을 체크할 수 있는 오픈소스 도구이다. Google이 주도적으로 개발하고 있으며, 크롬 브라우저 내장 개발자 도구에서도 사용할 수 있다. CLI(Command-Line Interface) 형태로도 사용이 가능하고, Node 패키지로도 제공된다.

주요 기능

  1. 성능: 페이지 로드 시간, 렌더링 성능 등을 측정
  2. 접근성: 웹 표준과 접근성에 대한 준수 여부를 체크
  3. Best Practices: 현대 웹 개발의 모범 사례를 체크
  4. SEO: 검색 엔진 최적화에 필요한 요소를 체크
  5. 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 content attribute 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: /