[프론트엔드 성능 최적화 가이드] 2장 올림픽 통계 서비스 최적화
·
Frontend/Perfomance Optimization
학습할 최적화 기법CSS 애니메이션 최적화컴포넌트 지연 로딩 단일 컴포넌트 분할컴포넌트 사전 로딩이미지 사전 로딩애니메이션 최적화문제의 애니메이션 찾기 설문 항목을 클릭하면 해당 응답에 대해 필터링되고 막대 그래프의 배경 색과 막대의 가로 길이가 변합니다.그런데 이 애니메이션을 계속 보다 보면 약간 이상하게 느껴집니다. 막대가 늘어날 때 부드럽게 늘어나지 않고 어딘가 살짝 끊기는 듯한 느낌이 있습니다. 이런 끊김 현상을 쟁크(jank) 라고 합니다. 느끼지 못한다면, 개발자 도구를 열고 Performance 패널의 CPU 설정을 6x slowdown으로 설정하면 애니메이션이 끊기는 현상을 더 잘 확인할 수 있습니다.애니메이션의 원리일반적으로 사용하는 디스플레이의 주사율은 60Hz입니다. 즉, 1초에 ..
[프론트엔드 성능 최적화 가이드] 1장 블로그 서비스 최적화
·
Frontend/Perfomance Optimization
Repository최적화 기법로딩 성능 최적화이미지 사이즈 최적화코드 분할텍스트 압축렌더링 성능 최적화병목 코드 최적화 Lighthouse 툴을 이용한 페이지 검사 Lighthouse 검색 결과 First Contentful Paint(FCP)FCP는 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간에 관한 지표입니다.10%의 가중치를 갖습니다. Speed Index(SI)SI는 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표입니다.A 페이지는 일부 콘텐츠가 B 페이지보다 먼저 떴음을 알 수 있습니다. 이런 경우 A 페이지가 B 페이지보다 전체적으로 더 빨리 로드된 것으로 계산되며, 더 높은 점수를 받습니다. SI는 총점을 계산할 때, 10%의 ..