1.이미지 최적화
압축 및 최적화된 이미지 사용
올바른 파일 형식 선택 (사진에는 JPEG, 그래픽에는 PNG)
레이아웃 이동을 방지하기 위해 이미지 크기 지정
2.HTTP 요청 최소화
페이지에 로드되는 파일 수 감소 (CSS, JavaScript, 이미지)
여러 CSS 또는 JavaScript 파일을 하나로 결합
3.브라우저 캐싱 활성화
정적 자원에 대한 적절한 캐시 헤더 설정
브라우저 캐싱을 활용하여 정적 파일을 로컬에 저장하여 다시 다운로드할 필요성 감소
4.서버 응답 시간 줄이기
서버 측 코드 및 데이터베이스 쿼리 최적화
콘텐츠 전달 네트워크 (CDN) 사용하여 콘텐츠를 여러 서버에 분산
5.비동기로 로딩
즉시 필요하지 않은 스크립트를 비동기로 로드하여 페이지 렌더링을 차단하지 않도록 함
즉시 필요하지 않은 JavaScript를 지연시킴
6.CSS, JavaScript 및 HTML 최소화
코드에서 불필요한 공백 및 주석 제거
CSS, JavaScript 및 HTML 파일을 최소화하여 크기 축소
7.크리티컬 렌더링 경로 최적화
초기 페이지 렌더링에 필요한 중요한 자원 로딩에 우선순위 부여
중요한 CSS를 인라인으로 추가하거나 중요한 스타일시트를 사전로드
8.이미지 지연 로딩
화면에 즉시 표시되지 않는 이미지에 대해 이미지 레이지 로딩 구현
이미지가 뷰포트에 진입할 때만 이미지 로드
9.폰트 최적화
시스템 폰트 사용하거나 사용하는 폰트 수 제한
콘텐츠에 필요한 문자만 포함된 폰트 서브셋 사용
10.GZIP 압축 활성화
텍스트 기반 자원에 대한 GZIP 압축을 활성화하여 전송 중에 크기 축소
11.서드파티 스크립트 최적화
서드파티 스크립트의 사용을 평가하고 최소화
주 메인 페이지를 차단하지 않도록 서드파티 스크립트를 비동기로 로드
12.리다이렉트 감소
리다이렉트 사용을 최소화하고 필요한 경우 최적화
리다이렉트가 필요하고 최적화된지 확인
13.CSS 및 JavaScript 실행 최적화
스크립트를 페이지 하단으로 이동하거나 비필수 스크립트에 대해 async 속성 사용
