웹 성능 최적화 기법: chapter3 웹 사이트 성능을 개선하는 기본적인 방법

1. HTTP 요청 수 줄이기

웹 페이지 로딩 속도를 개선하려면, 서버에 보내는 HTTP 요청의 수를 줄이는 것이 중요합니다. 각 파일마다 별도의 HTTP 요청을 보내면 페이지 로딩 시간이 늘어나기 때문에 이를 줄이는 방법이 필요합니다.

• 여러 개의 요청을 하나로 합쳐서 페이지 로딩 시간을 단축시킴.

2. 스크립트 파일 병합

여러 개의 JavaScript 파일을 하나의 파일로 병합하면 HTTP 요청 수가 줄어듭니다. 병합된 파일은 웹 서버로부터 한 번만 다운로드되며, 페이지 로딩 시간을 단축시킬 수 있습니다.

• 여러 개의 JavaScript 파일을 하나로 합쳐서 요청 수를 줄임.

3. 인라인 이미지

이미지를 HTML 또는 CSS 파일에 직접 인라인으로 삽입하는 방법입니다. 이미지 파일을 base64 형식으로 변환하여 HTML이나 CSS에 포함시키면 별도의 이미지 요청 없이 바로 로드할 수 있습니다. 단, 너무 큰 이미지 파일을 인라인으로 사용하면 오히려 페이지 크기가 커질 수 있으므로 적절한 크기 조정이 필요합니다.

• 이미지를 base64 형식으로 HTML/CSS에 직접 삽입하여 별도 요청 없이 이미지 로드.

4. CSS 스프라이트

CSS 스프라이트는 여러 개의 이미지를 하나의 큰 이미지 파일로 합쳐서 사용하는 기법입니다. 이를 통해 여러 이미지 요청을 하나의 요청으로 줄일 수 있습니다. CSS에서 배경 이미지를 위치시키는 방식으로 각 이미지를 표시합니다.

• 여러 이미지를 하나로 합쳐서 한 번의 요청으로 로드.

5. 콘텐츠 파일 크기 줄이기

웹 페이지를 로드할 때 불필요한 파일 크기를 줄이면 페이지 로딩 속도가 빨라집니다. 이는 이미지 압축, JavaScript 및 CSS 파일 최소화(minify), 불필요한 코드 제거 등을 통해 이뤄질 수 있습니다. 파일 크기를 줄여서 전송하는 데이터를 최소화하고, 로딩 속도를 개선할 수 있습니다.

• 이미지 압축, 코드 최소화(minify), 불필요한 코드 제거 등을 통해 파일 크기 축소.

6. 스크립트 파일 압축 전달

스크립트 파일 압축은 JavaScript 파일을 최적화하여 파일 크기를 줄이고 페이지 로딩 속도를 향상시키는 방법입니다. 일반적으로 Minification(최소화) 기법을 사용하여 파일에서 공백, 주석, 불필요한 문자 등을 제거하여 크기를 최소화합니다. 이를 통해 파일의 전송 시간이 단축됩니다.