Comment optimiser et accélérer le thème GeneratePress ?

Dans ce tutoriel, apprenez à optimiser la vitesse du thème GeneratePress.

Fondamentalement, nous utiliserons le thème WordPress Premium GP dans tout ce processus d’optimisation. GeneratePress Theme est le thème que j’utilise en général sur mes blogs (voir la revue complète)

Après avoir lu cet article de blog, mettez en œuvre ma stratégie sur votre blog pour accélérer le site web WordPress avec le thème GeneratePress.

Dans ce guide, vous en apprendrez également plus sur

  • Test de vitesse GeneratePress et WPLogout
  • Étapes pour accélérer le thème GeneratePress
  • Utilisation du plugin Premium dans GeneratePress
  • Hébergement Web
  • Optimisation des plugins
  • Optimisation des polices
  • Utilisation du réseau de diffusion de contenu (CDN)
  • Optimisation des analyses

Générer un test de vitesse de presse

Un sous domaine speedtest.generatepress.com à été créé, par le développeur du thème GeneratePress, pour vous permettre de tester la vitesse du thème d’origine. 

Voici les résultats avec GTMetrix et Google PageSpeed ​​Insights, qui sont parmis les meilleurs outils pour tester la vitesse de votre site web.

Étapes pour optimiser le thème GeneratePress

Avant de commencer, vous pouvez lire mon article sur les 10 façons d’avoir un site web ultra rapide, il y a des choses qui vous seront utiles pour optimiser votre site GeneratePress.

Voici donc les trucs et astuces que vous pouvez mettre en œuvre dans votre blog.

Tout d’abord, essayez toujours d’utiliser moins de plugin. Moins de plugin = Moins de code et Moins de code = Site à chargement rapide et sans bug. J’essaie toujours d’éviter les plugins, mais il y a peu de plugins que je vais énumérer qui aident à atteindre notre objectif.

Les paramètres de GeneratePress

Logo: Fondamentalement, nous téléchargeons le logo avec l’extension jpg ou png. Ici, j’utilise le logo SVG parce que SVG a d’énormes avantages par rapport au png et au jpg. La taille de SVG est plus petite que celle des autres extensions d’image. L’icône SVG reste la même quelle que soit la résolution de l’écran. Si possible, utilisez le logo SVG sur votre site. Pour des raisons de sécurité, WordPress ne permet pas de télécharger des fichiers SVG. Vous pouvez utiliser le plugin SVG Support  pour télécharger ce type dde fichier dans WordPress.

Type d’icône : Utilisez SVG comme type d’icône plutôt que comme police dans GeneratePress. Pour cela, rendez-vous dans votre Tableau de bord > Apparence > Personnaliser > Général > Choisissez SVG > Publier

Type d'icône dans GeneratePress

Si possible, évitez d’utiliser FontAwesome ou des ionicons qui ajoutent des demandes supplémentaires sur votre site.

Générer des modules de presse : Dans GP Premium, il existe différents modules que vous pouvez activer et utiliser. Désactivez les modules qui ne sont pas nécessaires en visitant Tableau de bord > Apparence > GeneratePress > Cliquez sur Désactiver que vous n’utilisez pas actuellement.

Activer et désactiver les modules GeneratePress

Bouton Retour en haut : Récemment, j’ai désactivé le bouton Retour en haut de mon blog car je pense que ce n’est pas nécessaire et que cela prenait également une demande supplémentaire. Et la même chose vaut pour la navigation collante. Allez dans Tableau de bord > Apparence > Personnaliser > Disposition > Pied de page > Bouton Retour en haut > Désactiver > Publier

Méthode d’impression CSS dynamique: Avant GeneratePress Theme utilisé pour insérer le CSS sous la feuille de style principale, mais après la dernière mise à jour, vous pouvez utiliser l’option de la méthode External File pour imprimer CSS dans un fichier externe. Aller à Apparence > Personnalisateur > Général > Choisir Fichier externe > Cliquez sur Régénérer le fichier CSS > Publier.

Méthode d'impression CSS dynamique

Table des matières

Si vous recherchez un plugin pour avoir de belles tables des matières, vous pouvez en trouver beaucoup dans le référentiel de plugins WordPress. Je vous recommande le plugin LuckyWP car il a un impact minimal sur la vitesse de la page et utilise moins de mémoire.

Mise en cache WordPress

Je vous recommande grandement d’utiliser un plugin de mise en cache. Cela fera une grande différence sur la vitesse de votre site web.

Pour vous aider à faire votre choix, lisez mon article “Les 5 meilleurs plugins de cache WordPress“.

Personnellement, j’utilise WP Rocket pour accélérer mon site. C’est un célèbre plugin de mise en cache WordPress premium.

Plugin WP Rocket Mise en cache WordPress

Le plugin WP Rocket possède d’excellentes fonctionnalités telles que la mise en cache des pages, le préchargement du cache, le préchargement du plan du site, la compression GZIP, la mise en cache du navigateur, l’optimisation de la base de données, l’optimisation des polices Google, la suppression des chaînes de requête des ressources statiques, la minification / concaténation, le report du chargement JS, etc. WP Rocket aide à obtenez un score plus élevé sur Google Page Speed ​​Insights, GTmetrix, etc. Essayez: WP Rocket Tutorial

