Optimiser et sécuriser WordPress

Je ne pouvais pas faire une série sur la performance web sans faire un article dédié à WordPress. Même si les conseils déjà abordés dans les 2 précédents articles sur la vitesse de chargement sont valables de manière générale et aussi pour WordPress, ce CMS possède quelques spécificités que nous allons aborder afin d’optimiser et sécuriser wordpress. C’est le CMS le plus utilisé dans le monde, surtout pour des blogs mais pas que. Il est possible de faire un vrai site, des sites e-commerce, des forums ou même d’en faire un réseau social. Ceci dit, pour des sites plus spécifiques ou de plus grande envergure, on préférera d’autres plateformes comme drupal ou d’autres frameworks afin d’avoir plus de souplesse et de contrôle sur son site. De plus, tenir un blog, créer régulièrement du contenu est une stratégie inbound essentielle.

Les bonnes pratiques

Les bons plugins

charge mémoire des plugins avec p3 plugin profiler

Première bonne pratique, méfiez vous des plugins. Choisissez les bien et en petit nombre. Même si certains nous facilitent vraiment la vie et sont bien pratiques, vaux mieux éviter la pluginite aigue sous peine de:

• Ralentir son site, on l’a vu, plus de plugins signifie plus de requêtes et donc ralentissement.
• Perdre du temps avec des bugs, vérifiez que les extensions sont régulièrement mis à jour et évitez les plugins qui ne sont plus maintenus depuis des mois
• Créer des failles de sécurité, les développeurs de plugins sous plus ou moins respectueux des bonnes pratiques en matière de sécurité.
• Détourner l’attention du visiteur, pensez expérience utilisateur, est ce que ce plugin est vraiment indispensable ?

Un plugin, P3 plugin profiler , permet de voir la place occupée en mémoire par les plugins installés. On va le voir dans la  suite de l’article, beaucoup de choses sont possibles sans recours aux plugins.

Le bon thème

Choisir le bon thème thème wordpress est une étape essentielle afin d’avoir un site performant mais aussi en fonction des critères suivants:

• Opter pour un design minimaliste, avec les fonctionnalités dont vous avez besoin et pas trop graphique.
• Un thème optimisé SEO, c’est souvent un terme utilisé abusivement pour vendre, alors vérifiez en quoi il est optimisé SEO.
• Un thème responsive, tant qu’à faire autant opter pour un design qui s’adaptera autant sur mobile que sur ordinateur.
• Un thème récent, régulièrement mis à jour, premium, avec un support et développé par un développeur sérieux

Je vous conseille vivement d’opter pour un thème premium si vous avez un minimum d’ambition pour votre site / blog. Faites un petit tour sur themeforest pour trouver votre bonheur.

Faites les mises à jour

Mettre à jour la version de WordPress, votre thème et les plugins, vous permet , en général, une meilleure compatibilité entre les différents éléments du site, d’optimiser les temps de chargements, et de corriger des failles de sécurité. Je vous conseille néanmoins de ne pas faire de mises à jour automatiques sur vos extensions, afin de les tester et de voir ce qu’elles apportent. Par défaut, Depuis la version 3.7 de WordPress, seuls les mises jour mineures (versions à 3 chiffres n.n.n) et les traductions sont automatiquement mis à jour. Normalement, ces mises à jour automatiques ne comportent aucun risque, elles concernent en général la correction de bugs et/ou de failles de sécurité. Mais si vous avez eu déjà eu quelques déconvenues suite à ces mises à jour ou que vous ne faites pas une confiance aveugle à WordPress, vous pouvez désactiver complètement ces mises à jours en arrière plan, en ajoutant la ligne suivante à votre fichier wp-config.php:

define ('AUTOMATIC_UPDATER_DISABLED', true);

Pour en savoir sur les mises jour automatiques, rien de tel que jeter un oeil au codex de wordpress 

Externaliser les gros éléments

Externaliser les grosses infographies

On l’a déjà vu, les navigateurs ont une limite de chargement simultané d’éléments depuis un même domaine. Mais ces requêtes externes impliquent aussi un appel DNS qui n’est pas négligeable d’ou l’idée de réserver cette externalisation uniquement aux « gros » éléments. De plus, vous profiterez des gros serveurs de google, yahoo, ou autres pour servir rapidement vos gros fichiers:

• Flickr  pour les grandes images (ex: les infographies)
• Youtube pour les vidéos
• Polldaddy pour les sondages
• …

