01. HTTP 요청 최소화 HTTP 요청 감소
이미지, CSS, 스크립트, 플래시 등은 HTTP 요청 수를 늘리며 이러한 요소 수를 줄이면 응답 시간이 단축될 수 있습니다. 가능하다면 여러 JS와 CSS를 하나의 파일에 작성하십시오. 이미지를 페이지에 직접 작성하고 CSS Sprite를 사용하여 작은 이미지를 조합한 다음 배경을 사용하여 위치를 찾아야 합니다. "이미지 맵"을 사용하십시오(동일한 이미지에 서로 다른 URL을 배치하면 이 방법을 사용하면 이미지 요청 수를 줄일 수 있습니다. 테스트 후 이미지 맵을 얻는 시간은 각 개별 이미지를 얻는 시간보다 56% 빠릅니다. 이미지 맵 두 가지 방법이 있습니다. 하나는 "서버 측 이미지 맵"이고 다른 하나는 "클라이언트 측 이미지 맵"입니다. 서버 측 구현은 사용자가 클릭한 XY 좌표를 서버에 전달한 다음 서버에서- 측면은 해당 작업을 매핑합니다. 이미지 맵 방법은 프로그래밍 유지 관리를 훨씬 더 어렵게 만듭니다.
02. CDN 기술을 이용한 콘텐츠 전송 네트워크(Content Delivery Network) 이용
"콘텐츠 전달 네트워크". 그 목적은 기존 인터넷에 새로운 네트워크 아키텍처 계층을 추가하여 사용자에게 가장 가까운 네트워크 "에지"에 웹 사이트의 콘텐츠를 게시하는 것입니다.
CDN의 특징:
1. 로컬 캐시 가속 – 기업 사이트(특히 많은 수의 사진과 정적 페이지가 포함된 사이트)의 액세스 속도를 향상시키고, 위와 같은 사이트의 안정성을 크게 향상시킵니다.
2. 미러링 서비스 – 서로 다른 사업자 간의 상호 연결 병목 현상의 영향을 제거하고, 사업자 간 네트워크 가속화를 실현하며, 서로 다른 네트워크의 사용자가 우수한 액세스 품질을 받을 수 있도록 보장합니다.
3. 원격 가속 – 원격 액세스 사용자는 DNS 로드 밸런싱 기술을 기반으로 캐시 서버를 지능적이고 자동으로 선택하고 가장 빠른 캐시 서버를 선택하여 원격 액세스 속도를 높입니다.
4. 대역폭 최적화 – 서버에 대한 원격 미러 캐시 서버를 자동으로 생성하고 원격 사용자가 캐시 서버에 액세스하면 캐시 서버에서 데이터를 읽어 원격 액세스 대역폭을 줄이고 네트워크 트래픽을 공유하며 원본 사이트 웹 서버의 부하를 줄입니다. , 등.
5. 클러스터 공격 방지 – 널리 분산된 CDN 노드와 노드 간의 지능형 중복 메커니즘은 해커 침입을 효과적으로 방지하고 웹 사이트에 대한 다양한 DDOS 공격의 영향을 줄이는 동시에 우수한 서비스 품질을 보장할 수 있습니다.
03. Expires 또는 Cache-Control 헤더를 추가하여 "헤더 파일 만료" 또는 "정적 캐시" 설정
브라우저는 캐싱을 사용하여 HTTP 요청 수를 줄이고 페이지 로딩 시간을 단축합니다. 페이지 헤더에 긴 만료 시간이 추가되면 브라우저는 항상 페이지의 요소를 캐시합니다. 그러나 페이지의 내용이 변경되면 이름을 변경해야 합니다. 그렇지 않으면 클라이언트가 적극적으로 새로 고쳐지지 않습니다.
(1) 개념
캐시 제어는 HTTP 캐시를 제어하는 데 사용됩니다(HTTP/1.0에서는 부분적으로 구현되지 않을 수 있으며 Pragma: no-cache만 구현됨).
형식: 캐시 제어: 캐시 지시문
캐시 지시어는 다음과 같을 수 있습니다:
다음을 요청할 때 사용됩니다.
"캐시 없음" |
"무점포" |
| "max-age" "=" 델타-초
| "최대-부실" [ "=" 델타-초 ]
| "최소 새로 고침" "=" 델타-초
"변형 없음" |
"캐시된 경우에만" |
"캐시 확장" |
응답에 사용됩니다:
"공개" |
| "private" [ "=" <"> 필드 이름 <"> ]
| "no-cache" [ "=" <"> 필드 이름 <"> ]
"무점포" |
"변형 없음" |
| "재검증해야 함"
"프록시 재검증" |
| "max-age" "=" 델타-초
"s-maxage" "=" 델타-초
"캐시 확장" |
부분 설명:
캐시 가능 여부에 따라 구분
공개는 모든 캐시에서 응답을 캐시할 수 있음을 나타냅니다.
개인은 단일 사용자에 대한 응답 메시지의 전부 또는 일부를 공유 캐시에서 처리할 수 없음을 나타냅니다. 이를 통해 서버는 다른 사용자의 요청에 유효하지 않은 사용자의 부분 응답만 설명할 수 있습니다.
no-cache는 요청 또는 응답 메시지를 캐시할 수 없음을 나타냅니다(HTTP/1.0은 Pragma의 no-cache로 대체됨).
캐시할 수 있는 항목을 기준으로
no-store는 중요한 정보가 의도치 않게 공개되는 것을 방지하기 위해 사용됩니다. 요청 메시지에 포함하여 보내면 요청 메시지와 응답 메시지 모두 캐싱을 사용하게 됩니다.
캐시 시간 초과 기준
max-age는 클라이언트가 지정된 시간(초)보다 크지 않은 수명으로 응답을 받을 수 있음을 나타냅니다.
min-fresh는 클라이언트가 현재 시간에 지정된 시간을 더한 것보다 짧은 응답 시간으로 응답을 받을 수 있음을 나타냅니다.
max-stale은 클라이언트가 제한 시간 이후에 응답 메시지를 수신할 수 있음을 나타냅니다. max-stale 메시지 값이 지정되면 클라이언트는 다음을 수행할 수 있습니다.
지정된 제한 시간 내에 응답 메시지를 받습니다.
Expires는 존재 시간을 나타내며, 이 시간 이전에는 클라이언트가 확인(요청 전송)할 수 없도록 하며 이는 max-age와 동일합니다.
효과. 그러나 동시에 존재하는 경우 Cache-Control의 max-age에 의해 재정의됩니다.
형식: 만료 = "만료" ":" HTTP-날짜
예: 만료: 1994년 12월 1일 목요일 16:00:00 GMT(GMT 형식이어야 함)
(2) 신청
HTTP META를 통해 만료 및 캐시 제어를 설정합니다.
<meta http-equiv=”캐시 제어” content=”max-age=7200″ />
<meta http-equiv=”만료” content=”2009년 7월 20일 월요일 23:00:00 GMT” />
위의 설정은 예시일 뿐이며 실제로는 어느 것이든 사용할 수 있습니다. 이렇게 작성하면 웹페이지에만 유효하며 웹페이지의 사진이나 기타 요청에는 사용되지 않으며 캐싱도 수행되지 않습니다. 게다가 클라이언트의 요청도 많아졌습니다. Last-modified 상태만 확인하고 있지만 요청이 늘어나면 탐색 속도에도 영향을 미칠 것입니다.
파일에 캐시를 추가하려면 다음과 같이 작성된 Apache의 mod_expire 모듈( http://httpd.apache.org/docs/2.2/mod/mod_expires.html )을 사용할 수 있습니다.
<IfModule mod_expires.c>
만료활성 날짜
ExpiresDefault "액세스 + 1일"
</If모듈>
ExpiresActive가 On으로 설정되어 있는 것으로 기억합니다. 처음에는 On으로 설정하지 않았습니다. YSlow가 아무리 캐싱 메커니즘을 찾을 수 없는 것 같습니다. 이런 식으로 추가하면 기본적으로 포함됩니다. 개별 MIME 유형을 대상으로 지정하려면 다음을 수행할 수 있습니다.
ExpiresByType image/gif “액세스 + 5시간 3분”
또한 브라우저에서 새로 고침을 클릭하면 클라이언트에서 보낸 요청은 모두 max-age=0으로, 이는 유효성 검사 작업을 의미하며 서버에 캐시를 확인한 후 캐시를 업데이트합니다. 304 Not Modified를 얻습니다. 이는 변경 사항이 없음을 의미합니다.
04. Gzip 구성 요소 Gzip 압축
Gzip 형식은 매우 일반적인 압축 기술입니다. 거의 모든 브라우저에는 Gzip 형식의 압축을 풀 수 있는 기능이 있으며, 압축할 수 있는 압축률은 일반 압축률이 85%로 매우 높습니다. 압축 여부는 여기에서 테스트할 수 있습니다.
05. 스타일시트를 상단에 배치 CSS를 상단에 배치
LINK 태그를 사용하여 문서의 HEAD에 스타일 시트를 배치하면 뷰어가 웹사이트의 전체 스타일을 최대한 빨리 볼 수 있습니다.
HTML 페이지는 단계별로 렌더링됩니다. 사용자가 페이지를 열 때 사용자 경험, 즉 웹 페이지를 여는 속도를 고려해야 합니다. 페이지를 표시하기 위한 첫 번째 요구 사항은 HTML이고 HTML은 DIV가 하나씩 구성되어 있으며 CSS는 모든 것의 기본입니다.
06. 하단에 스크립트 넣기 JS를 하단에 넣기
웹사이트가 렌더링된 후 기능을 설정할 수 있습니다. 물론 이러한 JS는 로딩 프로세스 중에 콘텐츠 성능에 영향을 주어서는 안 됩니다.
페이지가 점진적으로 렌더링되므로 스크립트 아래의 콘텐츠가 차단됩니다. 스크립트 로드가 완료될 때까지 페이지 렌더링이 계속되지 않습니다. 올바른 배치
(1) 최악의 시나리오: 스크립트를 맨 위에 놓습니다. 후속 콘텐츠 렌더링 및 후속 구성 요소 다운로드를 차단합니다.
(2) 최선의 시나리오: 스크립트를 맨 아래에 넣으세요. 페이지 렌더링을 방지하지 않습니다.
07. CSS 표현식을 피하세요 CSS 표현식을 피하세요
CSS 표현식은 형편없습니다. IE에서만 지원되는 이 기능은 실행 시 매우 많은 양의 계산이 필요합니다. 마우스를 움직일 때마다 다시 계산해야 하는데, 브라우저 호환성을 위해 사용해야 하는 경우도 있습니다.
08. JavaScript와 CSS를 외부로 만들기
캐싱에 대해서는 앞서 좀 더 일반적인 JS 및 CSS의 경우 Google의 Jquery 파일 연결과 같은 외부 링크를 사용할 수 있습니다.
09. DNS 조회 줄이기 DNS 조회 줄이기
외부에서 웹사이트 호출 리소스를 줄입니다.
인터넷은 IP 주소로 서버를 찾습니다. DNS에도 오버헤드가 있습니다. 일반적인 상황에서 브라우저가 주어진 호스트 IP 주소를 찾는 데 걸리는 시간은 20~120ms입니다. DNS 조회 프로세스에 소요되는 시간을 줄이려면 다음 기술 중 일부를 채택해야 합니다.
(1) DNS 캐시
성능 향상을 위해 DNS 조회를 캐시할 수 있습니다. 사용자 컴퓨터에서 호스트 이름이 확인된 후 해당 DNS 정보가 운영 체제의 DNS 캐시에 저장되므로 이후 사용에 필요한 시간이 줄어듭니다. 일부 다른 브라우저에도 해당 DNS 캐싱 기능이 있습니다. 그러나 캐시된 DNS의 수는 제한되어 있습니다. 일반적으로 운영 체제는 TTL 값을 고려하고 브라우저는 이 값을 무시하고 자체 시간을 설정합니다.
(2) TTL
DNS 캐싱으로 인해 일부 시스템이 소모되며 서버의 IP 주소가 반드시 변경되지는 않습니다. 서버는 레코드가 캐시될 수 있는 기간을 나타낼 수 있으며, 조회를 통해 반환된 DNS 레코드에는 클라이언트가 레코드를 캐시할 수 있는 기간을 나타내는 TTL(Time-To-Live) 값이 포함되어 있습니다. 일반적으로 1일로 설정할 수 있습니다.
10. JavaScript 및 CSS 축소 JS 및 CSS 크기 줄이기
JS와 CSS를 작성하는 데는 최소한의 코드를 사용하여 동일한 기능을 달성하고, 공백을 줄이고, 논리를 강화하고, 약어를 사용하는 등의 기술이 있습니다. 물론 이를 달성하는 데 도움이 될 수 있는 도구가 많이 있습니다.
11. 리디렉션을 피하세요
링크를 다시 작성하면 "http://xxx.com"과 "http://xxx.com/" 사이에 최종 "/" 차이가 하나만 있지만 결과는 다릅니다. 전자의 Redirect를 후자로 변환한 후 점프해야 합니다. 이를 해결하려면 Apache에서 Alias나 mod_rewrite 또는 DirectorySlash를 사용할 수도 있습니다.
또한 리디렉션 사용에는 다양한 웹사이트 연결, 웹사이트 방문 추적, URL 미화 등이 포함됩니다.
12. 중복 스크립트 제거 중복 스크립트 제거
브라우저는 반복적으로 호출되는 코드를 인식하지 못하고 무시하고 다시 계산하게 되는데, 이는 물론 엄청난 낭비이다.
13. ETag 구성 ETag 구성
무슨 일이 일어났는지 모르겠지만 htaccess에서 삭제했습니다.
14. Ajax를 캐시 가능하게 만들기 Ajax
Ajax는 브라우저가 새 데이터를 받기 전에 실시간으로 응답하므로 이전 데이터가 캐시되므로 효율성이 향상됩니다.
15. 버퍼 조기 플러시 버퍼를 최대한 빨리 해제합니다.
사용자가 페이지를 요청하면 서버는 HTML을 조합하고 헤드와 본문 사이에 작성한 다음 버퍼를 해제하는 데 200~500밀리초를 소비해야 합니다. 이렇게 하면 파일 헤더를 먼저 보낸 다음 나중에 보낼 수 있습니다. 효율성을 높이기 위해 파일 내용을 보낼 수 있습니다.
16. AJAX 요청에는 GET을 사용하세요. AJAX 요청에는 GET을 사용하세요.
Get 메서드는 서버와 한 번만 상호 작용(데이터 전송)하는 반면 Post는 두 번의 상호 작용(헤더 전송과 데이터 전송)이 필요합니다.
17. 로드 후 구성 요소 지연 로드 구성 요소
먼저 페이지 초기화에 필요한 구성요소를 로드한 다음, 구체적인 구현 방법은 "숨겨진 IFRAME" 또는 자바스크립트일 수 있습니다. "YUI 이미지 로더"가 좋은 예입니다.
18. 구성 요소를 사전 로드합니다. 구성 요소를 사전 로드합니다.
나중에 사용할 수 있는 항목을 로드하는 것은 지연 로드와 충돌하지 않습니다. 그 목적은 Google 홈페이지의 CSS 스프라이트 애플리케이션을 참조하세요.
19. DOM 요소 수 줄이기 DOM 요소 수 줄이기
페이지 구조가 복잡하면 다운로드 및 응답 시간이 길어지고 결과적으로 페이지 렌더링 속도가 느려집니다. 태그를 보다 합리적이고 효율적으로 사용하여 페이지를 구성하는 것은 좋은 프런트 엔드의 전제 조건입니다.
20. 도메인 간 구성 요소 분할
주요 목적은 페이지 구성 요소의 병렬 다운로드 기능을 향상시키는 것이지만, 도메인 이름을 2~4개 이상 사용하면 위에서 언급한 DNS 검색이 낭비되지 않도록 주의하세요. IE는 동일한 도메인에 대해 동시에 두 개의 요청만 가질 수 있습니다. 구현에서는 CDN 네트워크 또는 기타 분산 컴퓨팅 네트워크를 활용할 수 있습니다.
21. iframe 수 최소화 IFrame 수 줄이기
IFrame은 SEO에 있어 금기시되는 사항이므로 IFrame을 더욱 효과적으로 사용해야 합니다.
IFrame 장점: 광고, 보안 샌드박스, 병렬 다운로드 스크립트 등 느린 타사 콘텐츠를 다운로드하는 데 적합합니다.
IFrame의 단점: 비어 있더라도 많은 리소스를 소비하고 의미론적이지 않은 페이지의 온로드를 방지합니다.
22. 404 페이지에 404가 표시되지 않습니다.
404 페이지는 사이트 자체에 표시됩니다(검색 결과가 아님). 의미 없는 404 페이지는 사용자 경험에 영향을 미치고 서버 리소스를 소비합니다.
23. 쿠키 크기 줄이기 쿠키 줄이기
쿠키는 파일 헤더를 통해 서버와 브라우저 간에 교환되므로 쿠키 크기를 최대한 줄이고 합리적인 만료 시간을 설정하여 효율성을 크게 향상시킬 수 있습니다.
24. 구성 요소에 쿠키가 없는 도메인 사용 구성 요소에 쿠키가 없는 도메인 이름을 사용하세요.
정적 구성 요소에 대한 쿠키를 읽는 것은 낭비입니다. 쿠키가 없는 다른 도메인 이름을 사용하여 정적 구성 요소를 저장하거나 쿠키에 www가 포함된 도메인 이름만 저장할 수 있는 좋은 방법입니다.
25. DOM 액세스 최소화 DOM 액세스 수 줄이기
JS는 DOM에 액세스하는 속도가 매우 느리므로 JS를 사용하여 페이지 레이아웃을 설정하지 마십시오.
26. 스마트 이벤트 핸들러 개발 유연한 이벤트 핸들러 개발
DOM 트리의 요소가 이벤트 핸들러에 너무 많이 추가되면 응답 효율성이 확실히 낮아집니다. YUI 이벤트 도구에는 DOM 이벤트 핸들러를 유연하게 설정하는 데 도움이 되는 onAvailable 메서드가 있습니다.
27. @import 대신 <link>를 선택하세요. @import 대신 <link>를 사용하세요.
IE에서 @import를 사용하는 것은 페이지 하단의 <link>를 사용하는 것과 같습니다.
28. 필터 사용을 피하세요. 필터 사용을 피하세요
Alpha 투명도가 필요한 경우 AlphaImageLoader를 사용하지 마십시오. 이는 비효율적이며 IE6 이하에만 적용 가능합니다. 꼭 사용해야 한다면 IE7+ 사용자에게 영향을 주지 않도록 _filter를 추가하세요.
29. 이미지 최적화 이미지 최적화
GIF를 PNG8로 변환하는 것은 크기를 줄이는 좋은 방법이며, 최적화 결과를 얻기 위해 JPG 및 PNG 이미지를 처리하는 방법에는 여러 가지가 있습니다.
30. CSS 스프라이트 최적화 CSS 스프라이트 최적화
CSS Sprites에서는 이미지를 세로로 최대한 촘촘하게 배열하고, 비슷한 색상의 이미지를 최대한 함께 배열하면 이미지 자체의 크기가 줄어들고 페이지 이미지 표시 속도가 빨라집니다.
31. HTML에서 이미지 크기를 조정하지 마세요. HTML에서 이미지 크기를 조정하지 마세요.
원하는 만큼 큰 그림을 사용하세요. 게으르지 마세요.
32. favicon.ico를 작고 캐시 가능하게 만듭니다. favicon.ico의 크기를 줄이고 캐시합니다.
해당 사이트의 브라우저 ICO는 자주 변경되어서는 안 되므로 장기간 캐시하고, 1K 이하로 관리하는 것이 가장 좋습니다.
33. 구성 요소를 25K 미만으로 유지
iPhone은 25K 이상의 구성 요소를 캐시할 수 없으며 이는 압축되기 전입니다.
34. 구성 요소를 멀티파트 문서로 압축 구성 요소를 멀티파트 문서로 압축
이메일에 첨부 파일을 추가하는 것과 마찬가지로 HTTP 요청으로 충분하지만 이 기술은 iPhone이 지원하지 않는 프록시에서 지원되어야 합니다.
인라인 이미지:
실제 페이지에 이미지 데이터를 삽입하려면 "data: URL 구성표"를 사용하세요. 우리가 일반적으로 보는 모드는 http, ftp, mailto 및 기타 모드입니다. 실제로 data:URL 모드는 1995년에 제안되었습니다. 이는 작은 데이터 조각이 링크 URL에 직접 통합된다는 의미입니다. 패턴은 다음과 같습니다: data: [<mediatype>][;base64],<data>
첫 번째 매개변수는 image/gif와 같은 파일 형식을 나타냅니다.
불행하게도 IE는 현재 이 모드를 지원하지 않습니다. 또한 데이터 크기도 제한됩니다.
성명서: 해당 콘텐츠는 인터넷에서 가져온 것이며 Yahoo의 34개 기사를 기반으로 합니다.