IT를 표현

JavaScript의 HTML 문서의 맨 아래에 포함

여러분의 스크립트에서 페이지의 내용의 일부를 삽입하는 document.write를 (또는 javascripts를 사용하여 페이지의 내용 중 동적 생성)이 없으면 BODY 태그의 끝 이전에 페이지 하단에 구문을 포함 스크립트를 이동합니다.
HTTP/1.1 사양은 그 브라우저는 호스트마다 병렬로 더 이상 둘을 제외 구성 요소를 다운로드하여 제안합니다. 가 여러 호스트에서 이미지를 제공하는 경우 병렬로 발생하는 두 개 이상의 다운로드를받을 수 있습니다. 스크립트가 다운로드되는 동안 그러나 브라우저도 다른 호스트에서 다른 다운로드를 시작하지 않습니다.
동적으로 스크립트 노드를 생성하고 페이지가 AJAX를 사용하여 로드된 후 원격 스크립트를 로드할 수있는 방법도 있습니다.

당신에게 JavaScript의를 Externalise

자바 스크립트 파일이 브라우저에 의해 캐시 때문에 외부 자바 스크립트 파일을 사용하면 페이지의 빠른 로딩을 초래할 것입니다. 인라인 자바 스크립트의 'HTML 문서에서이 HTML 문서를 요청 때마다 다운로드 하죠. 이것은 실제로 만들어진 HTTP 요청의 개수를 줄일 수 있지만 이후 HTML 문서의 크기를 증가시킵니다. 외부 자바 스크립트가 브라우저에 의해 캐시, HTML 문서의 크기는 HTTP 요청의 수를 증가하지 않고 줄어 듭니다.
귀하의 사이트에 사용자 세션 당 여러 페이지뷰를 가지고 귀하의 페이지에 다시 사용 동일한 스크립트와 스타일 시트의 많은 경우, 캐시된 외부 파일에서 큰 잠재적 이익이된다는 점에 유의해주십시오.

당신의 자바 스크립트 파일을 싸

JavaScripts 경우에는 CSS 달리 파일은 단순히 공백이나 탭을 제거보다 줄어든 파일 크기를 줄 겁니다 일부 표준 알고리즘을 사용하여 났구요 수 있습니다. 자바 스크립트 패커의 예제는 여기 http://dean.edwards.name/packer/ 찾을 수 있습니다

중복 스크립트를 제거 해

그것은 전체 스크립트가 중복 수도 것은 매우 이례이지만, 10 위로 미국 웹 사이트의 평가는 그 중 두 중복 스크립트가 포함되어있다는 사실을 보여줍니다. 스크립트를 중복지만 분명 불필요한 HTTP 요청과 낭비 자바 스크립트 실행을 생성하여 성능을 줄여줍니다.
스크립트 이름은 다르지만 또한 많은 경우, 스크립트 팀 크기와 개수에 따라 동일한 페이지 내에서 중복되는 스크립트의 가능성이 있습니다.

가능한 DOM 요소에 액세스 최소화

자바 스크립트로 DOM 요소에 액세스하는 것은, 당신이해야 더 반응 페이지 권한을 부여하기 위해 너무 느립니다 :
액세스한 요소 • 캐시 참조
트리에 추가 후 • 업데이트 노드 "오프라인"및
• 자바 스크립트로 레이아웃을 고정 피한다

콘텐츠 및 프레 젠 테이션에서 별도 행동

우리 콘텐츠 (XHTML / XML)에서 별도의 프레 젠 테이션 (CSS / XSLT), 우리도 행동을 분리해야 것처럼 (자바 스크립트). 이것은 겸손한 자바 스크립트 호출됩니다. 우리가 외부 CSS 파일에 연결 것처럼, 우리는 외부 자바 스크립트 파일에 연결해야합니다.

대신 콘텐츠 (예 : onmouseover, onclick 등)로 하드 코딩 문제로 인해 문제는 동적 요소, 클래스, 그리고 DOM을 사용하여 고유한 요소 (IDS)에 추가되어 있어야합니다. 기초 문서, 콘텐츠만이 유효한 XHTML / XML없이 자바 스크립트가 포함되어야합니다.
자바 스크립트가 동작을 추가하여 콘텐츠를 확대한다. 내용이 유용하고 자바 스크립트 (또는 전체 자바 스크립트를 지원하지 않고)없이 사용할 유지됩니다.

