Come ritardare il caricamento dello script in WordPress
Pubblicato: 2022-05-02Cerchi un modo per ritardare il caricamento degli script in WordPress?
Gli utenti di WordPress sono sempre alla ricerca di tecniche all'avanguardia per migliorare il tempo di caricamento del loro sito web. La velocità è così incredibilmente importante per molti fattori che creano una presenza online di successo. Due degli elementi principali quando si tratta di velocità di WordPress sono l'esperienza dei visitatori e le classifiche dei motori di ricerca.
Esistono molti strumenti di terze parti che migliorano la funzionalità o la visibilità di un sito Web WordPress. Questi strumenti di terze parti utilizzano JavaScript per aggiungere le loro funzionalità a un sito Web WordPress.
Lo svantaggio di questo JavaScript di terze parti aggiunto è che nella maggior parte dei casi aumenterà il tempo di caricamento della pagina di ogni URL su cui esiste lo script.
Ciò significa che ovunque tu abbia lo script sulla tua pagina e un visitatore stia tentando di accedere a quella pagina, il tempo necessario per caricare completamente la pagina sarà aumentato a causa dello script.
Forse non sei nemmeno sicuro se il tuo sito web sia più veloce o lento. Dai un'occhiata al link qui sotto per darti alcune informazioni su alcuni strumenti gratuiti di test della velocità del sito web che puoi utilizzare per identificare la velocità del tuo sito.
https://www.wpfixit.com/free-website-speed-testing-tools/
Non sembra giusto che tu debba scambiare funzionalità per velocità, vero?
Gli script esterni sono costosi per il caricamento della pagina del tuo sito
Gli script di terze parti sono ovunque. Secondo il rapporto State of JavaScript di HTTP Archive, il numero medio di script esterni richiesti dai siti Web è 20 e la loro dimensione totale è di circa 449 KB .
Un enorme 93,59% delle pagine Web include almeno una risorsa di terze parti. Scavare più a fondo negli stessi dati mostra che il 76% dei siti Web tiene traccia degli utenti con script di analisi.
L'impatto peggiore degli script di terze parti è il ritardo del percorso di rendering critico, oltre a influire sui punteggi dei Core Web Vitals, a partire dal grado FID.
Il percorso di rendering critico è l'insieme di azioni che un browser compie per assemblare HTML, CSS e JavaScript in un sito Web vivo e utilizzabile.
Naturalmente, la dimensione del carico utile degli script di terze parti gioca un ruolo importante in questo caso, ma c'è ancora un altro fattore importante da considerare.
JavaScript richiede molte risorse della CPU per l'esecuzione. Anche se ottimizzi gli script di terze parti per ridurre l'impatto sui tempi di rendering, possono comunque influire sulla metrica Time to Interactive. Misura la velocità con cui gli utenti possono interagire con una pagina web.
Più è lento, più frustrati saranno i tuoi utenti e maggiori saranno le possibilità che abbandonino il tuo sito web.
Script esterni più comunemente usati su WordPress
Di seguito è riportato un elenco di alcuni degli script esterni più comunemente utilizzati su un sito Web WordPress. Molti di questi li riconoscerai perché probabilmente li stai utilizzando sul tuo sito web.
- statistiche di Google
- Codice Pixel di Facebook
- Widget di chat dal vivo
- Incorpora video
- Moduli incorporati
- Widget dei social media
- Moduli incorporati
Raggiungi la grandezza quando ritardi il caricamento dello script in WordPress
Non c'è motivo per cui dovresti sacrificare la velocità per la funzionalità.
E se ti dicessimo che potresti averli entrambi?
Migliora la funzionalità e la visibilità del tuo sito Web WordPress utilizzando script di terze parti e assicurati anche che ogni pagina del tuo sito Web venga caricata il più velocemente possibile per i tuoi visitatori.
È possibile ed è fatto attraverso un processo in cui si ritarda il caricamento degli script in WordPress.
In circostanze normali, quando utilizzi uno script interno sul tuo sito web, questo verrà caricato con la pagina quando un visitatore accede a uno degli URL del tuo sito.
Quando si ritarda il caricamento dello script in WordPress, lo script esterno non inizierà a caricarsi fino alla scadenza del periodo di ritardo impostato.
Ad esempio, se si imposta il tempo di ritardo su 4 secondi, significa che lo script non verrà eseguito fino a 4 secondi dopo il caricamento completo della pagina.
Questo è estremamente potente perché significa che il caricamento della pagina non è in attesa del completamento dello script. La tua esperienza con i visitatori migliorerà perché le pagine si caricano più velocemente e qualsiasi strumento di test della velocità che utilizzi per testare uno degli URL sul tuo sito Web produrrà risultati migliori.
Diamo un'occhiata alla differenza tra un caricamento di script esterno regolare e un caricamento di script ritardato di seguito.
Caricamento regolare dello script esterno
L'immagine seguente mostra il caricamento a cascata di un URL su cui è incorporato un widget testimonial TrustPilot.
Come puoi vedere nell'immagine ci sono 5 richieste esterne che vengono caricate con questa pagina. Queste richieste provengono dallo script esterno incorporato.
Ritarda il caricamento dello script esterno
Ora diamo un'occhiata alla stessa pagina caricata con il caricamento degli script di ritardo in WordPress.
Questo widget testimonial TrustPilot è ancora incorporato nella pagina, ma abbiamo impostato un tempo di caricamento ritardato di 2,5 secondi dopo il caricamento della pagina.
Non solo l'importo della richiesta è diminuito, ma dai un'occhiata al tempo di caricamento completo e al tempo di caricamento che è anche diminuito.
È come se lo script non fosse nemmeno sulla pagina durante il caricamento.
Quindi, ora che abbiamo spiegato l'alto costo del tempo di caricamento per gli script esterni e il modo in cui puoi usarli senza sacrificare la velocità, lascia che ti mostriamo il codice esatto che devi implementare per raggiungere la grandezza.
Caricamento originale dello script Caricamento in WordPress
Il codice seguente è lo script predefinito incorporato per questo widget TrustPilot che abbiamo utilizzato nei test di velocità sopra.
<!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script> <!-- End TrustBox script --> <!-- TrustBox widget - Carousel --> <div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en"> <a href="https://www.trustpilot.com/review/wpfixit.com" target="_blank" rel="noopener">Trustpilot</a> </div> <!-- End TrustBox widget -->Ritarda il caricamento dello script in WordPress
Il codice seguente è lo script ritardato incorporato per questo widget TrustPilot che abbiamo utilizzato nei test di velocità sopra.
<!-- TrustBox script --> <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js ';
head_ID.appendChild(elemento_script);
}, 2500 ); // TEMPO DI RITARDO CHE PUOI REGOLARE
</script>
<!-- Termina lo script TrustBox -->
<!-- Widget TrustBox - Carosello -->
<div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme=" light" data-stars="1,2,3,4,5" data-review-languages="en">
</div>
<!-- Widget Fine TrustBox -->Qualsiasi utilizzo di caricamento ritardato dello script in WordPress
Il codice seguente è il modello predefinito che puoi utilizzare per ritardare il caricamento dello script in WordPress.
Ci sono solo due elementi all'interno di questo modello che devono essere modificati.
- L'URL dello script esterno che desideri utilizzare
- Il ritardo di tempo in cui si desidera eseguire lo script
<script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' URL_FOR_EXTERNAL_SCRIPT ';
head_ID.appendChild(elemento_script);
}, 2500 ); // TEMPO DI RITARDO CHE PUOI REGOLARE
</script>In conclusione
Speriamo davvero che questo post sia stato utile e abbia capito come ritardare il caricamento degli script in WordPress.
Dovresti davvero usarlo per tutti gli script esterni di terze parti che stai utilizzando sul tuo sito Web WordPress e vedrai un'immediata diminuzione del tempo di caricamento della pagina che andrà a beneficio del posizionamento sui motori di ricerca e dell'esperienza complessiva dei visitatori.
Se hai problemi a implementare qualcosa che hai letto in questo post, commenta qui sotto e possiamo vedere dove sei bloccato.