Web Performance Optimization (8) 썸네일형 리스트형 [WPO] 이미지 사이즈 최적화 : WEBP 이미지 포맷 크기 : PNG > JPG > WEBP 📌 WEBP 구글에서 나옴, 지원하지 않는 브라우저가 꽤 있음 하지만 화질, 용량을 따져봤을 때 JPG보다 좋은 면이 있어서 사용하려는 움직임이 있음! 이것을 이용해서 이미지 사이즈를 최적화 해볼것! 📌 Squoosh.app 구글에서 출시 WEBP를 위한 서비스 홈페이지에 적용해보기 - squoosh를 이용하여 이미지를 webp 확장자로 변경한 뒤, import! 하지만, 앞서 언급했듯이 webp를 지원하지 않는 브라우저가 있다. 이럴 경우, 맨 처음에 webp를 지원하는 브라우저인지 판단하는 작업이 필요하다 태그 이용! 📌 예제 1) : 내가 어떤 환경에서 특정 이미지를 사용하겠다를 명시하기 위한 태그, 여기서는 사이즈에 따라 로드할 이미지가 달라지고.. [WPO] 이미지 지연(Lazy) 로딩 : IntersectionObserver 📌 이미지 지연(Lazy) 로딩 - 스크롤을 했을 때 화면에 특정 요소(이미지)가 뜨는 시점에서만 요소가 로딩되도록 해보자 - 단점 : 스크롤 이벤트를 가진 함수를 너무 많이 사용해서 오히려 성능이 저하될 수 있다 이런 단점을 해결할 방법은 ?! 바로, IntersectionObserver을 사용! 📌 IntersectionObserver - 지정한 특정 요소가 화면에 보여지는지 아닌지 판단 - 화면에 특정 요소가 보여질때 함수를 실행시켜 성능의 이득을 취할 수 있다! let observer = new IntersectionObserver([callback함수], [미리선언한 option]) observer.observe([Dom element]) → callback 함수 : 스크롤을 내리다가 지정된 요.. [WPO] 컴포넌트 Preloading .. 임시저장 되어있던 이 포스팅.. 모르고 삭제해버려서 다시 쓰는^^.. 예전 글에서 Lazy Loading을 통해 Code Splitting 하는 과정을 기록해놨었다. 이 Lazy Loading에는 단점도 있는데..! Lazy 로딩을 통해 최초 페이지에서는 속도가 빨라졌지만, 이때 로드해두지 않은 특정 컴포넌트를 선택하여 로드해야할 때 다소 느릴 수 있다는 점이다. 이 Lazy로딩의 단점 컴포넌트 Preloading으로 해결해보고자 한다! 🌱 컴포넌트 Preloading? - 말 그대로 컴포넌트를 미리 로딩해 두는 것이다! 그럼 언제 컴포넌트를 미리 로드해야할까? - 두가지 방법이 있다. 컴포넌트를 띄우는 버튼 위에 마우스를 올려 두었을 그 때! 최초 페이지 로드가 되고, 모든 컴포넌트의 마운트가 끝.. [WPO] 이미지 Preloading 저번 포스팅에서는 컴포넌트를 특정 시점에 Preloading 하는 것을 기록했었다. (이후 업로드 예정,, 실수로 삭제해버렸기 때문에^^) [WPO] 컴포넌트 Preloading .. 임시저장 되어있던 이 포스팅.. 모르고 삭제해버려서 다시 쓰는^^.. 예전 글에서 Lazy Loading을 통해 Code Splitting 하는 과정을 기록해놨었다. 이 Lazy Loading에는 단점도 있는데..! Lazy 로딩을 통해 최 yexjinitlog.tistory.com 이번에는 이미지를 Preloading 해보자! Modal 을 선택했을 경우, Modal 내부 이미지들 중에 가장 먼저 뜰 대문사진이 다른 이미지들과 함께 로딩이 되어 느리게 뜨는 것을 경험해본적이 있을 것이다. 이 Modal의 대문? 대표? 사.. [WPO] transform을 이용한 애니메이션 최적화 지난 포스팅에서 브라우저 렌더링 과정에 대해 설명했었다. 마지막 내용에서 GPU의 도움을 받아서 Repaint, Reflow 를 생략할 수도 있다는 글을 적었는데, 자세히 이번 포스팅에 기록해보고자 한다! 📌 GPU(Graphics Processing Unit)? - 컴퓨터 화면에 이미지를 렌더링하는데 사용되는 처리 📌 GPU가 관여할 수 있는 속성 - transform, opacity 등등.. - 무거운 자바스크립트 코드를 돌리는 대신 이 속성을 사용할 경우, 독립된 스레드 상에서 재생되어 애니메이션이 빠르고 부드럽게 나타날 수 있다. 이제 transform 속성을 이용하여 애니메이션 최적화를 해보겠다! 기존 코드 const Bar = (props) => { return ( {props.percent}.. 이전 1 2 다음
