Lighthouse로 성능 향상 시켜보기

seunghw·2022년 10월 7일
1
post-thumbnail

시작

라이트하우스 개념도 익혔겠다 만들었던 프로젝트에 빠르게 적용해보고 싶어서 해봤던 삽질기 입니다.

Lighthouse란?

위키백과에 다음과 같이 나오고 있습니다.

Google Lighthouse는 웹페이지 품질을 측정하기 위한 자동화된 오픈 소스 도구입니다. 공개 또는 인증이 필요한 모든 웹 페이지에 대해 실행할 수 있습니다. Google Lighthouse는 웹 페이지의 성능, 접근성 및 검색 엔진 최적화를 감사합니다.

검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행할 수 있습니다.

다음과 같이 성능을 볼 수 있습니다.

페어메일

아이디어가 생각난 당일에 배포하고 싶기도 하고 피드백받으면서 고쳐야지 생각하고
그냥 빠르게 만드는것에만 집중해서 만들었던 토이 프로젝트입니다.

페어메일

위에서 설명했듯이 나는 당연하게 성능이 구릴 것이다 라고 예상을 했고 가볍게 해보고자 이 페어메일을 선택했습니다.

방법?

  1. 원하는 URL을 들어가서
  2. 크롭 탭에서 개발자 도구를 열어서(F12)
  3. 원하시는 항목을 선택하시고 lighthouse탭을 클릭하시면 됩니다.

1차 체크


어.. 그만 알아봐도 될 것 같긴한데..

99랑 95라는게 조금 아쉬웠습니다.
아마 이렇게 높게 나온 이유는 사실 코드자체도 얼마 안되서(100줄 조금 넘나..?) 그런 것 같습니다.
뭔가 100 채우면 뿌듯할 것 같아서 문제점을 천천히 뜯어봤습니다

접근성향상과 성능향상을 하면 다 100이므로 올리기 더 쉬워보이는 접근성 향상을 먼저 살펴보았습니다.

접근성 향상

자세히 보면 이와 같이 친절하게 추천이나 진단을 해줘서 맞춰서 고치고 구글링하고 하면 되는 것 같습니다.
여러 방법이 있었지만 저는 코드들의 태그들을 <div>로 바꾸고 다시 확인을 했더니 원하는 결과가 나올 수 있었습니다.

접근성 확인

성능 향상 도전

다음은 성능향상입니다.

위처럼 효율적인 캐시 정책을 사용하여 정적인 에셋 제공하기라는데 캐시를 건드려야한다는 말 정도로 이해했고 이어서 자세히보기를 눌러서 확인해보고 여러 사이트들을 찾아봤습다.

결국에 저 말은 캐시가 너무 짧게 보관되어서 캐시 기간을 조금 늘리면 해결되는 것이였습니다.

이제 알아냈으니 시도해보았습니다. 여러 방법이 있었는데 그 중에 정적 리소스를 캐시하는 방법을 활용하기로 했습니다.

이 방법은 사실 웹페이지마다 다 해줘야해서 일반적으로 좋지는 않지만
애초에 크기도 작은 토이프로젝트이기 때문에 이 방법을 시도했습니다.

Cache-Control: max-age=31536000

max-age 지시문은 브라우저가 리소스를 캐시해야 하는 시간(초)을 알려줍니다. 이 예에서는 기간을 31536000으로 설정합니다. 이는 1년에 해당합니다: 60초 × 60분 × 24시간 × 365일 = 31536000초.

성능 확인

결과는 바뀌지 않았다.... 왜인지 더 찾아보니까 다음과 같았다..

누군가의 삽질기에서 찾은 내용인데

깃헙페이지에서는 변경하는 것을 제공하지 않는다고 한다

결과

결론

성능을 100까지 올리는 건 못했지만 나름 이런 것도 있구나 찾는 경험이었고
성능의 캐시 관련해서는 다음에 더 알아봐야겠습니다.

참고
https://web.dev/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=devtools
https://dequeuniversity.com/rules/axe/4.4/list?utm_source=lighthouse&utm_medium=devtools
https://basemenks.tistory.com/306
https://toss.tech/article/smart-web-service-cache
https://stackoverflow.com/questions/49604821/cache-busting-with-cra-react
https://sudalkim.tistory.com/11

profile
Lumos

1개의 댓글

comment-user-thumbnail
2023년 8월 27일

덕분에 light house를 처음 시작하기 전에 동작 과정을 쉽게 이해할 수 있었습니다!

답글 달기