[OMT] intro Page 성능개선

최근 여러 면접들과 가족여행으로 프로젝트 리펙토링을 진행하지 못하고 있었다.

가장 먼저 진행해볼 내용은 페이지 성능개선이다.

우선 PageSpeed Insights 페이지에서 내 페이지들을 검사해보고 그에 맞게 성능 개선을 진행해 볼 계획이다.

시작페이지Before

상세내용_INTRO

이 파트는 내 프로젝트에 사용된 png 파일을 높은 압축과 뛰어난 색표현을 가능케 해주는 avif 파일로 변환해주는 작업을 진행했다.

화면 전체를 커버하는 background IMG나 (여백이 없는) 명확한 png 파일들은 avif로 변환시 시각적으로 큰차이를 느끼지 못했지만 그렇지 않은 경우에 여백에 검은색 바탕이 자리하는 것을 확인했다.

이미지 요소에 추가되지 않은 alt 요소를 추가해주면 접근성뿐만 아니라 seo 성능까지 개선할 수 있다.

스크린샷 2024-03-04 10 35 24

접근성 부분에서 oauth 로그인 txt 부분의 색상대비를 좀 더 높이면 점수를 올릴 수 있었지만 hover효과의 극대화를 위해 색상대비를 손보지 않았다.

사실 다양한 개선 작업을 진행하지는 않았지만 스스로 만족스러운 성능개선을 이끌었다고 생각한다.