정말 죄송합니다, 다시이 문서의 연령을 구원했습니다! 제가 소스를 기억 없다 ... 그러나 그것이 우리가 사이트를 개발하는 사람에 대해 청중에 대해 알아야 할 우리, 유용한 듯 ... 그래서 나는 여기있다

페이지 무게는 인터넷 연결 속도를 다양한 주어진 페이지의 다운로드 시간을 결정하는 데 사용할 수 있습니다. 예제 그건 그렇고, 다음 표에 인기가 연결 속도의 숫자에 세 가지 다른 페이지 다운로드 시간을 보여줍니다.

페이지 무게를 줄이는 장점?

페이지 무게 혜택들에게 웹사이트 소유자와 소비자 모두를 줄이는 긍정적인 영향. 잠재적인 혜택은 다음과 같습니다 :

1. 페이지는 빨리로드합니다. 페이지 무게를 줄이는 가장 명백한 영향은 귀하의 웹사이트의 페이지에 관계없이 연결 속도의 방문객을 위해 빠르게 읽어 들일 수있다는 것입니다.
2. 낮은 페이지로드 시간이 더 편할 방문자를 만듭니다. 방문객들은 좌절되고 페이지를 신속하게 로드할 수 있으면 다른 곳으로 갈 가능성이 높습니다. 한편, 느린 로딩 페이지는 방문자와 잠재 고객을 잃을 수있는 가장 확실한 방법 중 하나입니다.
3. 빠른로드 시간이 증가 전환에 기여할 것입니다. 더 많은 방문자가 귀하의 사이트가 더 이상 남아있을 것입니다. 쪽수가, 구매하는 뉴스 레터에 가입하거나 사이트를 책 마킹 끝장날 것이다.
4. 당신의 브랜드 인식이 향상됩니다. 재방문 고객과 처음 방문자는 모두 페이지가 빠르게로드하려면 "프로"로 귀하의 사이트 (및 비즈니스)을 설명하는 것이 더 경사 것입니다.
5. 깨끗하고 견고한 코드 페이지는 종종 자연적인 검색 엔진에 의해보다 효과적으로 색인을 생성합니다.
6. 중량에 최적화된 페이지는 실제로 높은 트래픽이 사이트에서 대역폭 비용을 절약할 수 있습니다. 100,000 페이지는 각 무게 150 KB는 10 만 페이지에 각각의 무게가 75 KB 이상의 ISP에게 두 배나 많은 대역폭이 필요합니다. 사용 대역폭이나 노력해을위한 충전의 ISP의 경우이 감소 대역폭 비용에서 상당한 절감 효과를 만들 수 있습니다.

보고서에 게시된 다음 데이터를 고려

상단에 스타일 시트를 넣어

당신이 점차적으로로드 페이지를 원한다면, 우리는 최대한 빨리이 어떤 내용을 표시할 수있는 브라우저가 필요합니다 즉, 문서의 헤드 내부 페이지 상단의 CSS를 넣어. 이 페이지는이 페이지의 진보적인 렌더링을 용이하게 같이 빠른 로딩 것으로 나타날 수 있습니다. 이것은 내용의 많은와의 느린 인터넷 연결에 대한 사용자의 페이지에 특히 중요합니다.

그것은 전반적인 사용자 경험을 향상시킬 수있는 문서화된 사실, 그것은 진행 표시기 및 시각적 피드백을 제공하는 것이 중요합니다. , 페이지의 요소를 다시 그리기하는 수고를 경우 즉, 페이지 단위의 렌더링을 포함하여 자신의 스타일 변경, 일부 브라우저는 CSS를 완전히 로드될 때까지 경우. 이 때문에, 사용자가 보이게 빈 흰색 페이지입니다.

W3 HTML 사양 '는 또한 CSS는 HTML 페이지의 HEAD 섹션에 저를 포함해야한다고 명시되어 있습니다. at the bottom of the page, so it's best not to use it. 또한 IE에서합니다 @import 사용하는 것과 동일하게 동작 <link> 페이지 하단에 있으므로 그것을 사용하는 것이 아니에요.

