Diverses astuces pour l’optimisation d’un WordPress

1/52/53/54/55/5 (Pas encore de note)
Loading...
D

Bonjour à tous,

Aujourd’hui, petit article pour voir comment optimiser son blog WordPress, cela n’a pas vocation à être une bible, mais plutôt un recueil d’astuces diverses comme le fait le copain Seb : https://blog.seboss666.info/?s=astuces

 

Hébergement

Premier choix crucial, un bon hébergeur.

Si le site est bien optimisé et que vous faites très peu de visites par jour (entre 500 et 5000 à la louche) et bien n’importe quel mutualisé chez un hébergeur sérieux devrait convenir. Au travail nous utilisons principalement Infomaniak et Swisscenter (avec une préférence pour Swisscenter). En France, Yulpa et o2switch reviennent souvent pour l’hébergement mutualisé de bonne qualité.

 

Si vous êtes vraiment à cheval sur les performances et / ou la sécurité, tournez-vous au minimum vers un VPS, pour cela je vous conseillerais Hetzner ou Infomaniak.

Ensuite, sur le VPS même, il faudra partir sur un Debian avec nginx, php-fpm en static (faut que j’en fasse un article) et mariadb. Un cache redis peut-être une bonne affaire également. L’obligation, c’est des disques en SSD (NVME idéalement).

Mon avis personnel, c’est qu’il n’est pas nécessaire de partir dans des délires de cluster pour du simple wordpress, pas avant que vous ayez un million de visites par jour. Si vous voulez du HA, faites du clustering pour le vps qui héberge votre site plutôt.

 


Thème

Utilisez un thème connu, activement maintenu et surtout qui sera optimisé pour votre utilisation (blog, photo …).

Il faut fuir dans la mesure du possible les thèmes généralistes. Prenons l’exemple d’Avada (que j’ai énormément utilisé, donc je visualise clairement tous les problèmes qu’il m’a apporté, tout comme Divi).

Comment voulez-vous optimiser votre site quand le thème fait la moitié du core wordpress en termes de taille ? Et qui dispose du même nombre de fichiers ?

 

En comparaison, voici le thème que j’utilise actuellement :

Le résultat ? Pas de plugin de cache, pas d’optimisation spéciale. Le plugin intègre déjà une option de minification qui marche relativement bien et héberge tout ce dont il a besoin sans encore faire appel à des CDN à l’inverse de Avada ou Divi.

Plus de fichiers, donc plus de code = plus de surface d’attaque et de sources de bogues.

 

Polices locales

J’en ai déjà parlé dans l’article sur la refonte du blog : https://www.abyssproject.net/2020/04/un-nouveau-design-pour-le-blog/

Dans la mesure du possible, utilisez des polices disponibles de base sur tous les OS, vous pouvez utiliser ce fabuleux outil pour cela : https://www.cssfontstack.com/

Sinon, si vous avez une police qui vous plait chez Google Web Fonts par exemple (vous avez le droit, j’ai utilisé la police “Ubuntu” pendant 7 ans sur ce blog) alors rapatriez là en local et hébergez-la sur votre wordpress directement. N’oubliez pas les headers de cache dessus.


Extensions

Comme pour les thèmes, moins de plugins, moins de code, moins de surface d’attaque et de bogues donc :

  • Virez les plugins de cache
  • Virez les plugins pour la sécurité de WordPress (faites la sécurité au niveau du serveur, avec des règles NGINX et / ou un WAF comme Naxsi)
  • Si vous voulez garder un plugin de sécurité, gardez Akismet et un Advanced Automatic Updates, rien d’autre.

 

Les plugins de caches wordpress, c’est des bogues possibles. Faites un site optimisé de base avec minification de ce qui est nécessaire, virez les query strings sur vos ressources et faites du cache au niveau des headers NGINX (on parlera à la fin de l’article de la suppression des Query Strings).

Ensuite, configurez l’optimisation OPcache de PHP correctement et faites pareil pour le cache MariaDB / MySQL. Vous pourrez éventuellement faire du cache Redis en plus lorsque vous aurez du traffic très élevé.

 

Les commentaires

Les commentaires WordPress ne vous conviennent pas ?

N’utilisez pas Disqus et préférez-lui WpDiscuz, c’est auto hébergé et personnalisable.

Vous n’aimez pas les polices WpDiscuz ? Allez dans la personnalisation du style et ajoutez du CSS personnalisé avec les polices de votre blog par exemple :

.comments-area{width:auto;}
#wpcomm .wc-comment-author a {
font-weight: bold !important;
font-size: 15px !important;
font-family: Verdana, Geneva, sans-serif;
}
#wpcomm .wc-comment-author {
font-weight: bold !important;
font-size: 15px !important;
font-family: Verdana, Geneva, sans-serif;
}

#wpcomm .wc-reply .wc-comment-right .wc-comment-text, #wpcomm .wc-reply .wc-comment-right .wc-comment-text *{
font-size: 14px !important;
font-family: Verdana, Geneva, sans-serif;
}

#wpcomm .wc-comment-right .wc-comment-text p{
   font-family: Verdana, Geneva, sans-serif;
}

input, input[type=search], textarea {
    font-family: Verdana, Geneva, sans-serif;
}

 

Jetpack

Vous voulez utiliser Jetpack pour une seule de ses fonctionnalités ?

Par exemple je n’utilise Jetpack que pour le partage automatique vers les réseaux sociaux, rien d’autre, je n’ai donc pas besoin des stats et de toutes les autres fonctions. Cela sera aussi votre cas si vous avez un autre outil de suivi du trafic.

