Liste de contrôle d'optimisation WordPress

L'optimisation WordPress est l'art de faire fonctionner votre site Web aussi rapidement que possible, d'améliorer votre expérience utilisateur, de réduire les coûts de serveur et d'avoir des avantages en matière de référencement.

De nombreuses études montrent que les visiteurs ne souhaitent pas attendre le chargement d'un site Web et sont enclins à quitter votre site Web s'il prend trop de temps à se charger.

Un site Web à chargement rapide est particulièrement important pour vous si vous avez une boutique en ligne et souhaitez améliorer vos taux de conversion.

Des tests chez Amazon ont révélé des résultats similaires : chaque augmentation de 100 ms du temps de chargement d'Amazon.com a réduit les ventes de 1 % (Kohavi et Longbotham 2007).

Source : https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

La vitesse de chargement de votre site Web est également extrêmement importante pour votre classement sur Google, ce qui fait de l'optimisation du site Web une partie de votre stratégie de référencement.

Mais, mon site Web se charge très rapidement !

Bien sûr que c'est le cas. Au moins pour vous. Mais avez-vous essayé de visiter votre site Web pour la toute première fois depuis longtemps ?

Lorsque vous naviguez sur votre site Web, la plupart d'entre eux seront mis en cache dans votre navigateur. Si vous souhaitez profiter de la première expérience, videz votre cache ou utilisez un navigateur complètement différent.

Il y a beaucoup de choses à faire qui peuvent améliorer la vitesse de votre site WordPress, commençons.

Minification des scripts

Les sites Web WordPress sont une combinaison de HTML, CSS, JavaScript et d'images. Le code HTML est chargé en premier et contient ensuite des informations sur les autres fichiers de feuilles de style CSS, les fichiers JavaScript et les images.

Chaque fichier est chargé à son tour. Un navigateur a normalement une limite de 2 à 4 "canaux", ce qui signifie que le navigateur ne chargera que jusqu'à 2 à 4 fichiers en même temps à partir du serveur sur lequel les fichiers sont hébergés.

Si vous parcourez votre code HTML de votre site Web WordPress, vous remarquerez de nombreux fichiers .css et .js différents. Chacun d'entre eux provient généralement de plugins différents, chacun ajoutant des fichiers .js ou .css au mélange.

Dans certains cas, le plugin injectera même des styles JavaScript ou CSS directement dans le HTML. La plupart des développeurs de plugins WordPress ou des auteurs de thèmes sont assez intelligents pour ne pas le faire.

Ceci est juste un échantillon d'un site Web WordPress normal. Le code HTML contient des liens vers plusieurs autres fichiers. Dans cet exemple simple, 4 fichiers JavaScript sont chargés, un par un.

<script type="text/javascript" src="https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type="text/javascript" src="https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type="text/javascript" src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type="text/javascript" src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress a des fonctions internes qui permettent aux auteurs de plugins et de thèmes d'intégrer les fichiers JavaScript et CSS nécessaires.

wp_enqueue_script() et wp_enqueue_style(). Les noms des fonctions donnent un indice solide sur ce qu'elles font. En utilisant l'un ou l'autre pour intégrer les fichiers nécessaires, les auteurs de plugins et de thèmes mettent leurs fichiers en file d'attente avec tous les autres plugins et même WordPress lui-même.

Il est également possible d'instruire les fonctions de toutes les dépendances d'autres bibliothèques, généralement un fichier d'inclusion JavaScript dépend de jQuery pour être chargé en premier.

Je trouve et installe généralement un plugin de minification, je l'active et je vois ensuite si quelque chose se casse sur le site. À partir de là, je vais identifier exactement ce qui ne va pas et si j'ai juste besoin de modifier quelques paramètres pour le réparer.

Les plugins de minification ont tendance à exclure des paramètres pour des fichiers spécifiques qui ne fonctionnent pas bien lorsqu'ils sont chargés avec d'autres ou pour changer l'endroit où les fichiers sont chargés, dans l'en-tête ou le pied de page du document.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Remarque : dans l'exemple de code, je stocke l'URL du thème dans une variable, puis je l'analyse dans la fonction wp_enqueue_script. Cela réduit le nombre d'appels PHP et/ou de base de données nécessaires, ce qui augmente la vitesse.