Pour aller plus loin, et si votre site reçoit beaucoup de trafic, il y a également la possibilité de passer par un CDN comme amazon cloudfront ou maxCDN. Pour en savoir plus sur la parallélisation des requêtes et les CDN, je vous invite à lire ce guide sur la performance web

Augmenter la mémoire de WordPress

WordPress alloue par défaut 40 Mo pour son fonctionnement mais vous pouvez augmenter cette valeur. Normalement, wordpress gère automatiquement l’allocation de cette mémoire et peux l’augmenter en cas de besoin jusqu’à 256 Mo si la configuration de votre serveur le permet. A ce sujet, je vous conseille de lire l’article sur l‘optimisation coté serveur afin d’augmenter la mémoire PHP au niveau du serveur. Pour vérifier l’utilisation actuelle de la mémoire par WordPress, vous pouvez installer sur votre serveur de test TPC memory usage qui vous donnera des informations sur la mémoire utilisée, la limite mémoire au niveau PHP et wordpress. Et pour augmenter la mémoire PHP sur wordpress, si les conditions sont réunies, ajoutez ce code au fichier wp-config.php:

define('WP_MEMORY_LIMIT', '128M');

Tester les performances

Que ce soit pour l’installation des plugins, les mises à jours ou les modifications manuelles, il est préférable de tester avant sur un site de test afin de s’assurer de la compatibilité et de l’impact sur les performances de votre site. Pour voir le nombre de requêtes SQL qui sont executées et le temps de chargement de la page, vous pouvez ajouter ce simple code dans le template de la page:

<?php echo get_num_queries();?> requetes en <?php timer_stop(1);?>secondes.

Vous pouvez aussi utiliser un outil en ligne comme dareboost ou un des outils pour tester les performances dont j’ai parlé ici sur creapulse.

Mettre en cache

plugin de cache w3 total cache

Le cache est une mémoire temporaire qui consiste à servir plus rapidement aux visiteurs et aux moteurs des pages ou des éléments qui sont souvent demandés. Sur WordPress, 2 solutions, soit activer simplement le cache sur le fichier de configuration de wordpress, le fameux wp-config.php, soit utilisé un plugin de cache. (ah oui il y a aussi les caches niveau serveur comme varnish)

Pré-requis: Activer le cache sur wp-config.php

Pour que les plugins de cache comme W3 total cache, WP file cache ou WP super cache fonctionnent, ajouter simplement cette ligne de code dans le wp-config.php :

define( 'WP_CACHE', true );

Utiliser un plugin de cache

Pour des sites plus ambitieux, l’utilisation d’un plugin de cache comme w3 total cache ou wp super cache sont recommandés. Ces deux plugins de cache sont les plus répandus, ils offrent plus d’options et peuvent se révéler plus efficaces lorsqu’ils sont bien paramétrés.  le plugin payant wp-rocket est encore plus efficace, mais c’est bien plus qu’un plugin de cache en réalité. Personnellement, j’utilise w3 total cache car je n’ai pas trouvé de soucis de compatibilité contrairement à wp super cache. Je n’utilise pas wp-rocket, bien qu’il soit très performant d’après les tests que j’ai pu lire, (voir le test de seomix) parce qu’il rentre en doublon avec modpagespeed, qui fera l’objet de mon prochain article dédié à la performance et qui est plus complet et plus performant encore. J’utilise donc w3 total cache uniquement avec les fonctions basiques activées: page cache, cache de base de données et cache objet. Pour la méthode de cache j’utilise memcached, plus efficace que l’accès disque standard (voir l‘installation de memcached). Je n’utilise pas les autres options car elles sont intégrées à modpagespeed qui optimise le site côté serveur, plus efficace que côté framework.

Optimiser les images

Image avant et après smushit

Les images sont souvent une source de ralentissement, surtout si elles ne sont pas optimisées. Il ne s’agit pas non plus de s’en passer ou de négliger leur qualité, elles sont bénéfiques pour l’expérience utilisateur et l’engagement social. Rappelons quelques basiques valables de manière générale:

• Charger les images à la bonne taille, ne pas les redimensionner dans wordpress mais avant de les envoyer.
• Choisir le bon format d’image pour avoir le meilleur rapport taille/qualité (GIF ou PNG8 pour les images simples, avec peu de couleurs; le JPG progressif pour les images complexes)

Optimiser les images automatiquement ou manuellement

