New La formation pour devenir freelance en 3 mois ! (-30% avec le code LANCEMENT)

Comment est fait ce site ?

Depuis sa création en mars 2020, ce blog a évolué et tend à devenir un peu plus professionnel à chaque mise à jour.

Cette page sert à détailler comment je m’y suis pris pour la refonte de mon blog et des technos que j’ai utilisés.

C’est un peu un changelog personnel pour suivre l’évolution à chaque refonte.

Objectifs de la refonte du blog

Les deux raisons principales qui me poussent à améliorer régulièrement parlant le blog techniquement parlant :

  • J’adore coder, mais surtout j’adore améliorer les systèmes déjà existants pour les rendre plus propres, plus simples, plus efficaces ;
  • Je suis un éternel insatisfait, et comme je vois le blog tous les jours je m’en lasse vite !
Bref, mis à part ça je voulais un site beaucoup plus pro et propre qui pourrait aussi me servir de vitrine.

En ce mois de septembre 2021, je me suis lancé officiellement en freelance.

J’avais besoin d’un site un peu plus « beau » que le précédent…

Il fallait que je sois un minimum fier de montrer mon travail.

Version 0.1

Blog de développeur, ancien design
Ancien format du site dans sa version 0.1

La toute première version du blog où le design était pour le moins… Minimaliste.

Mais bizarrement, il plaisait !

Version 0.2

Avec l’aide de ma graphiste, nous avons largement fait évoluer le site pour avoir quelque chose qui me ressemblait davantage.

(J’en parle un peu plus bas)

Image accueil blog v 0.2
Ancien format du site dans sa version 0.2

Version 0.3

Le site avait déjà pas mal bougé pour devenir plus professionnel.

Mais comme je me lasse très vite du design du site alors… J’ai senti le besoin de le refaire, encore 🙂

Refonte du blog en version 0.3
Version 0.3 du blog

Performance, écoconception et accessibilité

La performance web, c’est vraiment mon truc, j’adore optimiser les sites sur lesquels je bosse.

Aujourd’hui, je trouve le web beaucoup trop lourd et souffrant d’un vrai manque de qualité.

C’est pourquoi je me suis donné pour mission d’avoir un site techniquement haut de gamme avec des performances redoutables.

Je crois que jusque-là, ce n’est pas trop mal !

Google Lighthouse

Pagespeed 100/100
100/100 pour mon blog WordPress sous Lighthouse

J’ai pris beaucoup de plaisir à obtenir le score 100/100 de Lighthouse sur chacune de mes pages (ou presque !).

C’était l’objectif de la refonte, avoir un site réellement rapide (car les web performance c’est mon coeur de métier).

Et vendre des audits de performances quand tu ne fais pas l’effort toi-même d’avoir un site performant…

Ça ne le faisait pas.

PageSpeed Insight

Même score sur Pagespeed Insight étant donné que c’est le même moteur.

Google Pagespeed 100/100
https://pagespeed.web.dev/report?utm_source=psi&utm_medium=redirect&url=https%3A%2F%2Falexsoyes.com&hl=fr

Core Web Vitals

Cela suit la logique sur la note donnée par PageSpeed Insight / Lighthouse.

On peut voir qu’il n’y a rien à redire dans la Search Console !

L’expérience utilisateur sur la page est vraiment importante à me yeux et de plus en plus pour le SEO…

Core Web Vitals Search Console
https://search.google.com/search-console/page-experience

Qualité de code

Comme la qualité du code est pour moi très importante, j’ai fait en sorte que l’ensemble des pages du site soient validées par les standards W3C.

Sans rentrer dans les détails, cela signifie que le code HTML / CSS des pages du site est généré sans erreur.

Or sur ÉNORMÉMENT de sites internet, ces standards ne sont pas respectés.

Comme ce sont des standards et non des normes, cela ne pose généralement pas « trop » de problème.

La refonte du blog aura ici aussi servi à rendre le code généré encore plus qualitatif.

w3c validator 100%
HTML valide pour les normes w3c
CSS valide w3c
CSS valide pour les normes w3c
Validation w3c des pages WordPress
L’ensemble des pages du site est valide à l’audit w3c

Si tu souhaites vérifier ton site ou celui des autres, tu peux utiliser le validateur officiel pour trouver les erreurs de sémantiques :

https://validator.w3.org/nu/?doc=https%3A%2F%2Falexsoyes.com

Mobile-Friendly et Mobile-First

Cela fait déjà quelques années que Google recommande de coder le CSS en mobile-first.

C’est une technique de code qui vise à d’abord faire le style pour le mobile…

Puis pour le desktop (ça se ressent surtout sur les media queries).

Ici aussi les bonnes pratiques du web ont été appliquées.

Google Test my mobile website
https://search.google.com/test/mobile-friendly
Google Test My Site
https://www.thinkwithgoogle.com/intl/fr-fr/feature/testmysite/

Optimisation des performances + écoconception

Concernant l’écoconception web

On a un site simple, qui comporte uniquement les fonctionnalités essentielles avec un design soigné et minimaliste.

Le style (CSS) et les scripts (JS) ne sont chargés que sur les pages où il y en a besoin.

Pas de superflu.

On élimine tout ce qui ne sert pas.

Score sur WebPageTest
https://www.webpagetest.org/result/220616_AiDc8D_9HZ/
Score A à 99/100 via Pingdom
https://tools.pingdom.com/#5f6f918291400000

