refactor: 이미지 최적화#210
Conversation
- next.config에 deviceSizes/imageSizes 세분화 - Banner, IntroSection 등 fill 이미지에 sizes 지정 - 뷰포트별 적정 해상도 이미지 선택으로 네트워크 비용 절감
- sharp로 Main_Graphic/Background/Project 이미지를 12px base64 WebP로 인코딩 - src/constants/blurDataURL.ts에 정적 상수로 저장 (총 549B) - IntroSection, StatsSection, ProjectTypeBanner에 placeholder="blur" 추가 - 로컬 LCP 평균 2,390ms → 803ms (-66.4%), Render Delay -83.6%
- ProjectCard Poster(300x190), Logo(95x95)에서 unoptimized 제거 - sizes 속성 추가하여 디바이스별 적정 해상도 요청 - S3 이미지가 _next/image 파이프라인 진입, WebP 자동 변환 + w=640 확인 - 상세/스토리 페이지는 Vercel 크레딧 소모 고려해 유지
- /projects/meetup Vercel Preview에서 S3 이미지 바이트 절감 실측 - 샘플 4개 평균 -95.7% (원본 PNG 267~851KB → WebP 16~34KB) - Step 2/Step 3 LCP 기준값 표기 일관성 정리 (2,378ms로 통일) - Step 4는 SVGO 효과 미미로 보류 결정 기록
|
@leemanjae02 is attempting to deploy a commit to the kusitms-homepage Team on Vercel. A member of the Team first needs to authorize it. |
78-artilleryman
left a comment
78-artilleryman
left a comment
There was a problem hiding this comment.
전체적으로 next/Image에 있는 prop을 사용해서 최적화를 진행해주신 것 같습니다
근데 지금 이 프로젝트가 vercel에 무료 플랜으로 배포가 되어있을텐데 지금처럼 size prop를 이용하여 자동 리사이즈 / 반응형 사이즈 최적화를 해주게 되면 기본으로 제공하는 최적화 사용량을 초과하여 이미지 전부가 안 떠버리는 문제가 생길 수 있습니다
일단 전체적으로 이미지 확장자를 webp로 바꿔주어 최적화 사용량을 전부 소진을 안 할 수도 있다는 생각이 드는데 이건 나중에 접속자가 많아지는 34기 신규 회원 모집할때 vercel에 접속하여 홈페이지 모니터링 한 번 해보시는게 좋을 것 같습니다
| className="aspect-[300/190] w-full h-full object-cover" | ||
| width={300} | ||
| height={190} | ||
| unoptimized | ||
| sizes="(max-width: 768px) 50vw, 300px" | ||
| /> | ||
| ); | ||
|
|
||
| const Logo = ({ src }: { src: string }) => ( | ||
| <div className="absolute top-[-60px] right-[16px] desktop:top-0 desktop:right-[24px] w-[78px] h-[78px] desktop:w-[95px] desktop:h-[95px] flex items-center justify-center overflow-hidden rounded-full bg-white"> | ||
| <Image src={src} alt="logo" width={95} height={95} unoptimized /> | ||
| <Image src={src} alt="logo" width={95} height={95} sizes="95px" /> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
특히 이곳에 unoptimized은 제가 걸어두어서 히스토리를 잘 알고 있는데
이곳에서 정말 많은 최적화가 일어나서 이미지가 화면에 안 나오는 문제가 발생했었습니다
그래서 이곳에서는 최적화 옵션을 꺼두었습니다
There was a problem hiding this comment.
ProjectCard에 unoptimized를 걸어두신 이유가 병현님이 말씀해주신 것처럼 버셀 무료 최적화를 많이 소모할 것 같아 걸어두신게 아닐까 생각했었습니다!
하지만 이 생각이 들었던게 최적화를 진행해본 이후라서 전 pr 리뷰 요청에 남겨두었으나 pr을 수정하면서 빼먹은 것 같습니다
근데 혹시 버셀에서 무료 최적화를 다 사용하게 되면 이미지 자체를 띄우지 못하는 문제가 발생하나요?
넵! 알겠습니다 리뷰 감사합니다 |
https://vercel.com/docs/image-optimization/limits-and-pricing |
| const [isTablet, setIsTablet] = useState<boolean | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| const checkTablet = () => { | ||
| setIsTablet(window.innerWidth >= 768); | ||
| }; | ||
| checkTablet(); | ||
| window.addEventListener("resize", checkTablet); | ||
| return () => window.removeEventListener("resize", checkTablet); | ||
| }, []); | ||
|
|
||
| if (isTablet === null) return <div className="w-full h-[180px] bg-sky-100" />; | ||
|
|
There was a problem hiding this comment.
ismobile isTablet 이런거 다 모아서 훅으로 만드는게 좋아보입니다
3 participants
#️⃣연관된 이슈
📝작업 내용
Next.js
<Image>기반 이미지 파이프라인 전반 최적화로 초기 로딩 대역폭과 체감 성능 개선.적용 범위
next.config.ts(4K 고해상도 지원 및 최적화 설정)ProjectCard— 프로젝트 리스트 페이지 전반의 S3 이미지 최적화IntroSection,StatsSection), 아카이브(Banner), 프로젝트(Banner,ProjectTypeBanner)public/하위 67개 래스터 이미지 (WebP 전환 완료)무엇을 / 왜 했는지
IntroSection,Banner(Archive, Projects),StatsSection이유: CSS
display: none은 태그가 DOM에 존재하여 브라우저 프리로드 스캐너가 이미지를 미리 다운로드하는 문제를 야기함. 자바스크립트로 기기별 태그를 물리적으로 분리하여 모바일에서 데스크탑용 거대 이미지(w=3840) 로드를 원천 차단함.next.config.ts및 전역<Image>컴포넌트이유: 데스크탑 고해상도(2048, 3840) 설정을 복구하여 고화질 디스플레이에 대응하되,
sizes속성을 미디어 쿼리 단위로 쪼개어 브라우저가 현재 뷰포트에 가장 적합한 픽셀 데이터만 요청하도록 최적화함.IntroSection(메인 그래픽),StatsSection(배경),ProjectTypeBanner(목록 배너)이유: 페이지 진입 시 가장 먼저 보이는 핵심 이미지들에 초소형 Base64 데이터를 인라인으로 주입. 실제 이미지 다운로드 전 "흐릿한 이미지"를 즉시 페인트하여 사용자 체감 속도를 높이고 LCP 지표를 50% 이상 개선함.
public/하위 정적 리소스 67개 파일 전체이유: 동일 화질 대비 용량이 30~40% 작은 최신 포맷으로 전환하여 대역폭 소모를 줄이고 로딩 속도를 가속화함.
ProjectCard(포스터, 로고)이유:
unoptimized속성을 제거하여 S3 원본 이미지가 Vercel 이미지 파이프라인을 거치게 함. 이를 통해 자동 WebP 변환, 적정 사이즈 리사이징(w=640), CDN 캐싱을 적용하여 실전송량을 약 95% 절감함.📊 최적화 수치 (Lighthouse v13.1 실측 평균)
메인 페이지 (
/) 개선 지표🖼️ 이미지 용량/전송량 개선
💬리뷰 요구사항
IntroSection등에서 기기 크기를 변경(Resize)할 때 레이아웃과 이미지가 정상적으로 전환되는지 확인 부탁드립니다.