SP-694 페이지 성능 개선

[SungHyun627]

💡 다음 이슈를 해결했어요.

• png 파일 => webp 파일 수정
• 웹 폰트 최적화(woff => woff2로 변경, woff2 subset 사용)
• banner의 layout shift 제거 => Lighthouse CLS 향상
• 배너 이미지, web font preload
• 로그인, 모집공고 상태 페이지 code splitting 적용
• 메인페이지 - 모집공고 카드 스타일 수정
• 로그인, 회원가입 페이지 디자인 수정 사항 반영
• Lighthouse 지표 개선 작업

💡 이슈를 처리하면서 추가된 코드가 있어요.

(~ing)

✅ 셀프 체크리스트

• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• 커밋 메세지를 컨벤션에 맞추었습니다.
• 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• 변경 후 코드는 기존의 테스트를 통과합니다.
• 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[github-actions]

💡 LightHouse Reports

🟢 90 ~ 100    🟠 50 ~ 89    🔴 0 ~ 49

🖥 Desktop

📄 메인

Category	Score
🔴 Performance	35
🟢 Accessibility	95
🟢 Best practices	96
🟢 SEO	92
🔴 First Contentful Paint	3.8 s
🔴 Largest Contentful Paint	7.8 s
🔴 Speed Index	5.3 s
🟠 Total Blocking Time	300 ms
🟠 Cumulative Layout Shift	0.18

📄 로그인

Category	Score
🔴 Performance	46
🟢 Accessibility	95
🟢 Best practices	100
🟢 SEO	92
🔴 First Contentful Paint	3.7 s
🔴 Largest Contentful Paint	7.7 s
🔴 Speed Index	4.0 s
🟢 Total Blocking Time	50 ms
🟠 Cumulative Layout Shift	0.211

📄 모집공고 모아보기

Category	Score
🔴 Performance	47
🟢 Accessibility	91
🟢 Best practices	96
🟢 SEO	92
🔴 First Contentful Paint	3.7 s
🔴 Largest Contentful Paint	7.7 s
🔴 Speed Index	4.1 s
🟢 Total Blocking Time	100 ms
🟠 Cumulative Layout Shift	0.182

📄 모집공고 상세

Category	Score
🟠 Performance	54
🟠 Accessibility	87
🟢 Best practices	96
🟠 SEO	83
🔴 First Contentful Paint	3.5 s
🔴 Largest Contentful Paint	7.7 s
🔴 Speed Index	4.0 s
🟢 Total Blocking Time	50 ms
🟢 Cumulative Layout Shift	0.096

📱 Mobile

📄 메인

Category	Score
🔴 Performance	43
🟢 Accessibility	95
🟠 Best practices	89
🟢 SEO	92
🔴 First Contentful Paint	22.1 s
🔴 Largest Contentful Paint	46.7 s
🔴 Speed Index	22.1 s
🟠 Total Blocking Time	480 ms
🟢 Cumulative Layout Shift	0.005

📄 로그인

Category	Score
🔴 Performance	34
🟢 Accessibility	95
🟢 Best practices	100
🟢 SEO	92
🔴 First Contentful Paint	21.9 s
🔴 Largest Contentful Paint	46.8 s
🔴 Speed Index	21.9 s
🟠 Total Blocking Time	360 ms
🟠 Cumulative Layout Shift	0.24

📄 모집공고 모아보기

Category	Score
🔴 Performance	37
🟢 Accessibility	91
🟠 Best practices	89
🟢 SEO	92
🔴 First Contentful Paint	21.9 s
🔴 Largest Contentful Paint	46.6 s
🔴 Speed Index	21.9 s
🔴 Total Blocking Time	730 ms
🟢 Cumulative Layout Shift	0

📄 모집공고 상세

Category	Score
🔴 Performance	37
🟠 Accessibility	87
🟢 Best practices	93
🟠 SEO	83
🔴 First Contentful Paint	20.7 s
🔴 Largest Contentful Paint	47.0 s
🔴 Speed Index	20.7 s
🔴 Total Blocking Time	670 ms
🟢 Cumulative Layout Shift	0.065