web-dev-qa-db-fra.com

Différer le code dans les widgets - Vitesse de la page

Comment augmenter la vitesse de la page avec Widget Defer?

Existe-t-il un moyen de différer un widget dans le pied de page?

J'ai une API externe dans un widget de pied de page qui ralentit ma page . Ce n'est pas nécessaire tant que la page n'est pas chargée.

Le plugin de mise en cache que j'utilise (W3 Total Cache) me permet de différer d'autres scripts, mais pas les scripts directement codés dans le widget.

Quelle est la meilleure façon de manuellement différer l'API de code personnalisé qui se trouve dans la zone de widget WordPress d'un pied de page?

Comme ça

 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>
2
Invariant Change

Cela n'a rien à voir avec WordPress. Il s'agit du comportement du navigateur lors du chargement des scripts. Vous avez raison de noter que defer ne fonctionnera pas avec les scripts en ligne. La solution la plus simple consiste donc à ajouter un script d'écoute au script, qui retardera l'exécution jusqu'à ce que la page soit chargée:

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