🔸 배스킨라빈스 웹 사이트 개선 프로젝트 회고

💡 배포 링크

: https://baskin-robbins-31.github.io/Baskin-Robbins-31/

🔹 개발 프로세스

💡 진행 기간

: 8/5

◾ Lighthouse 성능 개선 작업

• 이미지 압축 및 최적화

: Webp 포맷 사용하여 이미지 압축
: 이미지 사이즈 조절하여 최적화

• 접근성 개선

: 적절하지 못하게 쓰인 태그 정리
: 헤딩 태그 구조 정리

◾ 배포 작업

• 배포 후 자잘한 오류 수정

: 이미지 경로 및 시안과 다른 부분 수정

◾ 발표 준비

• PPT, 영상 제작

🔹 참여한 작업

• Lighthouse 성능 개선 작업

• 배포 작업

• 발표 준비

🔹 느낀 점 및 개선 사항

💡 Lighthouse의 사용

: 기존 웹 사이트와의 성능을 비교하기 위해 Lighthouse 확장 프로그램을 계속 작동시키면서 느낀 부분이지만, 어디에서 평가하는지에 따라 그 결과가 항상 달라진다. 크롬 확장 프로그램으로는 외부 변수가 아예 작용하지 않는 통제된 환경에서 평가가 진행되기 때문에, web.dev 홈페이지에서 측정할 때마다 점수가 높게 나오는 경향이 있었다. 그래서 보다 유의미한 측정을 위해 우리 팀은 web.dev 홈페이지에서 측정을 한 후 결과를 분석했다. 사실 Lighthouse라는 툴을 저번주 발표를 준비하면서 처음 알게 되었다. Lighthouse는 아무리 성능과 접근성을 신경 써서 마크업과 스타일링을 한다고 해도 놓칠 수 있는 부분을 점검해준다는 점에서 앞으로 개발할 때 자주 찾게 될 듯한 느낌이다.

💡 img 태그의 width, height 속성

: 이번에 Lighthouse 성능을 개선하면서 팀원들과 깊게 논의한 부분 중 하나가 바로 img의 width, height 속성이다. img의 width, height 값을 지정하면 HTML 문서를 DOM으로 파싱할 때 요소가 가지는 영역의 크기를 미리 지정해준다는 점에서 CLS를 개선할 수 있다. 그런데 여기서 드는 의문이 하나 있다. HTML에 지정할 수 있는 인라인 스타일도 있고, CSS로 width, height 값을 지정하는 방법도 있는데 굳이 왜 img 태그의 속성으로 width, height를 사용해야 할까? 이유는 바로 fallback과 연산 과정에 있다. 먼저 CSS 파일에 지정하는 width, height 값은 CSS 파일이 불러와지지 않으면 값을 알 수 없게 된다. 즉 브라우저는 HTML, CSS를 순차적으로 파싱하기 때문에, 먼저 파싱하는 HTML의 width, height 값을 지정함으로써 CSS 파일이 다운로드되지 않았을 경우를 대비할 수 있다. 그렇다면 HTML의 인라인 스타일을 지정하는 방법과는 어떤 차이가 있을까? img의 width, height는 따로 연산 과정 없이 DOM으로 바로 파싱되지만, 인라인 스타일은 결국 CSS 선택자를 찾는 연산 과정이 포함되므로 그만큼 성능 저하를 초래하기도 한다. 그래서 결과적으로 img의 속성으로 width, height를 지정하는 것이 바람직하다.