Le plugin wp smush.it, encore un,  permet d’optimiser automatiquement les images lorsque vous les envoyer sur wordpress. J’ai testé, mais je n’ai pas été convaincu, l’optimisation est souvent minime ou alors avec une trop grosse perte de qualité. Ça peux être pratique pour rapidement optimiser toutes les images du site puisqu’il dispose d’une option « bulk » qui permet de compresser en masse toutes les images présentes. Mais je préfère largement utiliser un logiciel comme photoshop, qui permet de visualiser la taille et la qualité de l’image avant d’enregistrer et ainsi obtenir le meilleur compromis. Des outils gratuits comme pixlr (en ligne) ou paint.net (logiciel open source et local), peuvent aussi faire l’affaire. Pour de la compression de plusieurs images à la fois, je recommande RIOT (Radical Image Optimization Tool) un programme portable sur windows ou ce petit programme  compatible multi OS Shrink O Matic (pas testé) en AIR.

Prévenir le hotlinking

C’est quoi le hotlinking ? C’est lorsque qu’un autre site affiche une image (ou un autre élément) qui est hébergée sur votre serveur. A chaque fois qu’un visiteur visite la page du site qui « pique » votre image , l’image est servie depuis votre serveur, ce qui consomme votre bande passante plutôt que la leur. A force et en fonction des sites qui volent vos images, ça peux ralentir le temps de chargement de votre site, sans parler des droits sur les images. Il y a deux solutions en fait, soit vous interdisez tous les sites sauf le votre, soit vous interdisez uniquement certains sites identifiés comme de gros mangeurs de bande passante. La deuxième solution est la meilleure car avec les réseaux sociaux, les lecteurs de flux et autres agrégateurs de contenu, beaucoup de sites affichent vos images et vos vignettes, pas pour vous voler mais pour vous faire de la promotion. Ce serait dommage que vos images ne s’affichent pas sur facebook, google+ ou sur des lecteurs de flux comme feedly. Pour savoir quels sont les sites qui vous prennent beaucoup de bande passante sans rien vous apporter en retour en terme d’interactions sociales ou de retombées vers votre site, le mieux c’est d’analyser les logs de votre serveur web. Je l’ai déjà fait pour un client qui voulait savoir, entre autres, qui piquait ses images. Il y a aussi l’outil Tinyeye ou google images (cliquez sur l’appareil photo) pour rechercher ceux qui utilisent vos images, l’inconvénient c’est qu’il faut le faire image par image. Les deux solutions qui suivent consistent à modifier le fichier .htaccess afin de remplacer l’image volée par une image de votre choix hébergée sur un serveur d’images: Solution 1 (solution radicale)

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?votresite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?feeds2.feedburner.com/votrefluxrss [NC]
RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/imagedevotrechoix.jpg [L]

Cette règle empêche que votre site, google ou votre flux rss soient concernés par le hotlinking et ainsi afficher les images normalement. En revanche, toutes les autres urls qui appelleront vos images verront à la place cette image http://i.imgur.com/imagedevotrechoix.jpg . Solution 2 (la meilleure)

RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http(s)?://(www\.)?badsite\.com/ [NC]
RewriteCond %{HTTP_REFERER} ^http(s)?://(www\.)?badsite2\.com/ [NC]
RewriteCond %{HTTP_REFERER} ^http(s)?://(www\.)?blogspot\.com/ [NC]
RewriteCond %{HTTP_REFERER} ^http(s)?://(www\.)?livejournal\.com/ [NC]
RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/imagedevotrechoix.jpg [L]

Cette règle remplacera vos images pour badsite, badsite2, les sites blogspot et livejournal par l’image de votre choix . C’est moins restrictif, mais c’est aussi plus sûr. La solution 3, j’en parle pas mais ce serait d’identifier tous les bons sites à afficher et les déclarer explicitement comme dans la solution 1, mais ça risque de faire beaucoup et ce n’est pas idéal de trop charger son fichier .htaccess. Pour finir cette partie sur le hotlinking (ouf) qui ne concerne pas que WordPress d’ailleurs, vous pouvez aussi, idéalement et si possible, ajouter ces lignes en modifiant votre vhost , pour encore plus de performances.

Nettoyer la base de données

Optimiser la base de données de wordpress

Le coeur du contenu de wordpress se trouve dans sa base de données, il est donc important d’en prendre soin et de ne pas la surcharger afin de ne pas ralentir les accès à la base.

Les révisions d’articles

A chaque fois que vous faites une mise à jour d’un article sur WordPress, une révision est enregistrée en base de données afin que vous puissiez revenir à une version antérieure. Imaginez 10 révisions pour 100 articles, ça fait déjà 1000 enregistrements en BDD. Je n’ai jamais eu besoin de cette fonctionnalité, voici ce qu’il faut ajouter au fichier wp-config.php pour désactiver ou limiter le nombre de révisions enregistrées. Désactivez les révisions

