Passage en revue de l'ensemble des leviers d'actions pour améliorer le temps de chargement de vos pages. Astuces, conseils et ressources appliqués à WordPress.

1. 10 CONSEILS POUR BOOSTER LES
PERFORMANCES DE VOTRE SITE SOUS
WORDPRESS
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

2. AURÉLIEN
DENIS
Président de l’association
WordPress Francophone (WPFR)
@wpchannel
wpchannel.com / wpfr.net
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

3. NOTIONS DE BASE
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

4. POURQUOI OPTIMISER LA VITESSE DE CHARGEMENT
DE VOTRE SITE WEB ?
Site lent
Expérience
utilisateur
détériorée
Référencement
mal optimisé
Stagnation du
trafic
Mauvais taux de
conversion

5. POURQUOI OPTIMISER LA VITESSE DE CHARGEMENT
DE VOTRE SITE WEB ?
Site rapide
Expérience
utilisateur
améliorée
Référencement
optimisé
Augmentation du
trafic
Meilleur taux de
conversion

6. LES 3 PILIERS DE L’OPTIMISATION
Temps de
chargement
Poids de pageRequêtes HTTP

7. QUELS SONT LES LEVIERS
D’ACTIONS ?
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

8. #1 - L’HÉBERGEMENT / LE SERVEUR
• Vérifier la configuration avec phpinfo();
• Augmenter les valeurs de post_max_size,
upload_max_filesize, memory_limit
• Passer à PHP 5.6 ou PHP 7
• Activer la compression GZIP
• Passer sur Litespeed ou nginx mais attention à la compatibilité

9. #2 - L’INSTALLATION DE WORDPRESS
Améliorer le fichier wp-config.php en augmentant la limite
mémoire à 128 Mo et en limitant le nombre de révisions
define('WP_MEMORY_LIMIT', ‘128M’);
define(‘WP_POST_REVISIONS’, 3);

10. #3 - LA BASE DE DONNÉES
• Passer à MySQL 5.6+ ou MariaDB
• Lancer des optimisations régulières
• Nettoyer la base des révisions inutiles
• Analysez les requêtes avec Query Monitor

11. #4 - LE CHOIX DU THÈME
• Analyser les requêtes sur les sites de démonstration des thèmes
premium
• Ne tenez pas compte du poids de la page (votre contenu sera
différent), ni du temps de chargement (vous n’aurez pas forcément
un serveur dédié)
• Privilégiez les thèmes sur-mesure !

12. #5 - LE CHOIX DES EXTENSIONS
• Un nombre élevé d’extensions n’est pas un problème en soi
• Extensions payantes ne rime pas forcément avec qualité
• Fuyez les builders
• Désactivez le chargement des CSS / JS et codez-le à votre sauce !

13. #6 - LE RECOURS AU CACHE
• Minification
• Concaténation
• Chargement différé des images, vidéos, iframes via la technique de
lazy-loading
• Extensions gratuites (W3 Total Cache) ou payantes (WP Rocket)

14. #7 - LES WEB-FONTS
• Limitez-vous à deux polices !
• Chargez uniquement les langues et les niveaux de graisse
nécessaires
• Projet Web Font Loader sur GitHub pour de multiples fournisseurs
• Pour les polices d’icônes, embarquez seulement les caractères
utiles en générant votre propre police (Ico Moon App)
• Respectez l’ordre de chargement : EOT, WOFF2, WOFF, TTF, puis SVG

15. #8 - LES JAVASCRIPTS
• Corrigez toutes les erreurs remontées par la console (pas seulement la page
d’accueil)
• Vérifiez qu’un script n’est pas chargé deux fois (boutons de réseaux sociaux,
scripts Google, etc.)
• Attention aux requêtes Ajax qui bouclent
• Préférez un chargement local plutôt que sur un CDN y compris Google (cf. la fin
de Open Sans sur les WordPress)
• Pensez code asynchrone
• wp_dequeue_script / wp_dequeue_style

16. #9 - LES CSS
• Évitez l’inline CSS autant que possible : tous les thèmes premium ont
recours à cette technique pour des raisons de facilité
• Allégez vos frameworks (compilateur de Twitter Bootstrap par
exemple), inutile de tout embarquer
• Pas de @import mais une fonction officielle qui gère les
dépendances pour les thèmes enfants
• Les media queries en fin de fichiers
• Segmentez vos CSS et pour un chargement conditionné au contenu

17. #10 - LES IMAGES
• Utilisez des tailles prédéfinies pour ne jamais charger l’image complète
• Régénérez les tailles avec Simple Image Sizes
• Compressez vos images avant envoi ou laissez faire WordPress (82% de
compression sur les JPEG depuis 4.5) avec le filtre jpeg_quality
• Pas de redimensionnement des images par le navigateur
• SVG pour les logos ou les pictogrammes
• Optimisez vos favicons avec Real Favicon Generator

18. ET AUSSI
• Un bon design se doit d’être au service de la performance
• Pensez à l’architecture du contenu
• HTTP / 2 (requiert un certificat SSL)
• Testez sur différents navigateurs / systèmes d’exploitations /
périphériques

19. LES RESSOURCES
• Outils de développement de votre navigateur (Firefox mon préféré)
• Outils d’analyse en ligne (DareBoost, WebPageTest, GTmetrix,
Pingdom Tools, SSL Checker, intoDNS)
• Activer les outils de débogage de WordPress dans le
wp-config.php
• Pour les développeurs : conférence du WP Tech 2015
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

20. « Rapidité d’affichage et richesse
fonctionnelle d’un site Web ne doivent
pas se faire au détriment l’un de l’autre.
Tout est affaire de compromis et de
bonnes pratiques de développement. »

21. MERCI !
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
@wpchannel