perf(blog): 이미지 priority 남용 제거 + AVIF 활성화 + GIF를 video로 교체 (#97)#131
Merged
Conversation
- next/image에 AVIF/WebP 포맷 협상 추가, 본문 이미지 기본 lazy 전환(priority는 옵트인) 및 sizes 부여 - 애니메이션 GIF 3종을 ffmpeg로 mp4 변환 후 PostVideo(autoPlay/loop/muted) 컴포넌트로 교체 - PostImage lazy 기본값과 PostVideo 렌더 동작에 대한 jest 테스트 추가
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
- autoPlay 속성 제거, IntersectionObserver로 뷰포트 진입 시 play() 호출 + preload=metadata로 초기 대역폭 경쟁 해소 - controls 추가로 자동재생 차단 환경의 재생 수단과 무한 반복 영상의 일시정지 수단(WCAG 2.2.2) 확보 - prefers-reduced-motion 설정 시 자동재생 생략, 관련 테스트 3건 보강
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
배경
next.config.mjs에images설정이 없어 AVIF 포맷 협상이 비활성 상태였다.PostImage가 모든 본문 이미지에 무조건priority를 걸어 하단 이미지까지 즉시 preload되고, 대역폭 경쟁으로 첫 화면 LCP가 늦어질 수 있었다.구현
images.formats: ['image/avif', 'image/webp']추가. AVIF 우선 협상, 미지원 브라우저는 WebP 폴백.PostImage의 무조건priority를 제거해 기본 lazy 로딩으로 전환. MDX 본문 이미지는 위치 정보가 없으므로, 첫 화면 이미지에만 쓸 수 있는 옵트인priority?: booleanprop을 추가. 실제 표시폭 기준sizes속성도 부여해 과대 다운로드를 방지.ffmpeg(-movflags faststart, yuv420p)로 GIF 3종을 mp4로 변환해 교체.PostVideo컴포넌트를 신설하고,ai/ai-tool·ai/sse-exam포스트의 참조를 교체(캡션/alt 의미 유지). 원본 GIF는 미참조 상태가 되어 삭제.범위 밖
검증
pnpm run build성공 (Turbo, blog 앱 정적 생성 포함)pnpm run lint통과 (--max-warnings 0)apps/blogpnpm test통과 (24 suites / 98 tests, PostImage lazy 기본값·PostVideo 렌더 테스트 신규 추가)Closes #97