Le poids moyen d’une page web a atteint 2,884kb en mai 2017. Google a signalé un temps de chargement moyen de 19 secondes sur les appareils mobiles. Pourtant, la performance compte plus que jamais :
Des utilisateurs frustrés : les utilisateurs n’attendront pas. Selon les recherches menées par Aberdeen Group, chaque chargement trop long :
- 11% de pages vues en moins
- Une diminution de 16% de la satisfaction des utilisateurs
- Une baisse de 7% des conversions
La recherche Mobile compte pour 55% de tout le trafic Web. Les capacités de périphérique et de bande passante s’améliorent, mais pas au poids de la page. Les utilisateurs sont souvent chargés par octet.
Un référencement naturel au ralenti : Google ne favorise pas les sites qui sont trop lents à se charger.
Idéalement, vous devriez considérer les performances avant que la première ligne de code ne soit écrite. Cependant, vous lisez probablement cet article parce que vous avez un thème présentant des problèmes de performance. Heureusement, il existe des options rentables pour résoudre le problème. Chaque milliseconde économisée augmente la satisfaction, l’engagement et les dépenses des utilisateurs.
Quels facteurs affectent la performance de votre site ?
La performance de votre site web est affectée par :
- Le nombre de requêtes HTTP
- La taille des actifs téléchargés
- L’efficacité de la page
Le nombre de requêtes HTTP est déterminé par le nombre de fichiers et les appels Ajax nécessaires pour que votre page fonctionne : le HTML, le CSS, le JavaScript, les images, les polices, les données et tous les autres éléments. HTTP/2 aborde ce problème, mais votre serveur et le navigateur de l’utilisateur doivent être configuré pour permettre le support. Même avec HTTP/2, vingt demandes de fichiers restent moins efficaces que dix.
Le facteur principal est la taille de chaque fichier. Pour mettre cela en contexte, 2,884kb est 20% plus grand que la version originale de Idom Doom. Certes, nous comparons des pages Web modernes à un jeu de 25 ans, mais la plupart des pages montrent quelques paragraphes de contenu alors que Doom met en œuvre un moteur 3D, plusieurs niveaux, des graphiques, de la musique et des effets sonores.
Même une page relativement légère peut être inefficace. Par exemple, si votre site Web de trois pages possède un fichier JavaScript de 500kb qui est indépendant de la structure, ce code doit être téléchargé, analysé et exécuté avant que le premier caractère ne soit visible. Un fichier HTML généré par le serveur commencera à apparaître avant qu’il ne soit complètement chargé même si les actifs totalisent plus de 500kb.
Enfin, la vitesse du serveur, la compression et la mise en cache sont d’autres considérations importantes.
Mesurer la performance
Il est important de mesurer les performances de votre site web pour identifier les freins et veiller à ce que vos mises à jour aient amélioré la page. Les outils suivants analysent votre site web pour vous montrer les points bloquant et vous suggère des améliorations :
L’onglet Outils de développement de votre navigateur fournit également des informations sur la mise en page et le temps requis avant que la page ne soit prête pour les événements utilisateur.
Des améliorations qui prennent peu de temps à mettre en place
Les mises à jour suivantes devraient vous prendre que quelques minutes donc vous n’avez pas d’excuses !
Contactez votre hébergeur
Un bon hébergeur analysera votre utilisation et vous conseillera sur les mises à niveau des services, du matériel et des logiciels. Cela peut vous apporter une augmentation de performance rentable avec un effort minimal.
Activer la compression GZIP
Près de 30% des sites ne parviennent pas à activer la compression GZIP. Cela peut normalement être activé dans les paramètres du serveur Web ou les plugins WordPress tels que WP HTTP Compression et W3 Total Cache.
Activer la mise en cache WordPress
Plusieurs plugins WordPress sont disponibles qui affichent les pages et les stockent dans un cache lors de leur première demande. Les requêtes subséquentes récupèrent ces pages à partir du cache plutôt que de régénérer le contenu de la base de données. Pour WordPress, vous pouvez retrouver les plugins suivant : W3 Total Cache, WP Super Cache, Hyper Cache, WP Fastest Cache et Cache Enabler.
Activer la mise en cache du navigateur
Le cache du navigateur conserve des copies transitant par son biais. Le cache du navigateur peut dans certaines conditions, répondre aux requêtes ultérieures à partie de ses copies, sans recourir au serveur web d’origine. Les solutions simples incluent la définition d’un en-tête Expires approprié, une date de dernière modification ou l’adoption d’ ETags dans l’en-tête HTTP. L’exemple du .htaccess suivant demande aux navigateurs de mettre en cache des images pendant un mois :
<IfModule mod_expires.c> ExpiresActive On <FilesMatch "\.(jpg|jpeg|png|gif|svg)$"> ExpiresDefault "access plus 1 month" </FilesMatch> </IfModule>
Désactiver les plugins inutilisés
La plupart des plugins ajouteront du code à votre site Web, comme du CSS ou du JavaScript supplémentaires, même si vous ne l’utilisez pas. Les administrateurs WordPress peuvent désactiver les plugins du panneau de contrôle WordPress ou supprimer complètement le plugin s’ils sont certains qu’il ne sera jamais utilisé.
Supprimer les actifs inutiles
Votre thème a-t-il vraiment besoin de quinze polices ? Avez-vous ajouté sept systèmes d’analyse ? Est-ce nécessaire un widget tiers ? Est-il nécessaire de diffuser des publicités à partir de cinquante réseaux publicitaires ? Avez-vous besoin de plus d’une bibliothèque JavaScript ? Pourriez-vous remplacer les animations JavaScript par des effets CSS3 ?
Supprimez tout ce dont vous n’avez pas besoin.
Remplacez les boutons du réseau social
Avez-vous des boutons de partage Facebook, Twitter, Google+ et LinkedIn sur vos pages ? Malgré leur apparence innocente, ils peuvent ajouter plusieurs centaines de kb de JavaScript tiers à votre page. C’est un risque de sécurité bloqué qui a une incidence négative sur la performance.
Le code tiers est inutile, vous pouvez ajouter des boutons sociaux légers à vos pages avec quelques lignes de HTML. Un peu de JavaScript peut améliorer l’expérience pour utiliser les fenêtres pop-up ou enregistrer l’utilisation avec le suivi des événements dans Google Analytics.
Concaténer et Minify JavaScript et CSS
Il est pratique de diviser les fichiers JavaScript et CSS en modules autonomes lors du développement. Cependant, ceux-ci devraient être concaténés et minimisés pour supprimer les commentaires et les espaces avant d’héberger un seul fichier sur votre serveur.
(Notez que votre fichier WordPress style.css doit conserver les détails du thème en haut ou il se cassera!)
Réduisez vos images
Les images sont la principale cause du site web lent. Le retrait d’une image de haute résolution de 500kb peut réduire le poids et le temps de téléchargement de 25% ou plus.
Utilisez le format d’image adéquate
Veillez à toujours utiliser un format d’image approprié. En général :
- Utilisez SVG pour les logos vectoriels
- Utiliser JPG pour les photographies
- Utilisez PNG pour tout le reste
- Mais considérez GIF pour des images plus petites, à couleurs limitées ou celles avec des animations.
Il existe des formats alternatifs tels que WebP, mais peu de navigateur les supportes.
En cas de doute, essayez toutes les options appropriées et choisissez le mieux. Mais notez :
- JPG est un format à perte de poids qui supprime les détails à une compression plus élevée. Trouvez le meilleur compromis entre qualité et taille de fichier pour chaque image.
- PNG offre des variétés de couleurs 256 et 24 bits. La version 256 couleurs entraîne normalement un fichier plus petit.
- Les deux PNG et GIF offrent une transparence. Éloigne le cas échéant de sauvegarder d’autres octets.
Redimensionner les grandes images bitmap
Une caméra ou un téléphone de base capture une image trop grande pour être affichée sur n’importe quel appareil. WordPress propose des options de redimensionnement, mais pour les meilleurs résultats, les éditeurs devraient recadrer et redimensionner avant de télécharger.
Les dimensions de l’image ne doivent jamais dépasser la taille maximale de leur appareil. Ceux qui utilisent des affichages de haute densité / Retina peuvent apprécier une image à résolution plus élevée, mais vous pouvez utiliser des alternatives à l’aide de l’attribut imgtagsrcset .
Le redimensionnement des images a un impact important sur le poids de la page. Les dimensions réduites de 50% réduisent la surface totale de 75%, ce qui améliore la taille du fichier en conséquence.
Maximiser la compression d’image
Vous pouvez réduire radicalement la taille d’une image bitmap en supprimant les métadonnées, en réduisant la profondeur des couleurs et en réduisant les facteurs de compression. Les plugins WordPress tels que WP Smush, EWWW Image Optimizer, Imagify, Kraken Image Optimizer, ShortPixel Image Optimizer et CW Image Optimizer peuvent gérer ce processus pour vous.
Pour obtenir les meilleurs résultats, les images doivent être traitées avant le téléchargement. Voici quelques logiciels avec lesquels vous pouvez réduire la taille et le poids d’une image : OptiPNG, PNGOUT, jpegtran et jpegoptim. Les utilisateurs de Windows peuvent essayer le fabuleux RIOT. Alternativement, il existe des outils en ligne tels que TinyPNG / TinyJPG .
Évaluez attentivement les thèmes de WordPress
Les thèmes gratuits et commerciaux de WordPress peuvent avoir un sens financier. Pourquoi employer un développeur quand un thème fait tout ce dont vous avez besoin pour quelques euros ? Mais méfiez-vous des coûts cachés. Ces modèles thème doivent être vendus à des milliers d’exemplaires. Pour attirer les acheteurs, les développeurs regroupent de nombreuses fonctionnalités dont vous n’aurez peut-être jamais besoin.
Simplifiez votre site
La tendance actuelle est d’offrir l’expérience web la plus simple, simplifiée et axée sur le client. Cela peut être plus difficile qu’il n’y parait, mais les vieux jours où il fallait offrir toutes les fonctionnalités inimaginables pour tous les utilisateurs sont terminées.
Changez votre style de développement
L’achat d’un thème offre une mise en place plus rapide et réduit les coûts de développement, mais tout cela est inutile lorsque ça aboutit à un site lent que personne ne veut utiliser. Votre client / patron peut ne pas comprendre les problèmes techniques, mais vous devez leur expliquer les conséquences.
Vous devez envisager les performances du site avant même sa conception. Comme le contenu, le référencement naturel, la facilité d’utilisation et l’accessibilité, la performance ne devrait jamais être une réflexion postérieure ! La création d’un thème WordPress est compliqué mais « améliorer » ses performances plus tard est considérablement plus difficile et coûteux.
Les sites Web trop lents sont devenus une épidémie, mais il est évident que peu de développeurs se sentent concernés. Ceux qui s’en soucieront se verront récompenser par plus de visiteurs et des conversions plus élevées !