Lighthouse란?
구글에서 만든 웹사이트 성능 측정 도구. 크롬 브라우저 내 개발자도구에 내장되어 있어 사용하기 편리하고 웹사이트의 성능을 측정하고 개선하는데 도움을 준다. 기존에도 성능 측정 사이트는 여러곳 존재하였지만 만족스러운 결과를 얻기는 힘들어서 성능 측정이란 개념이 와닿지 않았는데, Lighthouse를 쓰면서 품질 개선 뿐만 아니라 전반적인 공부가 된 느낌.
측정 결과를 점수로 표시해주며 계산식, 측정항목, 추천 방안, 진단 등을 보여준다. 각 카테코리별 상세한 설명은 아래 링크를 참고했다. 결과는 JSON이나 HTML로 다운로드 가능해서 언제든 다시 확인할 수 있는 장점도 있다.
프로젝트에 적용
담당하고 있는 프로젝트의 메인 페이지를 측정한 결과다. 검색엔진 최적화 카테고리는 예전에 작업한게 있어서 높은 점수가 나올거란걸 예상했었고, 성능과 접근성은 예상대로 낮은 점수를 받았다.
감점 요인
-
텍스트 압축 활성화
텍스트 기반 리소스는 총 네트워크 바이트를 최소화하기 위해 압축과 함께 제공해야 합니다. Lighthouse 보고서의 기회 섹션에는 압축되지 않은 모든 텍스트 기반 리소스가 나열되어 있습니다.Lighthouse는 다음과 같은 모든 응답을 수집합니다. 텍스트 기반 리소스 유형을 갖는 응답. br, gzip 또는 deflate로 설정된 content-encoding 헤더는 포함하지 않는 응답. 그런 다음 Lighthouse는 이러한 각 항목을 GZIP으로 압축하여 잠재적인 절감 효과를 계산합니다.스프링에서 .properties 파일에 아래 코드를 추가하여 텍스트 압축을 활성화했다.
server.compression.enabled=true
server.compression.mime-types=application/json,application/xml,text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/x-javascript-
렌더링 차단 리소스 제거하기
리소스가 페이지의 첫 페인트를 차단하고 있습니다. 중요한 JS/CSS를 인라인으로 전달하고 중요하지 않은 모든 JS/Style을 지연하는 것이 좋습니다.defer 스크립트를 추가하여 지연 로딩 방식으로 변경하였음.
적용 후
이 밖에도 다양한 문제점들이 있었지만 위에 적은 2가지 문제점을 수정하고 난 뒤 다시 측정해봤다.
성능, 접근성 부분에서 모두 점수가 상승했다. 단순히 프로젝트의 성능을 향상시켰을 뿐 아니라 웹 표준 준수에 대한 부분도 같이 공부하게 될 수 있어서 좋은 경험이었다.
