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 de dywants Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

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.

1define( ‘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:

performance dywants Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

Nouvelle vitesse après installation de WP-Sweep

Côté mobile ça donne:

vietsse sur mobil Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

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.

test du poids du gzip Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

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

rendu de limage Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse
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:

reglage asymt Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

Paramétrage du plugin Async JavaScript N°1
reglage asymt1 Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

Paramétrage du plugin Async JavaScript N°2
reglage asymt2 Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

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

modification d javasscrip Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

Recommandation GTmetrix concernant le Javascript du site dywants

Et

modif css Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

Suggestion GTmetrix sur le CSS du site

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

reglage de optimiser Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

Paramétrage du plugin Autoptimize

Et voila le resultat:

nouvelle vitesse du site Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

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

Sur mobile:

nvell vitesse sur mobil Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

Vitesse sur Mobile grâce a Autoptimize

Côté ordinateur:

vitesse sur pc google pagespeed Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

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.

elements a ameliorer Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

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

reglage cache enable 1024x437 Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

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:

nouveau resultat apres linstallation du plugin cache enable 1024x476 Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

Nouvelle vitesse sur GTmetrix avec Cache Enable

Waouh, superbe ça! Je suis heureux,

Sur Google PageSpeed

Côté Mobile:

mesure vitesse dywants sur google pagespeed cote phone 1024x438 Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse

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

Côté ordinateur:

google pagespeed cote ordinateur apres installation du plugin enable 1024x438 Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse
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:

suggestion de gtmetrix apres toute les optimisation Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse
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:

nveau score de vitesse avec enable 1024x475 Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse
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:

score vitesse cote mobile seulement avec cache enable Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse
Vitesse coté mobile Seulement avec le plugin Cache Enable

Sur PC:

vue sur pc google pagespeed avec enable 2 1024x438 Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse
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

point a ameliorer Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse
Suggestion d’amélioration faite par GTmetrix
encore des ameliorations 1 Comment optimiser son site web? Cas de Dywants: 1ère partie La vitesse
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.


error: Content is protected !!
21 Partages
Partagez
Partagez
Tweetez