Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
code:wordpress:optimisation3 [26/04/2016 15:00]
elisabeth [Avec des dépendances]
code:wordpress:optimisation3 [15/06/2018 22:20] (Version actuelle)
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)}}+{{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:​wordpress300.jpg|WordPress}}\\
 [[code:​wordpress:​optimisation2|<​= Optimisation 2 - Nettoyer]] [[code:​wordpress:​optimisation2|<​= Optimisation 2 - Nettoyer]]
 ====== Optimisation 3 - Chargement asynchrone ====== ====== Optimisation 3 - Chargement asynchrone ======
Ligne 82: Ligne 83:
  
 ==== Avec des dépendances ==== ==== Avec des dépendances ====
-<​note>​Cette méthode fonctionne très bien si aucun plugin n'​écrit du javascript en ligne dépendant d'un fichier javascript! \\+<​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>​ (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]]  --- //​[[elisabeth.pointal@free.fr|Elisabeth Pointal]] 26/04/2016 09:28// ------ [[code:​wordpress:​optimisation4|Optimisation 4 - Les caches]]