élément graphique de fond
logo xavier bonnaud

Web performances

Quoi de mieux pour développer son activité que de (re)développer sa vitrine principale ? et de façon eco-responsable c’est encore mieux !

Je suis parti de loin, pour mon premier « Book » un WordPress, un thème qui me plaisait et hop ! un thème enfant, mes créations dedans et voila c’est prêt !

Illustration Book version1

Par contre niveau performance… c’est moyen pas bon. Chez GT metrix il obtient un D et 57% de performance et sur PageSpeed Insights un petit 60.

Je n’ai rien optimisé du tout, ni les images, ni les fichiers, ni le cache.

Nouveau départ

Début décembre 2020, je ne suis pas titularisé dans mon poste de salarié (dev front), pas grave le boulot ne me plaisait pas des masses, je vais développer mon activité de free. Grosse introspection en perspective, quelle clientèle je veux toucher, pourquoi et comment ? l’écologie m’intéresse, le DIY, les low-tech, le local, la permaculture… ma vitrine actuelle n’est pas en « phase » avec ce que je recherche, il faut que j’optimise tout ça.

J’achète le livre de Frédéric BORDAGE « Écoconception web / les 115 bonnes pratiques », je lis plein de choses sur l’écoconception (et le fait que le projet se « pense » éco dès le départ).
Premier constat je ne suis pas full-stack développeur je suis designer et niveau technique il y a une grosse différence mais je peux actionner certains leviers. Est-ce qu’il existe un thème wordpress hyper lite ? oui : Susty un thème de 6ko.
Deuxième question, comment mettre en valeur mon travail (graphique) sachant que les images vont plomber le poids de mes pages web ? L’utilisation d’illustrations vectorielles m’a traversé l’esprit mais n’est pas compatible avec la présentation de sites ou de plaquettes, alors direction des .jpg en noir et blanc optimisés.

Ma page d’accueil est lite, une partie en fond noir (le noir est plus économe sur les écrans), une typographie présente sur tous les navigateurs (pas de Google Font donc pas de requête en plus). Des images de présentation noir et blanc, si l’internaute veut avoir un meilleur aperçu il clic dessus et découvre une image couleur et plus de détails sur le projet. Même le menu a été pensé en CSS pour éviter de surcharger le code.

Pour la partie WordPress, il n’y a que le strict minimum, voici les plugins présents :

  • Otoptimize : pour accélérer le site
  • Contact form 7 & Honeypot : pour mon formulaire de contact
  • WP super cache : pour la gestion du cache
  • Duplicator : pour les sauvegardes

Pas de traceur google ou autres, ce n’est pas un site marchand et le nombre de clics sur cet article ne m’intéresse pas et vos données privées non plus.

Pour le moment ce nouveau site obtient un bon score :

Chez GT metrix il obtient un A et 97% de performance (avant D et 57%) et sur PageSpeed Insights un 100 (avant 60). Je vais continuer à l’optimiser au maximum. Ma prochaine étape sera une version statique du site (Jamstatic) mais j’ai encore des connaissances à acquérir 😉