contact@dywants.com+237 675068045
Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse<span class="wtr-time-wrap after-title"><span class="wtr-time-number">12</span> min à lire</span>

Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse12 min à lire

Selon Google, est le processus par lequel vous modifiez votre site et les annonces qui y sont diffusées afin d’améliorer la qualité de vos pages, d’attirer plus de visiteurs et d’améliorer les performances des annonces AdSense. Basée sur vos objectifs, l’optimisation peut impliquer des améliorations de la mise en œuvre des annonces ou des changements sur votre site.

Pour ma part elle porte sur la vitesse de mon site web, le contenu et l’indexation de dywants.

Vitesse de mon site

Malheureusement au moment où je commence à optimiser la vitesse de mon site web, j’ai pas eu la présence d’esprit de faire des imprimes écran de ma vitesse. Néanmoins je rappelle que sur GTmetrix j’avais les paramètres tel que :

  • PageSpeed Score: autour de 47%
  • YSlow Score: autour de 40%

PageSpeedInsights côté phone c’est la catastrophe une note de 7%.

Vous l’aurez compris je vais utiliser GTMetrix et PageSpeedInsights pour contrôler les performances de mon site en matière de vitesse.

Pour vous montrer les anciennes versions de Dywants, je me rend sur le site Web “archive.org”. Et en Août 2018 j’avais sur ma page d’accueil les éléments suivant:

  • Beaucoup d’effets des icônes et des textes qui défilaient d’une certaine manière, Coolllll je me disais en voyant tout ça
  • Un pixel Facebook sur mon Footer histoire de voir le nombre de personnes qui me suivent sur Facebook, même si c’était juste 20 personnes en tout. Mais bon je trouvais cette fonctionnalité plutôt sympa quoique inutile!
  • Des boutons de partage avec le plugin sumo
  • Des Images issu de mon thème Salient, qui bien sûr augmentaient le taux de redirection sur mon site web.
  • Des Images volumineuse

Mais comment j’allais donc faire pour optimiser tout ça. Notre dernier article sur le SEO écrite par ma collaboratrice Johana, eh oui je ne suis plus seul, elle gère essentiellement tout ce qui est rédaction web,Social Media,voilà pour cette parenthèse. Cet article en rapport avec la vitesse faisait allusion à certains outils et bon pratique que je pouvais déjà mettre en application.

Réduction du poids des Images

J’ai scruté chaque image dans la bibliothèque des media et toutes les images ayant plus de 100Px ont été réduites grâce à l’outil en ligne Pixlr, qui m’a permit de réduire les images sans pour autant perdre en qualité.

Puis j’ai effectué une compression en masse avec le plugin Imagify, ce qui m’a permis de faire un gain de 60%.

Réduction des fonctionnalités non indispensable

Pour aller plus loin, je décide d’alléger ma Homepage.Ceci en réduisant tout les effets de texte et image et surtout ceux venant de mon thème, vous savez les images venant avec les blocs préconstruit des thèmes comme Salient, DIvi. Ceux là je l’ai carrément retiré car ils me créaient des redirections vers le site de Salient.

En plus, j’ai décidé d’alléger les fonctionnalités de Sumo, celui ci mettait les boutons de partage sur ma Homepage, que je retire avec aussi le suivi des Likes de ma page Facebook se trouvant sur mon Footer.  Et là j’ai des résultats plutôt satisfaisant.

Vitesse dywants donnée par GTmetric après réduction des fonctionnalités inutiles

Vitesse page Dywants après réduction des certains fonctionnalités

Mais pas encore satisfaisante, car j’ai encore Sumo qui envoi une Pop up quand un internaute quitte ma page et le plugin Cookiebot très intrusif.

Je décide de changer de plugin de partage de contenu(sumo) par Social Warfare, attention je ne suis pas entrain d’insinuer que Sumo est un mauvais plugin. Mais pour ma part il s’est avéré ne pas être la meilleure solution. Puis je réduit certaines fonctionnalités de Cookiebot.

Optimisation de la base des données

Vous avez certainement l’habitude de modifier, l’aspect de vos pages et faire des révisions de nos articles. WordPress enregistre tout cela, ce qui n’est pas mal en soit mais voilà trop de révision ralenti votre site. Comment faire?

Je pourrais  limiter le nombre de révisions que WordPress conserve pour chaque article en ajoutant simplement cette ligne de code sur le fichier wp-config.php.

define( 'WP_POST_REVISIONS', 4 ); 

