반응형
사이트 속도 개선하는 방법
1. 렌더블록 리소스 최적화
- CSS/JS 파일 최적화:
사용하지 않는 CSS나 JS 코드를 제거하거나, 별도의 파일로 분리 후 압축(minify)하세요. - 비동기 로딩:
외부 스크립트(예: Google Analytics, 네이버 로그, 광고 스크립트 등)는 가능한 경우 async나 defer 속성을 추가하여 렌더링을 차단하지 않도록 하세요. - 예시:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HSXXXXXXXB"></script>2. 이미지 최적화
- 이미지 압축 및 포맷:
이미지를 WebP와 같은 최신 포맷으로 변환하거나, 적절한 압축률을 적용해 파일 크기를 줄이세요. - 지연 로딩(lazy-loading):
화면에 바로 보이지 않는 이미지는 loading="lazy" 속성을 사용하여 필요할 때 로딩되도록 합니다. - 예시:
<img src="이미지경로.jpg" alt="설명" loading="lazy">3. 캐싱 및 CDN 활용
- 브라우저 캐싱:
서버 설정에서 캐시 만료 기간을 설정하여 정적 리소스를 캐싱하도록 합니다. - CDN 사용:
이미지, CSS, JS 파일을 CDN을 통해 제공하면 전 세계 사용자에게 빠른 응답을 줄 수 있습니다.
4. 불필요한 코드 제거
- 인라인 스크립트 최소화:
HTML 내에 있는 인라인 스크립트나 스타일은 외부 파일로 분리하여 캐싱과 압축 대상에 포함시키는 것이 좋습니다. - 불필요한 서드파티 코드:
광고, 분석, SNS 공유 버튼 등 외부 코드가 많을 경우, 사이트에 실제로 필요한 것만 남기고 나머지는 제거하거나 비동기 로딩 처리하세요.
5. 기타 고려 사항
- HTML 구조 최적화:
불필요한 HTML 주석이나 템플릿 태그([##...##] 등)가 실제 렌더링에 영향을 미치지 않는지 확인하고, 필요 없는 부분은 서버에서 처리한 후 클라이언트에 전달되도록 하세요. - JavaScript 성능 개선:
jQuery와 같은 라이브러리를 최신 버전으로 업데이트하거나, 꼭 필요한 경우에만 사용하도록 리팩토링하는 것도 도움이 됩니다.
반응형
댓글