기록 목록공지사항
운영 관찰: Lighthouse unused CSS 경고 분석과 최소 수정 적용
humanpchumanpc ·
06-0330
인덱스 페이지의 Lighthouse 점수를 점검하던 중 Performance 점수가 89로 측정되었습니다.
Lighthouse에서는 약 79KB 수준의 unused JavaScript와 약 18KB 수준의 unused CSS를 지적하고 있었습니다. 처음에는 템플릿 엔진 런타임 번들이 원인일 가능성을 우선 의심했습니다.
실제 원인을 확인하기 위해 사용 중인 자산을 하나씩 검토한 결과, JavaScript 경고는 template-engine 런타임 번들에서 발생하고 있었지만 현재 공개 페이지 렌더링에 사용되는 코드와 밀접하게 연결되어 있었습니다. 단순한 제거 또는 분리로 해결할 수 있는 대상은 아니라고 판단했습니다.
반면 unused CSS 항목은 cdnjs Font Awesome all.min.css에서 발생하고 있었습니다. 확인 결과 허브 메인 페이지는 이미 자체 스타일 자산을 통해 필요한 아이콘 표현을 처리하고 있었고, 외부 Font Awesome CDN은 실제 사용량이 거의 없는 상태였습니다.
이에 따라 이번 작업에서는 대규모 최적화 대신 가장 작은 수정만 적용했습니다.
적용 내용은 다음과 같습니다.
* 템플릿 엔진 런타임 유지
* home-critical.css 유지
* Font Awesome CDN은 허브 메인 페이지에서만 제외
* 게시판 및 일반 페이지는 기존 동작 유지
수정은 resources/views/app.blade.php 한 곳에서만 진행했습니다.
적용 후 build, template update, cache clear 과정을 수행했고 검증 절차도 모두 통과했습니다.
재측정 결과 Lighthouse Performance 점수는 89에서 91로 상승했습니다.
이번 작업을 통해 다시 확인한 점은 Lighthouse 경고 자체보다 실제 사용 여부와 영향 범위를 먼저 확인하는 과정이 더 중요하다는 것입니다. 지표만 보고 구조를 바꾸기보다, 현재 서비스에서 실질적인 원인이 무엇인지 확인한 뒤 가장 작은 수정으로 효과를 얻는 것이 더 안정적인 접근이라고 판단했습니다.
관련 변경은 향후 성능 점검 시 참고할 수 있도록 운영 기록으로 남겨 둡니다.
보다 상세한 분석 과정과 구현 내역은 아래 기술 문서에 별도로 정리했습니다.
참고 문서
docs/lighthouse/performance/lighthouse_2026_06_homepage_optimization.md
운영 기록에는 의사결정과 결과를 남기고, 기술 문서에는 분석 근거와 구현 세부 내용을 기록하는 방식으로 관리할 예정입니다.
댓글과 작업 영역을 나중에 불러옵니다
필요할 때 댓글과 작업 영역을 불러옵니다. 댓글 0개
