[OMT] 1차 Home 성능개선

2024.03.04(월)

Intro Page의 성능 개선을 마치고

Home의 성능개선을 위해 리팩토링을 진행했다.

결과는 다소 충격적이였다.

Before Home

위 와 같은 점수를 보여주었고 내 프로젝트의 모델링이 되었던 CGV와 비교를 해보았다.

CGV Home

생각보다 페이지 성능이 낮게 나왔다.

두 페이지의 공통점

콘텐츠가 포함된 최대 페인트 요소, 타사 코드의 영향, 이미지 크기 적절하게 설정

두 웹페이지의 특성상 예고편 , 영화 포스터 등 타사의 외부 코드의 영향을 받는 경우가 많다. CGV의 코드를 뜯어 볼 수 없기 때문에 내 웹페이지에서 위의 문제들을 해결해보려 한다.

진행 방향

☝️ png to avif 변환 & IMG요소 alt 명시

png 파일을 avif로 변환해 압축률을 높이고 표현력을 상승시켰다. KMDB에서 받아온 Poster URL은 AVIF가 아닌 png나 jpg 형식으로 받아오기에 이를 변환할 수는 없었고 내가 직접 사용하는 png 파일들은 모두 변환시켜 적용해주었다.

IMG 요소에 간혹 alt가 적용되지 않은 경우가 있었는데 이 경우 접근성, seo 모두에 영향을 주기 때문에 빠르게 수정해주었다.

✌️loading = ‘lazy’의 활용

최대 콘텐츠 렌더링 시간 이미지의 지연 로드를 해결해보기위해 poster url과 예고편에 사용되는 youtube 링크에 loading = "lazy" 효과를 걸어보았다.

lazy loading은 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술이라고 한다.

이미지, 비디오를 그냥 로딩하지 않고 lazy loading을 사용하는 이유는 사용자가 볼 수 없는 것들을 로딩할 가능성이 있기 때문 즉, 사용자가 보지 않는 것들에서 불필요한 데이터 낭비를 막기 위함이다.

이 기능은 seo에 영향을 미치지만 콘텐츠에 대한 링크를 명시하면 충분히 극복이 가능하다고 한다.

직접 사용해본 결과 지연 로드가 완전히 해결되지는 않았지만 LCP비율에서 로드 지연률을 4,340 -> 3,270ms로 낮출수 있었던 것 같다.

1차 성능개선 결과

seo 부분은 마무리를 지었고

성능 면에서 타사 리소스를 어떻게 처리할지

접근성 면에서 ARIA 요소의 포커스? 문제

권장사항의 HTTPS, 이미지의 올바르지 않은 가로세로 비율

이 문제들을 해결하는게 2차 성능개선이 될 것 같다.