야후 웹 프런트 엔드 웹 사이트 최적화 -34 육군 규정

 

YSlow의 도구

 

1.Minimize HTTP 요청은  HTTP 요청을 감소

사진, 응답 시간을 줄일 수 있습니다 이러한 요소의 수를 줄이기 위해 HTTP 요청의 수를 증가 CSS, 스크립트, 플래시 등. , 사진이 좋은 방법이 아닙니다 페이지를 직접 작성 가능 여러 JS, 파일에 CSS는, 그것이 CSS에 기록되어야하며, 사용 CSS 스프라이트는 작은지도와 분할 후 배경을 찾습니다 것이다.


콘텐츠 전송 네트워크 구석 구석  CDN에 기술을 사용하여

CDN은 참으로 좋은 일이, 일반적으로이 서비스도 8 서버 제공 업체입니다, 충전해야합니다, 나는 국내 공간을 구입 이것을 가지고하는 데 사용하지만 지금 사용 사라 있었는지 몰랐다. . .


3.Add 만료 또는 캐시 ControlHeader는  헤더 파일 또는 정적 캐시 만료 설정

브라우저는 페이지 헤드 플러스 긴 유효 시간, 브라우저가 페이지 요소를 캐시 경우, 페이지로드 시간을 단축하기 위해 HTTP 요청의 수를 줄이기 위해 캐시를 사용합니다. 그래서, 페이지 변경 이름을 변경합니다 다음 무엇을, 그렇지 않으면 클라이언트가 새로 주도권을 쥐고하지 않을 경우에, htaccess로 파일을 수정하여 ~이 달성 할 수있는 자신의 평가를 볼 수 있습니다.


4.Gzip 구성 요소에서 Gzip 압축

Gzip으로 형식은 거의 모든 브라우저가 Gzip으로 형식을 추출 할 수있는 능력을 가지고 있고, 그것은 85 %의 일반적인 압축 비율의 매우 큰 비율을 압축 할 수 있습니다, 매우 일반적인 압축 기술입니다. 없음 압축 압축, 당신은 테스트를하러 온 수 있습니다.


상단에 5.Put 스타일 시트  는 CSS의 상단을 넣어

시청자가 최대한 빨리 전체 스타일의 웹 사이트를 볼 수 있습니다 보자.


하단 6.Put 스크립트  바닥 JS를 넣어

웹 존재는 물론, 기능 설정을 시작하기 전에, 다음은로드 프로세스를 표시하는 내용 JS 영향을주지 않습니다.

7.Avoid CSS 식  避免CSSExpressions

CSS 표현식은 끔찍, 작업이, 당신이 다시 계산해야 마우스를 매우 큰 이동하지만, 때로는 호환되는 브라우저가이 사용되어야 할 때 유일한 IE 지원을 실행하는 ||| IE6는 죽어 죽어! ~


8.Make JavaScript와 CSS 외부  CSS를 JS와 외측 체인

내 방문자가 체인 외부에서이 문서의 다른 사용을 검색 할 경우 캐싱 앞에서이 일에 대해 얘기,보다 일반적인 JS와 CSS의 일부는, 우리가 체인 외부의 양식을 사용할 수 있습니다, 예를 들어, 나는, 체인 JQuery와 파일 외부에서 구글에 온 그는 다운로드 할 필요가없는 경우 다음 그를 내 웹 사이트를 방문하여 다운로드 및이 사이트의 파일을 캐시되었습니다! ~


9.Reduce DNS 조회는  DNS 조회를 감소

외부 전화 자원에서 사이트를 줄일 수있는 것처럼, Google 웹 로그 분석 및 외국 체인 내 Picasa에서 사진은 고려됩니다 보인다.


10.Minify JavaScript 및 CSS  감소 된 JS와 CSS

JS 및 CSS 모든 물론, 등, 약어를 사용하여 논리를, 같은 기능을 달성 격차를 줄이고 향상시키기 위해 최소한의 코드로, 기술을 작성, 당신이 이것을 달성 할 수있는 많은 도구가 있습니다.


11. 피가 리디렉션  리디렉션을 피하기 위해

". : //www.today-s-ooxx 닷컴 HTTP"그리고 때 있지만, 링크를 다시 쓰기에 "http : 오늘-S는-ooxx COM / ... // www가"만 "/"만가는 마지막 중 하나입니다, 하지만 결과가 다른 서버는 후자에 전자를 리디렉션하고도 또는 별칭 해결 아파치 mod_rewrite는 나부터 DirectorySlash에서 사용할 수있는 관심으로 이동하는 시간을 걸릴 필요가있다.


12. 제거 중복 스크립트는  중복되는 스크립트를 제거

코드를 브라우저에 대한 호출을 반복 무시 인식하지 않지만, 물론 큰 낭비 인 것 다시 한 번 운영.


13. 구성 ETag를  配置ETag를

이 삭제에 모르는 편집자 주, 짧은에, 내가. htaccess로했다.


14. 만들기 아약스 캐시 가능은  Ajax를 캐시

Ajax는 브라우저의 새로운 데이터를 수신하기 전에, 기존의 데이터는 효율을 개선 너무 잘 수, 캐시, 실시간 반응이다.


15. 세척 버퍼 조기  최대한 빨리 출시 버퍼

사용자가 페이지를 요청하면, 서버는 파일이 머리로 전송 될 수 있도록, 버퍼를 해제, 기록 헤드와 몸체 사이에, HTML 분할 (200) 500 밀리 초를 소요하고 효율성을 개선하기 위해, 파일 내용을 보낼 수 있습니다.


AJAX 요청을 위해 16. GET  는 GET 방식 요청 AJAX에 대한