Dans la quête de vitesses de chargement extrêmes, je pourrais choisir de coder en dur le chemin d'URL absolu, mais cela limiterait le thème à un seul domaine et rendrait plus difficile la réutilisation du code sur un autre site.

Après avoir installé un plugin de minification, les feuilles de style JavaScript et CSS sont maintenant jointes en moins d'appels HTTP.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

Cela combine les 4 fichiers en un seul "fichier"/demande pour votre navigateur.

J'ai rencontré des sites Web basés sur WordPress qui avaient 22 fichiers .css chargés ainsi que 15 .js. Tout en première page. Le changement de vitesse peut être incroyable si vous pouvez réduire la quantité de fichiers externes.

Bien que les scripts de minification aient tendance à avoir d'énormes améliorations de vitesse, c'est aussi l'une des techniques que j'utilise qui a tendance à poser le plus de problèmes de configuration.

Optimiser header.php

Le header.php de votre thème est appelé sur chaque page de votre site WordPress. Ce fichier contient généralement de nombreux éléments qui peuvent être optimisés.

Un exemple classique est le bloginfo('template_directory') qui est généralement appelé plusieurs fois dans le header pour retourner l'url du thème pour y inclure des fichiers externes.

Une méthode plus efficace consiste à faire une seule requête pour l'URL, puis à la stocker en tant que variable.

$template_directory = get_bloginfo('template_directory'); 

L'url du répertoire du thème est maintenant stockée dans la variable $template_directory.

Plus d'exemples sur la façon d'améliorer l'efficacité de header.php peuvent être lus dans le blogpost WordPress header.php Optimization Tips

Réduire le nombre de plugins

Un autre élément important de l'optimisation de WordPress consiste à maintenir le nombre de plugins activés aussi bas que possible. Il est tentant pour de nombreux utilisateurs de tester et d'expérimenter différents plugins, ce qui est en effet l'un des avantages de WordPress.

Cependant, avoir beaucoup de plugins actifs peut réduire la vitesse de votre site WordPress. De nombreux plugins ont une seule fonction qui pourrait tout aussi bien être gérée par un morceau de code placé dans votre functions.php.

Dans de nombreux cas, vous n'aurez peut-être besoin que d'une seule fonction, mais le plug-in que vous utilisez propose plusieurs autres options que vous n'utilisez jamais.

Analysez chaque plugin sur votre site et assurez-vous que vous en avez besoin. Si vous n'en avez pas besoin ou si la fonctionnalité peut être remplacée par du code functions.php, désactivez et supprimez les plugins.

N'utilisez pas d'images - utilisez CSS3

La conception de sites Web utilise des images pour aider à créer l'interface utilisateur.

Après l'introduction de CSS et en particulier de CSS3, de nombreux effets utilisés pour les interfaces Web peuvent être imités en utilisant du code CSS et HTML.

[box]Remarque : La plupart de ces effets ne sont pas compatibles avec tous les navigateurs, en particulier l'ancien Internet Explorer (oui, toujours le problème pour tout développeur Web). Si vous souhaitez optimiser la vitesse de votre site Web, l'utilisation d'effets CSS peut être une solution rapide et rapide, mais pas un bon choix si le public principal du client utilise des navigateurs obsolètes.[/box]

Si vous travaillez pour un client qui cible le B2C (entreprise à consommateur), vous devriez vérifier leur Google Analytics ou leur demander quel type de clients ils ont (ou souhaitent cibler). Cela peut influencer si vous pouvez utiliser des effets CSS3 si le public des clients utilise généralement des navigateurs obsolètes.

Lorsque Elegantthemes.com a publié une nouvelle version de son plugin de shortcode, cela a eu un impact énorme sur le temps de chargement de mes clients en raison des effets CSS3 et de la mise de plusieurs images dans un seul sprite.

