Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

code:wordpress:optimisation3 [26/04/2016 16:09]
elisabeth [3. Charger les images]
code:wordpress:optimisation3 [15/06/2018 22:20]
Ligne 1: Ligne 1:
-{{htmlmetatags>​metatag-robots:​(index,​follow) metatag-author:​(Elisabeth Pointal) metatag-keywords:​(asynchronous) metatag-description:​(Méthodes pour accélerer Wordpress :chargement asynchrone des css, js et images)}} 
-[[code:​wordpress:​optimisation2|<​= Optimisation 2 - Nettoyer]] 
-====== Optimisation 3 - Chargement asynchrone ====== 
-===== - Chargement asynchrone des css  ===== 
  
-<​note>​J'​ai copié/​collé la méthode trouvée sur github : [[https://​github.com/​filamentgroup/​loadCSS|LoadCSS par Filament Group]] et ajouté une petite fonction ''​loadWPstyles''​.\\ 
-Je ne l'​utilise pas pour le css de mon thème (voir [[code:​wordpress:​optimisation2| 2. Utiliser uncss pour votre thème]]). 
-</​note>​ 
-Vous trouverez ici mon fichier [[http://​elisabeth.pointal.org/​docfile/​loadCSS.js|loadCSS.js]]. 
- 
-J'​ajoute un filtre dans mon thème qui retourne un tableau javascript des styles à charger en remplacement des tags <​link>:​ 
-<sxh php; first-line:​365;​ title:​wp-content/​themes/​myTheme/​functions.php>​ 
-add_filter('​style_loader_tag',​ '​cleanCSS',​ 10, 3); 
- 
-/** 
- * cleanCSS 
- * function pour le ménage ​ dans les css et prépare le chargement asynchrone 
- * @param $tag string le tag complet <lin href=.../> ​ 
- * @param $handle string l'​identifiant du css 
- * @param $src string l'​adresse url du fichier 
- * */ 
-function cleanCSS( $tag, $handle, $src){ 
-     // voir ci-dessus j'​élimine les fichiers inutiles $2.1 Identifier les plugins couteux 
-     // ...... 
-     // on prépare le chargement asynchrone : en enregistrant l'​adresse du css dans un tableau javascript wp_styles ​ 
-     // et  on ajoute une balise <​noscript>​ pour le cas du javascript désactivé 
-   ​return ​ "<​script type='​text/​javascript'>"​. 
-           " ​  if( typeof(wp_styles)=='​undefined'​){var wp_styles = new Array();} ". 
-           " ​  ​wp_styles.push('"​.$src."'​)"​. 
-           "</​script>"​. ​             
-           "<​noscript><​link rel='​stylesheet'​ href='"​.$src."'></​noscript>";​ 
-} 
-</​sxh>​ 
- 
-Puis en bas de page, j'​ajoute le javascript qui chargera les css : 
-<sxh php; first-line:​421;​ title:​wp-content/​themes/​myTheme/​functions.php>​ 
- // On ajoute tout à la fin de l'​écriture de la page  l'​action write_loadCSS 
- ​add_action('​wp_footer',​ '​write_loadCSS',​ 1000); 
- 
-/** 
- * write_loadCSS 
- * Ecrit le contenu du fichier loadCSS.min.js dans une balise <​script>​ 
- */ 
- ​function write_loadCSS(){ 
-        echo "<​script type='​text/​javascript'>";​ 
-        echo file_get_contents(get_template_directory() ."/​js/​loadCSS.min.js"​);​ 
-        echo "</​script>";​ 
- } 
-</​sxh>​ 
- 
-===== - Chargement asynchrone des js ===== 
-==== Ajout d'un "​async"​ ==== 
- 
-<​note>​Wordpress a un système d'​empilement ordonné des fichiers javascript pour gérer les dépendances.\\ 
-Cette méthode fonctionne uniquement lorsque tous les fichiers sont indépendants 
-</​note>​ 
-<sxh php; first-line:​158;​ title:​wp-content/​themes/​myTheme/​functions.php>​ 
-add_filter( '​script_loader_tag',​ '​cleanJS',​ 10, 3 ); 
- 
-/** 
- * cleanJS 
- * function pour le ménage dans les js 
- * @param $tag string le tag complet <script src=.../> ​ 
- * @param $handle string l'​identifiant du javascript 
- * @param $src string l'​adresse url du fichier 
- */ 
-function cleanJS(){ 
-    //supprime les javascript inutiles 
-    if(is_admin()){ 
-        return $tag; 
-    } 
-    if($handle === "​plugin-back"​){ 
-         ​return '';​ 
-    } 
-    //... etc 
-    ​ 
-    ​ 
-    // Remplace <script src="​path_to-file"/>​ par <script async="​async"​ src="​path_to-file"/>​ 
-    return str_replace( ' src', ' async="​async"​ src', $tag ); 
-} 
-</​sxh>​ 
- 
-==== Avec des dépendances ==== 
-<​note>​Cette méthode, similaire à celle utilisée pour les css,  fonctionne très bien si aucun plugin n'​écrit du javascript en ligne dépendant d'un fichier javascript! \\ 
-(Par exemple, un plugin qui écrit du jquery en ligne!!)</​note>​ 
-J'​utilise un loader récupéré (je ne sais plus où) et adapté à mon cas : [[http://​elisabeth.pointal.org/​docfile/​loadJS.js|loadJS.js]] \\ 
-J'​ajoute un filtre dans mon thème qui retourne un tableau javascript ''​wp_js''​ des fichiers javascript à charger. ​ 
-<sxh php; first-line:​158;​title:​ wp-content/​themes/​myTheme/​functions.php>​ 
-add_filter( '​script_loader_tag',​ '​cleanJS',​ 10, 3 ); 
-  
-/** 
- * cleanJS 
- * function pour le ménage dans les js et préparer leur chargement ​ 
- * @param $tag string le tag complet <script src=.../> ​ 
- * @param $handle string l'​identifiant du javascript 
- * @param $src string l'​adresse url du fichier 
- */ 
-function cleanJS(){ 
-    //supprime les javascript inutiles 
-    if(is_admin()){ 
-        return $tag; 
-    } 
-    if($handle === "​plugin-back"​){ 
-         ​return '';​ 
-    } 
-    //... etc 
-  ​ 
-    // On enregistre les fichiers dans un tableau javascript wp_js 
-    return "<​script type='​text/​javascript'>"​. 
-           " ​  ​if(typeof wp_js == '​undefined'​){var wp_js = new Array();} ". 
-           " ​  ​wp_js.push({name:'"​.$handle."',​ src:'"​.$src."'​});"​. 
-           "</​script>";​ 
-} 
-</​sxh>​ 
-Puis en bas de page, en dernier, je colle le loader javascript: ​ 
-<sxh php; first-line:​515;​ title:​wp-content/​themes/​myTheme/​functions.php>​ 
-    add_action('​wp_footer',​ '​write_loadJS',​1001);​ 
-    function write_loadCSS(){ 
-        echo "<​script type='​text/​javascript'>";​ 
-        echo file_get_contents(get_template_directory() ."/​js/​loadJS.js"​);​ 
-        echo "</​script>";​ 
-    } 
-</​sxh>​ 
- 
-===== - Charger les images ===== 
-<​note>​Le problème s'est posé avec le plugin photo-gallery (encore lui). \\ 
-Il charge toutes les images pour un diaporama avec la page</​note>​ 
- 
-La solution est de le laisser charger la première image uniquement et charger les autres images quand la page est chargée. 
----- 
- --- //​[[elisabeth.pointal@free.fr|Elisabeth Pointal]] 26/04/2016 09:28// ------ [[code:​wordpress:​optimisation4|Optimisation 4 - Les caches]]