Résoudre les problèmes avec l'optimisation des fichiers

Vous avez donc décidé d'activer une ou plusieurs options pour minifier ou combiner les fichiers, supprimer les query strings, ou un-render-block CSS/JS, et votre site est planté ? La mise-en-page cassée ? Les éléments déplacés ? Les liens ou formulaires ne fonctionnent plus ?

Voici un moyen simple de réparer tout ça :

1. Désactivez toutes les options !

Oui, sérieusement, faites-le. Décochez toutes les options pour minifier ou combiner les fichiers, pour supprimer les query strings, le render-blocking CSS/JS, et sauvegardez. Vos pages se chargeront encore (quasiment) aussi rapidement qu'avant, et votre site web sera de retour, tout aussi beau qu'il l'était auparavant.

☝️ Attention ! Si votre problème n'a pas été résolu par cette étape, c'est qu'il est dû à autre chose que les options d'optimisation des fichiers statiques, vous n'avez donc pas besoin d'aller plus loin dans ce tutoriel.

2. Premiers secours

Soyez sûr(e) d'avoir désactivé “Supprimer les query strings des resources statiques” en premier !

La fonctionnalité de “Suppression des query strings” modifiera les URIs de vos fichiers, mais vous avez besoin des URIs originales de vos fichiers pour aller plus loin dans la résolution de votre problème. Assurez-vous d'avoir bien désactivé cette option avant de continuer.

Quelle option pose problème exactement ?

Réactivez vos options une par une et vérifiez votre site à chaque étape. Une fois que le problème est réapparu, vous savez alors quelle option cause le souci. Vous pouvez alors soit laisser simplement désactivé cette option, soit continuer à tenter de résoudre ce problème.

Votre site affiche-t-il une page "Coming Soon" à vos visiteurs ?

Si c'est le cas, l'optimisation des fichiers ne fonctionnera pas. Continuez à configurer l'optimisation des fichier une fois que votre site (ou votre site en développement) sera visible même si vous n'êtes pas un utilisateur enregistré du site.

La minification fonctionne-t-elle ?

Dans article, nous supposons que le processus technique d'optimisation des fichiers (i. e. génération des fichiers minifiés) fonctionne comme il devrait. Si ce n'est pas le cas, par exemple si vous ne voyez aucun fichier minifié sur votre serveur, veuillez consulter ce document :  Les pages ne sont pas mises en cache, ou la minification CSS et JS ne fonctionne pas

Apprendre les bases sur comment comprendre “PageSpeed” !
Avant d'aller plus loin dans la résolution de ce problème, nous vous recommandons vivement de lire ceci afin de comprendre la "Note de Performance" de Google PageSpeed Insights, GT Metrix et les autres outils.

Lisez ces 2 articles avant toute autre chose :
La note Google Page Speed ne s'améliore pas
Comment mesurer correctement le temps de chargement des pages de votre site

Sauter cette étape peut vous faire perdre pas mal de temps, d'énergie et même d'argent.

3. Résolutions de problèmes

À présent que vous avez franchi toutes ces étapes :

  • Vous avez exclu les autres causes possibles pour le problème que vous rencontrez.
  • Vous savez exactement quelle(s) option(s) pose(nt) problème.
  • Vous avez alors décidé de résoudre le problème plutôt que de laisser l'option simplement désactivée.

Alors allons-y !

Nous allons tout d'abord partir du principe que vous avez une petite idée de :

  • Ce qu'est la “minification”;
  • Ce qu'est la “concatenation”;
  • Ce qu'est un document HTML” et de comment on le lit (au moins basiquement);
  • Ce qu'est une “URI de fichier” et comment on la retrouve dans un navigateur;
  • Ce que sont les “outils de développement” (ou “dev tools”) dans les navigateurs Chrome ou Firefox, et comment les ouvrir.

🔮 Serez-vous capable de faire tout ça ? Si un seul des termes mentionnés ci-dessus est totalement nouveau pour vous, alors vous n'êtes pas vraiment de ceux qui pourront aller plus loin ici, à moins que vous soyez vraiment désireux de vous renseigner sur certains aspects plus techniques des sites Web.

