10 CONSEILS POUR BOOSTER LES PERFORMANCES DE VOTRE SITE SOUS

WORDPRESS

AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

AURÉLIEN DENIS

Président de l’association WordPress Francophone (WPFR)

@wpchannelwpchannel.com / wpfr.net

AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

NOTIONS DE BASE

AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

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

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

LES 3 PILIERS DE L’OPTIMISATION

Temps de chargement

Poids de pageRequêtes HTTP

QUELS SONT LES LEVIERS D’ACTIONS ?

AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

#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é

#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);

#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

#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 !

#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 !

#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)

#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

#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

#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

#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

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

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

« 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. »

MERCI !

AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016

@wpchannel