CDN 및 AJAX_jquery를 사용하여 WordPress에서 jQuery 로딩 속도 향상

정말 헤드 섹션에 넣으시겠어요?

사실 가장 좋은 상황은 js 파일을 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에 로드해서는 안 된다는 것입니다. 그렇지 않으면 head 섹션의 로딩 속도에 영향을 미치고 콘텐츠(본문) 로딩이 직접적으로 지연됩니다. 웹사이트. 헤드 섹션에 jQuery를 로드할 필요가 없다고 확신하는 경우 로딩 코드를 36cc49f0c466276486e50c850b7e4956 앞, 정확히 말하면 jQuery 함수를 사용할 첫 번째 자바스크립트 코드 앞으로 이동하세요.

물론, 헤드 부분에 jquery를 로드해야 하는 경우 jquery를 포함한 모든 js 파일이 CSS 파일을 호출하는 코드 뒤에 배치되어 동기 다운로드가 이루어지도록 하세요. 이는 Google이 공식적으로 권장하는 사항이기도 합니다. 예를 들어 다음 로딩은 권장되지 않습니다.

<script src=jquery.js></script>

<link href="style.css" .../>

대신 다음을 사용하세요.

<link href="style.css" .../>

<script src=jquery.js></script>

비동기적으로 로드하지 않으시겠습니까?

비동기 로딩은 웹페이지 로딩을 차단하지 않는 반면, 비동기 로딩은 js 자체를 로딩하기 전에 브라우저에서 웹페이지 로딩을 잠시 차단합니다. 이는 검색 경험에 영향을 미칠 수 있습니다.

로드 코드가

인 경우

<script type="text/javascript" src="jquery.js"></script>

그러면 이것이 비동기 로딩이 아니라 동기 로딩이라는 것을 알아야 합니다. 페이지가 로드된 후 제때에 jquery 함수를 호출할 필요가 없는 경우 비동기 로딩을 사용하여 웹 페이지가 로드되기 전에 jquery를 로드할 수 있으므로 로딩 속도가 크게 향상됩니다. 이 코드는 Google Analytics 코드와 유사합니다.

(function(doc){

var j =doc.createElement("script");

j.type = "text/javascript"; j.async = true; j.src = "jquery.js";

var s = doc.getElementsByTagName("script")[0];

s.parentNode.insertBefore(j, s);

})(document);

그러나 제가 관찰한 바에 따르면 대부분의 경우 동기식으로 로드해야 하며 특히 jQuery 플러그인도 도입해야 하는 경우에는 더욱 그렇습니다.

어떤 버전의 jQuery를 사용해야 하나요?

Wordpress는 항상 최신 jQuery 라이브러리와 함께 제공되며 각 버전의 사용법은 항상 조금씩 다릅니다. jQuery 버전이 최신일수록 성능 향상이 높아집니다. 그러나 일부 jquery 플러그인은 새 플러그인과 호환되지 않을 수 있으며 자체적으로 업데이트를 출시하지 않았습니다. 어쩌면 귀하가 사용하는 분석법 기능 중 일부가 새 버전에서 변경되어 이전에 작동했던 기능이 더 이상 작동하지 않을 수도 있습니다. 이 경우 호환성을 보장하면서 가능한 최신 jQuery 라이브러리를 사용하는 것이 원칙이다.

예를 들어 jquery 1.6.2 버전을 사용했는데 이제 2의 일부 기능을 발견했습니다. 좋습니다. 이때 1.6.2를 포기하고 2.X의 새 버전을 jQuery 1.7.2 버전으로 교체할 수 있습니다.

어떤 jQuery CDN 라이브러리를 사용해야 하나요?

jQuery는 너무 큽니다! 웹 사이트가 빠르지 않으면 jquery가 페이지 로딩 속도에 확실히 영향을 미칩니다. 다행스럽게도 Baidu, Sina, Microsoft, Google 및 기타 회사에서는 웹사이트 소유자가 다운로드 시간을 단축하기 위해 편리하게 호출할 수 있는 공개 js 라이브러리를 출시했으며, 다운로드 시간을 절약하는 초고속 CDN 서버를 보유하고 있습니다.

현재 Google에서 제공하는 jquery 라이브러리가 더 일반적으로 사용됩니다.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

물론 Baidu의 국내 액세스 속도를 과소평가할 수는 없습니다.

<script type="text/javascript" src="//libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

Sina의 CDN도 매우 빠릅니다.

<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

추세를 따르고 싶지 않다면 Microsoft의 jquery CDN을 선택할 수도 있습니다.

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

위에 표시된 버전 번호를 직접 변경하여 다른 버전을 선택할 수 있습니다. 어느 것이 가장 빠른가요? 선택하는 방법?

귀하의 웹사이트에 해외 방문자가 많다면 Google을 선택하는 것이 좋습니다. 주요 방문자가 중국 출신이라면 Baidu를 선택해도 문제가 없습니다. 하지만 바이두의 해외 접속 속도는 구글만큼 빠르지 않다.

그리고 대부분의 웹사이트는 Google의 CDN을 선택하기 때문에 캐싱 원칙으로 인해 웹사이트 방문 시 Google의 CDN이 더 빠를 수 있습니다.

웹사이트 다운로드 속도가 빠른지 확신이 없다면 위에서 언급한 공개 CDN을 사용하여 로딩 시간과 트래픽을 절약하는 것이 가장 좋습니다.

꼭 jQuery를 사용해야 하나요?

귀하의 웹사이트에 jquery의 작은 기능만 필요한 경우 왜 그렇게 큰 파일을 다운로드해야 합니까? jQuery를 사용하지 않는 이유는 무엇입니까?

예를 들어, "최소 크기로 jQuery API 호환성을 최대화"하는 것이 디자인 목표인 zepto.js를 생각해 볼 수 있습니다. gzip 압축 후에는 10KB에 불과합니다.

또한 jQuery에는 모듈 설계가 있으므로 필요한 모듈만 선택할 수 있습니다. jquery 빌더를 참조할 수 있습니다.

jQuery를 로드하는 올바른 방법

그렇다면 jquery를 로드하는 올바른 방법은 무엇입니까?

먼저 js 파일을 호스팅할 CDN이나 자신의 웹사이트를 선택하고 호출 위치가 헤드에 있는지 아니면 본문에 있는지 확인합니다. 일반적인 로딩 방법은

입니다.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

그런데 중국에서 간헐적으로 구글 서비스가 중단되서 국내 방문객들을 배려해서 이렇게 글을 남깁니다.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

이렇게 하면 jQuery가 성공적으로 로드되지 않으면 Baidu의 jquery 라이브러리가 자동으로 로드되어 완벽하게 작동됩니다.