HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
👻
개발 기록/
📚
CS 스터디/
📚
프론트엔드 성능 최적화
📚

프론트엔드 성능 최적화

💡
2장 내용 좋아서 요약함.

CSS 애니메이션 최적화

  • 애니메이션 끊김 현상을 jank 라 함.
  • 우선 브라우저에서 애니메이션이 어떻게 동작하는지 알아보자.
  • 애니메이션 원리는 여러 장의 이미지를 빠르게 전환하여 우리 눈에 잔상을 남기고, 그로 인해 연속된 이미지가 움직이는 것처럼 느껴지게 하는 것임.
  • 일반적으로 사용하는 디스플레이의 주사율은 60Hz임. 1초에 60장의 정지된 화면을 빠르게 보여 준다는 뜻. 브라우저도 이에 맞춰 최대 60FPS(Frames Per Second)로 1초에 60장의 화면을 새로 그림.
  • 그래서 쟁크 현상이 나타나는 이유 중 하나로 브라우저가 60FPS로 화면을 그리지 못했기 때문이 있음.
  • 왜 못그릴까?
      • notion image
    • 화면이 전부 그려진 후, 애니메이션처럼 일부 요소의 스타일을 변경하거나 추가, 제거한다 가정해보자.
    • 주요 렌더링 경로에서 거친 과정을 다시 한 번 실행하면서 새로운 화면을 그리는데, 이걸 reflow, repaint라 함. reflow는 주요 렌더링 경로의 모든 단계를 모두 재실행함. repaint 또한 reflow보단 빠르지만 거의 모든 단계를 거치기 때문에 이 둘 모두 브라우저 리소스를 잡아먹음.
  • transform, opacity와 같은 속성을 사용하면 reflow, repaint를 줄일 수 있음. 해당 속상은 요소를 별도의 레이어로 분리하고 작업을 GPU에 위임하여 처리함으로써 layout, paint 단계를 건너뛸 수 있음 (하드웨어 가속). GPU는 그래픽 작업을 처리하기 위해 만들어진 것이므로 화면을 그릴 때 활용하면 굉장히 빠름.
    • 참고) transform: translate()은 처음부터 레이어를 분리하지 않고 변화가 일어나는 순간 레이어를 분리함. 반면 transform: translate3d()와 같은 3d 속성들, will-change 속성은 처음부터 레이어를 분리해 두기 때문에 변화에 더욱 빠르게 대처할 수 있음. 물론 레이어가 너무 많아지면 그만큼 메모리를 많이 사용하기 때문에 주의해야 함.
    • 예시) width 대신 transform: scaleX(${({ width }) ⇒ width / 100}); 사용하기. 해당 예시에서 중앙 정렬된다면 transform-origin 속성을 center left로 변경하기.
 

컴포넌트 지연 로딩 & 사전 로딩

  • webpack-bundle-analyzer 패키지를 통해 번들링된 번들 파일이 어떤 코드로 이루어져 있는지 트리맵으로 시각화해서 볼 수 있음.
    • 참고) CRA로 만든 프로젝트라면 cra-bundle-analyzer로 더 간편하게 검사할 수 있음.
 
  • 예시를 보자.
    • 지연 로딩으로 외부 라이브러리를 도입했을 때, 그 라이브러리를 사용하는 컴포넌트가 실행될 때 해당 라이브러리를 불러옴으로써 성능을 최적화시킬 수 있음. 이를 통해 최초 페이지 로드 시 당장 필요없는 코드가 번들에 포함되지 않아, 로드할 파일의 크기가 작아지고 초기 로딩 속도나 JS 실행 타이밍이 빨라져서 화면이 더 빨리 표시됨.
    • 단 지연 로딩은 해당 컴포넌트를 불러오는 시점에는 약간의 지연이 발생한다는 한계가 있음. 이에 대한 해결 방법으로 사전 로딩이 있음. 나중에 필요한 모듈을 필요해지기 전에 미리 로드하는 기법임.
      • 사전 로딩 타이밍으로는 hover 시, 컴포넌트의 마운트 완료 후 (componentDidMount, useEffect)가 있음.
 

