DOM 순서 기반 AI의 오판 해결로 Mobile LCP 1.0s 및 점수 100점 달성

Context

AI를 통해 WordPress 테마를 생성하며 초기 Lighthouse 점수 100점을 기록했으나, 콘텐츠 수정 후 Mobile 점수가 89점으로 하락하는 성능 저하 발생. 렌더링 시 거대한 데이터 테이블이 Viewport 상단을 점유하여 실제 Hero Image의 위치가 하단으로 밀려난 구조적 특성이 원인임.

Technical Solution

• DOM Order 기반의 단순 Heuristic으로 인해 첫 번째 이미지에 fetchpriority="high"가 자동 할당된 문제 식별
• Viewport Hierarchy를 고려하지 않은 AI의 정적 코드 생성 방식이 Mobile 환경의 제한된 대역폭 낭비를 초래한 점 분석
• 불필요한 초기 리소스 경쟁을 제거하기 위해 해당 이미지 속성을 loading="lazy"로 변경하여 Asset Delivery 전략 최적화
• Server-side Cache로 인한 Stale Code 배포 문제를 인지하고 Cache Purge를 통한 최종 변경 사항 반영 확인
• 시각적 렌더링 결과와 소스 코드 상의 우선순위 설정 간의 불일치를 해결하는 Human Review 프로세스 적용