Comment améliorer les performances de votre thème WordPress

Guide pratique pour améliorer les performances des thèmes WordPress

Points de base

• Les performances du thème WordPress sont affectées par le nombre de demandes HTTP, le téléchargement de la taille des ressources et l'efficacité de la page. La réduction de ces facteurs peut améliorer considérablement les performances.
• Comment améliorer rapidement les performances WordPress incluent: consulter les hôtes, activer la compression GZIP, activer la mise en cache WordPress et navigateur, désactiver les plugins inutilisés, supprimer des ressources inutiles et remplacer les boutons de médias sociaux.
• Les images sont la principale raison du site Web gonflé. En supprimant ou en remplaçant les images inutiles, en utilisant le format correct, en ajustant de grandes tailles d'image bitmap, en maximisant la compression d'image et en réalisant un chargement paresseux, le poids de la page peut être considérablement réduit et les performances peuvent être améliorées.
• Des solutions plus approfondies incluent: l'adoption d'un processus de construction, la technologie progressive des applications Web, l'évitement du code tiers, l'évaluation soigneusement des thèmes WordPress, la simplification des sites Web et l'examen des performances dès le début.

Cet article fait partie d'une série d'articles créés en collaboration avec Siteground. Merci de soutenir les partenaires qui ont rendu le point de point possible.

En mai 2017, le poids moyen de la page a atteint 2884 Ko. Le rapport de recherche de Google DoubleClick montre que le temps de chargement moyen sur les appareils mobiles est de 19 secondes. Cependant, les performances sont plus importantes que jamais:

• Frustration de l'utilisateur: L'utilisateur n'attendra pas. Les recherches du groupe Aberdeen montrent que chaque retard peut conduire à:
  • Les vues des pages ont diminué de 11%
  • La satisfaction des utilisateurs diminue de 16%
  • Le taux de conversion a diminué de 7%
• Terminal mobile: L'accès mobile représente 55% de tout le trafic réseau. Les capacités de l'appareil et de la bande passante augmentent, mais la vitesse ne suit pas le taux de croissance du poids de la page. Les utilisateurs paient généralement par octets.
• Classement des moteurs de recherche: Google punit le chargement lent, sites Web de poids lourds.
• Coût de l'hôte: Il est raisonnable de travailler avec des entreprises telles que Siteground pour héberger, mais les sites Web des poids lourds consomment plus de ressources et coûtent plus cher que les alternatives rationalisées.
• Maintenance: Plus votre site Web a besoin de ressources, plus le coût de maintenance est élevé. En fin de compte, les sites Web lents vous coûteront et que l'argent de vos utilisateurs. La prochaine fois que votre patron demandera à ajouter des fonctionnalités inutiles, veuillez leur rappeler cette simple vérité!

Idéalement, vous devriez envisager des performances avant d'écrire la première ligne de code. Cependant, vous lisez peut-être cet article car il y a des problèmes de performances avec votre sujet. Heureusement, il existe des solutions rentables à ce problème sans aucun inconvénient. Chaque milliseconde économisée réduira vos coûts tout en augmentant la satisfaction, l'engagement et les revenus des utilisateurs.

Facteurs qui affectent les performances

Les performances sont affectées par les facteurs suivants:

1. Nombre de demandes HTTP
2. Télécharger la taille des ressources
3. Efficacité de la page

Le nombre de demandes HTTP dépend du nombre de fichiers et d'appels AJAX nécessaires pour faire fonctionner votre page: HTML, CSS, JavaScript, images, polices, données et toutes les autres ressources. HTTP / 2 résout ce problème, mais votre serveur et le navigateur de l'utilisateur doivent être configurés pour permettre la prise en charge. Même avec HTTP / 2, vingt demandes de fichiers ne sont toujours pas aussi efficaces que dix. Le facteur principal est la taille de chaque fichier.

Pour illustrer cela, 2884KB est 20% plus grand que la version originale de Doom from Id Software. Certes, nous comparons les pages Web modernes à un jeu d'il y a 25 ans, mais la plupart des pages ne montrent que quelques paragraphes, tandis que Doom implémente un moteur 3D, plusieurs niveaux, graphiques, musique et effets sonores. Même des pages relativement légères peuvent être inefficaces. Par exemple, si votre site Web de trois pages repose sur un framework JavaScript de 500 Ko, le code doit être téléchargé, analysé et exécuté avant de voir le premier caractère. Même si la taille totale des ressources dépasse 500 Ko, le fichier HTML rendu du serveur commencera à s'afficher avant qu'il ne soit entièrement chargé. Enfin, la vitesse du serveur, la compression et la mise en cache sont également d'autres considérations importantes.

