프론트엔드 성능 최적화 가이드
1.[프론트엔드 성능 최적화] (1)
이 시리즈(?)는 '웹 개발 스킬을 한 단계 높여 주는 프론트엔드 성능 최적화 가이드(유동균 지음)' 을 읽고 정리해놓은 시리즈 입니다. 참고 부탁드립니다.: 개인적인 경험에서도 인정할 수 밖에 없는 부분인데, 만약에 랜딩 페이지에 들어갈 때 혹은 페이지 이동 시에 페
2.[프론트엔드 성능 최적화] (2)
: 전부터 알고 있었지만 network 탭을 이용하면 어떤 데이터가 다운받아지고 있고, 그 속도는 어떻게되며 파일의 크기는 어떻게 되는지 등을 알 수 있다. 추가로 backend api를 호출한 다음에 request, response 등이 어떻게 되는지도 network
3.[프론트엔드 성능 최적화] (3)
실제 최적화 방법들(추후 시험처럼 다시 작성해보기)이미지 사이즈 최적화: 이미지 사이즈 최적화 측면에서 분석해보면, 프론트엔드에서는 이미지 크로핑 툴을 제공한 다음에 크로핑 된 이미지를 CDN 등의 서버에 저장하도록 하는 방법이 있다. 이미지 사이즈 최적화 이슈 자체가
4.[프론트엔드 성능 최적화] (4)
지난번에도 정리했지만 본래 브라우저 렌더링에는 CPU를 주로 사용한다. 하지만, FPS 등을 얘기하면서 나온 말이지만 이러한 브라우저 렌더링이 블로킹 되는 경우가 있다(너무 많은 리렌더링이 짧은 주기로 반복되는 등의 현상이 일어날 때). 이런 경우에는 CPU의 부하를
5.[프론트엔드 성능 최적화] (5)
이미지 및 동영상 크기 최적화 그리고 lazy-loading lazy-loading : 먼저 lazy-loading 말그대로 지연 로딩이라는건 왜 필요할까에 대해 말해보자. 어떤 홈페이지가 스크롤로 내리면서 다양한 콘텐츠를 볼 수 있도록 만든 페이지라고 해보자(예를
6.[프론트엔드 성능 최적화] (6)
: 이부분은 http 관련한 설정으로 이뤄지는 파트이다. 사실 캐시 최적화 같은 경우에는 과거 이미지 사이즈 최적화와 유사하게 백엔드 쪽에서 해줄 작업이긴 하다. 애초에 브라우저에서 캐싱이란 디스크 캐시메모리 캐시(RAM 메모리)이렇게 두가지로 나뉘는데, 브라우저 단에
7.[프론트엔드 성능 최적화] (7)
: 프론트엔드 작업시에 폰트는 빠질 수 없는 중요한 요소 중 하나이다. 기본 제공 폰트를 쓸수도 있지만 보통은 커스텀 폰트를 다운받아서 쓰는 경우가 많기 때문에 폰트와 관련된 최적화도 필요하다. : 사실 폰트를 다운받아서 쓰면 되는거지 뭐가 문제일까? 라는 생각이 들
8.[프론트엔드 성능 최적화] (8)
aspect-ratio 속성을 이용하면 grid를 만들 때 grid-template 속성을 주고, 위와 같이 세팅만 해줘도 16: 9비율인 직사각형 요소들로 구성시킬 수 있다(min-width, 이런식으로 안해둬도). 이에 따라 레이아웃 이동 이슈를 해결할 수 있다.u