Come posso differire questi file JS?

Question

Come posso differire questi file JS?

19 dic 2018, 09:06:39

Visualizzazioni: 3.19K

Voti: 1

Nel mio sito, ho utilizzato GTmetrix e ho ricevuto un errore di defer JS per i seguenti due file.

92.5KiB di JavaScript viene analizzato durante il caricamento iniziale della pagina. Differisci l'analisi del JavaScript per ridurre il blocco del rendering della pagina.

http://mysite.url/wp-includes/js/jquery/jquery.js?ver=1.12.4 (87.0KiB)

http://mysite.url/ (5.5KiB di JavaScript inline)

Nel mio file functions.php ho il seguente codice per differire il JS, ma sembra non avere effetto sui file JS al di fuori della cartella del tema.

Ecco il mio codice nel file functions.php

if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        // restituisce "$url' defer ";
        return "$url' defer onload='";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

Come posso risolvere questo errore e differire l'analisi degli elementi menzionati sopra?

Vishwa

376

personalizzazione sviluppo temi jquery includere

Tutte le risposte alla domanda

vikrant zilpe 478 · Accepted Answer · 2018-12-28T07:51:13Z

Cosa Sono gli Attributi Async e Defer?

Ecco cosa fanno gli attributi async e defer:

Attributo Async: L'attributo async carica lo script in modo asincrono. In altre parole, garantisce che lo script venga caricato in modo asincrono insieme agli altri contenuti della pagina, dopodiché viene eseguito.

Attributo Defer: L'attributo defer posticipa il caricamento dello script. Garantisce che lo script venga eseguito solo dopo che tutti i contenuti della pagina sono stati caricati.

Entrambi questi attributi sono supportati in tutti i browser moderni, inclusi Firefox, Chrome e Internet Explorer. Internet Explorer ha aggiunto il supporto per questi attributi a partire da IE10.

Un esempio di tag script con gli attributi async e defer è il seguente:

<script src='http://sitename.com/js/scripts.js' async='async' type='text/javascript'> 
</script>
<script src='http://sitename.com/js/scripts.js' defer='defer' type='text/javascript'> 
</script>

Funzione Per Aggiungere gli Attributi 'Async/Defer' ai Tuoi Script Bloccanti il Rendering In questo articolo, esamineremo tre diversi metodi per aggiungere questi attributi ai tuoi script JavaScript che bloccano il rendering. Questi metodi sono i seguenti:

Metodo 1: Aggiungere defer/async a tutti gli script senza eccezioni. Metodo 2: Aggiungere defer/async a tutti gli script con l'eccezione di alcuni. Metodo 3: Aggiungere defer/async solo a script selezionati. (Metodo più flessibile in quanto permette di aggiungere async ad alcuni script e defer ad altri.) Puoi utilizzare qualsiasi metodo che soddisfi le tue esigenze.

Metodo 1: Aggiungere Async o Defer a Tutti gli Script

Se desideri aggiungere l'attributo async o defer a tutti gli script senza eccezioni, puoi utilizzare il seguente codice.

Apri il file functions.php del tuo tema e aggiungi questo codice alla fine del file.

/*funzione per aggiungere async a tutti gli script*/
    function js_async_attr($tag){

# Aggiungi async a tutti gli script rimanenti
    return str_replace( ' src', ' async="async" src', $tag );
    }
    add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Per ulteriori informazioni, consulta il link https://orbitingweb.com/blog/add-defer-async-attributes-to-scripts-in-wordpress/