Optimiser WordPress : Le guide 100% sans plugin

Vous avez un site WordPress lent et vous souhaitez optimiser WordPress efficacement ? Vous êtes au bon endroit ! Dans cet article vous apprendrez à améliorer la vitesse de chargement de votre site WordPress sans utiliser le moindre plugin afin d’offrir à vos visiteurs une expérience agréable, tout en améliorant le positionnement sur Google (SEO).

Et pour vous aider à avancer à votre rythme, chaque section de ce guide est accompagnée d’un indicateur de difficulté afin que vous sachiez dès le départ dans quoi vous vous engagez.

Que vous soyez débutant curieux ou développeur un peu plus aguerri, ces conseils vous permettront d’optimiser wordpress, de rendre votre site plus rapide, plus léger, et surtout plus maîtrisé.

Veuillez effectuer une sauvegarde de votre site et d’utiliser un thème enfant avant de faire une quelconque modification.

1. Pourquoi éviter les plugins pour optimiser WordPress ?

Les plugins sont des outils pratiques qui permettent d’ajouter des fonctionnalités à votre site WordPress en quelques clics. Pourtant, lorsqu’il s’agit de performance, ils peuvent rapidement devenir un handicap. Chaque plugin supplémentaire peut générer du code inutile, charger des scripts externes, charger des fonctionnalités inutilisées et alourdir considérablement le temps de chargement. Certains sont mal codés, d’autres entrent en conflit avec votre thème ou vos plugins existantes.

Quant à l’optimisation, le fait de recourir à une solution sans plugin vous permet d’avoir plus de contrôle, de flexibilité, de compatibilité, d’avoir du code propre et de gagner davantage de performances contrairement aux plugins d’optimisation comme WP Rocket, Autoptimize, etc.

En optant pour une optimisation manuelle, vous apprenez également à mieux comprendre le fonctionnement interne de WordPress, ce qui vous rend plus autonome et capable d’anticiper les problèmes.

Saviez-vous que les images représentent parfois plus de la moitié du poids d’une page ? Si elles ne sont pas optimisées, elles ralentissent le chargement de la page, surtout sur mobile ou si le visiteur dispose d’une connexion lente. Heureusement, il suffit de quelques réflexes pour alléger tout ça et sans plugin.

Lorsqu’on téléverse une image brute sortie d’un appareil photo ou d’un logiciel de design, elle peut facilement peser plusieurs mégaoctets. Or, même en haute définition, une image n’a pas besoin d’autant de détails pour s’afficher correctement sur le web.

En quoi est-ce un problème ? Eh bien qui dit « fichiers trop lourds » dit « augmentation du temps de chargement de la page ». Donc votre page prendra plus de temps avec des images non optimisés et cela pénalise l’expérience utilisateur, et fait chuter votre score sur PageSpeed ou les Core Web Vitals. Par conséquent c’est le SEO de votre site qui prend cher. Avant de téléverser une image il faudra donc faire une compression d’image.

La compression d’image permet tout simplement de réduire le poids de l’image. Il existe deux types de compression :

• La compression avec perte de qualité (lossy) : Réduit significativement le poids de l’image, mais avec une légère perte de qualité, très souvent imperceptible.
• La compression sans perte de qualité (lossless) : Conserve la qualité d’origine, mais la réduction du poids de l’image est moins efficace.

L’idée de combiner plusieurs fichiers JavaScript ou CSS en un seul fichier, ainsi que de les minifier, est une étape à ne pas négliger pour améliorer la vitesse de votre site WordPress.

Pourquoi ? Parce que lorsque vous ouvrez une page web, votre navigateur traite les fichiers à charger un par un. Donc, plus vous avez de fichiers, plus il y a de requêtes à faire. En combinant plusieurs fichiers en un seul, vous réduisez le nombre de requêtes HTTP, ce qui accélère considérablement le chargement.

Nous allons pousser le délire plus loin en minifiant ces fichiers. Cela signifie supprimer tout ce qui est inutile au fonctionnement du code : les espaces, les retours à la ligne et les commentaires. Ainsi nous aurons des fichiers plus légers, donc plus rapides à charger.

⚠️ Attention ! Combiner plusieurs fichiers peuvent casser certaines fonctionnalités de votre site wordpress. Manipulez les fichiers avec précaution et n’oublie pas de sauvegarder ton site avant tout changement.

