Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:projets:amelioration_de_mon_site [2024/11/19 18:51] – supprimée - modification externe (Date inconnue) 127.0.0.1
+++ informatique:projets:amelioration_de_mon_site [2024/11/19 18:51] (Version actuelle) – ↷ Page déplacée de projets:informatique:amelioration_de_mon_site à informatique:projets:amelioration_de_mon_site alexis
@@ Ligne 1: / Ligne 1: @@
+~~NOTOC~~
+====== Amélioration de mon site ======
+===== Amélioration des performances =====
+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 [[https://developers.google.com/speed/pagespeed/insights/|PageSpeed Insights]](([[https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fainw.org%2F|PageSpeed Insights - AINW.ORG]])) ((Attention à autoriser le //referer// pour pouvoir l'utiliser)) de Google. Un autre indicateur pour vérifier l'embonpoint de son site est l'outil [[https://fitonafloppy.website/|Fit on a Floppy]](([[https://fitonafloppy.website/?website=ainw.org&https=true|Fit on a Floppy - AINW.ORG]])) qui valide si la page appelée peut être stockée sur une disquette.
+==== Compression des données ====
+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 ((on oublie toutes les données déjà optimisées comme les images)). Pour cela, j'utilise [[https://httpd.apache.org/docs/2.4/fr/mod/mod_deflate.html|mod_deflate]] pour le HTML, le CSS, le JS et le XML ((pour le flux RSS)). J'ai donc ajouté les lignes suivantes dans mon fichier :
+<code apache>
+AddType text/css .css
+AddOutputFilterByType DEFLATE text/html
+AddOutputFilterByType DEFLATE text/css
+AddOutputFilterByType DEFLATE application/javascript
+AddOutputFilterByType DEFLATE application/xml
+</code>
+J'ai ensuite vérifié que le contenu fourni était correctement compressé avec cet [[https://varvy.com/tools/gzip/|outil]] et que j'avais amélioré mon score sur PageSpeed Insights. C'est concluant, alors on passe à l'étape suivante.
+==== Changement de thème ====
+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é.
+==== Suppression des vidéos ====
+[[https://getnikola.com/|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((CSS, JS et trackers)).
+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.
+==== Suppression des appels à Google ====
+Le thème utilisé ((lanyon)) 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 ((profilage, etc)), 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// :
+<code>
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Serif:400,400italic,700|PT+Sans:400">
+</code>
+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.
+<code css>
+/* 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;
+}
+</code>
+Pour optimiser les temps de chargement, j'ai ajouté une directive dans le fichier ''.htaccess'' pour prendre en charge la compression des polices :
+<code apache>
+AddType font/truetype .ttf
+AddOutputFilterByType DEFLATE font/truetype
+</code>
+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.
+==== Ajout d'une politique de cache ====
+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'' :
+<code apache>
+<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>
+</code>
+À partir de ce moment, mon indice de performance est supérieur à 85.
+==== Minimiser le nombre d'appels ====
+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// :
+<code python>
+USE_BUNDLES = True
+</code>
+Il faudra, au préalable, installer le paquet //webassets// pour que cela fonctionne correctement :
+<code>
+pip install webassets
+</code>
+À partir de ce moment, mon indice de performance avoisine les 95.
+<WRAP important>
+Attention, pour que les fichiers //custom.css// et //fonts.css// soient ajoutés au fichier généré, il faut les ajouter dans le fichier de configuration //bundles//.
+</WRAP>
+<WRAP tip>
+Il faut éviter l'utililation de l'import de fichier en CSS (''@import'') car cela force le navigateur a charger les fichiers séquentiellement.
+</WRAP>
+==== Minifier les fichiers ====
+Pour limiter la taille de certains fichiers transférés, il est possible d'en supprimer les espaces non-significatifs ((C'est l'action //minify// en anglais)).
+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 :
+<code python>
+FILTERS = {
+    ".css": ["filters.cssminify"],
+    ".xml": ["filters.xmlminify"],
+}
+</code>
+<WRAP important>
+Il est important d'avoir une connexion à Internet car le filtre //filters.cssminify// utilise un service externe pour supprimer les espaces non-significatifs.
+</WRAP>
+==== Suppression du JS ====
+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//.
+===== Amélioration de la sécurité =====
+Après être tombé par hasard sur le site [[https://securityheaders.com|Security Headers]](([[https://securityheaders.com/?q=https%3A%2F%2Fainw.org&followRedirects=on|Security Headers - AINW.ORG]])), 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 :
+<code apache>
+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"
+</code>
+**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//((Nécessaire pour MathJax jusqu'au jour où j'arrive à le faire fonctionner directement sur mon site)). Pour plus d'informations, il y a le [[https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP|MDN]] et le [[https://content-security-policy.com/|guide de référence]]. ((Cet entête m'a causé quelques soucis car il a été appliqué également sur le wiki. Je n'en ai pas eu conscience jusqu'au moment où j'ai essayé d'y intégrer des vidéos. Il me manquait la règle autorisant les médias, à savoir ''media-src''. Ce fut un beau casse-tête à résoudre.))\\
+**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 [[https://plausible.io/blog/google-floc|ce site]] et [[https://paramdeo.com/blog/opting-your-website-out-of-googles-floc-network|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 [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy|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 [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security|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 [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options|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 [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options|MDN]].
+===== Amélioration de l'accessibilité =====
+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 ((Attribut //alt// de la balise //img//))sur les balises ''img''.
+  * Augmentation du contraste du texte.
+  * Modification des liens pour éviter les redirections permanentes (([[https://en.wikipedia.org/wiki/HTTP_301|HTTP 301 - Wikipedia]])), 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// : <code python>
+FILTERS = {
+    ".jpg": ["jpegoptim --strip-all --all-progressive %s"],
+}
+</code>
+  * 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// : <code python>
+FILTERS = {
+    ".html": ["filters.deduplicate_ids"],
+}
+</code>
+<WRAP info>
+Pour identifier et corriger les problèmes d'accessibilité de mon site, j'ai utilisé les outils suivants :
+  * [[https://color.a11y.com/Contrast/|Color Contrast Accessibility Validator]]
+  * [[https://ready.mobi|mobiReady]]
+  * [[https://www.webaccessibility.com|WebAccessibility.com]]
+  * [[https://validator.w3.org/checklink|W3C Link Checker]]
+  * [[https://www.webpagetest.org|WebPageTest]]
+</WRAP>