리뷰에서 조언받은대로 Lighthouse 도구를 이용해서 LCP 부분을 확인하고자 했습니다.
이 도구를 이용해 처음 시도했다가 의도한 결과가 나오지 않았고, 초기 로딩 성능을 측정하기 위한 도구이기 때문에, 성능이 좋아지는 결과를 보여줄 수 없어 의미가 없다고 잘못 생각했습니다.
그래서 여러 도구를 찾아보면서, Performance 탭을 이용한 분석도 시도하게 되었고,
여러 시도 끝에 초기 성능 지표인 LCP가 악화되는 것이 자연스러운 구조라는 것을 이해하고 방향을 잡게 되었습니다.
이 도구를 이용해서 초기 성능 지표가 개선 이후에 악화된 것을 확인할 수 있는데, 그걸로도 증명할 수 있겠다라는 것을 깨달았습니다.
이미지 로딩 속도가 빨진 반면, 이를 위해 상세페이지 진입 시 보이지 않는 활동사진 컴포넌트가 미리 마운트되어 있어 초기에 비용이 많이 드는 것은 의도된 결과였습니다. 따라서 아래와 같이 수치로 성능을 확인해볼 수 있는데,
<aside>
Largest Contentful Paint (LCP)
개선 전은 47.5s, 개선 후는 60.4s로 거의 고정적인 수치 패턴을 확인할 수 있었습니다.
여러 차례 측정 결과, 개선 이후 LCP는 일관되게 증가했기 때문에, 이 수치만을 보면 개선 후 LCP 값이 증가하여 성능이 안 좋아졌다고 오해할 수 있지만, 아래에서 프레임 관련 개선을 보면 사용자 UX 측면에서는 훨씬 개선된 것을 확인할 수 있습니다.
그리고 LCP에 원래는 활동사진이 포함된다고 생각했는데, 상세페이지의 동아리 대표 이미지가 LCP의 대상이었습니다.
그래서 이 측정값이 이 작업에서는 의미가 없을 것이라고 생각했지만, 이는 개선 후 탭 전환 시 이미지가 빨리 보이도록 한 것을 고려한 것으로
활동사진 이미지들은 페이지 진입 시점에 미리 로드하여 초기 네트워크 요청 수가 증가했기 때문에 LCP의 대상인 동아리 대표 이미지의 로딩이 뒤로 밀리게 되면서 악화된 결과였습니다.
오히려 의도한 트레이드오프 결과가 그대로 수치에 드러난 것이며 이를 통해 의도한 대로 개선되었다는 것을 확인할 수 있습니다.
수치를 비교하기 위한 것이 아니라 구조 변화에 대해 설명하기 위해 활용할 수 있었습니다.