🔎 Lighthouse
👉🏻
Lighthous는 Google Chrome에서 제공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구이다. 성능, 접근성, SEO 등 사이트에 대한 전반적인 진단을 할 수 있다.
이번에는 우리의 동네북 서비스를 Lighthous로 진단하고 웹 사이트 성능 최적화를 위해 어떤 부분을 개선해야할지 확인해보고자 한다.
🔎 Accessibility(웹 접근성)
👉🏻 Accessibility(웹 접근성)은 웹 애플리케이션의 접근성을 검사한다.
<img> 태그에alt 속성이 있는지,<html> 태그에lang 속성이 있는지, 배경색과 전경색의 대비가 충분한지와 같은 항목을 확인하는 것이다.
💣문제점
- 이미지 alt 속성 미작성
- 링크에 식별 가능한 이름이 없음
- meta의 값에 있던 viewport를 css로 표현해야함.
🔎 Performance(속도)
👉🏻 Performance(속도)는 제 속도가 어떻든 간에, 화면에 콘텐츠가 얼마나 빨리 표시되고 사용자는 얼마나 빠르게 해당 콘텐츠를 인식하는 지에 더욱 초점을 맞추고 평가한다. 속도 저해요소가 무엇인지 평가한다.
💣문제점
- 느린 서버 응답 시간
- 느린 리소스 로딩 시간
- 클라이언트측 렌더링
🔎 SEO(검색엔진)
👉🏻 SEO(검색엔진)는 웹 페이지가 검색 엔진에 대해 최적화된 순위 결과를 가지고 있는지 확인한다. 각 사용자가 자신의 디바이스를 이용하여 웹 페이지에 접근하였을 때 그들이 콘텐츠를 읽는 데에 무리가 없는 글꼴 크기를 사용하는지, 웹 페이지의 robots.txt 파일이 유효한지, 올바른 상태 코드를 사용하는 지와 같은 일부 SEO 모범 사례를 확인한다.
💣문제점
- 이미지에 alt 속성 작성하지 않은 부분 있음
🔎 Best Practices(오류확인)
👉🏻 Best Practices(오류확인)는 웹 페이지가 웹에 대한 표준 모범 사례를 따르고 있는지 확인한다. 웹 애플리케이션을 가동할 때 콘솔에 오류가 출력되진 않는지, 더는 사용하지 않는 API를 호출하고 있지 않은지, HTTPS를 통해 해당 페이지에 접근할 수 있는지와 같은 항목을 확인한다. 불필요한 코드를 찾아내는 것이다.
💣문제점
- 이미지에 alt 속성 작성하지 않은 부분 있음
🔎 Progressive Web App(적합여부)
👉🏻 Progressive Web App(적합여부)는 PWA을 정의하는 일련의 기준에 따라 웹 페이지를 확인한다. 이 검사는 웹이 HTTP를 HTTPS로 리다이렉션하는지, 응답 코드는 명확한지, 3G 네트워크에서도 로딩이 빠르게 이루어지는 지와 같은 여부를 검사하여 합격 또는 실패를 판별한다.
💣문제점
- 콘텐츠는 뷰포트에 맞게 크기가 조정된다(PC와 모바일만 제공중)
💻 회고
👉🏻 우리의 웹 사이트 성능 최적화를 위해 Lighthouse를 통해 진단을 해보았는데, 웹 접근성과 속도에 있어 문제가 있음을 확인할 수 있었다.
다른 요소들에서도 웹 사이트 성능 최적화를 저해하는 요소들을 확인하였으니 이를 바탕으로 리팩토링해서 재배포하고, 구글 플레이 스토어도 ver2로 업데이트 할 예정이다.
