CDN と AJAX_jquery を使用して WordPress での jQuery の読み込みを高速化します

ヘッドセクションに入れてもよろしいですか?

実際、最も良い状況は、js ファイルを

セクションにロードしないことです。そうしないと、head セクションの読み込み速度に影響し、コンテンツ (本文) の読み込みの遅延に直接つながります。ウェブサイト。 head セクションで jQuery をロードする必要がないことが確実な場合は、ロード コードを 36cc49f0c466276486e50c850b7e4956 の前、正確には、jQuery 関数を使用する最初の JavaScript コードの前に移動してください。

もちろん、ヘッド部分に jquery をロードする必要がある場合は、同期ダウンロードを実現するために、jquery を含むすべての js ファイルが CSS ファイルを呼び出すコードの後に​​配置されていることも確認してください。これは Google の公式推奨でもあります。たとえば、次のような読み込みは推奨されません:

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

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

代わりに次を使用してください:

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

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

非同期でロードしなくてもよろしいですか?

非同期読み込みでは Web ページの読み込みがブロックされませんが、非同期読み込みでは、js 自体を読み込む前にブラウザーでの Web ページの読み込みが一時的にブロックされます。これはブラウジング エクスペリエンスに影響を与える可能性があります。

読み込みコードが

の場合

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

これは非同期読み込みではなく、同期読み込みであることを知っておく必要があります。ページが読み込まれた後に jquery 関数を呼び出す必要がない場合は、非同期読み込みを使用して、Web ページが読み込まれる前に 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 は大きすぎます。 Web サイトが高速でない場合、jquery はページの読み込み速度に間違いなく影響を与えます。幸いなことに、Baidu、Sina、Microsoft、Google などの企業は、Web サイト所有者がダウンロード時間を短縮するために呼び出すのに便利なパブリック 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 を選択しても問題ありません。ただし、Baiduの海外アクセス速度はGoogleほどではありません。

また、ほとんどの Web サイトは Google の CDN を選択しているため、キャッシュの原則により、Web サイトにアクセスするときは Google の CDN の方が高速になる可能性があります。

Web サイトのダウンロード速度が速いかどうかわからない場合は、読み込み時間とトラフィックを節約するために、上記のパブリック CDN を使用するのが最善であることをお勧めします。

本当に jQuery を使用する必要がありますか?

Web サイトで jquery の小さな機能だけが必要な場合、なぜそのような大きなファイルをダウンロードする必要があるのでしょうか?なぜ jquery フリーではないのでしょうか?

たとえば、zepto.js について考えてみましょう。その設計目標は、「最小のサイズで jQuery API の互換性を最大化する」ことです。 gzip圧縮後のサイズはわずか10KBです。

さらに、jQuery にはモジュール設計があるため、必要なモジュールだけを選択できます。 jqueryビルダーを参照できます。

jQuery をロードする正しい方法

そうは言っても、jquery をロードする正しい方法は何でしょうか?

まず、js ファイルをホストする CDN または独自の Web サイトを選択し、呼び出し場所がヘッドかボディのどちらであるかを決定します。通常の読み込み方法は

です。

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

ただし、中国では Google のサービスが断続的に中断されるため、国内の訪問者に配慮してこれを書くことができます:

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

この方法では、jQuery が正常にロードできない場合でも、Baidu の jquery ライブラリが自動的にロードされるため、確実に実行できます。