포스트 두 번 (머리를 전송하고 데이터를 전송)하는 동안, 한 번만 방법 및 서버 상호 작용 (전송 데이터)를 가져옵니다.


(17) 후 부하 구성 요소  지연로드 어셈블리

첫 번째 페이지가 구성 요소를 초기화해야합니다로드 한 다음 다른로드되어, YUIImage 로더는 좋은 예입니다.


18. 예압 컴포넌트  어셈블리 예압

아마 뭔가를 사용하고, 나중에 사전에로드 된 지연로드와 충돌하지 않는, 그것은 이후의 요청에 빠른 응답을 제공하는 Google 홈페이지에서 CSS 스프라이트 응용 프로그램을 참조하는 것을 목표로하고있다.


19. DOM 요소의 수를 줄일  요소의 DOM의 수를 줄일 수

복잡한 페이지 구조는, 페이지를 구성하는 것이 더 합리적이고 태그를보다 효율적으로 사용을 더 이상 다운로드 및 응답 시간을 의미 좋은 프론트 엔드를위한 전제 조건입니다.


20 분할 요소 도메인에서  도메인 간 분리 조립체

여러 소스의 페이지 구성 요소는 병렬 다운로드를 증가하지만, 너무 많이,보다 2-4 도메인이 위에서 언급 한 DNS 조회가 낭비하게됩니다 조심해야 할 수 있습니다.


(21) iframe을의 수는 최소화  숫자은 iframe을 감소

ifames를보다 효율적으로 사용하기위한 필요.
iframe을 장점 : 광고에 찬성, 보안 샌드 박스, 병렬 다운로드 스크립트에서 느린 다운로드 타사 컨텐츠
iframe이 단점 : 페이지 온로드, 비 의미를 방지 할 수보다 많은 자원을 소비 할 것입니다 심지어 빈


(22) 없음 404은  404 페이지에 표시되지 않습니다

(비 검색 결과)에있는 사이트 자체는 404 페이지 404 페이지의 의미가 사용자 경험에 영향을 미치는 및 서버 자원을 소모합니다 나타납니다.


23. 쿠키 크기 감소  减小쿠키

쿠키는 서버와 파일 헤더를 통해 브라우저간에 교환, 볼륨이 적당한 만료 시간을 설정, 쿠키로 감소, 그것은 효율적이 될 수 있습니다.


(24)를 사용하여 쿠키가없는 도메인 forComponents  쿠키없이 구성 요소 이름을 사용하여

쿠키는 폐기물의 정적 구성 요소를 읽어 정적 구성 요소-좋은 방법을 저장하는 쿠키없이 다른 도메인 이름을 사용하거나 쿠키의 WWW와 도메인 이름 만 저장할 수 있습니다.


(25) DOM 접근을 최소화  는 DOM에 방문의 수를 줄이기 위해

JS DOM 액세스가 매우 느립니다, JS와 페이지 레이아웃을 설정하지 않으려 고.


(26) 스마트 이벤트 처리기의 개발  유연한 이벤트 핸들러의 개발을

과도한 DOM 트리 요소는 다음 반응 효율이 ​​확실히 낮은 것, 이벤트 핸들러에 추가, YUI 이벤트 onAvailable 도구를 사용하면 DOM 이벤트 처리기를 설정하는 데 도움 수있는 유연한 방법을 가지고


27. @import를 통해 <링크>를 선택  <링크> 대신 @import를 사용하여

우리가 이전에 말했듯이, <링크> 상단에 위치한다, IE에서 그리고 <링크>를 페이지 하단에 @import 사용합니다.


(28) 피 필터는  필터의 사용을 피하기

당신이 알파 투명, AlphaImageLoader를 사용하지 않는해야하는 경우 비효율적이고 IE6에서만 버전입니다 아래 PNG8 사진과 함께 적용됩니다. 당신이 사용해야 플러스 _filter 경우 IE7 + 사용자에게 영향을주지 않도록.


29. 최적화 이미지  사진을 최적화

당신의 PNG8에 GIF 볼륨을 줄일 수있는 좋은 방법이 될 것입니다, 또한 최적의 결과를 달성하기 위해 당신의 JPG 및 PNG 이미지를 처리하는 방법에는 여러 가지가 있습니다.


30 최적화 CSS 스프라이트  최적화 된 CSS 스프라이트

CSS를 스프라이트 수직 우리는 이미지 자체 크기를 줄이고 페이지 화상 표시의 속도를 향상시키기 위해, 유사한 컬러 화상 행 함께 가능한 이미지 등 소형 가능한 멀리로 배열.


31. HTML의 이미지가 조절하지 않습니다  HTML에 이미지를 확대하지

사진이 많이 그것을 사용하는 방법, 1000X1000 이미지 = 너비 "100"높이 = "100"KB 자체의 수는 감소되지 후.


(32) 만들기 파비콘. 이코 작은 andCacheable  좁은 파비콘. 특별하다고 크기 및 캐시를

ICO 브라우저 사이트는 항상 다음, 변경 오랫동안 그것을 캐시, 덜 1K에서 최고의 제어는 안된다.


33 25K에서 구성 요소를 유지  25K에서 다음 구성 요소를 확인하기 위해

아이폰 개 이상의 25K 구성 요소를 캐시 할 수 있으며, 이는 여전히 전에 압축 할 수 있습니다.

 

멀티 파트 문서에 34 팩 구성 요소 의 여러 부분 문서로 구성 요소를 포장

HTTP 요청은 충분하다으로 메시지에 첨부 파일을 추가 할 수 있지만이 기술이 반드시 프록시 지원을해야처럼, 아이폰은 지원하지 않습니다.

 

추천

출처www.cnblogs.com/HHHAI/p/11334121.html