Ce qui  limitera WordPress à ne sauvegarder que les 4 dernières révisions de chaque publication ou page, et supprimera automatiquement les révisions plus anciennes.

Mais voilà comme je l’ai dit je ne veux pas faire du code, c’est certainement les séquelles de ma mésaventure dans le Fichier Fonction PHP de mon thème. Après quelque ligne de code ajoutées dans ce fichier, mon site s’est cassé j’ai dû passer par le FTP pour résoudre le problème. Grosse frayeur!

Alors je décide d’utiliser le plugin WP-Sweep, gratuit au passage. Qui totalise 70 000 installations actives au moment où j’écris cet article et totalement compatible avec Wp 5.0.2. Il me permet ainsi de supprimer:

  • Révisions
  • Brouillons automatique
  • Commentaires supprimés
  • Commentaires non approuvés
  • Commentaires spammés
  • Commentaires supprimés

Je vous le recommande vivement!

Ceci combiné avec les actions précédent me permettent d’avoir les performances suivante:

Amélioration vitesse de chargement des pages après nettoyage de la base des données

Nouvelle vitesse après installation de WP-Sweep

Côté mobile ça donne:

Vitesse cote mobile Donné par Google PageSpeed après installation du plugin wp-Sweep

Performance vitesse côté mobile après installation du plugin wp-sweep

Pas mal, mais pas encore suffisant! Pourquoi s’arrêter en si bon chemin. alors je décide de voir si la compression Gzip est activée.

Activation de la compression Gzip

Oui il l’ai, ouff! grâce à mon hébergeur web. merci OVH, sans faire de publicité bien sûr.

Mais si OVH ne l’avait pas fait, le plugin comme WP Rocket payant ajoute automatiquement les règles de compression Gzip dans votre fichier .htaccess en utilisant le module mod_deflate. W3 Total Cache a aussi un moyen de l’activer pour vous dans sa section performance.

Mais si vous êtes un habitué du code vous pouvez mettre ce code dans le fichier .htaccess (mettre un lien de téléchargement du code)

  • Mais je décide quand même de voir quel poids en octet j’ai gagné en activant la compression Gzip, pour lors  l’outil Check Gzip Compression est la

solution idéale.

Compression Gzip, gain de 84% des poids en Octet

Poids en octet des fichier compressés après activation de la compression Gzip

Il me fait même certaines recommandations, mais  pour lors je ne me penche pas la dessus. Néanmoins je vous invite à faire ce test!

Jusque là tout va pour le mieux, mais je ne suis toujours pas satisfait. Je me penche sur mon fichier d’analyse fourni par GTMETRIX, et m’indique qu’il faut encore optimiser certaine choses a savoir:

  • Tirer parti de la mise en cache du navigateur
  • Éliminer le JavaScript et le CSS bloquant le rendu dans les contenus
  • Minimiser le JavaScript  et le CSS
  • Réduire le temps de réponse du serveur

Éliminer le JavaScript et le CSS bloquant le rendu dans le contenu

En observant de plus près l’analyse faite par GTMETRIX je tombe sur cet information

Rapport de GTmetrix sur la nécessité d’éliminer le Javascript et le CSS
Recommandation de GTmetrix sur le rendu des images

Lorsqu’un navigateur charge une page Web, les ressources JavaScript et CSS empêchent généralement l’affichage de la page Web jusqu’à ce qu’elles soient téléchargées et traitées par le navigateur.

Commençons par le JavaScript, je décide d’utiliser le plugin  Async JavaScript. Celui ci va me permettre de différer le JavaScript et rendre notre chargement JavaScript asynchrone.

Pour les réglages référez vous aux captures d’écran suivantes:

Activation de la fonction Async JavaScript

Paramétrage du plugin Async JavaScript N°1
Suite Paramétrage du plugin Async JavaScript

Paramétrage du plugin Async JavaScript N°2
Choix de différer le Jquery lors du chargement des pages du site internet

Paramétrage du plugin Async JavaScript N°3

Je constate qu’il me recommande le plugin Autoptimize, ok!. En jetant un coup d’oeil sur ce plugin, je me rend compte que j’ai trouvé le saint grâle car celui ci me permet de résoudre l’autre problème que j’ai, à savoir minimiser les CSS et le JavaScript.

Minimiser le CSS et Le JavaScript

Le fichier de GTMETRIX me donne ces informations

Besoins de réduction du Javascript suggéré par GTmetrix