Mesurer les performances

Les performances de mesure sont importantes pour identifier les goulots d'étranglement et vous assurer que vos mises à jour ont des pages améliorées. Les outils suivants fournissent une rupture de la demande et du temps de réponse et des suggestions de mise à jour:

• Pingdom
• Google Pagespeed Insights
• gtmetrix
• webPageTest

L'onglet Réseau des outils de développeur du navigateur fournit également des informations sur la mise en page et combien de temps il faut pour que la page soit prête à répondre aux événements utilisateur.

Win Fast

Les mises à jour suivantes ne doivent pas prendre plus de quelques minutes - vous n'avez aucune excuse!

Contactez votre hébergeur Web

Un bon hôte Web analysera votre utilisation et fournira des conseils sur les mises à niveau du service, du matériel et des logiciels. Cela peut fournir des améliorations de performances rentables avec un minimum d'effort. Notre partenaire Siteground possède une équipe d'experts WordPress proactifs et compétents qui sont heureux de vous aider à résoudre ce problème. Siteground propose une gamme de plans WordPress et les utilisateurs de SitePoint peuvent profiter de 65% de réduction.

Activer la compression GZIP

Près de 30% des sites Web ne permettent pas la compression GZIP. Cela peut généralement être activé dans les paramètres du serveur Web ou dans les plugins WordPress tels que la compression WP HTTP et le cache total W3.

Activer WordPress Cache

Il existe plusieurs plugins WordPress qui rendent les pages et les stockent dans le cache de leur première demande. Les demandes suivantes obtiennent ces pages du cache au lieu de régénérer le contenu de la base de données dans le modèle. Les plug-ins de cache comprennent le cache total W3, le super cache WP, le cache hyper, le cache WP le plus rapide et le facteur de cache. Votre fournisseur d'hébergement peut être en mesure d'activer la mise en cache pour vous. Notre partenaire Siteground a un outil de mise en cache personnalisé qui peut considérablement accélérer votre site Web.

Activer la mise en cache du navigateur

Si l'utilisateur cache la ressource via le navigateur, l'utilisateur n'a plus à télécharger la ressource. Les solutions simples incluent la définition de l'en-tête expire approprié, la date de dernière modification ou la prise d'ETAGS dans les en-têtes HTTP. L'exemple .htaccess suivant nécessite que le navigateur mette en cache pendant un mois:

<code><ifmodule mod_expires.c="">
ExpiresActive On

<filesmatch>
ExpiresDefault "access plus 1 month"
</filesmatch></ifmodule></code>

Désactiver les plugins inutilisés

La plupart des plugins ajouteront du code à votre site Web, tels que CSS ou JavaScript supplémentaires, même si vous ne l'utilisez pas. Les administrateurs WordPress peuvent désactiver les plugins du panneau de configuration WordPress, ou ils peuvent complètement supprimer le code du plugin s'ils sont sûrs que le plugin ne sera jamais utilisé.

supprimer les ressources inutiles

Votre modèle a-t-il vraiment besoin de quinze polices? Avez-vous ajouté sept systèmes d'analyse? Ce widget tiers est-il nécessaire? Avez-vous besoin d'afficher des publicités à partir de cinquante réseaux publicitaires? Avez-vous besoin de plusieurs bibliothèques JavaScript? Pouvez-vous remplacer l'animation JavaScript par des effets CSS3? Nettoyez-le et supprimez tout ce dont vous n'avez pas besoin.

Remplacer le bouton du réseau social

Facebook, Twitter, Google et LinkedIn partagent-ils des boutons sur votre page? Bien qu'ils semblent inoffensifs, ils peuvent ajouter des centaines de KB de JavaScript tiers à votre page. Il s'agit d'un risque de sécurité gonflé qui peut affecter négativement les performances. Le code tiers n'est pas nécessaire - vous pouvez ajouter des boutons sociaux sans gras à votre page en utilisant quelques lignes de HTML. Une petite quantité de JavaScript peut améliorer l'expérience de l'utilisation des fenêtres contextuelles ou de l'utilisation du journal de suivi des événements dans Google Analytics.

