Bonjour à tous !

Depuis le nouvel an, j’avais en tête d’améliorer un peu mon site internet. Si vous êtes de fidèles lecteurs, vous devriez ressentir un léger changement, même si j’ai essayé de garder quelque-chose de similaire. Dans cet article, on va voir quels étaient mes objectifs et comment j’ai pu optimiser et sécuriser le site.

Améliorations du thème

Objectifs

J’avais divers objectifs avant de me lancer dans la rénovation du thème !

• Garder le même esprit et la même trame.
• Améliorer et simplifier le code (intégration plus facile d’images et de tableaux par exemple)
• Avoir un thème sobre et simple tout en étant agréable et efficace.
• Améliorer l’optimisation du site notamment pour que les pages soient plus légères à charger. Cela apporte 2 avantages: réduire le temps de chargement des pages et économiser la bande passante, notamment pour les petits forfaits mobiles.
• Bien que ce soit un site en statique, améliorer également la sécurité générale du site.
• Garder un support adapté à toutes les tailles d’écran.

Les principaux changements

Comme on peut les retrouver sur le dépôt git du thème, les principales modifications sont alors les suivantes :

• Un gros travail d’amélioration du code de façon générale (avec tout le mérite pour le créateur initial du thème).
• Ajout d’une table des matières.
• Un header plus clair et simple pour les articles.
• Ajout de boutons sur la droite (sauf sur mobile) pour remonter en haut de l’article, accéder directement aux commentaires ou encore accéder à un article au hasard.
• Changement de la police pour une police plus aérée et agréable à lire.
• Intégration d’un nouveau serveur de commentaires Isso en tant qu’alternative à Disqus : avec un code source libre et en auto-hébergement (plus de dépendances avec des serveurs américains).
• Intégration de Matomo (ex Piwik) en tant qu’alternative à Google Analytics pour analyser l’audience des sites internet.

Les changements en images

Voici quelques captures d’écran pour vous illustrer les principaux changements graphiques !

Ancien	Nouveau

Mes futures idées dans un coin de la tête

Ce serait tout de même triste de ne plus avoir d’autres idées d’amélioration, alors en voici quelques-unes:

• Faire du site une Progressive Web App.
• Ajouter un système de newsletter pour vous permettre d’être au courant de chaque sortie de nouvel article.
• Ajouter une barre de recherche pour chercher des articles sur le site avec des mots clés.
• Et quelques surprises encore qui viendront s’ajouter dans les prochains mois (ou prochaines années selon le temps dont je dispose et ma motivation ^^)

Assez parler de mon site, passons aux choses sérieuses !

Comment optimiser son site internet ?

On retrouve de nombreux aspects à prendre en compte lorsque l’on souhaite optimiser son site internet. Tout d’abord, définissons l’expression: en général, on comprendra rendre le site plus rapide d’accès aux utilisateurs, cela équivaudra bien souvent à rendre votre site plus léger. Je ne vais pas réinventer la roue, voici un tutoriel très clair et très bien fichu qui donne de solides bases à ce niveau.

En résumé pour ceux qui n’ont pas le temps ou l’envie d’aller voir le tuto, voici les points à retenir !

• Avoir un code HTML et CSS valide car les erreurs vont faire perdre du temps à votre navigateur. Vous pouvez utiliser ces 2 validateurs: HTML et CSS.
• Il existe des outils de diagnostics très performants: Google PageSpeed Insights, GTmetrix et WebPageTest. Je rajouterai également cet outil très complet: dareboost.
• Sur la partie optimisation du code source, je ne peux que vous conseiller le tutoriel qui est très clair !

Si vous travaillez sur les différents points durs que les outils précédents vous mettront en avant, votre site devrait alors être bien plus optimisé.

Comment sécuriser son site internet

Du fait que ce soit un site statique, la sécurité n’est pas forcément une nécessitée absolue (pas de mots de passe à rentrer par exemple), le respect de la vie privée des visiteurs de sites internets est vraiment important et à ne pas prendre à la légère.

Les avantages

Les avantages d’un site personnel sécurisé sont multiples. Le premier permet de vous maintenir personnellement à jour au niveau des technologies qui se font. Mettre le HTTPS est une bonne chose mais ce n’est pas suffisant. Sécuriser son site va donc vous donner les connaissances nécessaires pour savoir si les autres sites que vous visitez sont sécurisés également. Le second avantage concerne vos utilisateurs, le respect de leur vie privée et de la confidentialité de leurs données. Ensuite, avoir un site sécurisé vous apporte un meilleur référencement sur les moteurs de recherche comme Google par exemple. Enfin, les 2 gros navigateurs Google Chrome et Firefox commencent à pointer du doigt les sites ne supportant pas le HTTPS, ce qui pourrait faire peur aux personnes n’ayant pas de connaissances dans ce domaine et les amener à ne plus venir sur votre site.

Comment s’y prendre ?

Pour le HTTPS, j’en ai parlé il y a presque 2 ans dans cet article. Je vous recommande toujours d’utiliser Let’s Encrypt du fait de sa gratuité et de sa simplicité d’utilisation.

Autrement, je peux vous conseiller divers outils qui vont vous indiquer les points à améliorer pour la sécurité de votre site:

• SSL Labs: un outil en ligne qui va vous noter en fonction de nombreux points de sécurité, si vous deviez en tester un, ce serait celui-ci !
• Webbkoll: un outil en ligne plutôt axé sur la confidentialité des données de vos visiteurs (le code source de cet outil est disponible ici).
• SecurityHeaders.io: dans la même lignée que le précédent, vous allez obtenir une note entre A et F en fonction des points de sécurité utilisés.
• CryptCheck: un outil qui va vous permettre d’évaluer le niveau de chiffrement de votre site et vous donner une note comme l’outil précédent (le code source est disponible ici).

Conclusion

On aura vu une quantité d’outils différents bien importante dans cet article ! Cependant, je ne pouvais pas détailler tous les points d’amélioration mis en avant par tous ces outils. Si vous voulez que je fasse un tutoriel plus spécifique ou bien en discuter, n’hésitez pas à utiliser la nouvelle section commentaire propulsée par Isso (son défaut majeur actuel étant de ne pas vous avertir par mail si quelqu’un répond à l’un de vos commentaires).

J’espère que cet article vous aura plus, tout comme la nouvelle version du site ! Et on se donne rendez-vous le mois prochain pour un nouvel article sur un outil que j’utilise au quotidien ! :)