미디어 품질 — 품질 집중 분석

중요한 이유

미디어 문제는 거의 단독으로 발생하지 않아요. 크기가 없는 히어로 이미지는 레이아웃을 이동시킬 수 있고, 대체 텍스트가 없는 이미지는 접근성을 막고 시각적 이해를 약화시킬 수 있어요.

FixWeb은 렌더링된 이미지 요소, alt 속성, 크기, 로딩 모드, 가져오기 우선순위, 렌더링 크기를 기록해요.

대체 텍스트가 없으면 스크린 리더 사용자에게 영향을 주고, 크기가 없으면 CLS 위험이 커지며, 지연 로딩된 히어로 이미지는 페이지의 주요 시각 요소를 늦출 수 있어요.

렌더링된 DOM 스냅샷은 보이는 이미지를 목록화하고 누락된 alt 속성, 빈약한 대체 텍스트, 없는 크기, 예상 히어로 이미지의 지연 로딩을 표시해요.

대체 텍스트를 요구하는 이미지 컴포넌트나 CMS 파이프라인을 사용하고 width/height를 출력하며 반응형 소스를 생성하고 첫 번째 주요 시각 요소를 우선 콘텐츠로 취급하세요.