Le dossier shortcodes/images, qui contenait 90 images, a maintenant un seul sprite PNG, réduisant la taille globale de 140 ko à 15 ko !
(Cela représente une réduction de taille d'environ 90 %.)

Images aux sprites

L'optimisation des sprites d'un thème existant peut prendre un peu de temps, mais elle peut également apporter une grande amélioration de la vitesse de votre site Web.

Un sprite est une image unique, généralement au format .PNG, qui comporte plusieurs éléments de votre conception/mise en page visuelle. Au lieu de charger chaque élément graphique individuellement, toutes les images sont jointes en un ou aussi peu de sprites que possible.

Cette technique ne doit être utilisée que pour les images utilisées pour la mise en page du design, et non pour les images individuelles, les vignettes, etc.

Au lieu de charger chaque image individuelle (une requête http différente), toutes les images sont regroupées dans un seul fichier, et le CSS affichant chaque image est modifié pour simplement déplacer l'arrière-plan à l'endroit où se trouve la partie nécessaire dans le sprite.

SpriteMe.org est une excellente ressource pour créer des sprites. La meilleure méthode consiste à planifier à l'avance et à créer d'abord vos sprites, mais si vous avez besoin de réparer un site Web existant, le site spriteme.org a un bookmarklet qui rend le processus très facile.

Exemple de styles CSS en combinaison avec un sprite :

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Chaque style CSS fait référence au même fichier, mais la position de l'arrière-plan est différente, montrant les différentes parties de l'image.

Distribuer – Utiliser un CDN

Il y a deux principaux avantages à utiliser un CDN (Content Distribution Network) pour héberger vos fichiers de thème et éléments de WordPress.

Vos fichiers sont chargés plus rapidement puisqu'ils se trouvent sur un domaine différent. La limite du navigateur de 2 à 4 téléchargements simultanés de fichiers s'applique à chaque domaine .

Ainsi, si vos fichiers sont hébergés sur un domaine différent, un navigateur chargera ces fichiers par eux-mêmes, ce qui accélérera le chargement de votre site Web et réduira le stress de charge sur votre domaine et votre hôte.

Un autre avantage est que si vous utilisez un CDN majeur, ils auront des serveurs répartis dans le monde entier qui détecteront ensuite d'où vient votre visiteur et lui serviront ensuite vos fichiers à partir du serveur le plus proche de leur réseau.

Le bon serveur pour votre site web

Le serveur hébergeant le site Web doit être situé à proximité du public cible. Donc, si un site Web est destiné au marché allemand, il est préférable de trouver un serveur avec une société d'hébergement en Allemagne, ou du moins en Europe centrale.

Cela a un impact important pour vos visiteurs qui se chargent à partir d'un serveur beaucoup plus proche de l'endroit où ils se trouvent, ce qui accélère la navigation sur votre site Web.

Cela a également une influence sur le référencement, non seulement parce que le site se charge plus rapidement, mais aussi parce que cela ajoute à l'importance du site Web pour le public allemand et devrait donc également avoir un classement plus élevé.

L'effet réel en termes de référencement est discutable, mais si vous essayez d'améliorer les performances de vos sites Web, cela vaut la peine d'être pris en compte.

C'est bien connu des SEO, mais une fois qu'un site a été mis en place, il est rare de le voir migrer vers un autre serveur pour des raisons purement SEO. Cela vaut cependant la peine d'être gardé à l'esprit pour votre prochain projet.

Correction des erreurs 404

Vous devriez vérifier régulièrement votre site Web pour vous assurer qu'il n'y a pas de pages 404 - introuvables de toute façon. La réduction des mauvais liens sur votre site Web peut réduire la charge du serveur et offrira une meilleure expérience utilisateur. Non seulement des liens et des pages peuvent disparaître, mais parfois une faute de frappe ou un autre type d'erreur peut entraîner un contenu introuvable sur votre site Web.

Conseil : Découvrez ce morceau de code pour rediriger automatiquement les pages non trouvées en 301.

[boîte]
Cette page est loin d'être terminée et ne couvre pas encore tous les détails de l'optimisation de WordPress. L'objectif est de créer une ressource de trucs et astuces pour tirer le meilleur parti de votre site WordPress.

Certaines ou la plupart des astuces seront difficiles à mettre en œuvre à moins que vous ne soyez un développeur, mais chacune d'entre elles rendra votre site WordPress plus rapide.
[/boîte]

La liste de contrôle

Ceci est la liste de contrôle, veuillez noter que chaque site Web et projet est différent. Toutes les étapes ne peuvent pas être utilisées sur tous les sites Web.