Ouvrez la configuration de Jetpack et allez sur Modules tout en bas, ici n’activez que ce dont vous avez besoin (Publicize chez moi par exemple) :

 


Matomo

Pour le suivi des statistiques, préférez un Matomo auto-hébergé à Google Analytics ou Jetpack si possible.

Pour un trafic faible à moyen, préférez le même VPS, sinon hébergez-le sur un autre serveur. Vous contrôlez toutes les données, vous pouvez respecter le RGPD sans soucis et vous réduisez les appels externes, voici l’exemple de ce blog :

 

Query Strings, appels vers WordPress et Gutenberg

L’idéal ici est d’avoir un thème enfant car on va modifier le fichier des functions.php du wordpress.

Première on va virer toutes les Query Strings, ce sont les numéros de versions derrières les fichiers .js par exemple qui empêche le cache : jquery.js?v.1.5

/**
 * Removes query string
 */

function _remove_query_strings_1( $src ){       
        $rqs = explode( '?ver', $src );
        return $rqs[0];
}
                if ( is_admin() ) {
// Remove query strings from static resources disabled in admin
}

                else {
add_filter( 'script_loader_src', '_remove_query_strings_1', 15, 1 );
add_filter( 'style_loader_src', '_remove_query_strings_1', 15, 1 );
}

function _remove_query_strings_2( $src ){
        $rqs = explode( '&ver', $src );
        return $rqs[0];
}
                if ( is_admin() ) {
// Remove query strings from static resources disabled in admin
}

                else {
add_filter( 'script_loader_src', '_remove_query_strings_2', 15, 1 );
add_filter( 'style_loader_src', '_remove_query_strings_2', 15, 1 );
}

 

Maintenant, on va virer les appels vers WordPress.com / .org qui se font via les emoticones :

/**
 * Disable the emoji's
 */
function disable_emojis() {
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
 add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
 add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );

/**
 * Filter function used to remove the tinymce emoji plugin.
 * 
 * @param array $plugins 
 * @return array Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
 if ( is_array( $plugins ) ) {
 return array_diff( $plugins, array( 'wpemoji' ) );
 } else {
 return array();
 }
}

/**
 * Remove emoji CDN hostname from DNS prefetching hints.
 *
 * @param array $urls URLs to print for resource hints.
 * @param string $relation_type The relation type the URLs are printed for.
 * @return array Difference betwen the two arrays.
 */
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
 if ( 'dns-prefetch' == $relation_type ) {
 /** This filter is documented in wp-includes/formatting.php */
 $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );

$urls = array_diff( $urls, array( $emoji_svg_url ) );
 }

return $urls;
}

 

Pour finir, on désactive Gutenberg :

/* Disable Gutenberg */
add_filter('use_block_editor_for_post', '__return_false', 10);

 

À la fin, vous n’avez plus d’appels vers l’externe, vous pouvez correctement faire du cache au niveau client et vous avez l’éditeur classique qui fonctionne parfaitement bien, proposez vos astuces dans les commentaires 🙂

A propos de l'auteur

Nicolas Simond
Nicolas Simond

Administrateur Systèmes et Réseaux et guitariste hard rock et metal à mes heures perdues.
Je suis le créateur et l'unique rédacteur d'Abyss Project, c'est ici que je note la plupart de mes procédures et quelques divagations.

Si vous l'article vous a aidé, pensez à me payer un café :)

guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

10 Commentaires
Plus récents
Plus anciens Populaires
Inline Feedbacks
View all comments
Seboss666
5 mois plus tôt

Cadeau supplémentaire sur un WordPress qui n’a pas d’autres choix que de multiplier certains plugins pour ses usages, l’index autoload sur la base de données :

create index autoload on wp_options(autoload, option_name);


Valable pour tous les wordpress avant 5.3.x, cette version ajoute l’index sur la table donc pas besoin de le dupliquer 🙂

Last edited 5 mois plus tôt by Seboss666
Seboss666
5 mois plus tôt

Hello,
 
Merci pour la mention 🙂
Sinon, par rapport à Gutemberg et sa désactivation, j’ai une question : sur quelle branche de wordpress 5.x tu bosses ? Parce que la suppression de l’éditeur classique est planifiée, donc faudra vraiment se pencher sur une réelle alternative (édition en local avec markdown et push via wp-cli ?). Déjà mon dernier essai de bascule vers WordPress 5 s’est soldé par un éditeur qui finit en page blanche donc si je peux avoir une autre solution ça me va 😀

Martin
Martin
5 mois plus tôt

Merci pour les conseils, c’est top ! Tu as parlé du cache Nginx dont tu reviendrai en fin d’article mais je n’ai pas vu ce passage. As-tu plus d’infos ?

Buzut
Buzut
5 mois plus tôt

Virer Gutenberg, s’il n’est pas utilisé. Sinon ça va tout casser.

Et le mieux est encore de faire son propre thème sur mesure, ça permet par exemple aussi de virer jquery qui ne sert à rien.

En revanche, un bon plugin de cache me semble quand même recommandé. Même si tu peux mettre de l’opc cache, servir du html pré-génère c’est quand même autrement plus rapide.

Guillaume
Guillaume
5 mois plus tôt

Bonjour,
je garde cet article au chaud. Merci beaucoup.
S’il me vient des astuces, je repasse ici.
 
Guillaume, linuxien, bsd,et bassiste.

Florent
Florent
5 mois plus tôt

Merci pour tous ses conseils.