웹사이트 프런트엔드 및 백엔드 성능 최적화(순 발췌)

1. http 요청 수를 줄입니다.
모든 스크립트를 하나의 스크립트 파일에 배치하거나 모든 스타일 시트를 하나의 스타일 시트 파일에 배치하여 파일을 병합하여 HTTP 요청 수를 줄입니다. .
CSS Sprite는 이미지 요청을 줄이는 데 선호되는 솔루션입니다. 모든 배경 이미지를 하나의 이미지로 결합하고 CSS background-image 및 background-position 속성을 사용하여 적절한 이미지 영역을 제어합니다.
인라인 이미지는 data: URL 구성표를 사용하여 이미지 데이터를 페이지에 삽입하지만 이렇게 하면 HTML 문서의 크기가 늘어납니다.
2. 콘텐츠 배포 네트워크 사용
콘텐츠 배포 네트워크(CDN)는 여러 지역에 분산되어 있는 서버의 집합체로, 사용자에게 보다 효과적으로 정보를 보낼 수 있습니다. 도메인 거리 측정을 기반으로 사용자를 위해 데이터를 보낼 서버를 선택합니다. 예를 들어 사용자에게 도달하는 홉이 가장 적거나 응답 속도가 가장 빠른 서버가 선택됩니다.
3. 헤더에 만료 날짜 또는 캐시 제어를 추가합니다
정적 구성 요소의 경우: 헤더의 캐시 기간을 "만료되지" 않도록 먼 미래로 설정합니다.
동적 구성요소의 경우: 적절한 Cache-Control 헤더를 사용하여 브라우저가 특정 요청을 수행하도록 돕습니다.
4. Gzip 압축 구성 요소
HTTP 요청 헤더의 Accept-Encoding에 지정된 압축 형식:
ν Accept-Encoding: gzip, deflate
ν Content- 인코딩 : gzip
5. 스타일 시트를 앞쪽에 배치
스타일 시트를 문서의 헤드로 이동하면 페이지 로딩 속도가 빨라집니다. 스타일 시트를 헤드에 배치하면 페이지가 점진적으로 렌더링될 수 있기 때문입니다.
6. 스크립트를 맨 마지막에 넣으세요
스크립트로 인해 동시 다운로드가 차단될 수 있습니다. HTTP/1.1 사양에서는 브라우저가 도메인 이름당 두 번의 동시 다운로드만 수행할 것을 권장합니다.
페이지 하단에도 배치할 수 있는 지연 로딩 스크립트를 설정하세요.
7. CSS 표현식을 사용하지 마세요
CSS 표현식은 강력하고 위험한 동적입니다. CSS 속성 메서드 설정.

CSS 표현식의 문제점은 대부분의 사람들이 예상하는 것보다 더 자주 실행된다는 것입니다. 표현식은 페이지가 표시되고 크기가 조정될 때뿐만 아니라 페이지가 스크롤될 때나 사용자가 페이지에서 마우스를 움직일 때에도 실행됩니다. CSS 표현식에 카운터를 추가하면 CSS가 실행되는 시기와 방법을 추적할 수 있습니다. 페이지 주위에서 마우스를 움직이면 10,000번 이상의 실행이 쉽게 생성될 수 있습니다.
8. 외부 JavaScript 및 CSS 사용
실제 애플리케이션에서 외부 파일을 사용하면 브라우저가 JavaScript 및 CSS 파일을 캐시하므로 페이지 속도가 더 빨라지는 경우가 많습니다. 외부 파일에 있는 JavaScript 및 CSS가 브라우저에 의해 캐시되면 HTTP 요청 수를 늘릴 필요가 없으며 HTML 문서의 크기가 줄어듭니다.
9. DNS 쿼리 줄이기
DNS는 일반적으로 특정 도메인 이름의 IP 주소를 조회하는 데 20~120밀리초가 걸립니다. 브라우저는 DNS 조회가 완료될 때까지 대상 도메인 이름에서 아무것도 다운로드하지 않습니다.

10. JavaScript 및 CSS 축소

축소란 코드에서 불필요한 문자를 제거하여 파일 크기를 줄이고 로딩 속도를 높이는 것을 말합니다.

코드를 줄일 때는 모든 주석은 물론 불필요한 공백(공백, 새 줄, 탭)도 제거해야 합니다.

js 또는 CSS 파일의 크기를 줄이고 응답 성능을 향상시킵니다.

코드 난독화는 소스 코드에 사용할 수 있는 또 다른 최적화 솔루션입니다.

페이지에 포함된