Aucune des choses abordées dans cet article n'est obligatoirement nécessaire pour avoir un site Web plus rapide. Cependant, si vous choisissez de continuer, soyez sûr(e) d'avoir les compétences techniques requises.

Minification HTML

  • Peut réduire la taille d'une page.
  • Retire toutes (ou la plupart) des passage à la ligne et les espaces inutiles du document HTML.
  • ⚠️ Peut aussi, dans certains cas, supprimer les commentaires CDATA.
  • Dans l'éventualité où vous auriez un problème avec Google Analytics ou tout autre scripts utilisant les commentaires CDATA dans le code source, essayez de vois si la désactivation de la minificationHTML résoudre le problème.

Minification CSS/JS

  • Peut réduire la taille d'une page.
  • Retire toutes (ou la plupart) des passage à la ligne et les espaces inutiles des fichiers CSS ou JavaScript.
  • Pas de problème général connu.
  • Vous pouvez exclure des URIs spécifiques de fichiers du processus de minification/combinaison en les copiant-collant dans leurs champs d'exclusion respectifs de vos réglages.
  • ☝️Si vous excluez ces fichiers, assurez-vous d'exclure l'URI originale du fichier, et non celui généré par WP Rocket ! L'URI du fichier que vous entrez dans le champ d'exclusion ne doit surtout pas contenir “/cache/min” ou “/cache/busting”.

Combinaison CSS/JS

  • Peut réduire le nombre de requêtes HTTP.
  • Combine les fichiers CSS et JavaScript pour en réduire le nombre de fichiers (plus gros).
  • ⚠️ Peut générer des problèmes quand les thèmes/plugins n'ont pas défini correctement les dépendances pour l'enchainement des scripts ou des feuilles de style.
  • ⚠️ Peut générer d'autant plus de problèmes si l'option “combiner en moins de fichiers possible” est activée.
  • Vous pouvez exclure des URIs spécifiques de fichiers du processus de minification/combinaison en les copiant-collant dans leurs champs d'exclusion respectifs de vos réglages..
  • ☝️ Si vous excluez ces fichiers, assurez-vous d'exclure l'URI originale du fichier, et non celui généré par WP Rocket ! L'URI du fichier que vous entrez dans le champ d'exclusion ne doit surtout pas contenir “/cache/min” ou “/cache/busting”.
  • Suivez ce tutoriel pour trouvez quel URIs de fichier vous avez besoin d'exclure : Trouver les bon fichiers JS à exclure de la Minification

☝️ Attention ! Votre site charge probablement aussi des scripts depuis des services externes. Ceux-ci ne seront pas combinés, mais ils pourraient être déplacés vers le haut du document HTML. Afin éviter ce problème lié au JavaScript externe, excluez-le du processus comme expliqué ici : Exclure le JS externe de la minification

Supprimer les query strings

  • Peut améliorer la note Google Page Speed.
  • Supprime les paramètres “?ver” des requêtes des URIs des fichiers, les encode dans le nom du fichier, et stocke ensuite les nouveaux fichiers dans un dossier dédié du cache. (“/cache/busting”)
  • Vous pouvez exclure des URIs spécifiques de fichiers du processus en utilisant un plugin d'aide : Exclure des fichiers de l'option Ressources Statiques

Render-blocking CSS/JS

  • Peut améliorer le temps de chargement et la note Google Page Speed.
  • Réduit le nombre de requêtes HTTP.
  • ⚠️ Peut causer pas mal de problème quand ce n'est pas réalisé correctement. Assurez-vous d'avoir bien lu ce document au préalable : JavaScript et CSS bloquant le rendu - PageSpeed
  • Requiert des connaissance avancées en développement. les ressources bloquant le contenu peuvent varier sur chacune de vos pages de votre site. Faire en sorte que cela fonctionne correctement peut devenir une tâche ultra-complexe alors que votre site web n'ira probablement pas plus vite. Ignorer cette option pourrait être votre meilleur choix, à moins que vous soyez un(e) développeur(se) web expérimenté(e) qui sait déjà comment gérer les ressources bloquant le rendu en général.