define('WP_POST_REVISIONS', false);

Limiter les révisions

define('WP_POST_REVISIONS', 2);

Supprimer toutes les révisions

DELETE a,b,c
FROM wp_posts a
LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id)
LEFT JOIN wp_postmeta c ON (a.ID = c.post_id)
WHERE a.post_type = 'revision';

Cette requête sql supprimera définitivement toutes les révisions de vos articles. Faites une sauvegarde de votre base mysql et tapez la requête dans PHPmyAdmin par exemple.

Nettoyer la corbeille

On pense pas toujours à vider la corbeille, heureusement on peux programmer un vidage automatique de la corbeille en ajoutant  ces deux lignes au même fichier:

define( 'MEDIA_TRASH', true );
define( 'EMPTY_TRASH_DAYS', '7' );

Supprimer les rétroliens

Supprimer les retroliens de wordpress

Les rétroliens ou pingbacks sont des liens renvoyés en commentaires vers les sites qui vous citent. 90% du temps c’est du SPAM, car c’est le moyen le plus facile pour les spammeurs d’avoir des backlinks depuis votre site. Il y a bien-sûr la possibilité de modérer ces commentaires automatiques et d’un point de vue référencement faire des liens externes vers des sites de qualité et thématiques c’est une bonne chose. Malgré tout,  je vois plusieurs problèmes:

• Ce sont des enregistrements supplémentaires en base de données (perte de performance)
• Ça rajoute un extrait du contenu de la page liante (trackback), qui est souvent dupliqué ou partiellement dupliqué avec votre contenu
• Si non modéré, vous faites des liens potentiels vers des spammeurs, ce qui est néfaste pour votre voisinage de liens.
• Niveau utilisateur, ça vient polluer votre fil de commentaires

De plus, si comme moi, vous utilisez un autre système de commentaires que wordpress, raison de plus pour désactiver les rétroliens. 1/ Dans réglages / Discussion : Décochez « Autoriser les liens de notifications depuis les autres sites » (voir capture ci-desssus) 2/ Ca désactivera uniquement les pingbacks des futurs articles. Pour supprimer définitivement les rétroliens des articles existants. Ouvrez PHPmyadmin et collez la requête suivante:

UPDATE wp_posts SET ping_status='closed' WHERE post_status = 'publish' AND post_type = 'post';

UPDATE wp_posts SET ping_status='closed' WHERE post_status = 'publish' AND post_type = 'page';

Optimiser la base de données

C’est un peu comme pour un disque dur, les différents accès à la base de données, écriture, suppression,.. fragmentent la base. Pour optimiser la base, je vous recommande d’utiliser PHPmyadmin et sa fonction « optimize table ». Même sur serveur mutualisé, vous devriez avoir accès à PHPmyadmin ou équivalent, c’est le cas sur OVH ou online.net. Il y a bien des plugins qui font la même chose et même un peu plus, comme WP-DBManager mais je préfère éviter de rajouter un plugin de plus, et je ne fais pas confiance à un plugin qui accède pleinement à ce qui est le plus sensible sur wordpress.

Sécuriser WordPress

optimiser la sécurité de wordpress

On pense pas forcément sécurité lorsqu’il s’agit d’optimiser le SEO de wordpress ou d’un site en général. Pourtant, un site corrompu peux être catastrophique pour le référencement naturel d’un site. C’est pour ça que la première sécurité consiste à sauvegarder régulièrement son site et sa base de données. Les vulnérabilités se trouvent principalement au niveau du serveur ou de wordpress, l’idée est de rendre difficile le piratage de votre site par un hacker en comblant certaines failles de sécurité.

 Les bonnes pratiques de sécurité WordPress

• Supprimer l’utilisateur Admin, utilisez en un autre, c’est la première chose que teste les pirates
• N’utilisez pas le pseudo que vous utilisez en tant qu’auteur, un peu trop facile à trouver
• Trop de plugins ralentissent le site mais crée autant de failles de sécurité potentielles
• Mettre à jour wordpress, plugins, themes et serveur web pour ceux qui ont un serveur dédié
• Choisissez un mot de passe complexe (plus de 6 caractères, majuscules, chiffres)
• Utilisez SSH et SFTP lorsque vous vous connectez à votre site
• Supprimer le fichier readme.html se trouvant à la racine du site, il contient le numero de version de wordpress. Moins ils en savent, mieux c’est.

Les clefs d’authentification

