Mettre en ligne son site web statique et évaluer sa qualité : Partie 3— Optimiser les performances et la sécurité avec Cloudflare
Partie 1 — Création d’un dépôt sur Github et activation de Github Pages
Partie 2 — Configuration d’un nom de domaine sur Github Pages
Partie 3 — Optimiser les performances et la sécurité avec Cloudflare
Partie 4 — Tester les performances et évaluer la qualité avec Google Page Speed, WebPageTest et Opquast
Avant de parler de Cloudflare et vous présenter les fonctionnalités qui seront configurées, il est important de noter que votre site (ou votre page) sera mis en ligne dans le but d’être consulté par des internautes qui ne le consulteront pas tous dans les mêmes conditions.
Il est donc important que votre site soit accessible à tous (il doit pouvoir être consulté par une personne ayant une déficience visuelle par exemple) et avec la meilleure expérience possible (une personne debout dans le métro avec une connexion lente doit pouvoir consulté votre site sans difficultés sur son smartphone).
Cloudflare que nous utiliserons dans cette partie puis Google PageSpeed, WebPageTest et Opquast dans la partie suivante nous aiderons en ce sens.
Cloudflare est un service permettant d’optimiser et sécuriser votre site web, nous utiliserons la version gratuite.
Les différentes configurations que nous allons effectuer dans Cloudflare permettront dès à présent d’être en conformité avec certaines règles et recommandations des outils qui seront utilisés pour évaluer les performances et la qualité dans la partie suivante.
Création d’un compte Cloudflare
Allez sur la page suivante pour créer votre compte : https://www.cloudflare.com/a/sign-up
Ajout du site
Une fois le domaine créé, vous renseignez votre site et commencez le scan “Begin Scan”.
Vous patientez le temps du scan et vous commencez la configuration “Continue Setup”.
Dans un premier temps, Cloudflare va vous lister vos enregistrement DNS, vous cliquez sur “Continue”.
Dans un second temps, il vous propose ensuite de choisir une formule, choisissez “Free Website”.
Enfin, il vous demande de changer vos “nameservers”.
Connectez-vous sur le site où votre nom de domaine est enregistré (il s’agit de namecheap dans mon cas) puis cherchez l’option d’ajout de nameservers et ajoutez-les.
C’est terminé pour l’ajout du site, vous avez maintenant accès au dashboard et votre site est actif (patientez un moment si le statut est en Pending).
Configuration du certificat SSL
Cloudflare fournit un certificat SSL permettant de sécuriser l’envoi et l’intégrité des données entre le visiteur du site et le serveur (accès au site via HTTPS). Par défaut il est en “Flexible”, vous pouvez le passer en “Full”.
Si vous souhaitez en savoir plus sur l’HTTPS, je vous conseille cet article publié sur OpenWebGroup : HTTPS : introduction
Pour imposer l’accès en https sur l’ensemble du site, vous devez créer une règle de page “Pages Rules”. Elle devra toujours être en première.
Optimisation des performances
Mise en cache des pages
Restez sur l’interface “Pages Rules” pour créer une règle permettant de mettre vos pages en cache.
La mise en cache des pages étant configurée, pour optimiser au maxium les performances vous devez activer la minification des fichiers HTML, CSS et Javascript puis configurer la durée de mise en cache à 30 jours.
Minification des fichiers HTML, CSS et Javascript
Dans l’interface “Speed”, cochez HTML, CSS et Javascript.
Configuration de la durée de mise en cache
Dans l’interface “Caching”, passez le “Browser cache expiration” à 1 mois.
Votre site web est maintenant hébergé sur Github Pages, dispose d’un nom de domaine et il est sécurisé et performant.
Dans une dernière partie, nous verrons comment tester les performances et évaluer la qualité de votre site web avec Google Page Speed, WebPageTest et Opquast.