Merger et compresser JavaScript et CSS

Dissolution des fichiers JavaScript et CSS en modules distincts pendant le développement est possible. Cependant, avant d'héberger des fichiers individuels sur un serveur de production, ces fichiers doivent être fusionnés et compressés pour supprimer les commentaires et les espaces. (Notez que votre fichier wordpress style.css doit conserver les détails du sujet en haut, sinon il se cassera!)

Traitement de votre image

L'image est la principale raison du site Web gonflé. La suppression d'une seule image haute résolution de 500 Ko peut réduire le poids et télécharger le temps de 25% ou plus.

supprimer ou remplacer les images inutiles

Je suis sûr que le héros est beau et correspond à l'image de marque, mais cela vous fait-il perdre des clients? Tout ou partie de l'image peut être remplacé par des gradients, des frontières, des filtres ou d'autres effets CSS3.

Utilisez le format d'image correct

Utilisez toujours le format d'image approprié. De manière générale:

• Utilisez SVG pour les logos et graphiques vectoriels
• Utilisez JPG pour les photos
• Utilisez PNG pour tout le reste
• Mais pour les couleurs ou les images plus petites et limitées avec des animations, envisagez d'utiliser des GIF.

Il existe d'autres formats, tels que WebP, mais la prise en charge du navigateur est limitée. En cas de doute, essayez toutes les options appropriées et sélectionnez les meilleures. Mais veuillez noter:

• JPG est un format avec perte qui supprime les détails à des taux de compression plus élevés. Trouvez le meilleur compromis entre la qualité et la taille du fichier pour chaque image.
• PNG est disponible en catégories de couleurs 256 et 24 bits. La version 256 couleur produit généralement des fichiers plus petits.
• PNG et GIF offrent tous deux la transparence. Éteignez la transparence autant que possible pour économiser plus d'octets.

redimensionner la grande image bitmap

Les images prises par une caméra ou un téléphone de base sont trop grandes pour être affichées sur n'importe quel appareil. WordPress propose des options de redimensionnement, mais pour de meilleurs résultats, l'éditeur doit recadrer et redimensionner avant le téléchargement. La taille de l'image ne doit pas dépasser la taille maximale de son conteneur. Les utilisateurs utilisant des écrans à haute densité / rétinction peuvent apprécier des images de résolution plus élevée, mais vous pouvez utiliser l'attribut SRCSET Tagged IMG pour fournir une alternative. Le redimensionnement de l'image peut avoir un impact significatif sur le poids de la page. La réduction de la taille de 50% réduira la superficie totale de 75%, améliorant ainsi la taille du fichier en conséquence.

maximiser la compression d'image

Vous pouvez réduire considérablement la taille de l'image bitmap en supprimant les métadonnées, en réduisant la profondeur des couleurs et en ajustant le coefficient 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 les meilleurs résultats, les images doivent être traitées avant le téléchargement. Les options logicielles incluent Optipng, Pngout, Jpegtran et Jpegptim. Les utilisateurs de Windows peuvent essayer d'utiliser une excellente émeute. Alternativement, vous pouvez utiliser des outils en ligne tels que TinYPNG / TINYJPG. Les images SVG peuvent être compressées en arrondissant les valeurs à moins de chiffres décimaux, en simplifiant les chemins et en supprimant des commentaires, des propriétés et des espaces inutiles de XML. Votre éditeur SVG doit avoir la possibilité de compresser des fichiers, ou vous pouvez utiliser des outils comme l'éditeur SVG et SVGO. Vous pouvez également déplacer les directives de style vers CSS.

Implémentez le chargement paresseux

Enfin, la technique de chargement paresseuse garantit que les images sont téléchargées uniquement si les cases contenant sont visibles dans la fenêtre. Les plugins WordPress qui implémentent le chargement paresseux incluent la charge paresseuse, l'image jQuery Loot Lazy WP, BJ Lazy Load, Rocket Lazy Load, dévoilent la charge paresseuse et la charge paresseuse pour les vidéos. Autres ressources:

• Cinq techniques de chargement de latence d'image pour améliorer les performances du site Web
• Comment construire votre propre chargeur d'image progressive