Recommandation GTmetrix concernant le Javascript du site dywants

Et

GTmetrix me recommande de reduire le CSS du site dywants

Suggestion GTmetrix sur le CSS du site

J’installe, active et configure le plugin Autoptimize comme suit:

Autoptimize, plugin permettant de réduire le Javascript et le css

Paramétrage du plugin Autoptimize

Et voila le resultat:

Performance Dywants grâce au plugin Autoptimize

Nouveau résultat de performance de vitesse après installation du plugin Autoptimize

Sur mobile:

Nouvelle Vitesse sur mobile de dywants grâce au plugin Autoptimize

Vitesse sur Mobile grâce a Autoptimize

Côté ordinateur:

Vitesse Google PageSpeed coté PC Grace au plugin Autoptimize

Vitesse sur PC Google PageSpeed Apres installation d’Autoptimize

Cool! Mais je peux faire plus.

Réduire le temps de réponse du serveur

GTmetrix me recommande de réduire les redirections et surtout de tirer profit de la mise en cache du navigateur. Il n’est recommandé l’Ajout d’en-têtes de contrôle de cache dans Apache (mon serveur web) mais voilà, je ne veux pas faire du code, alors je décide de ne rien faire.

Temps de réponse du serveur à améliorer proposer par GTMetrix

Suggestion de GTMetrix sur l’optimisation du temps de réponse du serveur

Mais je me dit, qui dit mise en cache du navigateur dit plugin de mise en cache et aussi qu’en améliorant le temps de réponse de mon serveur web cela pourra m’aider avec aussi la mise en cache du navigateur et bien plus encore .

Mais voilà j’en ai déjà installé un, qui jouit d’une grande réputation, WP Super Cache. Je sais aussi que wp rocket est génial comme plugin de mise en cache, mais voilà je ne veux pas dépenser un seul euro.

Alors je constate qu’il existe un plugin de mise en cache compatible et très complémentaire avec tous les plugin déjà installé plus haut: Cache Enable.

Il totalise au moment de la rédaction de cet article plus de 50 000 installation active et compatible avec WP 5.0.2, en plus il est facile à configurer

Paramétrage Cache Enable plugin de mise en cache

Paramétrage du plugin cache Enable

Le plugin me recommande d’associer KEYCDN pour une meilleure performance, mais hélas ce service n’est pas gratuit. En plus je ne pense pas en avoir besoins pour le moments.

Cache Enable permet :

  • Un Moteur de cache disque efficace et rapide
  • Un Effacement automatique et / ou manuel du cache
  • De Purger manuellement le cache de pages spécifiques
  • L’Affichage de la taille réelle du cache dans votre tableau de bord
  • La Minification de HTML et JavaScript en ligne
  • La Prise en charge multisite WordPress
  • La Prise en charge du type de message personnalisé
  • La Directive d’expiration
  • La Prise en charge de 304 non modifié si la page n’a pas été modifiée depuis la dernière mise en cache
  • de prendre en charge les images réactives via srcset depuis WP 4.4
  • De Fonctionner parfaitement avec Autoptimize

Autant dire qu’il est superbe, en plus il est compatible avec Autoptimize

Voyons maintenant les résultats:

Sur GTmetrix:

Grosse amélioration de la vitesse après installation du plugin Cache Enable

Nouvelle vitesse sur GTmetrix avec Cache Enable

Waouh, superbe ça! Je suis heureux,

Sur Google PageSpeed

Côté Mobile:

Google PageSpeed coté Mobile après optimisation avec le plugin de mise en Cache plus les autres plugins

Vitesse coté Mobile chez google PageSpeed avec le plugin Cache Enable

Côté ordinateur:

Score vitesse sur pc Google PageSpeed après toutes les optimisations
100% vitesse par Google PageSpeed après toute les optimisation

Je suis au ange, Google me donne 100% sur l’optimisation de la vitesse de Dywants.

Néanmoins GTMETRIX, me fait part de certains points où je pourrais m’améliorer:

Nouveau Score de vitesse donné par GTmetrix avec des suggestions d'amelioration
Score Vitesse cote GTmetrix avec des suggestions

Mais voilà cette optimisation bien que cool, a aussi des conséquences. En effet, après cette optimisation j’ai entrepris certains test, sur un autre navigateur et sur mon téléphone et là coup de grâce cette optimisation bien qu’intéressante du point de vue score a néanmoins des conséquences sur le rendu de mon site.

