가지 주요 요점
1. HTTP 요청 수를 줄여 프론트엔드 성능 극대화
최종 사용자 응답 시간의 80-90%는 페이지의 모든 구성 요소를 다운로드하는 데 소요됩니다.
프론트엔드 최적화는 필수적입니다. 백엔드 성능도 중요하지만, 응답 시간의 대부분은 이미지, 스타일시트, 스크립트와 같은 페이지 구성 요소를 다운로드하는 데 사용됩니다. CSS 스프라이트, 이미지 맵, 인라인 이미지를 사용하는 등의 기술을 통해 이러한 구성 요소의 수를 줄이면 로드 시간을 크게 개선할 수 있습니다. 여러 JavaScript 파일이나 CSS 파일을 하나의 파일로 결합하는 것도 HTTP 요청을 줄이는 방법입니다. 구성 요소를 최소화하는 데 집중하면 프론트엔드 성능에서 가장 큰 이점을 얻을 수 있습니다.
- HTTP 요청을 줄이는 주요 기술:
- 여러 이미지를 결합하는 CSS 스프라이트
- 내비게이션 요소를 위한 이미지 맵
- data: URL을 사용하는 인라인 이미지
- JavaScript 및 CSS 파일 결합
2. 브라우저 캐싱을 활용한 먼 미래 Expires 헤더 설정
먼 미래 Expires 헤더는 브라우저가 구성 요소의 캐시된 복사본을 사용할 수 있는지 여부를 명확히 하여 서버와의 확인 필요성을 제거합니다.
브라우저 캐싱 극대화. 정적 구성 요소에 대해 먼 미래 Expires 헤더(1년 이상)를 설정하면 브라우저가 이를 장기적으로 캐시할 수 있어 이후 페이지 뷰에서 불필요한 HTTP 요청을 제거할 수 있습니다. 구성 요소를 업데이트할 때 파일 이름을 변경해야 하지만, 성능 향상은 상당합니다. 자주 변경되는 동적으로 생성된 콘텐츠의 경우, 더 짧은 만료 시간을 설정하는 것이 적절합니다. 적절한 캐시 헤더는 서버 부하를 크게 줄이고 반복 방문자의 페이지 로드 시간을 개선할 수 있습니다.
- 먼 미래 Expires 헤더의 이점:
- 캐시된 구성 요소에 대한 HTTP 요청 제거
- 서버 부하 감소
- 반복 방문자의 페이지 로드 시간 개선
- 고려 사항:
- 구성 요소 업데이트 시 파일 이름 변경 필요
- 동적 콘텐츠에는 더 짧은 만료 시간 사용
3. gzip을 사용한 구성 요소 압축으로 전송 시간 단축
Gzip은 일반적으로 응답 크기를 약 70% 줄입니다.
gzip 압축 활성화. Gzip 압축은 HTTP 응답 크기를 약 70% 줄일 수 있어 전송 시간을 크게 단축합니다. 이는 특히 느린 연결을 사용하는 사용자에게 유익합니다. 압축 및 압축 해제에는 약간의 CPU 비용이 들지만, 대역폭 절감 효과가 훨씬 큽니다. 웹 서버를 구성하여 HTML 문서, JavaScript, CSS 및 기타 텍스트 응답을 gzip으로 압축하십시오. 이미 압축된 형식(예: 이미지 및 PDF)은 gzip을 피하십시오. 적절히 구현된 gzip 압축은 가장 간단하고 효과적인 성능 최적화 중 하나입니다.
- gzip으로 압축할 구성 요소:
- HTML 문서
- JavaScript 파일
- CSS 파일
- XML 및 JSON 응답
- gzip을 피해야 할 것:
- 이미지
- PDF 파일
4. HTML 문서의 상단에 CSS, 하단에 JavaScript 배치
스타일시트를 문서 하단에 배치하면 많은 브라우저에서 점진적 렌더링이 금지됩니다.
CSS 및 JavaScript 배치 최적화. HTML 문서의 상단에 스타일시트를 배치하면 브라우저가 이를 빠르게 로드하고 페이지를 점진적으로 렌더링할 수 있습니다. 이는 사용자에게 더 빠른 시각적 피드백을 제공합니다. 반대로, JavaScript 파일을 문서 하단에 배치하면 다른 구성 요소의 다운로드를 차단하지 않습니다. 이 접근 방식은 빠른 시각적 렌더링과 효율적인 리소스 로딩의 균형을 맞춥니다. 가능하면 페이지 로드 이벤트 후에 비필수 스크립트를 로드하여 인지된 성능을 더욱 향상시키십시오.
- CSS 배치:
- <head> 섹션에 배치
- @import가 아닌 <link> 태그 사용
- JavaScript 배치:
- </body> 태그 전에 배치
- 비필수 스크립트는 페이지 로드 후 로드
5. JavaScript 및 CSS 파일 최소화 및 결합
평균적으로, JSMin은 JavaScript 파일 크기를 21% 줄였고, Dojo Compressor는 25% 감소를 달성했습니다.
파일 크기 줄이기. 주석, 공백 및 불필요한 문자를 제거하여 JavaScript 및 CSS를 최소화하면 파일 크기를 크게 줄일 수 있습니다. JavaScript용 JSMin 및 CSS 최소화 도구와 같은 도구를 사용하여 이 과정을 자동화할 수 있습니다. 또한 여러 JavaScript 또는 CSS 파일을 하나의 파일로 결합하면 HTTP 요청 수를 줄일 수 있습니다. 초기 다운로드 크기가 약간 증가할 수 있지만, 캐싱 효율성을 개선하고 이후 페이지 뷰에서 오버헤드를 줄입니다. 더 큰 사이트의 경우, 최소화 및 결합을 자동으로 처리하는 빌드 프로세스를 구현하십시오.
- 최소화 기술:
- 주석 및 공백 제거
- 변수 및 함수 이름 단축
- 더 짧은 구문 대안 사용
- 결합 전략:
- 페이지 또는 기능별로 파일 그룹화
- 서버 측 포함 또는 빌드 도구 사용
6. 콘텐츠 전송 네트워크(CDN)를 사용하여 지연 시간 감소
구성 요소 웹 서버가 사용자와 더 가까이 있으면 많은 HTTP 요청의 응답 시간이 개선됩니다.
정적 콘텐츠에 CDN 활용. 콘텐츠 전송 네트워크는 정적 콘텐츠를 여러 지리적으로 분산된 서버에 배포합니다. 이는 사용자의 물리적 위치에 더 가까운 서버에서 콘텐츠를 제공하여 지연 시간을 줄입니다. CDN은 전통적으로 대기업에서 사용되었지만, 이제는 소규모 사이트를 위한 저렴한 옵션도 많이 있습니다. CDN은 지리적으로 다양한 사용자 기반을 가진 사이트에 특히 효과적입니다. 응답 시간을 개선할 뿐만 아니라 트래픽 급증을 흡수하고 기본 웹 서버의 부하를 줄이는 데도 도움이 됩니다.
- CDN 사용의 이점:
- 지리적으로 다양한 사용자에 대한 지연 시간 감소
- 트래픽 급증 처리 능력 향상
- 원본 서버의 부하 감소
- CDN을 고려할 콘텐츠:
- 이미지
- JavaScript 파일
- CSS 파일
- 대용량 다운로드 파일
7. Ajax 요청 최적화로 Web 2.0 애플리케이션 성능 향상
Ajax를 사용한다고 해서 사용자가 "비동기 JavaScript 및 XML" 응답을 기다리며 손가락을 꼼지락거리지 않는다는 보장은 없습니다.
Ajax 응답 캐시 가능하게 만들기. Ajax는 Web 2.0 애플리케이션에서 사용자 경험을 개선할 수 있지만, 본질적으로 빠르지는 않습니다. 적절한 헤더를 사용하여 Ajax 응답을 캐시 가능하게 최적화하십시오. 데이터를 수정하지 않는 Ajax 호출에는 GET 요청을 사용하여 브라우저가 응답을 캐시할 수 있도록 하십시오. JSON과 같은 효율적인 데이터 형식을 사용하여 Ajax 응답 크기를 최소화하십시오. 예측 가능한 사용자 작업에 대해서는 Ajax를 사용하여 데이터를 미리 가져와 인지된 성능을 개선하십시오. 긴 Ajax 요청 동안 사용자에게 피드백을 제공하여 반응성을 유지하십시오.
- Ajax 최적화 기술:
- 캐시 가능한 요청에 GET 사용
- 응답 크기 최소화(JSON 사용)
- 예측 가능한 데이터 미리 가져오기
- 긴 요청에 대한 사용자 피드백 제공
8. ETag를 적절히 구성하여 캐싱 효율성 향상
동일한 구성 요소에 대해 Apache와 IIS에서 생성된 ETag는 서버마다 일치하지 않습니다.
ETag 최적화 또는 제거. 엔터티 태그(ETag)는 캐시된 구성 요소를 검증하는 데 사용되지만, Apache와 IIS의 기본 구현은 다중 서버 환경에서 캐싱을 방해할 수 있습니다. 기본 ETag는 서버별 정보를 포함하므로 불필요한 재검증을 초래합니다. 다중 서버 설정의 경우, ETag에서 이 정보를 제외하도록 구성하거나 이를 완전히 제거하고 대신 Last-Modified 헤더를 사용하십시오. 적절히 구성된 ETag는 캐싱 효율성을 향상시킬 수 있지만, 잘못 구성된 ETag는 성능을 저하시킬 수 있습니다.
- ETag 처리 옵션:
- ETag 완전히 제거
- 서버별 정보 제외하도록 구성
- 자주 변경되는 리소스에만 사용
9. 리디렉션을 피하여 라운드 트립 최소화
리디렉션은 많은 문제를 해결하는 쉬운 방법이지만, 페이지 로딩 속도를 늦추지 않는 대체 솔루션을 사용하는 것이 좋습니다.
불필요한 리디렉션 제거. 각 리디렉션은 추가 HTTP 요청-응답 사이클을 생성하여 페이지 로드에 지연을 추가합니다. 웹 사이트 연결이나 아웃바운드 링크 추적과 같은 리디렉션의 일반적인 사용은 더 효율적인 대안으로 대체할 수 있습니다. 예를 들어, 웹 사이트의 다른 부분을 연결할 때 리디렉션 대신 서버 측 포함 또는 URL 재작성 사용을 고려하십시오. 아웃바운드 링크 추적을 위해 리디렉션 대신 비콘 이미지나 XMLHttpRequest 객체를 사용하십시오. 리디렉션이 불가피한 경우, 브라우저가 새 위치를 캐시할 수 있도록 영구(301) 리디렉션을 사용하십시오.
- 리디렉션 대안:
- 서버 측 포함
- URL 재작성
- Apache의 Alias 또는 mod_rewrite
- 추적을 위한 비콘 이미지
10. DNS 조회를 줄여 연결 지연 최소화
여러 서버가 웹 사이트를 호스팅하고 Apache 또는 IIS의 기본 ETag 구성을 사용하는 경우, 사용자는 더 느린 페이지를 받고, 서버 부하는 증가하며, 더 많은 대역폭을 소비하고, 프록시는 콘텐츠를 효율적으로 캐시하지 않습니다.
DNS 사용 최적화. DNS 조회는 특히 모바일 네트워크에서 HTTP 요청에 지연을 추가합니다. DNS 조회를 최소화하기 위해 웹 페이지에서 사용되는 고유 호스트 이름의 수를 줄이십시오. 그러나 병렬 다운로드의 필요성과 균형을 맞추어 2-4개의 호스트 이름을 사용하는 것이 좋습니다. Keep-Alive 연결을 사용하여 동일한 호스트 이름에 대한 반복 요청의 DNS 조회 빈도를 줄이십시오. 지리적으로 다양한 사용자에게 DNS 조회 시간을 줄이기 위해 콘텐츠 전송 네트워크(CDN)를 고려하십시오.
- DNS 영향 줄이기 전략:
- 페이지당 고유 호스트 이름을 2-4개로 제한
- Keep-Alive 연결 사용
- CDN 사용 고려
- 중요한 도메인에 대한 DNS 프리페칭 조사
마지막 업데이트 날짜:
리뷰
고성능 웹사이트는 다양한 평가를 받았지만, 전반적으로 긍정적인 반응을 얻고 있다. 많은 독자들은 이 책이 웹 개발자들에게 유익하고 필수적이라고 생각하며, 웹사이트 성능 향상에 대한 실용적인 조언을 칭찬한다. 일부 독자들은 이 책이 오래되었음에도 불구하고 여전히 유용하다고 강조하는 반면, 다른 이들은 시대에 뒤떨어졌다고 본다. 이 책은 최적화 기법의 이유를 설명하고 구체적인 예시를 제공하는 점에서 높은 평가를 받고 있다. 비평가들은 일부 정보가 이제는 온라인이나 YSlow와 같은 도구를 통해 널리 이용 가능하다고 지적한다. 전반적으로, 이 책은 웹 성능의 기본을 이해하는 데 있어 가치 있는 자원으로 여겨진다.