Comment les membres WPMU DEV optimisent leurs sites clients pour une vitesse maximale
Publié: 2022-11-09En ce qui concerne les sites WordPress, nous avons tous besoin de vitesse. Mais nos membres développeurs Web ont en fait les méthodes éprouvées pour y parvenir au mieux, et nous vous les transmettons.
Nous avons puisé dans la richesse collective de l'expérience de nos membres développeurs Web et compilé les résultats de leurs meilleurs choix pour obtenir une vitesse de site ultra-rapide.
Dans cet article, nous allons partager leurs recommandations, ainsi que les détails de ce qui rend ces efforts si efficaces dans le monde réel (en ligne).
Voici ce que nous allons examiner :
- Les avantages d'augmenter votre vitesse
- Créer et développer votre engagement
- Obtenir et gérer plus de trafic
- Augmenter votre classement SEO
- Outils et services recommandés qui vous permettront d'aller plus vite
- Mise en cache et CDN
- Optimiseurs d'images et de fichiers
- Plugins et thèmes
- Hébergement de qualité
- Outils et astuces pour sac de transport (divers)
- Tous les aspects importants des tests
- Améliorez les performances de votre site Web WordPress
Puisqu'il s'agit de vitesse, allons-y en courant !
Les avantages d'augmenter votre vitesse
La plupart d'entre nous adhèrent à la devise "le plus vite est le mieux", mais ne comprennent peut-être pas vraiment pourquoi, ni comment y arriver.
Les avantages de l'optimisation des performances de WordPress sont nombreux et nous allons les examiner attentivement.
Créer et développer votre engagement
D'innombrables études ont montré que les sites lents sont la principale raison pour laquelle les gens partiront sans interagir.
Les gens ne veulent tout simplement pas attendre pendant que leur curseur tourne. Nous parlons d'une question de secondes - comme dans deux ou moins. Selon Google, c'est la vitesse à laquelle votre site Web devrait se charger.
Tout le monde sait qu'il existe une infinité de choix d'activités en ligne, alors ils n'hésiteront pas à rebondir sans arrière-pensée.
Obtenir et gérer plus de trafic
Une plus grande vitesse est directement liée à plus de trafic, ce qui signifie que le potentiel d'augmentation exponentielle des interactions et des conversions est plus élevé.
Si vous avez la chance d'attirer des visiteurs sur votre site - des visiteurs établis qui reviennent ou de nouveaux visiteurs - vous devez tout mettre en place pour que l'augmentation inévitable de vos ressources n'ait pas d'impact négatif sur l'expérience de quiconque.
Augmenter votre classement SEO
Il y a beaucoup de choses qui entrent dans le référencement, mais la vitesse du site est certainement un facteur important.
Les algorithmes de classement de recherche de Google considèrent la vitesse du site comme un signal, et les performances des pages sont également un facteur de classement des moteurs de recherche.
Par conséquent, plus votre site est rapide, plus vous avez de chances d'augmenter dans les SERP - un objectif idéal à atteindre.
Outils et services recommandés qui vous permettront d'aller plus vite
Comme mentionné ci-dessus, nous avons parlé aux experts en développement Web de notre collectif de membres pour avoir leur avis sur la vitesse du site.
Ils ont partagé leurs connaissances combinées sur le sujet, ainsi que les outils et services spécifiques qu'ils utilisent pour obtenir (et maintenir !) Leurs sites fonctionnent à des performances optimales.
Voyons ce qu'ils avaient à dire.
Mise en cache et CDN
La mise en cache a dépassé les soumissions, et avec raison.
La mise en cache minimise le nombre de requêtes envoyées à votre serveur, ce qui signifie que les performances de la page, le temps de chargement et l'expérience utilisateur s'améliorent.
De plus, lorsque les données de votre site sont mises en cache plus près des emplacements des utilisateurs, elles consomment moins de ressources, ce qui réduit la charge sur votre serveur.
Les réseaux de diffusion de contenu (CDN) fournissent du contenu mis en cache à partir d'un emplacement réseau le plus proche d'un utilisateur pour accélérer sa diffusion, avec une architecture conçue pour réduire la latence du réseau causée par le transport du trafic sur de longues distances et sur plusieurs réseaux.
Tout cela équivaut à améliorer la vitesse et les performances de votre site.
"J'utilise Smush et tous les CDN qui sont pré-emballés avec votre hébergement [wpmudev]!" -JD
"L'hébergement avec CDN fait une grande différence en termes de vitesse pour les sites WordPress." – Matthieu Forse
"La différence entre les images optimisées sur un CDN (vs non) est ÉNORME" - JD
Principales recommandations :
CDN
Nuageux
Reconnu par des millions de personnes, Cloudflare est un réseau mondial conçu pour rendre tout ce que vous connectez à Internet sécurisé, privé, rapide et fiable.
QUIC.cloud
QUIC.cloud CDN est l'un des rares à pouvoir mettre en cache du contenu WordPress statique et dynamique. Maximisez les scores de vitesse de page avec les services en ligne, l'optimisation d'image, le CSS critique, le CSS unique et les espaces réservés d'image de faible qualité.
Plug-ins de mise en cache
Colibri
Hummingbird donne son envol à votre site avec une mise en cache et une compression expertes. En plus d'être une suite complète de mise en cache (Page, Navigateur, Objet, Gravatar et RSS), Hummingbird offre également une optimisation des actifs à tous les niveaux.
"J'utilise Hummingbird sur tous mes sites, c'est la raison pour laquelle je suis devenu membre de WPMU DEV." - kahnfusion
"J'utilise la fonction Speedy [dans Hummingbird], mais j'optimise les fichiers manuellement sur les projets les plus volumineux. J'ai obtenu de très bons résultats, même sur des sites « lourds ». – Isidoros Rigas
Cache LiteSpeed
LiteSpeed Cache pour WordPress est un plugin d'accélération de site tout-en-un, doté d'un cache exclusif au niveau du serveur et d'un ensemble de fonctionnalités d'optimisation.
WP Rocket propose un ensemble d'options avancées pour améliorer vos performances, notamment le retardement de l'exécution de JavaScript, la suppression des CSS inutilisés, la minification et le LazyLoad.
NitroPack
NitroPack propose la mise en cache, l'optimisation des images et un CDN prêt à l'emploi. Aucun plug-in tiers ou configuration complexe n'est nécessaire.
Optimiseurs d'images et de fichiers
Un autre élément qui a un impact significatif sur la vitesse du site est l'optimisation des ressources.
Il existe deux catégories en ce qui concerne ces actifs - les fichiers et les images - bien que les méthodes pour les optimiser se chevauchent quelque peu.
Nous examinerons un certain nombre de façons d'obtenir des performances optimales pour chacun.
Optimisation des fichiers :
- Activer Gzip (compression de texte)
- Commentaires de chargement paresseux et messages plus petits
- Éléments du site en cache (par exemple, page, navigateur, gravatar, RSS)
- Minifier les fichiers (supprimer le code CSS et JS inutile)
- Combinez des fichiers plus petits (moins de fichiers = moins de requêtes)
- Différer le CSS (différer le chargement du contenu au-dessus de la ligne de flottaison)
- Précharger et différer Javascript (corriger le temps d'exécution JS et fournir des charges utiles plus petites)
Optimisation des images :
- Réduire la taille de l'image avec la compression (avec ou sans perte)
- Choisissez le meilleur type de fichier (PNG, JPEG, etc.)
- Utiliser le chargement progressif pour les JPEG
- Utiliser des types de fichiers de nouvelle génération (Webp)
- Chargement paresseux d'images hors écran
- Optimiser la livraison des images (servir via un CDN)
Ce qui semble être de petits ajustements peut s'ajouter à des améliorations notables de la vitesse.
Principales recommandations :
Colibri
En plus d'être un assistant de mise en cache global, Hummingbird gère un grand nombre de fonctionnalités d'optimisation, telles qu'une meilleure organisation des actifs, l'affichage des réductions de taille de fichier, la compression Gzip, la compression des pages Web et des feuilles de style et la réduction du temps de transfert de fichiers.
Avec les automatisations et les paramètres en un seul clic, la configuration est un jeu d'enfant.
Oh, et Hummingbird est gratuit.
Smush
Smush nous a mis sur la carte. Avec plus d'un million d'installations actives et 5 étoiles sur 5, cet artiste puissant est habillé pour impressionner.
Optimisez un nombre illimité d'images (Bulk Smush, Super Smush = compression 2x), le chargement différé, le redimensionnement automatique, la compression, la sauvegarde ou la restauration en bloc des images originales et résolvez les recommandations Google PageSpeed - le tout à partir d'un tableau de bord simple et intuitif.
Smush est également gratuit.
"Si je veux des performances proches de la perfection, je code mes modèles, remplace la plupart des plugins par des plugins wpmudev et le résultat est excellent (principalement A avec GTmetrix et proche de 100% avec la vitesse de la page google)." – Antoine
« Smush et Hummingbird vont dans chaque site. Je n'ai aucune demande pour Smush, c'est un champion. – Tony G.
"J'utilise les deux (Hbird & Smush) sur chaque site et je n'ai rien à changer : depuis que les modèles de paramètres de plugins sont sortis, je les configure et je les oublie !" – Phil
« J'ai toujours trouvé Smush excellent. J'aime vraiment, vraiment ça. C'est très impressionnant ce qu'il peut faire en quelques clics. – Mat
"Smush semble déjà parfait... Je ne vois pas comment tu pourrais l'améliorer." – Isidoros Rigas
WWW
Optimisez les images à l'aide d'outils sur votre propre serveur et déchargez le processus d'optimisation gourmand en CPU sur leurs serveurs spécialisés pour plus de compression.
Les images sont automatiquement compressées, mises à l'échelle pour s'adapter à la taille de la page et de l'appareil, chargées paresseusement et converties au format WebP de nouvelle génération.
CourtPixel
Utilise un minimum de ressources et fonctionne bien avec tout hébergement Web partagé, cloud, VPS ou dédié. Optimisez n'importe quelle image de votre site Web, même les images qui ne sont pas répertoriées dans la médiathèque.
La compression d'image avec et sans perte est disponible pour les types d'images les plus courants ainsi que pour les fichiers PDF.
Plugins et thèmes
La plupart de nos développeurs Web étaient d'accord : bien que le nombre de plugins utilisés puisse certainement affecter la vitesse, c'est la qualité de ces plugins qui compte le plus.
Meilleures astuces:
- Limitez les plugins aux plus essentiels et supprimez ceux que vous n'utilisez pas.
- Utilisez un thème aussi léger que possible.
- Nettoyez vos bases de données WP, pour vous débarrasser des fichiers inutiles laissés par les plugins inutilisés.
"Il s'agit de minimiser les plugins, encore et encore et encore. Il y a un an j'en utilisais en moyenne 20. Maintenant (hors standards WPMUDEV) j'en utilise à peine 5. Mes sites sont tout aussi fonctionnels mais 10x plus rapides !” -JD
"Toujours essayer de minimiser le nombre de plugins utilisés." - James
Principales recommandations :
Elementor + Bonjour Elementor
Elementor est la plate-forme de site Web n ° 1 pour WordPress. Des pages de destination et des magasins de commerce électronique aux sites Web complets, créez tout cela avec l'éditeur de glisser-déposer en direct d'Elementor.
Gérez gratuitement un nombre illimité de sites WP
Hello Elementor est le thème vanille minimal spécialement conçu pour être associé au constructeur de pages Elementor. En tête des charts peu après sa sortie, il compte plus d'un million d'installations actives, avec 4,5/5 étoiles.
Divi
Divi amène WordPress à un tout autre niveau avec sa technologie de création visuelle incroyablement avancée.
Une plate-forme de création de sites Web qui remplace l'éditeur de publication WordPress standard par un éditeur visuel largement supérieur, elle vous donne le pouvoir de créer des conceptions spectaculaires avec une facilité et une efficacité surprenantes.
Briques
Un outil plus rapide, plus personnalisable et plus performant pour concevoir visuellement l'ensemble de votre site, de l'en-tête au pied de page, et tout ce qui se trouve entre les deux. Insérez des données dynamiques, modifiez et prévisualisez plusieurs points d'arrêt pour un site Web entièrement réactif et optimisé pour les mobiles.
Breakdance
Avec 120 éléments intégrés, une interface utilisateur et un flux de travail modernes et une intégration profonde de WooCommerce, Breakdance est le plugin de création de site Web ultime pour WordPress.
10Web
Le tout premier constructeur WordPress alimenté par l'IA. Obtenez la structure et la conception initiales de votre site Web avec l'IA, modifiez-le avec 10Web Builder basé sur Elementor, puis poussez pour vivre en un clic.
"J'ai trouvé ce site qui fait des choses intéressantes dans la version gratuite, c'est comme un changement de jeu pour le score de vitesse de page mobile. De nombreuses fonctionnalités intelligentes pour vous aider à créer de meilleurs sites en moins de temps. – Edouardo
Oxygène
Édition visuelle puissante pour l'ensemble de votre site Web. Construisez avec des éléments HTML fondamentaux. Écrivez PHP, CSS et JS en direct.
Les fonctionnalités incluent : faites glisser les bords des éléments pour définir l'espacement, ou faites glisser et déposez pour réorganiser ; contrôle visuel de chaque partie de votre boutique WooCommerce ; créer visuellement des en-têtes de site Web personnalisés, y compris des en-têtes collants et superposés ; modifier les couleurs en un seul endroit.
"Un constructeur Web rapide comme Oxygen change la donne pour la vitesse des sites Web." – Greg
Impréza
Site Web WordPress et thème WooCommerce Builder les mieux notés.
"J'utilise IMPREZA parce qu'il est très performant." – Phil
Soulignements
Un thème de démarrage destiné à devenir le prochain thème WordPress le plus impressionnant. CSS ultra-minimal signifie moins de choses à vous gêner lorsque vous concevez.
Nettoyeur de base de données avancé
Au fil du temps (ou de l'utilisation intensive de plugins), les bases de données WordPress accumulent d'anciennes révisions, des métadonnées de publication orphelines, des commentaires de spam, etc., rendant les sites lents et gonflés.
Ce plugin élimine facilement les données inutiles pour réduire la taille de votre base de données, améliorer la vitesse et les performances du site Web et avoir une sauvegarde plus rapide de la base de données (puisque le fichier sera plus petit).
Hébergement de qualité
Bien sûr, l'hébergement s'est hissé au sommet de nos listes de gourous du développement Web, leurs voix désireuses d'exprimer à quel point l'hébergement de qualité est important.
Si vous mettez en place tous les éléments d'économie de vitesse de cette liste, puis optez pour une plate-forme d'hébergement dotée de serveurs partagés, de ressources minimales ou d'un support inférieur à la moyenne, tous vos efforts seront vains.
Un hébergeur fournit plus qu'un simple endroit pour stocker du contenu en ligne. Ils sont la base de vos sites. Choisissez un hébergeur sécurisé, fiable et réputé pour construire votre résidence en ligne ; la tranquillité d'esprit et le succès qui en découlent valent bien chaque centime.
Principales recommandations :
Hébergement WPMU DEV
Rapide comme l'éclair, dédié et entièrement optimisé pour WordPress, sans partage ni interruption.
Voici quelques-unes des fonctionnalités : 10 centres de données + CDN 45 points ; FastCGI ; les meilleurs outils de sécurité et de gestion de site ; Garantie de disponibilité de 99,9 % ; WooCommerce optimisé ; assistance premium (24/7/365).
Ne nous croyez pas sur parole ; voir ce que d'autres personnes partageant les mêmes idées ont à dire sur nous.
“Choisir un bon hébergement est l'essentiel . L'hébergement WPMU DEV est génial. – Greg
"Mes sites les plus rapides sont sur l'hébergement WPMU Dev" - Brad
"Hébergement : WPMU DEV 100 %" - Phil
Hébergement A2
Sécurisé avec des fonctions de protection améliorées. Avantages du serveur géré et outils pour la gestion des thèmes et des plugins. Stabilité avec un engagement de disponibilité de 99,9 % et une assistance interne 24h/24 et 7j/7.
“A2 est mon hébergement DEV non WPMU ; Turbo (sur les serveurs LiteSpeed) est très rapide. – Greg
Outils et astuces pour sac de transport (divers)
Il y avait aussi des outils et des conseils qui ne relevaient pas de nos autres catégories, mais nous voulions les inclure car ils ajoutent définitivement de la valeur à la conversation.
Utilisez des extraits personnalisés pour un contrôle précis
"Je me retrouve constamment à écrire des extraits personnalisés pour faire des choses comme des scripts de retrait de la file d'attente sur des pages qui ne sont pas nécessaires, ou désactiver des fonctionnalités dans Jetpack, WooCommerce, Core, etc. que je n'ai pas besoin de perdre du temps à charger." – Super adorable
"J'essaie d'éviter d'ajouter des plugins si c'est quelque chose que je peux faire avec quelques lignes supplémentaires dans mon fichier functions.php." – Mat
Extraits de code
Un moyen facile, propre et simple d'exécuter des extraits de code sur votre site, il fournit une interface graphique pour ajouter des extraits et les exécuter sur votre site comme s'ils se trouvaient dans le fichier functions.php de votre thème.
Les extraits peuvent être activés et désactivés (tout comme les plugins), et être exportés pour être transférés vers un autre site, soit en JSON pour une importation ultérieure par le plugin Code Snippets, soit en PHP pour créer votre propre plugin ou thème.
Statistiques : Installations actives : plus de 700 000, ~400 avis, 5 étoiles sur 5
Travailler avec les plateformes LMS
« Je travaille avec des plates-formes LMS et nous ne pouvions rien faire de plus que cela. Travailler avec des sites Web pour créer des cours est devenu une chose du passé. – Manuel
LearnPress
Créez et vendez facilement des cours en ligne, avec des programmes comprenant des leçons et des questionnaires, le tout géré avec une interface conviviale.
Créez simplement et rapidement des sites Web de cours éducatifs ou en ligne sans aucune connaissance en codage requise. Il existe également une bibliothèque d'addons gratuits et premium qui étendent les fonctionnalités.
Statistiques : Installations actives : plus de 100 000, plus de 500 avis, 4,5/5 étoiles
Utiliser une plate-forme de gestion de serveur cloud
Runcloud
Panneau de gestion de serveur moderne ; La plate-forme de niveau entreprise pour la gestion des serveurs cloud ; Automatisez la configuration du serveur et les mises à jour de sécurité.
Avec RunCloud, vous n'avez pas besoin d'être un expert Linux pour créer un site Web propulsé par DigitalOcean, AWS, Google Cloud ou Vultr. Utilisez cette interface graphique pour créer une entreprise sur le cloud à moindre coût.
"Après avoir testé tant de stratégies d'hébergement différentes, nous avons trouvé celle-ci la plus efficace... très rapide à créer et beaucoup d'automatisation possible car Runcloud offre une excellente API." – Ricardo
Tous les aspects importants des tests
Puisqu'il y a tellement de variables que vous pouvez utiliser pour faire fonctionner votre site plus rapidement, la meilleure façon de vraiment savoir ce qui fonctionne le mieux est de tester ce que vous mettez en place.
De plus, en raison de la nature dynamique des sites Web WordPress, il est essentiel de continuer à surveiller le bon fonctionnement de tous les composants.
Outils de test de vitesse recommandés :
Google PageSpeed - PageSpeed Insights (PSI) rend compte des performances d'une page sur les appareils mobiles et de bureau, et fournit des suggestions sur la façon dont cette page peut être améliorée.
GTMetrix - voyez comment votre site fonctionne, indiquez pourquoi il est lent et découvrez des opportunités d'optimisation.
Checkbot.io – crée des rapports très détaillés sur les différents éléments qui affectent la vitesse et le référencement de votre page ; teste des centaines de pages à la fois pour les liens brisés, les titres en double, le code HTML invalide, les pages non sécurisées et plus de 50 autres vérifications.
WebPageTest - testez instantanément la vitesse, la convivialité et la résilience de votre site dans de vrais navigateurs, appareils et emplacements dans le monde entier.
Lighthouse - une extension de navigateur Chrome et un outil automatisé pour améliorer les performances, la qualité et l'exactitude de vos applications Web ; il exécute un barrage de tests sur la page, puis génère un rapport sur ses performances et sur ce que vous pouvez faire pour l'améliorer.
Sizzy – un navigateur pour les développeurs Web ; vous permet de tester dans plusieurs fenêtres, de vérifier les scores de performance, de développer et de tester tous les cas d'utilisation sans avoir à les simuler manuellement dans un navigateur standard.
Des tests et des ajustements réguliers sont une partie importante du maintien de ces vitesses de niveau supérieur. Choisissez donc les outils que vous préférez et assurez-vous de le faire de manière cohérente.
Améliorez les performances de votre site Web WordPress
L'importance d'accélérer un site WordPress ne peut être assez soulignée.
Vous avez tout investi dans votre site Web - associez maintenant cet excellent contenu à des vitesses de chargement de page compétitives pour augmenter votre engagement et vos conversions.
Avec autant d'options pour accélérer un site WordPress facilement disponibles, et dont beaucoup sont gratuites, cela n'a aucun sens de ne pas les utiliser à votre avantage.
J'espère que vous utiliserez facilement certains des outils et techniques de cet article et que vous constaterez par vous-même à quel point la vitesse de votre site peut être améliorée.
Si vous n'êtes pas membre de WPMU DEV, essayez-nous sans risque (aucune carte de crédit requise) et voyez à quel point nous pouvons compléter votre site. Notre support est inégalé et vous aidera avec n'importe quel problème dans WordPress - même si ce n'est pas notre produit.