Certaines page n’affiche pas leur contenu dans son intégralité, mes formulaires ne sont pas disponible ni sur Firefox, ni safari(iphone), ni sur opéra.

Plus encore, sur smartphone je n’ai pas accès au menu, au formulaire de newsletter sur mon footer et la partie blog de mon site web.

Je décide alors de faire quelques manipulations sur le plugin Autoptimize en réduisant certaines fonctionnalités comme permettre l’exécution du JavaScript lors du chargement des pages,mais les résultats ne sont pas satisfaisantes.

Je teste d’autre plugin comme, Speed ​​Booster Pack,JCH Optimize,  Hummingbird de WPMU DEV qui ont tous pour point commun avec Autoptimize de déplacer les Scripts de JavaScript, CSS et Jquery sur le Footer ou de le combiner en un seul fichier, voire les réduirent. Hélas les résultats sont les mêmes.

Alors je décide de ne garder que le plugin cache Enable, et minimise les effets de transition des textes, images, associé au plugin WP-Sweep j’obtiens les résultats suivants:

Sur GTMetrix:

Résultat de vitesse juste avec le plugin cache Enable
Nouvelle vitesse Seulement avec le plugin cache Enable

Un gain sur le temps de chargement du site, moins de redirection et la taille total des pages optimisés.

Sur Google PageSpeed côté mobile:

Vitesse sur Mobile chez Google PageSpeed
Vitesse coté mobile Seulement avec le plugin Cache Enable

Sur PC:

Résultat final score de vitesse après désactivation des autres plugins a l’exception du plugin de mise en cache
Vitesse finale côté Pc donnée par Google PageSpeed

GTmetrix me fait quelque recommandations sur la façon dont je pourrais améliorer mon score de vitesse

Malgré un bon score de vitesse du site il reste des points à améliorer
Suggestion d’amélioration faite par GTmetrix
suggestion GTmetrix afin d’améliorer les compétences coté serveur
Suggestion GTmetrix côté serveur

comme solution, je pourrais en ce qui concerne le fait de réduire les recherches DNS faire recours au service cloudflare Freemium. Pour le moment j’en reste là, ces différentes améliorations feront l’objet d’une préoccupation prochaine.

Conclusion:

Grâce à toutes ces amélioration sans code, ni aucune dépense j’ai pu améliorer mon site web sur les plan suivants:

  1. PageSpeed:
    GTMETRIX de 44 %a a  70 %
    Google PageSpeed 97% sur ordinateur et 30% sur mobile
  2. Temps total de chargement: plus de 14.2s à 4.3s
  3. Redirection: près de 142 à 90

Même si je n’ai pas intégré toutes les optimisations cité plus haut, cette expérience m’a permis de comprendre que certains thèmes et plugin fonctionnent mal quand on tente de déplacer le CSS, Javascript sur le Footer ou à les minimiser, au risque de perdre certaines fonctionnalités sur le site web.

Par conséquent, la meilleure optimisation consiste à minimiser les effets de transitions des textes et images dans votre site web. Faire vos mises à jours et réduire ou vider votre base des données d’éléments inutile et utiliser un bon plugin de mise en cache.

Dans la deuxième partie de notre optimisation du site dywants, nous aborderons la partie contenu du site web et son indexation.


Cet article a 2 commentaires

  1. Super cet article, très complet merci ! On est à fond dans le récit et on a envie de connaitre la fin. Au final vous recommandez d’installer les plugins Cache Enable et Wp-Sweep uniquement si on veut garder un site qui se charge et où toutes les fonctionnalités fonctionnent, que ca soit sur pc comme sur mobile ? Merci d’avance !

  2. bjr Alexis
    merci pour ton retour, dans mon cas ce sont les deux plugins qui ont marcher sans cassé mon site. pour d’autre personne les autres plugins cités peuvent fonctionner en fonction du thème et plugin installer dans le site internet, par exemple si tu utilise un autre plugin que Ninjaform pour tes formulaire le plugin Async Javasscript pourrait fonctionner sans problème.
    aussi pour une bonne optimisation de la vitesse éviter très effets de transition des texte et image
    j’attends plus de retour de ta part , sur ce qui a marcher dans ton cas!
    Cordialement!

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Fermer le menu
error: Content is protected !!
ante. mattis ut ut dolor facilisis ipsum sed nec
25 Partages
Tweetez
Partagez
Enregistrer
Partagez25
+1