Les étapes pour combiner et minifier manuellement

Identifier les fichiers à combiner

Faites une liste des fichiers CSS et JS qui sont chargés depuis votre thème. Pour cela, regardez dans le functions.php, ou via l’inspecteur de votre navigateur (Network > CSS/JS).

Créer un fichier combiné

Copiez le contenu des fichiers dans un seul fichier.
Exemple : style-combined.css pour le CSS, scripts-combined.js pour le JS.

Minifier le contenu

Utilisez des outils en ligne pour minifier votre fichier CSS et JS comme : CSS Minifier et Javascript Minifier.

Remplacer les anciens appels

Dans le fichier functions.php, désactivez les anciens fichiers avec wp_dequeue_style() et wp_dequeue_script(), puis chargez les fichiers combinés minifiés :

function load_combined_assets() {
  // CSS
  wp_dequeue_style('ancien-style');
  wp_enqueue_style('style-combine', get_stylesheet_directory_uri() . '/assets/css/style-combined.min.css', [], '1.0');

  // JS
  wp_dequeue_script('ancien-script');
  wp_enqueue_script('script-combine', get_stylesheet_directory_uri() . '/assets/js/scripts-combined.min.js', [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_combined_assets', 100);

Attention : ne combinez pas tout

Ne combinez pas les scripts critiques qui dépendent d’un chargement séparé, comme jQuery (s’il est utilisé via CDN ou en async/defer). Combinez uniquement ceux qui n’ont pas de dépendances complexes.

Lorsqu’un visiteur arrive sur votre site, le navigateur télécharge et exécute l’ensemble des fichiers nécessaires à l’affichage de la page : HTML, CSS, JavaScript, images, polices, etc. Le problème, c’est que certains de ces fichiers bloquent l’affichage, ce qui ralentit la perception de vitesse du site et peut entraîner un mauvais score dans Google PageSpeed Insights ou les Core Web Vitals.

Pour améliorer les performances, il faut donc reprioriser le chargement des ressources, en différant ce qui n’est pas critique, en asynchronisant ce qui le peut et en chargeant les images uniquement quand elles sont visibles.

Ce processus s’appuie sur trois piliers :

• Le différé (defer) : attend que le HTML soit entièrement analysé avant d’exécuter le script.
• L’asynchrone (async) : charge et exécute le script indépendamment du reste de la page.
• Le lazy loading (loading="lazy") : ne charge les images qu’au moment où elles sont sur le point d’apparaître à l’écran.

Ces techniques sont essentielles pour améliorer l’expérience utilisateur, économiser de la bande passante et passer les tests de performance avec succès, donc essentiel pour optimiser wordpress.

Différer les fichiers JavaScript

Les scripts JavaScript qui ne sont pas critiques pour le rendu initial doivent être chargés en différé. Cela évite de bloquer l’affichage pendant leur exécution.

Dans votre thème enfant, utilisez ce type de fonction :

function defer_non_critical_js($tag, $handle, $src) {
  // Liste des scripts à différer
  $scripts_to_defer = ['mon-script', 'autre-script'];
  if (in_array($handle, $scripts_to_defer)) {
    return '<script src="' . $src . '" defer></script>';
  }
  return $tag;
}
add_filter('script_loader_tag', 'defer_non_critical_js', 10, 3);

Remplacez 'mon-script' par les identifiants des scripts que vous voulez différer.

Utiliser async avec prudence

L’attribut async permet de charger les scripts en parallèle sans attendre qu’ils soient terminés pour continuer le rendu. Attention : cela peut causer des erreurs si le script dépend d’un autre.

À réserver aux scripts indépendants.

Précharger les ressources importantes (preload)

Vous pouvez indiquer au navigateur quelles ressources doivent être préchargées (polices, images critiques, CSS essentiel) pour gagner en temps de rendu :

<link rel= »preload » href= »/wp-content/themes/votre-theme/css/important.css » as= »style »> <link rel= »preload » href= »/wp-content/themes/votre-theme/js/important.js » as= »script »>

<link rel="preload" href="/wp-content/themes/votre-theme/css/important.css" as="style">
<link rel="preload" href="/wp-content/themes/votre-theme/js/important.js" as="script">

À insérer dans le <head> de votre thème (header.php).

Conseil important : n’insérez du CSS ou du JavaScript que si vous en avez réellement besoin sur la page. Ne surchargez pas inutilement votre site avec des fichiers qui ne servent pas à chaque chargement.

Et surtout : ne placez jamais vos fichiers JavaScript dans le <head> à moins qu’ils soient absolument critiques (comme certains scripts d’A/B testing ou de suivi analytics).

Placez vos balises <script> juste avant la fermeture de la balise </body>, ou utilisez les attributs defer ou async pour éviter de bloquer le rendu de la page.
Cela garantit une meilleure performance et un affichage plus rapide pour vos visiteurs.

Charger les images avec loading="lazy"

WordPress active le lazy loading (chargement paresseux) par défaut pour les images, mais vous pouvez le vérifier ou l’ajouter manuellement si nécessaire :

<img src="image.jpg" alt="exemple" loading="lazy">

Cela permet de ne charger les images que lorsqu’elles deviennent visibles à l’écran, ce qui réduit drastiquement le poids initial de la page.

WordPress ajoute par défaut des fonctionnalités qui ne sont pas forcément utiles à tous les sites, notamment :

• Le support des emojis : même si vous ne les utilisez pas, WordPress charge des scripts et des styles pour les afficher correctement sur tous les navigateurs.
• Les embeds automatiques (oEmbed) : ces fonctions permettent d’intégrer automatiquement des vidéos YouTube, des tweets, etc., simplement en collant une URL dans un article. Cela ajoute des scripts et des liens inutiles pour beaucoup de sites simples.
• Les flux RSS : WordPress génère des liens RSS automatiquement, même si vous ne les utilisez pas.
• La version WordPress dans le code source : elle est affichée dans une balise meta et peut donner des infos aux hackers.

Ces fonctions, bien que pratiques dans certains cas, alourdissent inutilement le code HTML et les requêtes HTTP, ce qui nuit à la vitesse de chargement. Pour un site optimisé, mieux vaut les désactiver si vous ne les utilisez pas.

Ajoutez ce code dans le fichier functions.php de votre thème enfant :

// Désactiver les emojis
remove_action('wp_head', 'print_emoji_detection_script', 7); // Supprime le script dans le <head>
remove_action('wp_print_styles', 'print_emoji_styles'); // Supprime les styles d'emoji
remove_filter('the_content_feed', 'wp_staticize_emoji'); // Supprime les emojis dans les flux
remove_filter('comment_text_rss', 'wp_staticize_emoji'); // Supprime les emojis dans les commentaires RSS
remove_filter('wp_mail', 'wp_staticize_emoji_for_email'); // Supprime les emojis dans les emails

// Désactiver les embeds automatiques (oEmbed)
remove_action('wp_head', 'wp_oembed_add_discovery_links'); // Supprime les balises <link> oEmbed
remove_action('wp_head', 'wp_oembed_add_host_js'); // Supprime le JS pour l'oEmbed
remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10); // Supprime le filtrage oEmbed
remove_action('rest_api_init', 'wp_oembed_register_route'); // Supprime l'endpoint REST pour oEmbed

// Supprimer les liens RSS
remove_action('wp_head', 'feed_links', 2); // Supprime les flux principaux
remove_action('wp_head', 'feed_links_extra', 3); // Supprime les flux des commentaires

// Supprimer la version WordPress dans le <head>
remove_action('wp_head', 'wp_generator');

// Supprimer la version WordPress des fichiers CSS/JS
function remove_wp_version_from_scripts($src) {
    return remove_query_arg('ver', $src); // Supprime le ?ver= de l'URL
}
add_filter('script_loader_src', 'remove_wp_version_from_scripts', 15, 1);
add_filter('style_loader_src', 'remove_wp_version_from_scripts', 15, 1);

6. FAQ

7. Conclusion

Optimiser un site WordPress sans plugin demande un peu plus d’effort au départ, mais les bénéfices sont durables : performance accrue, meilleure sécurité, indépendance vis-à-vis des plugins, et un meilleur référencement naturel. En suivant les étapes de ce guide, vous améliorez la performance de votre site, propre et robuste, sans alourdir votre installation. C’est l’approche idéale pour ceux qui veulent un site professionnel, fiable, et orienté performance. Si vous souhaitez tout de même une solution impliquant un plugin pour optimiser wordpress, découvrez alors les 5 meilleurs plugins pour optimiser wordpress.