web-dev-qa-db-ja.com

ウィジェットでコードを延期する - ページ速度

どのようにウィジェットのページスピードをUPするには？

フッターにウィジェットをdeferする方法はありますか？

私は ページ を遅くしているフッターウィジェットに外部APIを持っています。ページがロードされるまで必要ありません。

私が使っているキャッシングプラグイン（W3 Total Cache）は他のスクリプトを延期するオプションを私に与えていますが、直接ウィジェットにコード化されているスクリプトではありません。

フッターのWordPressウィジェット領域にあるカスタムコードAPIを手動でdeferするための最良の方法は何ですか？

このような

enter image description here 

enter image description here 

<script type="text/javascript">
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[ scripts.length - 1 ];
var cccTheme = {"General":{"background":"#ffffff14","borderWidth":"0","borderColor":"none"},"Tabs":{"background":"#ffffff08","color":"#eee","activeBackground":"#ffffff14","activeColor":"#fff"},"Row":{"color":"#eee","borderColor":"#016ac1"},"Trend":{"colorDown":"#b7b6b6","colorUp":"#50dcb6","colorUnchanged":"#dddddd"},"Conversion":{"color":"#006ac1"}};
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl+'serve/v1/coin/multi?fsyms=BTC,LBC,ETH&tsyms=USD,BTC,GBP,CNY';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();
</script>
widgetsapiperformancecustomizationoptimization
2
Invariant Change

あなたのコードはDOMに新しいscriptタグを追加するインラインスクリプトを示しています、それはおそらくあなたのウェブサイトのロード時間を遅くします。その場合、これはインラインスクリプトタグではありません。 defer属性をスクリプトタグに追加するには、この行をs.defer = true;の後にs.async = true;を追加してみてください。それはそれからこのようになるはずです：

var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.defer = true; //add this line
var theUrl = baseUrl+'serve/v1/coin/multi?fsyms=BTC,LBC,ETH&tsyms=USD,BTC,GBP,CNY';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);

これにより、ページがロードするすべてのスクリプトに新しいスクリプトタグ（コードではs）が追加され、次のようになります。

<script type="text/javascript" async defer src="https://widgets.cryptocompare.com/serve/v1/coin/multi?fsyms=BTC,LBC,ETH&amp;tsyms=USD,BTC,GBP,CNY"></script>
3
Александр Фишер

これはWordPressとは関係ありません。スクリプトをロードする際のブラウザの動作に関するものです。 defer はインラインスクリプトでは動作しないことに注意してください。したがって、最も簡単な方法は、ページが読み込まれるまで実行を遅らせる イベントリスナ をスクリプトに追加することです。

window.addEventListener ("load", function() {
  ... your script ...
  }
4
cjbj

@ cjbjは正しい、私は彼を支持します。ただし、必要に応じて別の方法を試すこともできます。そのスクリプトをファイル（つまりwp-content/your_script.js）に移動し、それをdeferを使用してウィジェットに挿入します。

<script src="https://yoursite.com/wp-content/your_script.js" defer></script>

pSあなたの特定のスクリプトはプロフェッショナルではないように見えます（おそらくJavaScriptスペシャリストによって書かれたものではありません）。特定のHTML領域内にとどまるように強制するには、次の操作を行います。

  • スクリプトをdiv内に配置します。<div id="my_cripto"><script src.......></div>

  • .jsファイルで、この変更を行います。

    var embedder = document.getElementById("my_cripto");

4
T.Todua