Depuis wordpress 2.7, Les clefs d’authentification permettent une meilleur sécurité des informations stockées dans les cookies des utilisateurs. Générez les en allant sur le générateur de clef de wordpress et rentrez ces valeurs aléatoires dans votre fichier wp-config.php comme suit:

/* Clefs d'authentification uniques */
define( 'AUTH_KEY',         'votre clé aléatoire' );
define( 'SECURE_AUTH_KEY',  'votre clé aléatoire' );
define( 'LOGGED_IN_KEY',    'votre clé aléatoire' );
define( 'NONCE_KEY',        'votre clé aléatoire' );

Renommer le préfixe de base de données

Par défaut, les tables dans la base de wordpress commencent par wp_ . Les scripts des hackers s’attendent à rencontrer le préfixe par défaut. Le modifier permettra de compliquer leur « travail ». Il faut le faire logiquement à l’installation de WordPress. la valeur dans le fichier wp-config ressemble à ça:

$table_prefix  = 'wp_12514';

Pour le faire après installation, soit vous le faites à la main via phpmyadmin, soit plus simple vous pouvez utiliser un plugin comme db prefixe change (pas pour du multi-site) qui modifie le préfixe de base de données. Vous pouvez le désinstaller ensuite. Dans tous les cas, faites bien une sauvegarde avant car c’est une opération délicate.

Protéger votre espace de login

Une technique classique des hackers consiste à tenter plusieurs combinaisons (brute force) sur la page d’accès à l’administration de wordpress. Une solution simple est d’autoriser uniquement votre adresse IP à accéder à la page wp-login.php (nécéssite d’avoir une IP fixe). Ajoutez ces lignes au fichier .htaccess ou vhost:

<Files wp-login.php>
order deny,allow
Deny from all
Allow from xx.xxx.xxx.xxx
</Files>

Remplacer les xx par votre adresse IP, que vous pouvez trouver sur vpnmentor (on avec un Ipconfig). Il y a aussi des plugins qui permettent de restreindre le nombre de tentatives d’accès comme Limit login attempts mais ils ne vous protégeront pas si les hackers utilisent des proxys comme c’est souvent le cas. Ça ne sert à rien de les installer si vous utilisez l’astuce ci-dessus.

Cacher la signature serveur

Par défaut votre serveur affiche publiquement les informations concernant sa version, le système utilisé,… ces informations peuvent être exploitées par les hackers. Heureusement on peux désactiver cette signature: Modifier le fichier .htaccess

 # désactiver la signature serveur
 ServerSignature Off

Ou, idéalement, modifier la conf du vhost (httpd.conf ou apache2.conf)

ServerSignature Off
ServerTokens Prod

Ajoutez ces lignes tout à la fin du fichier.

Cacher la version de WordPress

Dans la même lignée, et pour cacher des informations aux pirates, il est bon aussi de masquer la version de wordpress qui est visible par défaut dans le code source de la page sous cette forme: <meta name= »generator » content= »WordPress 3.9.1« /> Pour ce faire, vous pouvez ajouter ces quelques lignes de code dans le fichier functions.php de wordpress:

// supprime la version de wordpress du head et des flux
function complete_version_removal() {
    return '';
}
add_filter('the_generator', 'complete_version_removal');

Protéger le fichier wp-config

Le fichier wp-config contient toutes les informations de configuration de wordpress, il est essentiel de le protéger d’éventuelles attaques et de modifier votre fichier .htaccess ou vhost comme suit:

<files wp-config.php>
order allow,deny
deny from all
</files>

Le plugin de sécurité tout en un

Normalement, en mettant en place les astuces ci-dessus, point besoin de plugins. Mais si vous avez pas forcément envi de réaliser ces modifications et que vous voulez blinder la sécurité de wordpress facilement, au risque de perdre un peu en performances, je vous conseille d’installer ithemes security (anciennement WP better security) qui fait un peu usine à gaz mais qui est plutôt complet.

Et le meilleur pour la fin

En fait, le meilleur c’est pour le prochain article, je parlerai de l’installation et de la configuration de modpagespeed, un module côté serveur qui permet d’optimiser d’un coup d’un seul tout ce que je n’ai pas abordé dans cet article à savoir le lazyloading, les sprite CSS, la fusion et la minification des CSS et JS, la compression, le cache, l’optimisation des images, etc… Je vous recommande vivement de vous inscrire à la newsletter accessible en haut à droite pour ne rien manquer de nos prochains guides.

A propos de Serge Esteves

Consultant SEO / Webmarketing : Techniques avancées en référencement combinées aux leviers du marketing entrant (UX, CRO, analytics, content marketing, ereputation, ..).