| Layout shift란? UI/UX 경험을 해치고 이미지 로딩이 느리게되어 화면 레이아웃이 갑자기 변경(밀리는)되는 현상을 말합니다. Lighthouse에서도 확인이 가능합니다. 그래서 왜 이런일이 일어는거지? 1.사이즈가 정해져 있지 않은 이미지 2.사이즈가 정해져 있지 않은 광고 3.동적으로 삽입된 콘텐츠 4.Web font(FOIT, FOUT) 그럼 어떻게 해결하지? -당연히 이미지에 사이즈를 설정해주면 됩니다. -폰트 문제는 미리 setting을 해주시면 됩니다. 예시를 들어보겠습니다. 아래와 같은 코드가 존재할 때 function PhotoItem({ photo: { urls, alt } }) { const dispatch = useDispatch(); const openModal = ()..
보통 초보 개발자들은 성능 최적화를 고려하지 않고 무작정 코딩을한다.(나 같은 사람) 이런 불상사를 막기위해 성능 최적화를 알아보자 ! 개인 프로젝트 같이 자그마한 프로젝트를 진행하는 경우에는 크게 신경을 쓰지 않아도 된다. 하지만 수 많은 사용자들이 몰리는 사이트라면 ...? 당연히 속도가 빨라야한다. 그렇게 하기 위해 발버둥쳐서라도 메모리 사이즈를 줄이고 불필요한 코드를 줄이고 이미지 사이즈도 줄이고.. 역시 날씬한게 짱인가? 아무튼 이번에는 코드단에서 불필요한 Css를 제거할 것이다 ! 위의 이미지는 Lighthouse를 통한 사이트 성능 검증인데 굉장히 구리다. 어느정도 개선 시켜봐야겠다. * Lighthouse 보는 방법은 Chrome인 경우 F12 mac : command + option + ..