Lire aussi :   Apprenez à gérer vos mises à jour OceanWP

Hébergement Web

Internet regorge d’articles sur l’hébergement Web, donc je ne vais pas écrire un long article sur l’hébergement web.

L’hébergement est la principale raison de la vitesse.

Auparavant, j’utilisais l’hébergement partagé et plus tard j’ai migré vers Cloudways. Après toute la migration, le temps de chargement des pages de mon site est considérablement réduit.

Hébergement Cloudways

GeneratePress lui-même utilise Kinsta qui est est alimenté par Google Cloud. Il y a une différence jour et nuit entre un hébergement mutualisé bon marché et un hébergement géré. Pensez donc à l’hébergement Web avant toute autre chose et choisissez judicieusement.

Réseau de diffusion de contenu

Un réseau de diffusion de contenu (CDN) est constitué de serveurs répartis géographiquement qui aident à accélérer notre site Web en mettant en cache les ressources telles que les fichiers HTML, les images, les vidéos, les fichiers JavaScript, les feuilles de style, etc. et en servant les ressources du serveur le plus proche en fonction de l’emplacement de l’utilisateur.

Le CDN convient si vous ciblez votre site à l’échelle mondiale. Facebook, Amazon, Netflix, Alibaba, etc. utilisent le CDN. j’utilise personnellement Cloudflare. L’un des fournisseurs de CDN les moins chers et les plus rapides pour accélérer mon site Web dans le monde.

Optimisation des polices

Généralement, lorsque vous utilisez des polices Google sur votre site, les polices sont appelées à partir du serveur de Google à chaque fois, c’est-à-dire qu’il y a toujours une demande supplémentaire de fonts.gstatic.com et fonts.googleapis.com.

Pour surmonter ce problème, vous pouvez héberger Google Fonts localement afin que les polices puissent être appelées depuis votre serveur ou CDN. Si vous ne pouvez pas vivre sans Google Fonts, je vous suggère d’utiliser 1 ou 2 polices au maximum en les hébergeant localement. Mais si vous souhaitez accélérer votre site Web GeneratePress, vous pouvez revenir à la police System Stack. Il y a certaines raisons de choisir la police de la pile système.

  • Les piles de polices système sont gratuites.
  • La pile de polices système est disponible dans votre système d’exploitation.
  • Aucun téléchargement de polices n’est requis

Comment utiliser la pile de polices système dans le thème GeneratePress ?

  • Accédez au tableau de bord de votre site
  • Allez dans Apparence > Personnaliser
  • Accédez à Typographie et choisissez la pile système parmi les options de police.

Pile de polices système dans GeneratePress

Optimisation de Google Analytics

En règle générale, nous utilisons le code de suivi Google Analytics sur votre site pour suivre les visiteurs. Lors du test du site dans GTMetrix, vous voyez Tirer parti de la mise en cache du navigateur pour Google Tag Manager et Google Analytics.

Vous verrez 2 requêtes supplémentaires et pour corriger la mise en cache du navigateur, vous pouvez héberger Google Analytics localement. L’optimisation de l’analyse aide à accélérer notre site Web WordPress.

Optimiser les images

j’utilise essentiellement TinyPNG et Squoosh pour optimiser les images avant de les télécharger sur des articles/pages. De plus, j’utilise Optimiseur de lapin pour servir des images à webp, c’est-à-dire plus petites et plus rapides que les JPG et les PNG.

Charge paresseuse

Et si vous intégriez des vidéos YouTube dans votre publication ou votre page ? L’intégration ralentira-t-elle votre site ? Comment charger paresseux des images sous le pli ? Oui, l’intégration ralentit le site Web car chaque fois que les visiteurs doivent faire une requête HTTP supplémentaire. Vous pouvez donc résoudre ce problème en chargeant paresseux l’iframe YouTube.

Solution: Si vous utilisez Plugin payant WP Rocket ensuite aller à WP Rocket > Médias > Activer LazyLoad pour les iframes et les vidéos. Vous pouvez également charger paresseux des images sous le pli à l’aide du plugin WP Rocket.

Chargement paresseux dans WP Rocket

[Free] De plus, vous pouvez utiliser WP YouTube Lyte pour charger paresseux une vidéo YouTube disponible gratuitement dans le référentiel WordPress.

[Free] Vous pouvez aussi utiliser Lazy Load – Optimiser les images ou alors a3 Charge paresseuse plugin pour charger paresseux des images et des vidéos sur votre site GeneratePress.

Conclusion

Vous pouvez toujours améliorer votre site en supprimant les plugins gonflés, les extraits de code inutilisés, etc. Chargez paresseux vos images et vidéos, optimisez vos images avant de les télécharger. Implémentez le CDN, choisissez l’hébergement approprié.

Par défaut, GeneratePress est l’un des thèmes les plus rapides et en mettant en œuvre les conseils ci-dessus, vous pouvez optimiser le thème GeneratePress et le rendre encore plus rapide. Si vous avez d’autres conseils, n’hésitez pas à commenter ci-dessous. Bonne optimisation !!!