Dans la vidéo concernant l’audit des temps de chargement, j’expliquai que le nombre de fichiers envoyés par votre serveur est un facteur crucial. Même si vous êtes en HTTP 2, un protocole plus rapide que HTTP 1, il est important d’optimiser ce qui est envoyé par votre serveur de pages (Apache ou Nginx).
Voilà les fichiers sur lesquels on pourra travailler :
- Les polices de texte
- Les CSS
- Les JavaScript
- Les images
- Les vidéos
Normalement, sur du HTTP 2, on est moins tatillon à ce sujet, car HTTP 2 a le mérite d’envoyer plus de fichiers d’un coup au navigateur. Mais pour avoir testé sur de nombreux sites, en HTTP 1 ou en HTTP 2, avec ou sans concaténation de fichiers, je peux vous garantir que même en HTTP 2, le gain de temps n’est pas négligeable.
Les polices de texte
C’est du bon sens, mais je dois quand même en parler vu qu’il m’arrive de voir des horreurs en audit. Un bon design Web c’est deux polices de texte. Une pour les titres, et une pour les textes. Point barre. Rien de plus.
Le truc, c’est que de nombreux plug-ins proposent d’utiliser des polices personnalisées (la plupart du temps des Google fonts) et les ajoutent automatiquement. Il faut donc rester vigilant, parce que ça peut aller très vite de se retrouver avec six ou sept polices chargées dans le Head.
Si c’est le cas, il faudra dégreffer tout ça, soit manuellement directement dans le module, soit avec une fonction dans votre fichier functions.php.
Dégreffer Google font avec un module
Vous pouvez donc utiliser ce module pour dégager les Google Font . Pas très compliqué, mais ça fait installer un module de plus (et ça, on n’aime pas trop).
Dégreffer Google font grâce à une fonction
D’abord, repérez dans votre code source (dans le head) une ligne qui ressemble à ça :
<link rel="stylesheet" id="cf7md_roboto-css" href="//fonts.googleapis.com/css?family=Roboto:400,500" type="text/css" media="all">Ce que vous voulez ici, c’est l’id de la typo importée (dans mon cas « cf7md_roboto-css »).
Puis, ajoutez ça au fichier functions.php de votre thème enfant :
[ihc-hide-content ihc_mb_type= »show » ihc_mb_who= »reg » ihc_mb_template= »1″ ]
function remove_google_fonts_stylesheet() {
wp_dequeue_style( 'cf7md_roboto' );
}
add_action( 'wp_enqueue_scripts', 'remove_google_fonts_stylesheet', 999 );[/ihc-hide-content]
Vous remarquerez que j’ai tronqué le « -css » sur la troisième ligne. Sauvegardez le fichier, rechargez la page, et c’est nettoyé…
Les images
Oui, on peut réduire le nombre d’images qu’on envoie ! Par exemple en faisant un Sprite CSS. Il s’agit d’une technique qui consiste à mettre toutes les images de fond dans un seul fichier et de gérer la position des images dans les conteneurs via des directives CSS (background-image, background-position etc.).
Clairement, si vous en êtes là, c’est que vous êtes un véritable maniaque de l’optimisation. Vous pouvez créer votre Sprite à la main, ou utiliser un générateur en ligne si vous n’avez pas envie de vous prendre la tête. Je vous mets ci-dessous un exemple de Sprite CSS, avec le visuel et une partie du CSS qui va avec (on fera un tuto complet à ce sujet).
.gdm-ez-container h2::after {
background-repeat: no-repeat;
background-image: url("/wp-content/uploads/separator.png");
width: 40px;
height: 25px;
position: absolute;
content: "";
top: 7px;
right: -66px;
background-position: -47px -31px;
}
/*ET BIEN ENTENDU, L'ELEMENT PARENT EST EN POSITION RELATIVE*/Vous pouvez également utiliser un script de Lazyload pour ne charger les images que quand elles sont visibles sur la fenêtre. C’est clairement le meilleur moyen de réduire le temps de chargement lié aux images. Et vous avez de la chance, y a un tuto dédié ici 🙂
Notez également qu’on travaillera sur la taille et le poids des images (tuto à venir).
Les vidéos
S’il y a bien un truc qui bouffe de la bande passante, c’est les vidéos. Clairement, je déconseille d’héberger des vidéos directement sur votre serveur, car ce sont des fichiers supers lourds. Préférez l’utilisation d’hébergeurs spécialisés, comme YouTube ou Dailymotion.
Notez qu’il est possible d’appliquer du Lazyload sur les vidéos, y compris les vidéos embedded. Comme ça, vous résolvez le problème facilement…
Les JavaScript et les CSS
C’est ce qu’il y a de plus commun quand on veut travailler sur le nombre de fichiers envoyés : concaténer les JavaScript et les feuilles de style.
Concaténer, ça veut simplement dire qu’on va tous les regrouper dans un ou plusieurs fichiers. C’est une fonction proposée par la plupart des modules de cache.
Les avantages, c’est que moins vous avez de requêtes HTTP, plus la page chargera vite. L’inconvénient, c’est que, parfois, une concaténation trop agressive cassera le layout du site ou certaines fonctionnalités. On rentre un peu dans les détails…
Les CSS
Normalement, vous n’aurez que très rarement des problèmes d’affichage suite à la concaténation de CSS. Ça dépendra principalement du module que vous avez utilisé ou de la méthode employée. Personnellement, j’utilise Autoptimize depuis des années et je n’ai jamais eu de souci particulier, d’autant plus que vous pouvez exclure certains fichiers du processus si ça plante.
Pour WordPress, il existe pas mal de modules pour faire ça :
- Autoptimize
- Fast Velocity Minify
- WP Fastest Cache
- WP Optimize
- WP Rocket
- W3 Total Cache
- etc
Vous n’avez que l’embarras du choix. Perso, je n’utilise pas de plugin de cache car j’ai déjà une solution qui s’exécute coté serveur (FastCGI). Je vous envoie au tuto sur Autoptimize disponible sur cette page.
Les JavaScript
Là, clairement, c’est casse-gueule. Concaténez les fichiers JavaScript dans le mauvais ordre, et certaines fonctionnalités du site sauteront. Là encore, Autoptimize fait des merveilles, et vous permet d’exclure les scripts qui ne fonctionnent pas.
Le principal inconvénient de la concaténation JavaScript, c’est que si quelque chose ne fonctionne plus, vous allez devoir retrouver le coupable pour l’ajouter à la liste d’exclusion. Ça nécessite donc de connaître parfaitement votre thème, vos plug-ins, et ça demande parfois quelques investigations. C’est donc réservé aux utilisateurs aguerris : je ne peux que vous encourager à tester (c’est en forgeant…).
