Comment accélérer un site Web d'annuaire ou de marché construit avec HivePress

De nos jours, la vitesse de chargement du site Web et les performances globales sont cruciales pour une bonne expérience utilisateur et un bon classement dans les moteurs de recherche. Google a récemment annoncé qu'il commencerait à mesurer les Core Web Vitals, tels que les scores de stabilité visuelle et les temps de chargement des pages, pour les sites Web afin de déterminer s'ils se qualifieraient pour une augmentation du signal de classement. De plus, les pages avec un temps de chargement plus long ont tendance à avoir des taux de rebond plus élevés et un temps moyen sur la page plus faible.

Dans ce didacticiel, nous vous expliquerons comment faire monter en flèche les performances de votre site Web en configurant la mise en cache, en optimisant les styles et les scripts, ainsi qu'en optimisant le contenu multimédia. Nous utiliserons le plugin LiteSpeed ​​Cache, une solution d'accélération de site Web tout-en-un avec des tonnes d'outils et de fonctionnalités pour rendre votre site Web ultra-rapide.

À des fins de test, nous utiliserons un site Web d'annuaire WordPress construit avec HivePress et quelques extensions avec son thème ListingHive par défaut. Cependant, si votre site Web n'est pas construit avec le plugin HivePress, vous pouvez suivre les mêmes étapes pour tout autre site Web alimenté par WordPress.

Commençons donc par l'installation de LiteSpeed ​​Cache.

Installation du cache LiteSpeed

Tout d'abord, vous devez installer le plugin LiteSpeed ​​Cache. Vous pouvez facilement le faire directement depuis votre tableau de bord WordPress en allant dans la section Plugins > Ajouter un nouveau . Trouvez-le via la barre de recherche et procédez à son installation. Lorsque l'installation est terminée, cliquez simplement sur le bouton "Activer" pour activer le plugin.

Une fois installé et activé, vous pouvez commencer à optimiser votre site Web. Passons d'abord en revue les paramètres de cache de base.

Optimisation du cache

Afin d'ajuster les paramètres de base du cache, accédez à la page LiteSpeed ​​Cache > Cache . Il existe de nombreuses sections différentes sur cette page, mais nous n'aborderons que les paramètres les plus importants.

Paramètres de cache

Ici, nous vous recommandons fortement de désactiver le cache pour les utilisateurs connectés et les demandes d'API REST. Ceci est nécessaire pour que le plugin HivePress fonctionne correctement. Après avoir activé ou désactivé des options, n'oubliez pas d'enregistrer les modifications.

Cache d'objets

Ensuite, activons le Object Cache . Accédez à la section Objet et vérifiez si le cache d'objets est disponible sur votre site. Le test de connexion doit être affiché comme "réussi". Si tel est le cas, vous pouvez activer le cache d'objets, ce qui améliorera considérablement les performances du site Web en mettant en cache les requêtes de base de données en double.

Il ne devrait y avoir aucun problème à réussir le test de connexion si votre site Web est basé sur le serveur OpenLiteSpeed ​​ou si votre fournisseur d'hébergement prend en charge la mise en cache d'objets.

Cache du navigateur

Enfin, accédez à la section Cache du navigateur et assurez-vous qu'elle est activée. Cela mettra en cache tout le contenu statique comme les styles, les scripts et les images dans le navigateur de l'utilisateur.

Optimisation des pages

Votre prochaine étape consiste à accéder à la section LiteSpeed ​​Cache > Optimisation de la page afin d'optimiser les styles, les scripts et les polices.

Optimisation CSS

Commençons par la section Paramètres CSS . Ici, nous vous recommandons d'activer les paramètres CSS Minify et CSS Combine .

• CSS Minify - Si vous activez cette option, tous les caractères d'espacement supplémentaires, les caractères de nouvelle ligne et les autres données inutiles ou redondantes seront automatiquement supprimés des fichiers CSS sans affecter les styles du site Web.
• CSS Combine - En activant celui-ci, tous les fichiers CSS individuels seront fusionnés en un seul fichier CSS. De cette façon, le navigateur envoie une seule requête de fichier au lieu de demander chaque fichier CSS séparément, ce qui réduit le nombre de requêtes HTTP.

