Sécuriser son site à l’aide de CloudFlare HTTPS et CDN

Cet article est le dernier de la série consacrée aux retours d’expérience sur le sujet : Obtenir un site performant avec Accelerated Mobile Page, Progressive Web App et un content delivery network.

Partie 1 : AMP
Partie 2 : PWA

Dans ce dernier chapitre nous allons voir comment utiliser les services gratuits de CloudFlare pour passer en mode HTTPS et également comment ajouter un cache (CDN), le tout en quelques clics.

Cloudfare

Cloudflare est une société proposant de nombreux services permettant d’optimiser et sécuriser des applications web via un système de reverse proxy très avancé.
La gamme de services varie selon votre abonnement. Je vais ici ne m’intéresser qu’à la partie visible de l’iceberg, c’est-à-dire les services gratuits.

Mise en place du certificat HTTPS

Pour rappel, je vais mettre en place les services de cloudflare dans le but d’obtenir un site en HTTPS afin de faire fonctionner mon service worker correctement (voir article 2).

Voici les différentes étapes pour activer le certificat SSL (TLS) gratuit :
Pré-requis : posséder son nom de domaine.

• Créez un compte sur CloudFlare
• Entrez l’adresse de votre site web
• Sélectionnez le plan Gratuit
• CloudFlare scanne maintenant les infos DNS existantes

• Dans l’interface d’administration de votre fournisseur de nom de domaine, modifiez le serveur DNS pour utiliser celui de Cloudfare. Voici une liste des instructions pour différents registraires.
• Enfin, dans les paramètres Crypto/SLL de CloudFlare pour ce domaine, activez HTTPS / SSL en mode Flexible.

Quand un utilisateur se connecte sur votre site, le trafic est sécurisé grâce à HTTPS jusqu’aux serveurs de CloudFare. En revanche il ne l’est plus entre CloudFare et votre hébergeur, GitHub Pages dans mon cas, du fait de la bascule vers le HTTP. Ceci est à prendre en compte pour du contenu plus sensible…
Vous avez terminé !
Tout le contenu sera désormais servi à vos utilisateurs à partir de CloudFlare. Attention, cela peut prendre jusqu’à 24 heures pour être activé.

Mise en place du cache CDN

Je vais profiter de CloudFare pour ajouter un niveau supplémentaire de CDN (google le fait de base pour les sites AMP).
Une case à cocher et le tour est joué, ce serait bête de ne pas en profiter.
Rendez-vous dans le menu caching et sélectionnez Caching Level : Standard

Vous pouvez aussi configurer le temps d’expiration du cache, le purger ou simplement passer en mode Développement pour désactiver le cache temporairement.

Mise en place des paramètres de performance

Rendez-vous dans le menu Speed.

Auto Minify

Vous pouvez y activer la minification des ressources JavaScript, CSS et HTML.
Après activation, pensez à bien vérifier que le site ne rencontre pas de problème suite aux minifications. Personnellement je n’ai rien remarqué en 6 mois d’utilisation.

Brotli

Vous pouvez également activer la compression Brotli qui est plus performante que la compression GZIP classique.

Enable Accelerated Mobile Links

Depuis peu, CloudFlare propose de réécrire les liens en liens mobile AMP ! Je n’ai pas testé mais cela aurait évité quelques manipulations, notez que cette option est encore en beta à l’heure où j’écris l’article.

Performances finales

Il est temps de tester un peu les résultats en matière de performance et de temps de réponse.
Je ne vais tester que la Home Page, sur divers outils en ligne.

WebPageTest

Uptrends

Pingdom

GMatrix

Analyse des résultats :

Le site obtient une note relativement correcte sur l’ensemble des tests (entre A et B).
Cependant, le temps de chargement ne semble pas si bon que ce que l’on pourrait imaginer. Alors comment l’expliquer ? Et finalement, est-ce que tout cela a vraiment servi ?

Le temps de chargement complet varie entre 0,6s et 3,5s. Autant dire que ce n’est plus une fourchette mais un râteau !

Cette différence peut s’expliquer par le fait que certaines ressources sont déjà en cache chez certains et que les traitements de la Progressive Web App sont ou ne sont pas exécutés.

Ce qui est intéressant, ce ne sont pas vraiment les chiffres du temps de chargement complet, mais à quel moment le site est affiché dans le navigateur.
Lors du premier chargement les gains sont minimes, il n’y a que le CDN cloudflare (ce qui est déjà pas mal) qui accélère le chargement. En revanche, si l’utilisateur parcourt les pages du site et revient en arrière cela va être très rapide, pour ne pas dire instantané, puisque tout sera en cache local.

Autre critère non négligeable, le device et browser utilisés lors de la navigation. En fonction du user-agent, le site ne va pas provenir de la même source, surtout si l’on vient d’une recherche google depuis un mobile (Mode AMP).

Si je teste depuis mon poste avec chrome, j’obtiens ce résultat :

Je vois la page au bout de 579 ms et il faudra le double pour tout charger.
Ensuite si je parcours un peu le site et que je reviens sur la Home, on voit que beaucoup de requêtes sont fournies par le cache du Service Worker ou le cache du disque.

Infos et stats CloudFlare

Côté Cloudflare, il est possible d’avoir des stats sur le trafic, la sécurité, le réseau (DNS)

Voici un simple récapitulatif

Conclusion

Mon avis est qu’il est plus important de se fier au ressenti quand l’accueil se charge et que l’on navigue sur le site plutôt qu’aux chiffres. Faites tester votre site web par plusieurs personnes et demandez-leur leur avis.
Il y a énormément de paramètres qui rentrent en jeu. Chaque navigation est dífférente et les chiffres sont tellement petits que la moindre charge CPU/RAM sur le système va modifier les résultats.
Mais globalement il est tout à fait possible de faire un site ou une application Web performante et sécurisée à moindre coût.

© SOAT
Toute reproduction interdite sans autorisation de l’auteur