Grâce à Autoptimize, on va pouvoir améliorer les temps de chargement, en regroupant les fichiers JavaScript, les CSS, et grâce à quelques bricoles qui feront une petite différence. À noter, ça ne va gérer que ce qui se passe côté serveur de pages (temps d’envoi des fichiers), et pas du tout ce qui pourrait se passer sur le serveur en lui-même (temps de compilation). Si vous avez des problèmes de perfs, je vous recommande la suite de vidéos sur Webinoly, disponible ici.
Présentation de la configuration du module…
Options CSS
On va commencer par le plus facile : optimiser le code CSS. Grâce à cette option, Autoptimize va vous permettre d’avoir moins de fichiers CSS, et de présenter un code plus condensé.
Le CSS, c’est le code qui « habille » la page, en ajoutant les couleurs, la taille des typos, la taille et l’emplacement des conteneurs etc. C’est aussi le code qui gère l’apparence de certaines interactions (survol des boutons par exemple). Bref, sans CSS, le web serait super moche, et ce serait bien dommage.
Optimiser le code CSS
À cocher, évidemment, sans quoi ça annule tout ce qu’il y après. Cette option va également permettre de les minifier, c’est-à-dire de supprimer les espaces, les commentaires, pour compresser un peu plus le fichier.
Concaténer les fichiers CSS
« Concaténer », c’est un gros mot pour dire « regrouper ». Vous n’aurez plus « N » fichiers CSS, mais un seul. À noter que le fichier CSS qui sera servi par Autoptimize dépend de la page sur laquelle vous vous trouvez, des templates, des modules etc., il est donc possible que le cache du module soit imposant (ça dépendra du nombre de pages que vous avez).
Agréger aussi les CSS in-line
Cette option est géniale, car elle va retirer le code CSS qu’il y a dans votre page pour le placer dans un autre fichier : votre code source sera ainsi bien plus léger, plus propre. Si vous êtes sur un builder de pages, ça ne fera pas de mal…
Génération de données : URI pour les images
Cette option va modifier la façon dont les images de fond sont rendues sur le site. Au lieu de procéder au chargement d’un fichier, les petites images peuvent être chargées en base 64.
Ce que ça veut dire, c’est plus de travail pour les navigateurs, et moins de travail pour le serveur. À n’utiliser que si vous n’avez pas de scripts de Lazyload sur votre site.
Inclure le CSS principal dans l’HTML et reporter le reste
Cette option permet de pré-charger dans le head le CSS nécessaire à l’affichage du contenu au-dessus de la ligne de flottaison, également appelé « critical CSS ». Ça suppose que vous savez ce que vous devez charger, ou que vous avez pu générer le critical CSS. Pratique pour une super note sur Pages speed, mais si votre serveur est bien foutu, le gain sera assez faible.
Mettre tous les CSS dans votre code HTML
Non, ne faites pas ça ! Ça collerait tout votre CSS inline dans le code source. Cela étant, tout dépend de la quantité de code, mais ça ne me paraît pas être une bonne idée.
Exclure les fichiers CSS d’Autoptimize
Ça, c’est si vous avez du contenu dont l’affichage merdouille quand vous avez activé le plug-in : ça veut dire que certains fichiers CSS sont en conflit (ça peut arriver, en fonction de l’ordre dans lequel ils sont chargés). Ça suppose que vous connaissez très bien votre code, vos plugins etc.
Option HTML
C’est une rubrique relativement simple, qui ne comprend que deux options : « optimiser le code HTML » et « préserver les commentaires HTML ».
Optimiser le code HTML
Cette option va permettre de minifier le code HTML, c’est-à-dire retirer les sauts de ligne, les espaces qui ne servent à rien etc. Vous allez gagner quelques octets sur le poids de la page en elle-même, rien de plus.
Préserver les commentaires HTML
Pour que les commentaires HTML ne soient pas supprimés par le plug-in. Clairement, les commentaires ne peuvent servir qu’en phase de développement. Si vous êtes en production, vous pouvez les faire sauter.
Option du CDN
Un CDN, c’est un Content Delivery Network, c’est-à-dire un réseau livraison de contenu. Utilisé pour faire du Domain Sharding, c’est-à-dire charger différents contenus au navigateur sur des sous domaines tiers, pour paralléliser l’envoi de fichiers. Sur HTTP 2, ça ne sert à rien. Sur HTTP un, vous aurez effectivement un gain de performance.
Un CDN peut également être utilisé pour avoir des points de livraison de type « proxy », c’est-à-dire qu’en fonction de la zone géographique depuis laquelle vous téléchargez un fichier, vous n’allez pas vous connecter à n’importe quel data Center. Ça sert typiquement pour les sites qui ont une audience internationale.
Pour résumer, si votre site est en France, pour une audience française, ou proche, et que vous êtes en HTTP 2, vous n’avez pas à vous embêter avec cette rubrique.
Option JavaScript
C’est la plus risquée des options ! Avec ça, vous pouvez tout péter !
Optimiser le code JavaScript ?
Cette option permet de réduire la taille des JavaScript. Jusqu’ici, tout va bien.
Concaténer les fichiers JavaScript
C’est typiquement le genre de fonction qui peut tout casser. En fonction de vos fichiers, de la version de Jquery utilisée etc., si vous modifiez l’ordre dans lequel les JavaScript sont chargés, ou que vous les concaténer, vous pouvez obtenir des erreurs dans l’exécution du code.
Ca veut dire que certaines fonctionnalités du site seront K.-O.
Néanmoins, les gants performance sont assez bluffant. À utiliser, donc, si vous êtes sûrs de ce que vous faites (voir plus bas).
Agréger aussi les JS in-line
Cette fonction, comme pour le CSS inline, permet de récupérer les JavaScript qui sont « en dur » sur la page pour les placer proprement dans un fichier externe.
Forcer le JavaScript à charger dans l’en-tête de la page
Cette fonction permet de charger le JavaScript dans le Head. Ça va corriger certaines erreurs, mais ça va accroître le temps de rendu sur la page. Je déconseille d’utiliser cette fonction. On préférera exclure les fichiers qui plantent.
Scripts à exclure d’Autoptimize
Voilà, c’est l’option magique qui vous permet d’exclure de la concaténation les fichiers qui risqueraient de provoquer des erreurs. Super pratique, mais ça nécessite de connaître vos plug-ins, les fichiers qui sont liés etc. C’est donc une fonctionnalité relativement avancée, pour ceux qui n’ont pas peur de regarder le code source.
Ajouter une gestion des erreurs (trycatch)
Si vos scripts ne fonctionnent pas en raison d’erreurs JS, vous pouvez essayer cette option.
Options diverses
Enregistrer les scripts/CSS en tant que fichiers statiques
À cocher ! Ça permet de créer les fichiers JavaScript et CSS de manière statique, c’est-à-dire qu’il y aura un fichier, dans un dossier, et qu’il restera là jusqu’à ce qu’il soit expiré.
Optimiser les fichiers CSS et JS exclus ?
Si vous excluez un fichier de la concaténation, il sera quand même optimisé par le module (minifié).
Optimiser aussi pour les utilisateurs connectés
C’est une option qui peut servir si vous utilisez un builder et que celui-ci ne charge pas (avec un beau message d’erreur).
L’onglet « images »
Cette section du module permet d’optimiser les images, en les distribuant via un CDN ou en exécutant un script de Lazyloading. Pour le Lazyloading, je vous renvoie à ce tutoriel. Et pour le CDN, j’ai tout expliqué plus haut.
La section extra
Google fonts
Si vous avez beaucoup de Google fonts, ça peut être intéressant de les optimiser avec l’option dédiée. Par défaut, le rendu de la typo de votre site est impacté par le chargement de Google Font. Si vous appelez de nombreuses polices, ça peut être intéressant de gérer cette section-là.
Personnellement, vu que je n’ai qu’une seule typo, je ne m’embête pas. Si vous avez besoin de dégreffer finement, vous pouvez utiliser la fonction que vous trouverez ici.
Désactiver les emojis
Si vous tapez un joli petit smiley, WordPress le remplace par une icône. Le problème, c’est que ça va nécessiter du CSS et un JavaScript supplémentaire. Vous pouvez supprimer cette belle merde qui ne sert à rien.
Supprimer les chaînes de requête des ressources statiques
De nombreux plug-in vont charger leur fichier avec une variable de version. Parfois, celle-ci indique au navigateur qu’on a changé de fichiers. Donc, techniquement parlant, c’est utile de les laisser. Retirer la chaîne de requête va améliorer le score de performance, rien de plus.
« Préconnection » avec des domaines tiers (utilisateurs avancés)
Ça, c’est pour ajouter le DNS prefetch : avant de charger une page, le navigateur se connectera au DNS susceptible d’être appelé, afin de gagner quelques millisecondes. Franchement, c’est un peu « gadget », car en général, sur la page d’accueil, ou une bonne landing page, il y aura plus de 80 % des requêtes effectuées en termes de connexion au DNS.
Fichiers JavaScript asynchrones (utilisateurs avancés)
Ça, c’est pour différer le chargement des JavaScript. Attention à ne pas bloquer le rendu.
Optimiser les vidéos YouTube
Une application tierce pour charger les vidéos de manière différée, en Lazyload. Là encore, je vous renvoie vers le tutoriel qui arrive très prochainement.
