Depuis ses débuts, le web s'est alourdi. On a besoin de plus de puissance pour afficher une simple page web que pour lancer Appolo. Je peste régulièrement sur les sites qui mettent trop longtemps avant d'être utilisables. J'ai décidé de me regarder le nombril et d'alléger le contenu de mon site pour qu'il soit plus agréable à utiliser.

Pour m'aider dans cette tâche, j'utilise l'outil PageSpeed Insights^{1) 2)} de Google. Un autre indicateur pour vérifier l'embonpoint de son site est l'outil Fit on a Floppy³⁾ qui valide si la page appelée peut être stockée sur une disquette.

L'étape la plus facile à mettre en œuvre est la compression des données entre le serveur et le navigateur afin de réduire la quantité de données transférées. J'utilise Apache comme serveur web, j'ai donc configuré mon fichier .htaccess pour qu'il compresse les données compressibles ⁴⁾. Pour cela, j'utilise mod_deflate pour le HTML, le CSS, le JS et le XML ⁵⁾. J'ai donc ajouté les lignes suivantes dans mon fichier :

AddType text/css .css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xml

J'ai ensuite vérifié que le contenu fourni était correctement compressé avec cet outil et que j'avais amélioré mon score sur PageSpeed Insights. C'est concluant, alors on passe à l'étape suivante.

J'ai troqué le thème bootstrap pour le thème lanyon qui utilise beaucoup moins de fichiers. J'ai du abandonner quelques effets supportés par le précédent thème mais ce n'est pas trop grave car j'y ai gagné en lisibilité et en clareté.

Nikola permet d'inclure une vidéo Youtube par l'intermédiaire d'un mot-clé. Cela inclus automatiquement le lecteur de vidéo avec son lot de dépendances⁶⁾. Comme l'usage de la vidéo sur mon site est très limité et que dans la plus part des cas, un lien suffit, j'ai remplacé le mot-clé par un lien vers l'original.

C'est un changement très facile qui m'a permis de passer d'un score inférieur à 50 à un score supérieur à 70.

Le thème utilisé ⁷⁾ fait des appels à Google pour la récupération des polices de caractères. Comme je ne suis pas fan de faire des appels aux serveurs de Google ⁸⁾, je préfère héberger les polices sur mon serveur. Pour cela, j'ai supprimé la ligne correspondante dans le fichier base_helper.tmpl :

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Serif:400,400italic,700|PT+Sans:400">

Maintenant le site utilise les polices disponibles dans le navigateur. Comme je veux toujours utiliser la police PT, j'ai téléchargé les fichiers TrueType associés dans le répertoire de polices de mon site. J'ai ensuite modifié les fichiers de style pour reproduire ce que faisait Google.