Optimisation des polices

Si votre site utilise Google Fonts, il existe quelques options pour optimiser le chargement des polices. Dans la même section Paramètres CSS , vous pouvez faire défiler vers le bas et définir l'option Optimisation de l'affichage des polices sur Permuter afin que la police de secours soit utilisée pour afficher le texte jusqu'à ce que la police personnalisée soit entièrement téléchargée.

Une fois que vous avez défini l'option Swap , accédez à la section Optimisation de la même page et activez l'option Charger les polices Google de manière asynchrone afin de charger les polices Google en arrière-plan pendant le rendu de la page.

Optimisation JavaScript

Passons maintenant à la section Paramètres JS pour optimiser les fichiers JavaScript. Ici, nous vous recommandons de suivre les mêmes étapes que pour les paramètres CSS. Activez simplement les options JS Minify et JS Combine afin que les fichiers JS soient également minifiés et fusionnés en un seul fichier.

Il y a aussi l'option Load JS Deferred qui peut vraiment faire la différence. Une fois que vous avez activé ce paramètre, les scripts se chargent en arrière-plan pendant que le navigateur rend la mise en page et les styles. Les scripts sont souvent "plus lourds" que le HTML, de sorte que le chargement et l'exécution des scripts qui ne sont pas nécessaires pour le rendu initial de la page peuvent être différés et chargés ultérieurement. Il permet aux visiteurs d'utiliser le site presque immédiatement.

Après avoir coché cette option, assurez-vous que l'interface du site Web n'est pas endommagée car certains scripts peuvent nécessiter un chargement avant que la page ne soit rendue.

Optimisation des médias

Enfin, vous devez optimiser votre contenu média. Étant donné que les images représentent souvent environ la moitié de la taille du contenu d'une page Web, la conversion de toutes les images au format WebP (qui est en moyenne 30 % plus petit que les autres formats) peut considérablement améliorer la vitesse de chargement de votre page.

Dans la section LiteSpeed ​​Cache > Image Optimization > Settings , vous pouvez convertir les images de votre site Web au format WebP en activant les paramètres Create WebP Versions et Image WebP Replacement .

Après avoir vérifié ces options, accédez à la section Résumé de l'optimisation de l'image pour obtenir la clé de domaine et optimiser les images en cliquant sur le bouton "Envoyer la demande d'optimisation" jusqu'à ce que le score d'optimisation de l'image atteigne 100 %.

De plus, s'il y a des intégrations sur votre site Web (par exemple, des vidéos YouTube, des publications Instagram ou des Tweets), il est préférable de charger le contenu intégré uniquement lorsque les utilisateurs y accèdent, et non lors du rendu initial de la page. Cela accélérera le rendu de la première page et réduira l'utilisation de la mémoire du navigateur.

Accédez à la section LiteSpeed ​​Cache > Page Optimization > Media Settings et activez l'option Lazy Load Iframes .

Emballer

Vous trouverez ci-dessous la capture d'écran des résultats de Google PageSpeed ​​sur les appareils mobiles et de bureau après avoir optimisé les performances du site Web en suivant les étapes de ce didacticiel.

C'est ça! Si vous avez créé votre site Web d'annuaire ou de marché avec HivePress (ou toute autre solution basée sur WordPress) , vous pouvez suivre les mêmes étapes pour configurer la mise en cache, optimiser les styles, les scripts et les polices, ainsi que le contenu multimédia comme les images ou les intégrations. En conséquence, vous obtiendrez un score élevé sur Google PageSpeed ​​(améliorant ainsi votre classement SEO) et améliorerez l'expérience utilisateur globale de votre site Web.

De plus, n'hésitez pas à consulter les articles suivants :

• Meilleurs plugins d'annuaire WordPress
• Thèmes de répertoire WordPress populaires
• Erreurs lors de la création d'un site Web de référencement WordPress