Solution plus approfondie

Si votre sujet est toujours en surpoids, vous pouvez considérer un régime alimentaire plus intense…

en utilisant le processus de construction

Le processus de construction peut optimiser automatiquement les images et fusionner et compresser les fichiers CSS et JavaScript. Vous pouvez adopter un processus de construction Gulp pour votre thème WordPress, qui peut économiser des heures de travail, améliorer les performances des pages et rendre le développement plus amusant.

Considérons la technologie progressive des applications Web

La technologie des applications Web progressives permet aux applications Web de travailler hors ligne en mettant en cache des ressources de base et communes. Bien que cela soit souvent utilisé pour les applications, vous pouvez transformer votre site Web en une application Web progressive et profiter des avantages des opérations de chargement rapide et hors ligne.

Évitez le code tiers

Accordez-vous une autorisation illimitée pour accéder à votre code de site Web à des développeurs inconnus? Ne le fera pas? Alors, pourquoi faire confiance aux widgets tiers comme les boutons de partage des médias sociaux et les forums de discussion? Bien que ces widgets compromettent rarement la sécurité, vous devez vérifier les ressources cachées qu'elles chargent et évaluer l'impact sur les performances.

Évaluer de manière caritative les thèmes WordPress

Les thèmes WordPress gratuits et commerciaux ont un sens financier. Pourquoi embaucher un développeur lorsqu'un thème prêt à l'emploi répond à tous vos besoins pour quelques dollars? Mais faites attention aux coûts cachés. Un modèle universel doit être vendu des milliers d'exemplaires avant que l'effort de développement puisse être récupéré. Pour attirer les acheteurs, les développeurs regroupent de nombreuses fonctionnalités dont vous n'aurez peut-être jamais besoin. Vérifiez un: le thème a-t-il l'air bien? Vérifiez 2: Comment le thème fonctionne-t-il sur divers appareils et réseaux? Voir aussi: 10 caractéristiques des thèmes avancés WordPress.

Simplifiez votre site Web

Une tendance consiste à évoluer vers une expérience en ligne plus simple, rationalisée et plus centrée sur le client. Cela peut être plus difficile qu'il n'y paraît, mais le vieux temps de donner toutes les fonctionnalités imaginables à tous les utilisateurs est terminée. Que vous puissiez convaincre votre patron / client est une autre affaire!

Modifiez votre style de vie de développement

Qui devrait être responsable des pages Web qui atteignent 2,8 Mo? C'est nous. La raison et la façon dont le site Web devient gonflé n'a pas d'importance - les développeurs y arrivent. Le développement rapide et la réduction des coûts sont toujours importants, mais l'ensemble du processus est vain lorsqu'il conduit à des sites Web lents et maladroits que personne ne veut utiliser. Votre client / patron peut ne pas comprendre les problèmes techniques, mais vous devez expliquer les conséquences. Les performances sont considérées dès le début. Comme le contenu, le référencement, la convivialité et l'accessibilité, les performances ne doivent jamais être ignorées! Créer un thème WordPress rapide est difficile, mais "ajouter" des performances plus tard est beaucoup plus difficile et plus coûteux.

Autres suggestions:

Il est facile d'oublier la bande passante lorsque vous vous développez sur une connexion rapide de 200 Mbps. Restreindre les connexions ou essayer de charger votre site Web dans des zones avec un mauvais signal. Si vous vous sentez frustré, vos utilisateurs se sentiront également frustrés!
Considérez le poids de la page et remettez en question chaque ressource ajoutée au sujet. Considérez la stratégie de "notation", par exemple, si vous ajoutez 20 Ko de polices, vous devez économiser 20 Ko d'ailleurs.

Les sites de performance de l'ISOME sont devenus une épidémie, mais il est évident que peu de développeurs s'en préoccupent. Ceux qui s'en soucient recevront plus de visiteurs, des taux de conversion plus élevés et des salaires plus élevés!

Posés fréquemment posés sur l'amélioration des performances des thèmes WordPress

Comment optimiser mon thème WordPress pour de meilleures performances?

