it-swarm-pt.tech

Adiar o código nos widgets - Velocidade da página

Como subir a velocidade da página com o Widget Adiar?

Existe uma maneira de defer a widget no rodapé?

Eu tenho uma API externa em um widget de rodapé que está retardando minha página . Não é necessário até que a página seja carregada.

O plugin de cache que eu uso (W3 Total Cache) me dá a opção de adiar outros scripts, mas não scripts diretamente codificados no widget.

Qual é a melhor maneira de manualmente deferir API de código personalizado que está na área de widget do WordPress de um rodapé?

Como isso

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

Seu código mostra um script in-line, que adiciona uma nova tag de script ao DOM, o que provavelmente atrasa o tempo de carregamento de seu website. Esta não é uma tag de script inline. Tente adicionar esta linha s.defer = true; após s.async = true; para adicionar o atributo defer à sua tag de script. Deveria então ficar assim:

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);

Isso deve resultar na adição de uma nova tag de script (chamada s em seu código) a todos os scripts que a página carregará e deve ter esta aparência:

<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

Isso não tem nada a ver com o WordPress. É sobre o comportamento do navegador no carregamento de scripts. Você está certo em observar que defer não funcionará com scripts embutidos. Portanto, a abordagem mais fácil é adicionar um ouvinte de evento ao script, que manterá a execução até que a página seja carregada:

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

@cjbj está certo, eu falo com ele. No entanto, você pode tentar outra abordagem se quiser - mova esse script para um arquivo (ou seja, wp-content/your_script.js) e insira-o no widget com defer:

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

p.s. seu script específico não parece profissional (provavelmente não escrito por especialistas em javascript). Para forçá-lo a ficar dentro da sua área html específica, faça o seguinte:

  • coloque o script dentro de div: <div id="my_cripto"><script src.......></div>
  • no arquivo .js, faça esta modificação:

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

4
T.Todua