Optimisation de site web - Bourges Jazz Festival

J’ai réalisé le mini-site du BourgesJazzFestival (http://www.bourgesjazzfestival.org/) et j’explique ici les choix techniques :

Choix du format

Le site est composé d’une seule et même page (one page site) car les informations à transmettre sont excessivement concises de prime abord.

Choix de la techno

Le site est développé en pure HTML CCS et javascript, car il n’y a pas d’interaction avec une base de données ou autre système externe.
Cela permet de soulager l’empreinte carbone de ce site par une diminution des couches utiles (pas de serveur d’application ou de serveur de base de données).
Cela limite aussi grandement les risques de piratage à un problème hébergeur.
J’ai choisi de me baser sur un gabarit HTML5Up pour sa simplicité et ses possibilités.
J’ai donc inclus les éléments dans la page, modifié les images, adapté le CSS.

Choix de l’optimisation

Les différents éléments ont été choisis afin d’assurer une page se chargeant rapidement, avec tout de même 321ko. Les contraintes graphiques et visuelles incluses dans le gabarit HTML utilisé imposent du javascript, qui a tendance à augmenter la taille des pages.
Chaque image a été passé au site tinyPNG, diminuant le poids global de celle-ci d’environ 65%.
Les feuilles de styles ont été expurgées d’un maximum de déclarations inutiles (car les feuilles de style initiales prévoient des pages complémentaires et donc des styles différents).
Je n’ai volontairement pas compressé le HTML ni le CSS pour des soucis de maintenance facilitée.
Un plan d’accès devait être inclus dans la page, ce qui en insérant un iframe ajoutait environ 500ko de données). J’ai donc fait le choix d’inclure une image du plan, cliquable pour atteindre la carte interactive (uMap).

Choix de la compatibilité

Le site a été développé avec firefox, puis testé sur Internet Explorer et Edge, puis sur smartphone.
Le côté responsive des pages a été testé en redimensionnant les différentes fenêtres.
La validation des codes HTML et CSS a été vérifiée grâce aux validateurs du W3C (Nu et jigsaw).
L’aspect accessibilité a été testée sommairement par le site aChecker.

Choix du référencement

Bien que peu usité par les grands moteurs de recherche, l’inclusion d’une balise meta keywords a été faite.
Une balise méta description a été insérée.
Le titre de la page a été pensé.
L’utilisation sémantique des balises (H1, H2 notamment) a été respectée.