Google Lighthouse를 발견하다. 웹 개발을 보는 방식을 바꾼 작은 도구

Source: Dev.to

소개

오늘 나는 솔직히 오래전부터 탐색했어야 했던 무언가를 발견했다: Google Lighthouse.

Lighthouse가 중요한 이유

• 성능, 접근성, 유지보수성 및 사용자 경험 문제를 강조하는데, 이는 코드 작성만큼이나 중요합니다.
• Lighthouse와 같은 도구는 올바른 방향을 제시함으로써 학습 과정을 덜 압도적으로 느끼게 합니다.

Note: 완벽한 Lighthouse 점수를 쫓기 위해 유용한 프로젝트를 만드는 대신 함정에 빠지지 마세요. 많은 개발자들이 제품 자체가 실제 문제를 해결하는지 검증하기 전에 숫자를 최적화하기 시작합니다. Lighthouse는 가이드일 뿐, 최종 목표가 아닙니다.

Lighthouse 실행 방법

Lighthouse를 실행하는 방법은 여러 가지가 있습니다:

• Chrome DevTools 내부에서 직접
• 명령줄을 통해
• Node.js 모듈로

Lighthouse 사용 경험

특히 내 포트폴리오에 대해 Lighthouse는 몇 가지 약점을 즉시 드러냈습니다:

대용량 최적화되지 않은 이미지

• 이미지가 압축되지 않았으며 최신 포맷으로 제공되지 않았습니다.

접근성 문제

• alt 텍스트가 없고 색 대비가 충분하지 않았습니다.

느리게 로드되는 자산

• 스크립트와 스타일시트가 적절히 지연 로드되거나 최소화되지 않았습니다.

메타데이터 누락

• 중요한 메타 태그(예: viewport, description)가 없었습니다.

이러한 것들은 이전에 무시했을 수도 있지만, 이를 발견하면서 개발이 더 흥미로워졌습니다. 새로운 도구마다 내 검을 조금 더 날카롭게 하는 느낌입니다.

결론

다음에 또 뵙겠습니다, 커피 중독자 여러분—다음에는 더 나은 개발자가 되기 위한 또 다른 트릭을 발견할지도 모릅니다.

안녕히 계세요 ☕