FrontEnd/React1 Lighthouse로 프론트엔드 성능 개선하기 해당 글은 Velog에서 옮겨온 글 입니다.문제점1. 첫 화면 컨텐츠 렌더링시 버벅거리는 문제첫 화면에서 AOS 라이브러리를 사용하여 이미지에 flip 효과를 주는 애니메이션을 적용했다.하지만 해당이미지가 렌더링 될 때 커튼처럼 버벅거리며 렌더링되었고 깜빡거리면서 보여지는 문제가 발생했다.해당 문제는 두 가지의 방법으로 해결했다.CSS의 will-change 속성으로 해결CSS 작업에서 스타일 계산, 레이아웃 처리, 애니메이션 프레임 계산 등을 CPU가 담당하는데, CPU가 과도하게 사용되는 경우 버벅거리고 깜빡이는 문제가 발생할 수 있다.CSS의 will-change 속성은 브라우저에게 요소의 예상 변경 사항을 미리 알려주는 역할을한다.이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할 .. 2024. 9. 9. 이전 1 다음