이미지 사전 로딩

  • 최초로 등장하는 이미지는 js로 이미지를 직접 로드하여 사전 로딩함.
const img = new Image()
img.src = `이미지 주소`
  • 사전 로딩 이미지가 많아지면 사전 로딩 순간 브라우저의 리소스를 그만큼 많이 사용하기 때문에 다른 성능 문제를 야기할 수 있음. 따라서 어떤 콘텐츠를 사전 로드할 필요가 있는지 고민하고 채택해야 함.
 

이미지 최적화

🌃
이미지를 잘 보여주는 방법
 

폰트 최적화

  • 폰트의 변화로 발생하는 현상을 FOUT, FOIT라고 함.
    • FOUT (Flash of Unstyled Text) : Edge 브라우저에서 폰트를 로드하는 방식으로, 폰트의 다운로드 여부와 상관없이 먼저 텍스트를 보여준 후 폰트가 다운로드되면 폰트를 적용하는 방식.
    • FOIT (Flash of Invisible Text) : 크롬, 사파리, 파이어폭스 등에서 폰트를 로드하는 방식으로, 폰트가 완전히 다운로드되기 전까지 텍스트 자체를 보여 주지 않음.
    • 하지만 크롬에서 폰트가 제대로 다운되지 않았는데 텍스트가 보이는 현상이 있음. 그 이유는 완전한 FOIT가 아니라 3초만 기다리는 FOIT이기 때문. 즉, 3초 동안은 폰트가 다운로드 되기를 기다리다가 3초가 지나도 다운되지 않으면 기본 폰트로 텍스트를 보여줌.
  • 둘 중 더 나은 방식이 있다기보단 상황에 따라 적절한 방법이 존재함.
    • 적용 폰트가 아니더라도 빠르게 텍스트를 보여줘야 하면 FOUT, 그렇지 않으면 FOIT.
  • 폰트 최적화엔 2가지 방법이 있음.
    • 폰트 적용 시점 제어
      • @font-face에서 font-display라는 속성으로 제어 가능.
      • FOIT 방식을 선택했을 때 폰트가 갑자기 나타나서 어색할 수 있음. 이 문제는 fade in 애니메이션으로 해결 가능.
      • 이를 위해 폰트 다운로드가 완료되는 시점을 알아야 함. fontfaceobserver라는 라이브러리를 통해 알 수 있음.
        • useEffect(() => {
	font.load(null, 20000).then(() => { setIsFontLoaded(true) })
} ,[])
    • 폰트 파일 크기 줄이기
        • notion image
      • WOFF(Web Open Font Format)는 웹을 위한 폰트임. 이 포맷은 TTF 폰트를 압축하여 웹에서 더욱 빠르게 로드할 수 있도록 만듦. 더 나아가 WOFF2라는 향상된 압축 방식을 적용한 포맷도 있음.
      • transfonter로 폰트 변환 가능.
      • font-face에 넣으면 되고, 브라우저 호환성 문제가 있기 때문에 src 속성에 적용 우선순위가 높은 것부터 차례로 나열하면 됨. format도 작성해야 함.
      • 특정 단어만 사용한다면 문자의 일부 폰트 정보만 가지고 있는 subset 폰트를 사용하자. 마찬가지로 transfonter에서 변환 가능.
          • notion image
      • 여기서 한 발 더 나아가서 폰트를 파일 형태가 아닌 Data-URL 형태로 CSS 파일에 포함할 수도 있음.
          • notion image
          @font-face {
  font-family: "BMYEONSUNG";
  src: url("data:font/woff2;charset=utf-8;base64,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")
      format("woff2"),
    url("./assets/fonts/BMYEONSUNG.woff") format("woff"),
    url("./assets/fonts/BMYEONSUNG.ttf") format("truetype");
  font-display: block;
}
          ⚠️
          다만 css 파일 로드 속도가 증가할 수 있기 때문에 Data-URL이 또 다른 병목을 만들진 않는지 확인해봐야 함.