10 conseils pour booster les performances de votre site sous WordPress
-
Upload
aurelien-denis -
Category
Internet
-
view
1.855 -
download
1
Transcript of 10 conseils pour booster les performances de votre site sous WordPress
![Page 1: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/1.jpg)
10 CONSEILS POUR BOOSTER LES PERFORMANCES DE VOTRE SITE SOUS
WORDPRESS
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
![Page 2: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/2.jpg)
AURÉLIEN DENIS
Président de l’association WordPress Francophone (WPFR)
@wpchannelwpchannel.com / wpfr.net
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
![Page 3: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/3.jpg)
NOTIONS DE BASE
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
![Page 4: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/4.jpg)
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
![Page 5: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/5.jpg)
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
![Page 6: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/6.jpg)
LES 3 PILIERS DE L’OPTIMISATION
Temps de chargement
Poids de pageRequêtes HTTP
![Page 7: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/7.jpg)
QUELS SONT LES LEVIERS D’ACTIONS ?
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
![Page 8: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/8.jpg)
#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é
![Page 9: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/9.jpg)
#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);
![Page 10: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/10.jpg)
#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
![Page 11: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/11.jpg)
#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 !
![Page 12: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/12.jpg)
#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 !
![Page 13: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/13.jpg)
#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)
![Page 14: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/14.jpg)
#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
![Page 15: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/15.jpg)
#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
![Page 16: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/16.jpg)
#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
![Page 17: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/17.jpg)
#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
![Page 18: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/18.jpg)
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
![Page 19: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/19.jpg)
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
![Page 20: 10 conseils pour booster les performances de votre site sous WordPress](https://reader031.fdocument.pub/reader031/viewer/2022030207/58a98bf41a28ab412d8b5f79/html5/thumbnails/20.jpg)
« 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. »