Optimiser les thèmes WordPress pour de meilleures performances implique plusieurs étapes. Tout d'abord, choisissez un thème léger conçu pour la vitesse. Évitez d'utiliser des sujets qui chargent les fonctionnalités dont vous n'avez pas besoin, car ces fonctionnalités ralentiront votre site Web. Deuxièmement, utilisez un bon plugin de cache. Cela stockera une version de votre site Web sur le serveur et la fournira aux visiteurs, en réduisant la quantité de travail que le serveur doit effectuer. Troisièmement, optimisez vos images. De grandes images à haute résolution peuvent ralentir votre site Web, alors utilisez le plugin d'optimisation d'image pour réduire la taille de l'image sans perdre de qualité.

Quelle FAQ peut faire ralentir mon site Web WordPress?

Il existe plusieurs problèmes courants qui peuvent ralentir les sites Web WordPress. Ces problèmes incluent des fournisseurs d'hébergement lents, aucune utilisation de réseaux de distribution de contenu (CDN), des plugins excessifs, de grandes images et aucune utilisation de plugins de cache. Il est important de surveiller régulièrement les performances de votre site Web et de résoudre les problèmes qui surviennent.

Comment choisir un thème WordPress rapide?

Lorsque vous choisissez un thème WordPress, recherchez un poids léger et conçu pour la vitesse. Évitez d'utiliser des thèmes avec de nombreuses fonctionnalités dont vous n'avez pas besoin car celles-ci ralentiront votre site Web. Vérifiez également les notes et les commentaires du sujet pour voir si d'autres utilisateurs ont rencontré des problèmes avec leur vitesse.

CDN Comment améliorer les performances de mon site Web WordPress?

CDN (Network de distribution de contenu) peut considérablement améliorer les performances des sites Web WordPress. Il fonctionne en stockant une copie de votre site Web sur les serveurs du monde entier. Lorsque les utilisateurs visitent votre site Web, le CDN sert du contenu du serveur le plus proche d'eux, ce qui réduit le temps nécessaire pour charger du contenu.

Comment optimiser les images sur le site Web WordPress?

Vous pouvez optimiser des images sur votre site Web WordPress en utilisant le plugin d'optimisation d'image. Ces plugins réduisent la taille de l'image sans perdre de qualité, ce qui peut considérablement améliorer le temps de chargement du site Web. Vous pouvez également optimiser manuellement les images avant de les télécharger en réduisant leur résolution ou en les compressant.

Comment trop de plugins affectent les performances de mon site Web WordPress?

Bien que les plugins puissent ajouter des fonctionnalités utiles aux sites Web WordPress, trop de plugins peuvent ralentir le site Web. Chaque plugin ajoutera un code que votre site Web doit charger, ce qui augmentera le temps de chargement. Il est important d'utiliser uniquement les plugins dont vous avez vraiment besoin et de vérifier et de supprimer régulièrement tous les plugins dont vous n'avez plus besoin.

Comment surveiller les performances de mon site Web WordPress?

Vous pouvez utiliser une variété d'outils pour surveiller les performances de votre site Web WordPress. Ces outils incluent Google Pagespeed Insights, GTMetrix et Pingdom. Ces outils peuvent fournir des informations précieuses sur les performances de votre site Web et identifier tous les problèmes qui doivent être résolus.

Comment un fournisseur d'hébergement lent affecte-t-il les performances de mon site WordPress?

Votre fournisseur d'hébergement joue un rôle vital dans les performances de votre site Web WordPress. Si votre fournisseur d'hébergement dispose de serveurs lents, votre site Web sera également lent. Il est important de choisir un fournisseur d'hébergement qui fournit des services rapides et fiables.

Comment réduire le nombre de demandes HTTP sur un site Web WordPress?

Réduire le nombre de demandes HTTP sur un site Web WordPress peut augmenter son temps de chargement. Cela peut être fait en combinant des fichiers CSS et JavaScript, à l'aide d'images Sprite et en réduisant le nombre de messages affichés sur la page.

Comment utiliser le cache du navigateur pour améliorer les performances des sites Web WordPress?

La mise en cache du navigateur peut considérablement améliorer les performances de votre site Web WordPress en stockant une version de votre site Web dans le navigateur de l'utilisateur. Cela signifie que lorsque l'utilisateur revisite votre site Web, il se charge plus rapidement car le navigateur n'a pas à tout télécharger à nouveau. Vous pouvez activer la mise en cache du navigateur en utilisant un plugin de cache ou en ajoutant du code au fichier .htaccess.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!