웹사이트 성능 최적화 지침 정보

지난 며칠간 스티브 사우더스의 "고성능 웹사이트 구축 가이드"를 읽었습니다. 이 책은 다소 오래되었지만 이 얇은 책자에 제시된 웹사이트 성능 최적화 지침은 여전히 ​​매우 유용합니다. . 이러한 규칙에는 모두 한 가지 공통점이 있습니다. 즉, 매우 적은 작업으로 확실한 성능 향상을 달성할 수 있고 비용 효율성이 매우 높다는 것입니다. 더 이상 고민하지 말고 책에 있는 몇 가지 성능 최적화 규칙을 요약해 보겠습니다.

우선, 책에 적힌 성능의 황금률은 응답 시간의 10%~20%에 불과하다는 것입니다. 다운로드에 소요되는 시간 HTML 문서에서는 나머지 80~90%의 시간이 페이지의 모든 구성 요소를 다운로드하는 데 소요됩니다.
이것이 다음 공연규칙의 유래의 핵심이기도 합니다.

규칙 1: HTTP 요청을 줄입니다. 이 책에서 규칙의 순서는 중요도에 따라 순위가 매겨져 있습니다. HTTP 요청을 줄이는 것이 그 중요성을 보여주는 첫 번째 규칙입니다. 황금률에 따르면 구성 요소 수를 줄여 HTTP 요청을 줄이는 것이 성능을 최적화하는 가장 효과적인 방법입니다. 언급할 만한 몇 가지 기술이 있습니다:

CSS Sprites. 프런트엔드 사람들은 이미지를 큰 이미지로 통합하고 배경 위치를 사용하여 위치를 지정하는 데 익숙해야 합니다.

데이터:URL. 이미지를 인라인으로 변환하면 이미지 요청이 줄어듭니다. webpack의 이미지가 8kb 미만인 경우 base64 data:URL로 변환됩니다.

스크립트와 CSS를 병합합니다.

규칙 2: CDN을 사용하세요. 이 규칙은 말할 필요도 없이 콘텐츠를 최종 사용자에게 더 가까이 배포하여 요청 시간을 줄입니다.

규칙 3: Expires 헤더를 추가하세요. 캐싱을 잘 활용하고 오랫동안 변경되지 않은 콘텐츠 구성 요소에 대해 더 긴 유효 기간을 가진 Expires 헤더를 설정하세요.

규칙 4: 구성 요소를 압축합니다. gzip과 같은 콘텐츠 인코딩을 사용하여 문서나 구성 요소를 압축하면 일반적으로 해당 데이터 볼륨을 약 70%까지 줄일 수 있습니다.

규칙 5: 스타일 시트를 맨 위에 배치하세요. 프로젝트가 열리면 페이지가 점차적으로 표시되며 사용자는 페이지가 더 빨라진 것을 느낄 수 있으며 기다리는 동안 사용자에게 좋은 피드백을 제공합니다. CSS를 하단에 배치하면 흰색 화면이 나타날 수 있습니다.

규칙 6: 스크립트를 맨 아래에 배치하세요. 페이지에서 스크립트를 다운로드하면 브라우저가 다시 그려지거나 리플로우되는 것을 방지하기 위해 다른 콘텐츠가 다운로드 및 렌더링되지 않습니다. 따라서 페이지 하단에 스크립트를 배치해도 페이지 콘텐츠 렌더링이 차단되지 않으며 페이지의 일부 시각적 구성 요소를 차단하지 않고 최대한 빨리 다운로드할 수 있습니다.

규칙 7: CSS 표현식을 사용하지 마세요. CSS 표현식은 자주 평가되므로 성능이 저하됩니다.

규칙 8: 외부 JavaScript 및 CSS를 사용합니다. 순전히 인라인 처리는 HTTP 요청 감소 규칙 1을 충족하므로 속도가 더 빠릅니다. 그러나 이 문제에서는 캐싱을 통한 성능 최적화를 고려해야 하므로 성능이 향상됩니다.

규칙 9: DNS 조회를 줄입니다. 영구 연결과 같은 DNS 캐싱을 잘 활용하세요.

규칙 10: JavaScript를 간소화하세요. 일반적인 .min.js의 경우처럼 불필요한 문자 공백을 제거합니다.

규칙 11: 리디렉션을 피하세요. 3xx 응답 상태 코드는 리디렉션된 응답을 나타냅니다. URL 끝에 슬래시가 없어서 발생하는 리디렉션에는 특별한 주의가 필요합니다. 이 실수로 인해 성능이 저하되지 않도록 하십시오.

규칙 12: 중복된 스크립트를 삭제하세요.

규칙 13: ETag를 구성합니다. 이에 관해 말하자면 조건부 요청 If-Modified-Since와 If-None-Match가 모두 캐시 재검증에 사용된다는 점을 말씀드리고 싶습니다. ETag의 문제점은 서버가 ETag를 구성할 때 두 파일이 정확히 동일하더라도 서로 다른 서버에 있으면 여전히 다른 ETag가 존재하므로 HTTP 다운로드 요청 수가 증가하여 성능이 크게 저하된다는 것입니다. 백그라운드에 서버 클러스터가 있는 웹사이트.

규칙 14: Ajax를 캐시 가능하게 만듭니다. Ajax는 비동기식이지만 응답을 오랫동안 기다릴 수 없습니다. 최적화 지침은 위의 성능 지침을 참조하세요. 그 중에서도 캐시를 잘 활용하는 것이 우리의 초점입니다.

책 말미에는 이 규칙을 이용해 미국 상위 10개 웹사이트를 분석했는데, 이 규칙을 효과적으로 활용하면 성능이 향상될 여지가 많다는 사실도 살펴봤습니다. 인턴십 중에 프로젝트를 진행하면서 최적화할 수 있는 곳이 많다는 것을 알게 되었습니다. 제품 사용자가 더 나은 경험을 할 수 있도록 향후 개발 중에 이러한 지침을 염두에 두어야 합니다.