Optimiser WordPress : guide complet pour améliorer vitesse, SEO et performances

Dans ce tutoriel, je vous propose une compilation d’astuces pour optimiser WordPress, issues de mon expérience sur Quick-Tutoriel, afin d’améliorer la visibilité de votre site tout en vous donnant des conseils concrets pour mieux optimiser WordPress au quotidien et tirer pleinement parti de votre CMS. Simple et efficace.

Compresser vos images WordPress et les transformer en WebP

Un site web agréable à consulter et avant tout un site web qui se charge vite. Cependant nous mettons de plus en plus d’illustrations dans nos articles et cela alourdie les pages web malgré l’utilisation de formats optimisés comme JPEG, PNG ou bien encore Webp.

Si vous souhaité gagner 50% de poids sur vos photos, je vous conseille d’utiliser l’excellent plugin Imagify .

Son installation est classique et se fait via le gestionnaire d’extension de WordPress en 1 minute vous pourrez :

Il existe une version free avec un quota de 25 Mo par mois et une version payante à partir de 4,99€ par mois pour 1 Go d’image. Personnellement pour un blog personnel la version free peut suffir. Par contre ils ont eu la bonne idée de faire un one time plan à partir de 9,99€ pour 1 Go soit environ 10000 images. Le paiement s’effectue en une seule fois pour optimiser vos images existantes.

Les paramètres sont peux nombreux. Voici ma configuration.

Partager un article en brouillon

Si vous écrivez des articles pour d’autres personnes et que vous souhaitez leurs présenter votre travail vous devez passer soit par un fichier Word ou PDF. En effet WordPress ne peut pas partager un brouillon.

Heureusement les plugins existent et cela va vous rendre bien des services. Voici un plugin que j’utilise depuis pas de temps pour faire valider mes articles.

Il s’agit de Public Post Preview . Ce plugin très léger et très simple génère un lien temporaire de 2 jours.

Son utilisation est très simple :

Le lien de prévisualisation reste en ligne pendant 48 heures.  Après 48 heures, le lien expire et vous devez copier et partager un nouveau lien qui est automatiquement généré au même endroit sur le module de publication.

Si vous souhaitez augmenter la durée de prévisualisation de l’article, Il suffit de d’ajouter au fichier functions.php de votre thème le code ci-dessous (ici le lien est valable 7 jours) : le seul petit défaut que je lui trouve c’est que nous n’avons pas la possibilité de modifier ou mettre des annotations dans le brouillon.

add_filter( 'ppp_nonce_life', 'my_nonce_life' );
function my_nonce_life() {
  return 60 * 60 * 24 * 7; // 7 jours
}

Créer un formulaire simple avec anti-spam avec Contact Form

Contact Form est une des extensions gratuites les plus utilisé pour créer un formulaire. Simple, pratique, il faut lui associer quelques plugins avec quelques retouches CSS et vous disposerez de formulaire pro pour pas un rond. Je me suis largement inspiré d’un très bon site qui vous explique plus en détail la mise en place d’un formulaire avec Contact Form 7  notamment si vous souhaitez rajouter des éléments (case à cocher, liste déroulante, …) dans votre formulaire

Pour arriver à créer de beaux formulaires vous aurez besoin de ces plugins :

Vous disposez maintenant d’un nouveau menu pour créer vos formulaires. Supprimer le formulaire de présentation et cliquer sur Ajouter.

Si vous devez utiliser plusieurs formulaires sur votre blog, le nommage est important. Par exemple ici pour ma page de contact, je vais l’appeler Formulaire Page de Contact.

J’utilise deux colonnes dans mon formulaire pour optimiser l’espace. Pour cela vous devez rajouter le code ci-dessous dans Apparence -> Personnaliser -> Materiel Design Formulaires -> Css Personnalisé.

#responsive-form{
  max-width:600px /* Tu peux modifier la largeur du formulaire ici*/;
  margin:0 auto;
  width:100%;
}
.form-row{
  width: 100%;
}
.column-half, .column-full{
  float: left;
  position: relative;
  padding: 0.3em;
  width:100%;
  -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*Instructions pour le responsive*/
@media only screen and (min-width: 48em) {
  .column-half{
  width: 50%;
}
}

Voici le code mon formulaire de contact :

[md-form spacing="tight"] 
<div id="responsive-form" class="clearfix">
  <div class="form-row">
    <div class="column-half">[md-text label="Nom" outlined="yes"][text* your-name akismet:author][/md-text]</div>
    <div class="column-half">[md-text label="E-mail" outlined="yes"][email* your-email akismet:author_email][/md-text]</div>
  </div>
  <div class="form-row">
    <div class="column-full">[md-text label="Sujet" outlined="yes"][text* your-subject][/md-text]</div>
  </div>
  <div class="form-row">
    <div class="column-full">[md-textarea label="Votre message"][textarea* your-message][/md-textarea]</div>
  </div>
  <div class="form-row">
    <div class="column-half">[md-quiz label="" outlined="yes" help="Cette question protège du spam"][quiz quiz-1234 "Que font 7+2 ?|9"][/md-quiz]</div>
    <div class="column-half">[md-accept label=""][acceptance optional] J'accepte que mon adresse e-mail soit stockée [/acceptance][/md-accept]</div>
  </div>
  <div class="form-row">
    <div class="column-full">[md-submit][submit "J'envoie le message"][/md-submit]</div>
  </div>
</div>
[/md-form]

N’oubliez pas de paramétrer l’onglet E-mail du formulaire, avec votre mail de destination pour la réception des formulaires. Vous pourrez paramétrer d’autres champs comme l’Objet, le Corps, …

Ce formulaire est ultra-simple mais très pratique et très robuste avec son système anti-spam. Juste ce qu’il me faut pour mon blog.

Ne pas indexer des articles ou des pages dans WordPress

Il arrive parfais que le fichier robots.txt de WordPress ne bloque pas correctement l’indexation de certaines pages ou articles. La faute au crawler qui ne respecte pas toujours les consignes. Pour être sure qu’une page ou un article ne sera pas indexer dans les moteurs de recherche, je vous conseille l’utilisation du plugin Rank Math SEO.

Pour dire aux moteurs de recherche de ne pas indexer un article ou une page, dans Rank Math SEO, il suffit d’aller dans l’onglet Advanced

Ensuite c’est très simple, une fois installé, vous aurez des nouvelles options qui apparaitront dans la page et vos articles et qu’il suffira d’activer ou désactiver en fonction des besoins. Par défaut l’option index est activé et laisse votre article s’indexer tranquillement dans les moteur de recherche.

Vous pouvez vérifier que la page soit bien en No index, après avoir enregistré les modifications. Utiliser Chrome en mode Navigation Privée, puis afficher la page qui est censé ne plus être indexée et grâce au Outils du Développeur (Afficher -> Options pour les développeurs -> Outils de développement) , vérifier la ligne ci-dessous :

<meta name="robots" content="follow, noindex">

Il doit être indiqué la directive noindex.

Par contre, si votre thème utilise des pages non-html, comme par exemple mon thème pour afficher des pages aléatoirement, vous n’avez pas le choix vous devez utiliser le fichier robots.txt (qui je vous le rappelle doit être créé à la racine de votre blog).

Pour modifier le fichier robots.txt depuis WordPress, nous allons toujours utiliser le plugin Rank Math SEO.

Vous devez aller dans Rank Math -> Réglages généraux -> modifier le robots.txt, faites vos modifications puis cliquer sur Enregistrer les modifications.