web-dev-qa-db-fra.com

Comment puis-je différer ces fichiers JS?

Sur mon site Web, j’utilisais GTmetrix et j’avais une erreur JS defer sur les deux fichiers suivants.

92,5 Ko de JavaScript sont analysés lors du chargement initial de la page. Différez l'analyse de JavaScript pour réduire le blocage du rendu de la page.

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

http: //mysite.url/ (5,5 Ko de code JavaScript intégré)

Dans mon fichier functions.php, j’ai le code suivant pour différer js, mais il ne semble pas être affecté aux fichiers js situés en dehors du dossier du thème.

Voici mon morceau de code dans le fichier 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;
        // return "$url' defer ";
        return "$url' defer onload='";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

Comment puis-je me débarrasser de cette erreur et différer l'analyse des éléments susmentionnés?

customizationtheme-developmentjqueryinclude
1
Vishwa

Que sont les attributs asynchrone et différé?

Voici ce que font les attributs asynchrone et différé:

Attribut Async: l'attribut async charge le script de manière asynchrone. En d'autres termes, garantit que le script se charge de manière asynchrone avec les autres contenus de la page, après quoi il est exécuté.

Attribut différé: l'attribut différé retarde le chargement du script. Cela garantit que le script n'est exécuté qu'une fois le chargement de tout le contenu de la page terminé.

Ces deux attributs sont bien pris en charge dans tous les navigateurs modernes, y compris Firefox, Chrome et Internet Explorer. Internet Explorer prend désormais en charge ces attributs depuis IE10.

Voici un exemple de balise de script avec les attributs asynchrone et différé:

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

Fonction permettant d'ajouter un attribut 'Async/différer' à vos scripts de blocage du rendu Dans cet article, nous allons examiner trois méthodes différentes pour ajouter ces attributs à vos javascripts de blocage du rendu. Ces méthodes sont les suivantes:

Méthode 1: Ajout de différer/async à tous les scripts sans exception. Méthode 2: Ajout de différer/async à tous les scripts à l'exception de quelques-uns. Méthode 3: Ajout de différer/async uniquement à des scripts sélectifs. (Méthode la plus flexible car elle vous permet d’ajouter async à certains scripts et d’en différer d’autres.) Vous pouvez utiliser n’importe quelle méthode qui répond à vos besoins. Vous pouvez utiliser n'importe quelle méthode qui répond à vos besoins.

Méthode 1: Ajout asynchrone ou différé à tous les scripts

Si vous souhaitez ajouter l'attribut asynchrone ou différé à tous les scripts sans exception, vous pouvez utiliser le code suivant.

Ouvrez la page functions.php de votre thème et ajoutez ce code au bas de la page.

/*function to add async to all scripts*/
    function js_async_attr($tag){

# Add async to all remaining scripts
    return str_replace( ' src', ' async="async" src', $tag );
    }
    add_filter( 'script_loader_tag', 'js_async_attr', 10 );

pour plus d'informations, veuillez consulter le lien https://orbitingweb.com/blog/add-defer-async-attributes-to-scripts-in-wordpress/

1
vikrant zilpe