브라우저 특정 기능을 사용하지 마십시오

필터 사용 필터 메모리 소모를 증가하고 요소별로 적용이 아닌 이미지는 당, 문제 곱한되도록. 또한, 필터는 IE의 독점이며, 따라서 다른 브라우저에서는 의도한대로 작동하지 않습니다. 당신은 투명 또는 그라데이션 배경을 원한다면 이미지 1Pixel을 사용합니다.
표현식 : CSS의 표현은 CSS에서 경험하는 좋은 기능이지만, 여전히 IE의 특정 기능입니다. 또한,이 표현이 점에 유의하는 것이 중요하다 페이지가 렌더링하고 크기를 조정할 때 평가, 스크롤하고 사용자가 페이지 위로 마우스를 이동해도. 이 페이지의 성능에 영향을 줄 수도 말할 필요도없이. 당신이 그 프로 '는 자사의 죄수보다 더 무겁죠'느껴지지 않으면 그러므로 단순 단어에서, CSS의 표현을 사용하지 마십시오

당신에게 CSS를 Externalise

외부 CSS를 사용하는 것은의 빠른 로딩집니다 페이지 자바 스크립트와 CSS 파일이 브라우저에 의해 캐시됩니다 때문입니다. HTML 문서의 인라인 CSS는 HTML 문서를 요청 때마다 다운로드 하죠. 이것은 실제로 만들어진 HTTP 요청의 개수를 줄일 수 있지만 이후 HTML 문서의 크기를 증가시킵니다. 외부 CSS는 브라우저에 의해 캐시, HTML 문서의 크기는 HTTP 요청의 수를 증가하지 않고 줄어 듭니다.

귀하의 사이트에 사용자 세션 당 여러 페이지뷰를 가지고 귀하의 페이지에 다시 사용 동일한 스크립트와 스타일 시트의 많은 경우, 캐시된 외부 파일에서 큰 잠재적 이익이된다는 점에 유의해주십시오.

귀하의 CSS 파일을 싸

포장이나 CSS를 재정하면로드 시간을 개선함으로써 크기를 줄이기 위해 코드에서 불필요한 문자를 제거하는 관행이다.

CSS는 나를 뉴라인 등 공백과 같은 모든 의견과 불필요한 문자를 제거하여 났구요 수

나이 들면, 모든 모범 사례를 통합할 생각했습니다, 지금하고있는 모든 책을 읽고있다. 드디어! 나는 펜을하고 내려와 있지. 나는 그것이 맘모스 문서를 만드는 거대한 작업이 될 것을 깨달았다, 그래서 그것에 전체 범주를 헌정하기로 결정, 그래서 같은 우수 사례에 대해 물건을 추가할 수있다 그리고 나는 그들을 만날 때 ...

글쎄! 여기 내용은 야후, 구글 등 표준 개발자가 작성한 기능과 개인의 UI 개발 모범 사례의 융합 될 것이다

이 공간을보고 browing 유지 우수 사례 범주

간단한 회화 (오늘 전에 DOCTYPE에 대해서 들어본 적이있는 사람에 대한)! DOCTYPE은 <HTML> 태그 앞에 오는 HTML 문서에서 선언이며,이 정도입니다 (이 매우 페이지의 소스에서 붙여넣) 보이는

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

이 문제 때문에 해결책을했습니​​다

• 사용할 모드를 선택할 수있는 자신의 표준을 알고 웹 개발자를 허용합니다.
• 이전 (만지면) 규칙에 따라 이전 페이지를 표시하는 계속합니다.

그리고 DOCTYPE가 태어났다.

그래서, 페이지가 표준 아닌지 설계 여부에 따라, 당신은 적절한 DOCTYPE을 선택합니다.

이러한 기준이 도입되기 전에 작성된 오래된 페이지는 DOCTYPE이 없습니다. 그러므로 어떤 DOCTYPE가 HTML로가없는 경우 다음 브라우저 만지면 모드에 있습니다.
DOCTYPE은 다음 중 하나로 정의됩니다이라면, 그 브라우저는 strict 모드라고합니다.

<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 과도 / / EN" "http://www.w3.org/TR/html4/loose.dtd">