/* latin-ext */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans'), local('PTSans-Regular'), url(../fonts/PT_Sans/PT_Sans-Web-Regular.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans'), local('PTSans-Regular'), url(../fonts/PT_Sans/PT_Sans-Web-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;
    src: local('PT Serif Italic'), local('PTSerif-Italic'), url(../fonts/PT_Serif/PT_Serif-Web-Italic.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;
    src: local('PT Serif Italic'), local('PTSerif-Italic'), url(../fonts/PT_Serif/PT_Serif-Web-Italic.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    src: local('PT Serif'), local('PTSerif-Regular'), url(../fonts/PT_Serif/PT_Serif-Web-Regular.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    src: local('PT Serif'), local('PTSerif-Regular'), url(../fonts/PT_Serif/PT_Serif-Web-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    src: local('PT Serif Bold'), local('PTSerif-Bold'), url(../fonts/PT_Serif/PT_Serif-Web-Bold.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    src: local('PT Serif Bold'), local('PTSerif-Bold'), url(../fonts/PT_Serif/PT_Serif-Web-Bold.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Pour optimiser les temps de chargement, j'ai ajouté une directive dans le fichier .htaccess pour prendre en charge la compression des polices :

AddType font/truetype .ttf
AddOutputFilterByType DEFLATE font/truetype

Ces opérations ne changent pas vraiment la performance générale du site, mais il me permet de ne pas dépendre de Google.

Une autre façon d'avoir de meilleures performances est d'activer le cache. Toutes les resources n'ont pas la même durée de vie, il faut donc gérer la durée de rétention en cache en fonction du type de ressource. Dans mon cas, j'ai mis une durée de vie de 1 ans pour les ressources qui ne devraient pas changer (images, polices, documents), 1 semaines pour les resources qui ne changent que rarement (feuilles de style, script) et 6 heures pour le contenu du site. Pour cela, j'ai ajouté la configuration suivante dans mon fichier .htaccess :

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|ttf)$">
Header set Cache-Control "max-age=31449600, public"
</FilesMatch>
<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</FilesMatch>
<FilesMatch "\.(html|htm|xml)$">
Header set Cache-Control "max-age=32400, must-revalidate"
</FilesMatch>

À partir de ce moment, mon indice de performance est supérieur à 85.

Le site utilise plusieurs feuilles de style ainsi que plusieurs fichiers de script. Il est possible de les regrouper ce qui a pour effet de limiter le nombre d'appel, limiter le nombre de compression/décompression et donc de rendre le site plus réactif. Avec nikola, rien de plus simple. Il suffit d'activer la configuration suivante dans le fichier conf.py :

USE_BUNDLES = True

Il faudra, au préalable, installer le paquet webassets pour que cela fonctionne correctement :

pip install webassets

À partir de ce moment, mon indice de performance avoisine les 95.

Pour limiter la taille de certains fichiers transférés, il est possible d'en supprimer les espaces non-significatifs ⁹⁾. Pour cela, j'ai utilisé des filtres déclenchés à la fin du traitement de compilation pour traiter les fichiers CSS et les fichiers XML. Comme ces filtres sont fournis avec Nikola, il suffit de les activer dans la configuration. Dans le fichier conf.py, il faut ajouter les lignes suivantes :

FILTERS = {
    ".css": ["filters.cssminify"],
    ".xml": ["filters.xmlminify"],
}

J'utilise le javascript uniquement pour l'interprétation du LaTeX situé dans certaines pages. Les autres appels sont donc inutiles. J'ai modifié le thème lanyon pour supprimer tous ces appels :

• Suppression de la définition de la méthode late_load_js dans base_helper.tmpl.
• Suppression de l'appel conditionnel de javascript pour Internet Explorer 9 dans base_helper.tmpl.
• Suppression de l'appel de la méthode late_load_js dans base.tmpl.
• Suppression de l'appel de javascript supplémentaire dans base.tmpl.

Après être tombé par hasard sur le site Security Headers¹⁰⁾, je me suis rendu compte que ma note était vraiment basse. En fait, je n'avais jamais prêté attention aux entêtes envoyés par mon serveur et je n'avais même jamais entendu parlé de ces entêtes.

J'ai donc décidé d'y remédier et porter attention à la sécurité de mes visiteurs. Pour cela, j'ai modifié mon fichier .htaccess en ajoutant les directives suivantes :

Header set Content-Security-Policy "default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval' cdnjs.cloudflare.com; font-src 'self' cdnjs.cloudflare.com; img-src 'self' data:; style-src 'self' 'unsafe-inline'; base-uri 'self'; connect-src 'self'; form-action 'self'; media-src 'self'; frame-src embed.diagrams.net; worker-src embed.diagrams.net"
Header set Permissions-Policy "interest-cohort=()"
Header set Referrer-Policy "no-referrer"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options "SAMEORIGIN"

Content-Security-Policy permet de gérer la manière dont les ressources du site peuvent être chargées. Ces permissions sont encore un peu trop large à mon goût car je suis encore obligé d'autoriser cloudflare.com¹¹⁾. Pour plus d'informations, il y a le MDN et le guide de référence. ¹²⁾
Permissions-Policy permet de gérer les autorisations d'accès aux API du navigateur. Ici, je l'ai configuré pour bloquer l'accès à la nouvelle technologie de pistage de Google. Pour plus d'informations, il y a ce site et ce site qui en parlent mieux que je ne pourrais le faire.
Referrer-Policy permet de gérer les informations transmises lors de l'ouverture d'un lien externe au site. Ici, je l'ai configuré pour ne rien envoyer. Pour plus d'informations, il y a le MDN.
Strict-Transport-Security indique au navigateur d'utiliser uniquement HTTPS pour accéder au site. Ici, je l'ai configuré avec la valeur recommandée. Pour plus d'informations, il y a le MDN.
X-Content-Type-Options indique au navigateur de ne pas modifier les types MIME envoyés par le serveur. Pour plus d'informations, il y a le MDN.
X-Frame-Options indique au navigateur si le site peut être inclus dans un autre site. Pour plus d'informations, il y a le MDN.

Après avoir fait quelques recherches sur l'accessibilité des sites web, je me suis rendu compte que le mien pouvait être très largement amélioré. Voici la liste des choses que j'ai faite pour améliorer mes scores sur différents outils :

• Ajout de description alternative ¹³⁾sur les balises img.
• Augmentation du contraste du texte.
• Modification des liens pour éviter les redirections permanentes ¹⁴⁾, j'ai modifié l'ensemble des liens dans le fichier conf.py pour qu'ils dirigent vers la vraie URL.
• Utilisation d'images en JPG Progressif à l'aide d'un filtre déclenché en fin de traitement. Ce filtre est à configurer dans le fichier conf.py :

  FILTERS = {
      ".jpg": ["jpegoptim --strip-all --all-progressive %s"],
  }

• Suppression des identifiants dupliqués à l'aide d'un filtre déclenché en fin de traitement. Ce filtre est à configurer dans le fichier conf.py :

  FILTERS = {
      ".html": ["filters.deduplicate_ids"],
  }