October 20, 2021
Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구입니다. 어떤 웹 페이지든 사용할 수 있습니다.
가장 중요한 Performace
부분만 자세하게 설명해보겠습니다.
퍼포먼스는 말 그대로 웹 사이트의 성능을 보여주는 부분입니다. 간단하게 얘기하면 얼마나 빠르게 화면에 그려지고 사용자는 얼마나 빠르게 해당 콘텐츠를 인식하는지
를 측정하는 것입니다.
Lighthouse에서 권고하는 대부분은 리소스 절약
과 관련 있습니다. 자바스크립트 파일을 청크 단위로 쪼개고 크기를 줄이고 하면 점수가 올라가게 됩니다.
아래 사진은 현재 회사에서 서비스중인 웹 페이지의 퍼포먼스 점수 입니다.
물론 배포가 된 후의 점수이고 localhost
에서 Lighthouse를 실행해보면 점수가 처참합니다. 하지만 실제 유저가 보는 화면은 배포된 화면이기 때문에 로컬의 점수는 크게 신경쓰지 않아도 됩니다.
다음은 세부적인 항목에 대해서 살펴보겠습니다.
Lighthouse는 성능을 측정하기 위해 다음의 메트릭을 사용합니다.
퍼포먼스의 측정 지표라고 생각하면 됩니다.
설명에 나오듯이 아래 제안을 따르면 페이지 로드를 빠르게 도와줄 수 있다고 합니다. 하지만 퍼포먼스 점수에는 영향을 미치지 않습니다. 저의 경우에는 사용하지 않는 자바스크립트 파일을 줄이고 용량을 조금 더 줄이라고 하네요.
웹 페이지의 퍼포먼스와 관련한 더 많은 정보를 보여줍니다. 위의 Opportunities와 마찬가지로 퍼포먼스 점수에 영향을 주지 않습니다.
토글 버튼을 클릭하면 어떤 부분을 개선해 볼 수 있는지 확인할 수 있습니다. 저의 경우에는 웹 폰트와 관련해서 조금 더 개선할 수 있지만 꼭 써야하는 폰트이기에 어쩔 수 없이 그대로 두고 있습니다.
경량화 폰트를 제공한다거나 폰트를 preload
하는 방식으로 성능을 개선해볼 수 있을 것 같습니다.
이 항목은 웹 접근성을 체크하는 항목입니다. img
태그에 alt
속성이 있는지 head
태그에 title
태그 등이 있는지를 확인합니다.
이 항목은 해당 웹 페이지가 웹 표준 모범 사례를 따르고 있는지를 확인하는 항목입니다. 콘솔에 에러가 출력되지는 않는지, HTTPS를 통해 해당 페이지에 접근할 수 있는지와 같은 부분을 확인합니다.
이 항목은 웹 페이지가 검색 엔진에 대해 최적화된 순위 결과를 가지고 있는지 확인합니다. 각 사용자가 자신의 디바이스를 이용하여 웹 페이지에 접근하였을 때 콘텐츠를 읽는 데
무리가 없는 글꼴 크기를 사용하는지, 웹 페이지의 robots.txt
파일이 유효한지 등을 확인합니다.
Progressive Web App을 정의하는 일련의 기준에 따라 웹 페이지를 확인합니다. 이 항목은 해당 웹 페이지가 기준을 따르고 있는지 측정하여 점수를 부여하는 것이 아닙니다. 웹이 HTTP를 HTTPS로 리다이렉션 하는지, 응답 코드는 명확한지, 3G 네트워크 상태에서도 로딩이 빠르게 이루어지는지 같은 여부를 검사하여 합격 또는 실패를 부여합니다.