Avec la refonte du blog, j’en ai profité pour suivre les conseils d’Acoli sur les principes du Green Graphisme afin de faire un site épuré avec une UX claire et précise.

Cela se ressent aussi sur les performances et sur la facilité de navigation 🙂

GTMetrix score A
Résultats gtmetrix

Ce n’est pas le site internet le plus optimisé de la Terre certes…

Mais le blog est quand même ultra-optimisé pour les performances.

Ce qui fait que même avec un hébergement ultra-low cost, il se charge quasiment en instantané.

L’objectif de la refonte du blog est avant tout d’avoir un site qui colle au plus proche de l’excellence technique.

Et en ce sens, j’en suis plutôt satisfait !

Accessibilité

L’accessibilité est toute aussi importante pour moi, aussi elle sera bien plus mise en avant lors de la prochaine version du blog.

Un article est prévu pour en parler en détail, en attendant…

J’ai d’ores et déjà fait en sorte que le site soit accessible au plus grand nombre (vitesse de chargement faible, navigation au clavier possible, respect des standards de l’accessibilité web…).

Sécurité et hébergement

Côté hébergement, les serveurs sont stockés en France chez OVH, le pare-feu applicatif est activé par défaut avec la dernière version de PHP.

Je me suis posé la question de savoir si je devais changer d’hébergement lors de la refonte du blog.

OVH a toujours bien fonctionné et dispose d’un rapport qualité / prix incroyable.

Couplé à WordPress, on obtient un hébergement sécurisé et à moindre coût !

Configuration hébergement OVH performance et sécurité, version de PHP
Sécurité et version de PHP sur mon hébergement OVH
Santé du site parfaite sous WordPress
Santé du site sur WordPress sans problème

Headers de sécurité

J’ai aussi mis à jour tous les headers de sécurité notamment afin d’éviter les failles XSS sur le site.

Headers de sécurité HTTP
https://securityheaders.com/?q=https%3A%2F%2Falexsoyes.com&followRedirects=on

Remerciements

Je n’aurais pas pu avoir un site aussi abouti visuellement sans l’aide d’Acoli Graphisme.

Une graphiste talentueuse qui a su supporter les nombreux changements de direction que je lui ai imposés ! 🙂

Outils utilisés

Voici une liste des outils utilisés pour faire le site.

Inspirations

J’ai consulté beaucoup de sites avant de refaire le blog, mais ma plus grande inspiration reste le site de Brian Dean.

Couleurs

En termes de couleurs, je les change régulièrement, car je me lasse assez vite de ce blog que je vois 3h par jour…

Ces couleurs seront sans doute amenées à changer…

Encore !

Couleurs Coolors
https://coolors.co/fff9e0-f8bbd0-fafafa-37474f-2271b1

Si jamais tu te demandes « pourquoi » ces couleurs ont été choisies, il n’y a pas vraiment de raisons.

J’essaye surtout de me démarquer des 10 000 de blogueurs tech qui existent déjà en France 🙂

Licences & crédits

J’aime beaucoup l’idée de toujours citer le travail des personnes que je mentionne ou les personnes elles-mêmes. ❤️

(Rendez à César ce qui est à César.)

C’est donc un plaisir pour moi de trouver un endroit où je puisse citer les outils qui m’ont aidé à refaire le blog.

Icônes

Polices

Je n’utilise que les polices par défaut des différents OS pour des raisons de performances.

Auparavant, j’utilisais la directive preload pour mon ancienne font Open-Sans, mais comme je n’étais pas satisfait de devoir push 4 fonts à chaque chargement de pages…

J’utilise uniquement les polices natives !

Obligations légales et RGPD

Statistiques du blog
Quand j’ai envie d’avoir un peu de stats sur le blog, je regarde les logs du serveur chez OVH

Tracking

Avant novembre 2022

Il n’y a pas de solution de tracking !

J’ai fait le choix de supprimer Google Analytics du blog depuis septembre 2021.

Pourquoi ?

  • Je ne regarde que peu les stats, je ne le faisais que depuis le SiteKit sur WP ;
  • Google Analytics c’est ultra compliqué, je n’utilisais même pas 2% des fonctionnalités ;
  • Ma communauté étant des développeurs, il y a de grandes chances pour que l’on ait tous ou presque un bloqueur de pubs, les stats sont donc faussées ;
  • C’est une vanity metric ;
  • Je ne souhaite pas que mes visiteurs soient « traqués ».

Maintenant

J’ai remis Google Analytics après avoir sorti ma première formation !

Pour le coup il me fallait avoir des

RGPD / GDPR

Outre les statistiques du serveur que j’ai d’OVH, je vais essayer de configurer Analytics pour qu’il soit RGPD friendly.

Notamment en passant par GA4.

Je ne sais pas s’ils font exprès que l’interface soit aussi compliquée… mais c’est un enfer.

RGPD mailchimp
Désactiver le tracking Analytics et Facebook sur Mailchimp

Mentions légales

Le site ne comporte qu’une seule page « légale » et elle se trouve ici : https://alexsoyes.com/mentions-legales/.

Cette page s’est inspirée :


Pour finir, je me suis éclaté à refaire le blog, WordPress est une techno que j’aime utiliser.

Tu pourras voir le code source sur GitHub, je rajoute semaine après semaine des fonctionnalités…

Coder, c’est vraiment une passion.

Et j’espère que tu prendras toujours autant de plaisir à lire les articles !