프론트엔드 성능 체크리스트 - ChoDragon9/posts GitHub Wiki

이 문서는 프론트엔드 성능 체크리스트의 내용을 발췌한 문서입니다.

JavaScript

  • JS 압축
  • JavaScript를 <body>안에 두지 않기
  • Non-blockning 자바스크립트
    • 비동기적으로 로드하기 위해 async사용
  • 최적화와 JS 라이브러리 업데이트
    • 최적화를 위해 최신버전으로 업데이트
    • 단순한 기능은 바닐라 자바스크립트
  • 디펜던시 크기 제한
    • 가벼운 라이브러리 사용
  • JavaScript 프로파일링
    • 자바스크립트 파일의 성능 문제 체크

Server

  • 웹페이지 크기 < 1500 KB
    • 이상적인 크기 < 500 KB
    • 페이지의 크기 + 리소스를 최대한 줄이세요
  • 페이지 로드 시간 < 3초
    • 페이지 로드 시간을 최대한 줄여 콘텐츠가 빠르게 전송되도록 하세요.
  • 첫번째 바이트 시간(TTFB) < 1.3초
    • 브라우저가 데이터를 받기 전까지 대기하는 시간을 최대한 줄이세요
  • 쿠키 크기
    • 쿠키는 4096 바이트 미만
    • 도메인 네임이 20개 미만
  • HTTP 요청 최소화
  • CDN을 통한 에셋 제공
  • 동일한 프로토콜에서 파일 제공
  • 연결 가능한 파일 제공
    • 연결 불가능한 파일 404을 요청하지 마세요
  • 올바른 HTTP 캐시 헤더 설정
  • GZIP / Brotli 압출 활성화

HTML

  • HTML 압축
  • 불필요한 주석 제거
  • 불필요한 속성 제거
    • type="text/javascript", type="text/css"
  • CSS 태그를 자바스크립트 태그 앞에 두기
    • 브라우저의 렌더링 속소를 높이는 병렬 다운로드가 가능
  • iframe 최소화

CSS

  • CSS 압축
  • 합치기
  • Non-blocking
    • <link>에 rel="preload", as="style" 추가
  • CSS 클래스의 길이
    • 클래스 길이가 HTML과 CSS 파일에 영향을 줄 수 있음
  • 사용되지 않는 CSS 제거
  • CSS 크리티컬(또는 Above the fold)
    • <head> 내에 <style> 추가
  • 외부 또는 인라인 CSS
    • <body>에 외부 또는 인라인 CSS 미사용
  • 스타일시트 복잡도 분석
    • 불필요한 중복 CSS 제거 가능

Fonts

  • 웹폰트 포맷
    • 압축률이 높은 WOFF2 사용
  • 폰트를 더 빨리 로드하기 위해 preconnect를 사용
  • 웹 폰트 크기
    • 300kb를 넘지 않도록 함
  • 플래시 또는 보이지 않는 텍스트 방지

Images

  • 이미지 최적화
  • 이미지 형식
  • 벡터 이미지 vs 래스터/비트맵
    • 비트맵 보다는 벡터 이미지 사용
  • 이미지 크기
    • 이미지 크기를 안다면 width와 height 명시
  • Base64 이미지 사용 지양
  • 레이지 로딩
  • 반응형 이미지
    • 디스플레이 크기에 맞는 이미지를 사용
⚠️ **GitHub.com Fallback** ⚠️